Refactoring.

accountant/frontend/static/js/scheduler.js

@@ -26,23 +26,21 @@ accountantApp
 
 .controller(
     "SchedulerController", [
-        "$scope", "$rootScope", "$routeParams", "ScheduledOperations",
+        "$scope", "$rootScope", "$routeParams", "notificationService", "ScheduledOperations",
-        function($scope, $rootScope, $routeParams, ScheduledOperations) {
+        function($scope, $rootScope, $routeParams, notificationService, ScheduledOperations) {
     // Operations store and selection
     $scope.operations = [];
-    $scope.selectedOperation = null;
-
-    // Placeholder for saved value to cancel entry edition
-    $scope.savedOperation = null;
 
     $scope.categories = [];
 
-    $scope.resetNewOperation = function() {
+    $scope.addOperation = function() {
-        $scope.newOperation = new ScheduledOperations({});
+        if(! $scope.inserted) {
+          $scope.inserted = new ScheduledOperations({});
+          $scope.inserted.account_id = $routeParams.accountId;
+          $scope.operations.splice(0, 0, $scope.inserted);
+        }
     };
 
-    $scope.resetNewOperation();
-
     $scope.loadOperations = function(accountId) {
       // Clean up selected entry.
       $scope.selectedOperation = null;
@@ -50,95 +48,44 @@ accountantApp
 
       $scope.operations = ScheduledOperations.query({
           account: $routeParams.accountId
-      }, function(data) {
-        $scope.$emit("operationsLoadedEvent", {operations: data});
       });
     };
 
-    // Returns true if the entry is in editing state.
-    $scope.isEditing = function(operation) {
-      return operation.state === 'edit';
-    };
-
-    $scope.isDisplaying = function(operation) {
-      return !operation.state;
-    };
-
-    $scope.createOperation = function(operation) {
-        operation.account_id = $routeParams.accountId;
-
-        operation.$save(function(data) {
-            $scope.resetNewOperation();
-
-            $scope.$emit("operationCreatedEvent", data);
-        });
-    };
-
-    // Notify on success.
-    $scope.$on("operationCreatedEvent", function(e, operation) {
-        new PNotify({
-            type: "success",
-            title: "Save",
-            text: "Operation #" + operation.id + " created."
-        });
-    });
-
     // Save operation.
-    $scope.saveOperation = function(operation) {
+    $scope.saveOperation = function($data, $index) {
-      operation.$save(function(data) {
+      var operation;
-        $scope.$emit("operationSavedEvent", operation);
-      });
-    };
 
-    // Notify on success.
+      if($data.$save) {
-    $scope.$on("operationSavedEvent", function(e, operation) {
+        operation = $data;
-        new PNotify({
+      } else {
-            type: "success",
+        operation = $scope.operations[$index];
-            title: "Save",
+        operation = angular.merge(operation, $data);
-            text: "Operation #" + operation.id + " saved."
+      }
-        });
-    });
 
-    $scope.editOperation = function(operation) {
+      var promise = operation.$save()
-        // Enter edit state.
+
-        operation.state='edit';
+      if(operation == $scope.inserted) {
+        promise = promise.then(function(data) {
+          $scope.inserted = false;
+          return data;
+        });
+      }
+
+      return promise.then(function(data) {
+        notificationService.success("Operation #" + data.id + " saved.");
+        return data;
+      });
     };
 
     // Reload operation from server to cancel edition.
-    $scope.cancelEditOperation = function(operation) {
+    $scope.cancelEditOperation = function(operation, rowform) {
-        operation.$get();
+      if(operation == $scope.inserted) {
-    };
+        $scope.entries.splice(0, 1);
-
+      } else {
-    // Remove an operation.
+        rowform.$cancel();
-    $scope.removeOperation = function(operation, modalScope) {
-      operation.$delete(function(data) {
-          new PNotify({
-              type: "success",
-              title: "Delete",
-              text: "Operation #" + operation.id + " deleted."
-          });
-
-          // Send the "entry removed" event.
-          $scope.$emit("operationRemovedEvent", operation);
-
-          $scope.closeModal(modalScope);
-        });
-    };
-
-    // Close modal.
-    $scope.closeModal = function(modalScope) {
-      // Close the modal dialog
-      if(modalScope && modalScope.dismiss) {
-        modalScope.dismiss();
       }
     };
 
-    // Load operations on account selection.
-    // FIXME Alexis Lahouze 2015-07-15 Deprecated.
-    $rootScope.$on("accountSelectedEvent", function(event, args){
-        $scope.loadOperations(args.account.id);
-    });
-
     // Load operations on controller initialization.
     $scope.loadOperations($routeParams.accountId);
 }]);

accountant/frontend/static/templates/scheduler.html

@@ -16,139 +16,129 @@
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
 <!-- Row with entry table -->
+<div>
+  <div class="row">
+    <div class="col-md-3 col-md-offset-1">
+      <button class="btn btn-success" ng-click="addOperation()">Ajouter</button>
+    </div>
+  </div>
+
   <div class="row">
     <table class="table table-striped table-condensed table-hover">
       <!-- Head of the table containing column headers and size -->
       <thead>
         <tr>
-        <th style="width: 120px">Date de d&eacute;but</th>
+          <th class="col-md-1">Date de d&eacute;but</th>
-        <th style="width: 120px">Date de fin</th>
+          <th class="col-md-1">Date de fin</th>
-        <th style="width: 20px">Jour</th>
+          <th class="col-md-1">Jour</th>
-        <th style="width: 20px">Fr&eacute;q.</th>
+          <th class="col-md-1">Fr&eacute;q.</th>
           <th>Libell&eacute; de l'op&eacute;ration</th>
-        <th style="width: 50px">Montant</th>
+          <th class="col-md-1">Montant</th>
-        <th style="width: 100px">Cat&eacute;gorie</th>
+          <th class="col-md-2">Cat&eacute;gorie</th>
-        <th style="width: 60px">Actions</th>
+          <th class="col-md-1">Actions</th>
         </tr>
       </thead>
 
       <!-- Body of the table containing the entries -->
       <tbody>
-      <tr class="form-inline">
+        <tr id="{{ operation.id }}" class="form-inline"
-        <td>
+            ng-repeat="operation in operations">
-          <input type="text" class="form-control input-sm" ng-model="newOperation.start_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
+          <td class="col-md-1">
+            <span editable-text="operation.start_date"
+              e-style="width: 100%"
+              e-bs-datepicker e-data-date-format="yyyy-MM-dd"
+              e-name="start_date" e-form="rowform" e-required>
+              {{ operation.start_date | date: "yyyy-MM-dd" }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.stop_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
+            <span editable-text="operation.stop_date"
+              e-style="width: 100%"
+              e-bs-datepicker e-data-date-format="yyyy-MM-dd"
+              e-name="stop_date" e-form="rowform" e-required>
+              {{ operation.stop_date | date: "yyyy-MM-dd" }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.day"/>
+            <span editable-number="operation.day"
+              e-style="width: 100%"
+              e-name="day" e-form="rowform" e-required>
+              {{ operation.day }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.frequency"/>
+            <span editable-number="operation.frequency"
+              e-style="width: 100%"
+              e-name="frequency" e-form="rowform" e-required>
+              {{ operation.frequency }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.label"/>
+            <span editable-text="operation.label"
+              e-style="width: 100%"
+              e-placeholder="Libellé de l'opération"
+              e-name="label" e-form="rowform" e-required>
+              {{ operation.label }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.value"/>
+            <span editable-number="operation.value"
+              e-style="width: 100%"
+              e-name="value" e-form="rowform" e-required>
+              {{ operation.value }}
+            </span>
           </td>
 
           <td>
-          <input type="text" class="form-control input-sm" ng-model="newOperation.category" bs-typeahead="categories"/>
+            <span editable-text="operation.category"
+              e-style="width: 100%"
+              e-name="category" e-form="rowform">
+              {{ operation.category }}
+            </span>
           </td>
 
           <td>
+            <form editable-form name="rowform"
+              onbeforesave="saveOperation($data, $index)"
+              shown="operation == inserted">
               <div class="btn-group">
-            <button class="btn btn-xs btn-success" ng-click="createOperation(newOperation)" title="Save">
+                <!-- Save current operation -->
-                <span class="fa fa-plus"></span>
+                <button type="submit" class="btn btn-xs btn-success"
-            </button>
+                  ng-if="rowform.$visible" title="Save">
-
-            <button class="btn btn-xs btn-default" ng-click="resetNewOperation()" title="Cancel">
-                <span class="fa fa-times"></span>
-            </button>
-          </div>
-        </td>
-      </tr>
-
-      <tr id="operation_{{operation.id}}" class="form-inline"
-          ng-repeat-start="operation in operations"
-          ng-if="isDisplaying(operation)">
-        <td>{{operation.start_date}}</td>
-
-        <td>{{operation.stop_date}}</td>
-
-        <td>{{operation.day}}</td>
-
-        <td>{{operation.frequency}}</td>
-
-        <td>{{operation.label}}</td>
-
-        <td>{{operation.value}}</td>
-
-        <td>{{operation.category}}</td>
-
-        <td>
-          <div class="btn-group">
-            <button class="btn btn-xs btn-default" ng-click="editOperation(operation)" title="edit">
-                <span class="fa fa-pencil-square-o"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default" bs-modal="static/templates/operation_remove.html" title="remove">
-                <span class="fa fa-trash"></span>
-            </button>
-          </div>
-        </td>
-      </tr>
-
-      <tr id="operation_{{operation.id}}" class="form-inline"
-          ng-repeat-end
-          ng-if="isEditing(operation)">
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.start_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.stop_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.day"/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.frequency"/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.label"/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.value"/>
-        </td>
-
-        <td>
-          <input type="text" class="form-control input-sm" ng-model="operation.category" bs-typeahead="categories"/>
-        </td>
-
-        <td>
-          <div class="btn-group">
-            <button class="btn btn-xs btn-success" ng-click="saveOperation(operation)" title="Save">
                   <span class="fa fa-floppy-o"></span>
                 </button>
 
-            <button class="btn btn-xs btn-default" ng-click="cancelEditOperation(operation)" title="Cancel">
+                <!-- Edit operation. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  ng-if="!rowform.$visible"
+                  ng-click="rowform.$show()" title="edit">
+                  <span class="fa fa-pencil-square-o"></span>
+                </button>
+
+                <!-- Cancel edit. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  ng-if="rowform.$visible"
+                  ng-click="cancelEditOperation(operations, rowform)"
+                  title="Cancel">
                   <span class="fa fa-times"></span>
                 </button>
+
+                <!-- Remove operation. -->
+                <button type="button" class="btn btn-xs btn-default"
+                  bs-modal="static/templates/operation_remove.html"
+                  title="remove">
+                  <span class="fa fa-trash"></span>
+                </button>
               </div>
+            </form>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
+</div>