Rewrote entry management.

accountant/frontend/static/js/entries.js

@@ -26,8 +26,8 @@ accountantApp
 
 .controller(
     "EntryController", [
-        "$scope", "$http", "$rootScope", "$filter", "$routeParams", "Entries",
+        "$scope", "$http", "$rootScope", "$filter", "$routeParams", "notificationService", "Entries",
-        function($scope, $http, $rootScope, $filter, $routeParams, Entries) {
+        function($scope, $http, $rootScope, $filter, $routeParams, notificationService, Entries) {
     // Range for entries.
     $scope.begin = moment.utc().startOf('month');
     $scope.end = moment.utc().endOf('month');
@@ -39,15 +39,15 @@ accountantApp
 
     $scope.account = null;
 
-
     // Function to reset the new entry.
-    $scope.resetNewEntry = function() {
+    $scope.addEntry = function() {
-        // The new entry.
+      if(!$scope.inserted) {
-        $scope.newEntry = new Entries({});
+        $scope.inserted = new Entries();
+        $scope.inserted.account_id = $routeParams.accountId;
+        $scope.entries.splice(0, 0, $scope.inserted);
+      }
     };
 
-    $scope.resetNewEntry();
-
     $scope.setExtremes = function(e) {
         begin = moment.utc(e.min);
         end = moment.utc(e.max);
@@ -279,6 +279,9 @@ accountantApp
         $scope.getAccountStatus($routeParams.accountId);
     });
 
+    /*
+     * Get account status.
+     */
     $scope.getAccountStatus = function(accountId) {
         $scope.categoriesChartConfig.loading = true;
 
@@ -335,94 +338,72 @@ accountantApp
         });
     };
 
-    // Starts editing an entry
-    $scope.editEntry = function(entry) {
-        // Enter edit state.
-        entry.confirmed=true;
-        entry.editing=true;
-    };
-
     // Cancel current editing entry or clears field if a new one.
-    $scope.cancelEditEntry = function(entry) {
+    $scope.cancelEditEntry = function(entry, rowform) {
-        sold = entry.sold;
+      if(entry == $scope.inserted) {
-        entry.$get(function(entry) {
+        $scope.entries.splice(0, 1);
-            entry.sold = sold;
+      } else {
-        });
+        rowform.$cancel();
+      }
     };
 
-    // Points an entry.
+    /*
-    $scope.togglePointedEntry = function(entry) {
+     * Toggle pointed indicator for an entry.
-        entry.confirmed = true;
+     */
+    $scope.togglePointedEntry = function(entry, rowform) {
         entry.pointed = !entry.pointed;
 
+        // Save entry if not editing it.
+        if(!rowform.$visible) {
           $scope.saveEntry(entry);
+        }
     };
 
-    // Confirm an entry.
+    /*
-    $scope.confirmEntry = function(entry) {
+     * Toggle cancel indicator for an entry.
-        entry.confirmed = true;
+     */
-
-        $scope.saveEntry(entry);
-    };
-
-    // Confirm an entry.
     $scope.toggleCanceledEntry = function(entry) {
         entry.canceled = !entry.canceled;
 
         $scope.saveEntry(entry);
     };
 
-    // Create an new entry.
+    /*
-    $scope.createEntry = function(entry) {
+     * Save an entry and emit entrySavedEvent, or entryCreatedEvent.
-      entry.account_id = $scope.account.id;
+     */
+    $scope.saveEntry = function($data, $index) {
+      // Check if $data is already a resource.
+      var entry;
 
-      // Ajax call to create an entry
+      if($data.$save) {
-      $scope.newEntry.$save(function(data) {
+        entry = $data;
-        $scope.resetNewEntry();
+      } else {
-
+        entry = $scope.entries[$index];
-        // Send the "entry saved" event.
+        entry = angular.merge(entry, $data);
-        $scope.$emit("entryCreatedEvent", entry);
-      });
-    };
-
-    $rootScope.$on("entryCreatedEvent", function(e, entry) {
-        new PNotify({
-            type: "success",
-            title: "Save",
-            text: "Entry #" + entry.id + " created."
-        });
-
-    });
-
-    // Saves an existing entry.
-    $scope.saveEntry = function(entry) {
-
-      if(!entry.account_id) {
-          entry.account_id = $scope.account.id;
       }
 
-      sold = entry.sold;
+      entry.confirmed = true;
 
-      // Ajax call to save an entry
+      var promise = entry.$save();
-      entry.$save(function(data) {
-        data.sold = sold;
 
-        // Send the "entry saved" event.
+      if(entry == $scope.inserted) {
-        $scope.$emit("entrySavedEvent", entry);
+        promise = promise.then(function(data) {
+          $scope.inserted = false;
+
+          notificationService.success("Entry #" + data.id + " created.");
         });
-    };
+      } else {
+        promise = promise.then(function(data) {
+          notificationService.success("Entry #" + data.id + " saved.");
+        });
+      }
 
-    $rootScope.$on("entrySavedEvent", function(e, entry) {
+      promise = promise.then(function(data) {
         $scope.getAccountStatus($routeParams.accountId);
       });
 
-    $rootScope.$on("entrySavedEvent", function(e, entry) {
+      return promise;
-        new PNotify({
+    };
-            type: "success",
-            title: "Save",
-            text: "Entry #" + entry.id + " saved."
-        });
-    });
 
     $scope.removeEntry = function(entry) {
         $scope.removingEntry = entry;

accountant/frontend/static/templates/entries.html

@@ -16,6 +16,7 @@
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
 <!-- Chart row -->
+<div>
   <div class="row">
     <!-- Sold evolution chart placeholder -->
     <highchart id="sold-chart" config="soldChartConfig" class="col-md-8"></highchart>
@@ -24,6 +25,12 @@
     <highchart id="categories-chart" config="categoriesChartConfig" class="col-md-4"></highchart>
   </div>
 
+  <div class="row">
+    <div class="col-md-3 col-md-offset-1">
+      <button class="btn btn-success" ng-click="addEntry()">Ajouter</button>
+    </div>
+  </div>
+
   <!-- Row with entry table -->
   <div class="row">
     <table class="table table-condensed table-hover">
@@ -41,137 +48,83 @@
 
       <!-- Body of the table containing the entries -->
       <tbody>
-      <!-- The new entry row. -->
-      <tr class="form-inline">
-        <td class="col-md-1">
-          <input type="text" class="form-control input-sm" ng-model="newEntry.operation_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
-        </td>
-        
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="newEntry.label"/>
-        </td>
-        
-        <td class="col-md-1">
-          <input type="text" class="form-control input-sm" ng-model="newEntry.value"/>
-        </td>
-        
-        <td class="col-md-1">
-          <!-- The new entry has no sold. -->
-        </td>
-
-        <td class="col-md-3">
-            <input type="text" class="form-control input-sm" ng-model="newEntry.category"/>
-        </td>
-
-        <td class="col-md-2">
-          <div class="btn-group">
-            <button type="button" class="btn btn-xs btn-success"
-              ng-click="createEntry(newEntry)" title="Save">
-              <span class="fa fa-plus"></span>
-            </button>
-
-            <button type="button" class="btn btn-xs btn-default"
-              ng-click="newEntry.pointed=!newEntry.pointed"
-              ng-class="{active: newEntry.pointed}" title="point">
-              <span ng-class="{'fa fa-check-square-o': newEntry.pointed, 'fa fa-square-o': !newEntry.pointed}"></span>
-            </button>
-
-            <button type="button" class="btn btn-xs btn-default"
-              ng-click="resetNewEntry()" title="Cancel">
-              <span class="fa fa-times"></span>
-            </button>
-          </div>
-        </td>
-      </tr>
-
         <!-- Row for an editing entry. -->
-      <tr id="entry_{{entry.id}}" class="form-inline"
+        <tr id="{{entry.id}}" class="form-inline"
           ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
-        ng-repeat-start="entry in entries" ng-if="entry.editing">
+          ng-repeat="entry in entries">
-        <td class="col-md-1">
+          <td>
-          <input type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
+            <span editable-text="entry.operation_date" e-data-date-format="yyyy-MM-dd" e-bs-datepicker e-class="input-sm" e-form="rowform" e-required>
+              <small>{{ entry.operation_date | date:"yyyy-MM-dd" }}</small>
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="entry.label"/>
+            <span editable-text="entry.label" e-class="input-sm" e-placeholder="Libélé de l'opération" e-name="label" e-form="rowform" e-required>
+              <small>{{ entry.label }}</small>
+            </span>
           </td>
 
-        <td class="col-md-1 col-xs-1">
+          <td>
-          <input type="text" class="form-control input-sm" ng-model="entry.value"/>
+            <span editable-number="entry.value" e-class="input-sm" e-name="value" e-form="rowform" e-required>
+              <small>{{ entry.value }}</small>
+            </span>
           </td>
 
-        <td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
+          <td ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
             <small>{{ entry.sold }}</small>
           </td>
 
-        <td class="col-md-3">
+          <td>
-            <input type="text" class="form-control input-sm" ng-model="entry.category"/>
+            <span editable-text="entry.category" e-class="input-sm" e-placeholder="Catégorie" e-form="rowform" e-required>
+              <small>{{ entry.category }}</small>
+            </span>
           </td>
 
-        <td class="col-md-2">
+          <td>
+            <form editable-form name="rowform" onbeforesave="saveEntry($data, $index)" shown="entry == inserted">
+              <!-- new row buttons -->
               <div class="btn-group">
-            <button type="button" class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save">
+                <!-- Save current entry, for editing and non-confirmed non-canceled entries  -->
+                <button type="submit" class="btn btn-xs btn-success"
+                  ng-if="!entry.canceled && (!entry.confirmed || rowform.$visible)"
+                  title="Save">
                   <span class="fa fa-floppy-o"></span>
                 </button>
 
-            <button type="button" class="btn btn-xs btn-default" ng-click="cancelEditEntry(entry)" title="Cancel">
+                <!-- Edit entry, for non-canceled and non-editing entries-->
-              <span class="fa fa-times"></span>
-            </button>
-
                 <button type="button" class="btn btn-xs btn-default"
-              ng-click="entry.pointed = !entry.pointed"
+                  ng-if="!entry.canceled && !rowform.$visible"
-              ng-class="{active: entry.pointed}" title="point">
+                  ng-click="rowform.$show()" title="edit">
-              <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
-            </button>
-          </div>
-        </td>
-      </tr>
-
-      <!-- Row for a displayed entry. -->
-      <tr id="entry_{{entry.id}}"
-        ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
-        ng-repeat-end ng-if="!entry.editing">
-        <td class="col-md-1">
-          <small><span>{{entry.operation_date | date:"yyyy-MM-dd"}}</span></small>
-        </td>
-        
-        <td>
-          <small><span>{{entry.label}}</span></small>
-        </td>
-        
-        <td class="col-md-1">
-          <small><span>{{entry.value}}</span></small>
-        </td>
-        
-        <td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
-          <small>{{entry.sold}}</small>
-        </td>
-
-        <td class="col-md-3">
-          <small><span>{{entry.category}}</span></small>
-        </td>
-
-        <td class="col-md-2">
-          <!-- Button group for a saved entry. -->
-          <div class="btn-group">
-            <button class="btn btn-xs btn-success" ng-if="!entry.confirmed && !entry.canceled" ng-click="confirmEntry(entry)" title="Save">
-              <span class="fa fa-plus"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="editEntry(entry)" title="edit">
                   <span class="fa fa-pencil-square-o"></span>
                 </button>
 
-            <button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="togglePointedEntry(entry)" ng-class="{active: entry.pointed}" title="point">
+                <!-- Cancel edition, for editing entries. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  ng-if="rowform.$visible"
+                  ng-click="cancelEditEntry(entry, rowform)">
+                  <span class="fa fa-times"></span>
+                </button>
+
+                <!-- Toggle pointed entry, for non-canceled entries. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  ng-if="!entry.canceled"
+                  ng-click="togglePointedEntry(entry, rowform)"
+                  ng-class="{active: entry.pointed}" title="point">
                   <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
                 </button>
 
-            <button class="btn btn-xs btn-default" ng-click="toggleCanceledEntry(entry)" ng-class="{active: entry.canceled}" title="cancel">
+                <!-- Toggle canceled entry, for non-editing entries. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  ng-click="toggleCanceledEntry(entry)"
+                  ng-if="!rowform.$visible"
+                  ng-class="{active: entry.canceled}" title="cancel">
                   <span class="fa fa-remove"></span>
                 </button>
               </div>
+            </form>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
+</div>