Rewrote account management.

accountant/frontend/static/js/accounts.js

@@ -29,8 +29,20 @@ accountantApp
 
 .controller(
     "AccountController", [
-        "$scope", "$rootScope", "$routeParams", "Accounts",
+        "$scope", "$rootScope", "$routeParams", "Accounts", "notificationService",
-        function($scope, $rootScope, $routeParams, Accounts) {
+        function($scope, $rootScope, $routeParams, Accounts, notificationService) {
+
+    $scope.rowClass = function(account) {
+      if(!account || !account.authorized_overdraft || !account.current) {
+        return;
+      }
+
+      if(account.current <account.authorized_overdraft) {
+        return "danger";
+      } else if(account.current < 0) {
+        return "warning";
+      }
+    };
 
     $scope.valueClass = function(account, value) {
         if(!account || !value) {
@@ -38,33 +50,34 @@ accountantApp
         }
 
         if(value < account.authorized_overdraft) {
-            return "text-error";
+            return "text-danger";
         } else if(value < 0) {
             return "text-warning";
         }
     };
 
-    /*
+    $scope.addAccount = function() {
-     * Create a new account and emit accountCreatedEvent.
+      if(!$scope.inserted) {
-     */
+        $scope.inserted = new Accounts();
-    $scope.createAccount = function(account) {
+        $scope.inserted.authorized_overdraft = 0;
-      account.$save(function(account) {
+        $scope.accounts.splice(0,0, $scope.inserted);
-        // Reset new account.
+      }
-        $scope.cancelEditAccount(account);
+    };
 
-        $scope.$emit("accountCreatedEvent", account); 
+    $scope.cancelEdit = function(rowform, account) {
-      });
+      if(account == $scope.inserted) {
+        $scope.inserted=false;
+        $scope.accounts.splice(0,1);
+      } else {
+        rowform.$cancel();
+      }
     };
 
     /*
      * Notify on account created event.
      */
     $rootScope.$on("accountCreatedEvent", function(e, account) {
-      new PNnotify({
+      notificationService.success("Account #" + account.id + " created.");
-        type: "success",
-        title: "Save",
-        text: "Account #" + account.id + " created."
-      });
     });
 
     /*
@@ -74,33 +87,27 @@ accountantApp
       $scope.loadAccounts();
     });
 
-    /*
-     * Start account edition.
-     */
-    $scope.editAccount = function(account) {
-      account.editing = true;
-    };
-
-    /*
-     * Cancel account edition.
-     */
-    $scope.cancelEditAccount = function(account) {
-      if(account.id) {
-          // Reload account if it is a saved one.
-          account.$get();
-      } else {
-          // Reset the new account.
-          $scope.newAccount = new Accounts();
-      }
-    };
-
     /*
      * Save account and emit accountSavedEvent.
      */
-    $scope.saveAccount = function(account, modalScope) {
+    $scope.saveAccount = function($data, $index) {
-      account.$save(function(data) {
+      var account = $scope.accounts[$index];
-        $scope.$emit("accountSavedEvent", account);
+
+      account = angular.merge(account, $data);
+
+      var promise = account.$save();
+
+      if(account == $scope.inserted) {
+        return promise.then(function(data) {
+          $scope.inserted = false;
+          $scope.$emit("accountCreatedEvent", data);
         });
+
+      } else {
+        return promise.then(function(data) {
+          $scope.$emit("accountSavedEvent", data);
+        });
+      }
     };
 
     /*
@@ -115,7 +122,7 @@ accountantApp
     });
 
     /*
-     * Delete an account and emut accountDeletedEvent.
+     * Delete an account and emit accountDeletedEvent.
      */
     $scope.deleteAccount = function(account, modalScope) {
       account.$delete(function(data) {

accountant/frontend/static/js/app.js

@@ -17,11 +17,13 @@
 var accountantApp = angular.module("accountantApp", [
     'ngResource', 'ngRoute',
     "mgcrea.ngStrap",
-    "highcharts-ng"
+    "highcharts-ng",
+    "jlareau.pnotify",
+    "xeditable"
 ])
 
 .config(function($httpProvider, $routeProvider, $locationProvider) {
-    $httpProvider.interceptors.push(function($q) {
+    $httpProvider.interceptors.push(function($q, notificationService) {
         return {
             "response": function(response) {
                 if(response.data.ok === false) {
@@ -33,13 +35,7 @@ var accountantApp = angular.module("accountantApp", [
 
             "responseError": function(response) {
                 // TODO Intercept Authentication Required error
-                new PNotify({
+                notificationService.error(response.data.text);
-                    type: "error",
-                    title: response.data.title,
-                    text: response.data.text,
-                    width: 300
-                });
-
                 return $q.reject(response);
             }
         };
@@ -60,4 +56,8 @@ var accountantApp = angular.module("accountantApp", [
 
     $locationProvider.html5Mode(true);
 })
+
+.run(function(editableOptions) {
+    editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
+})
 ;

accountant/frontend/static/templates/accounts.html

@@ -16,7 +16,14 @@
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
 <!-- Row with entry table -->
-<div class="row">
+<div>
+  <div class="row">
+    <div class="col-md-3 col-md-offset-1">
+      <button class="btn btn-success" ng-click="addAccount()">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>
@@ -31,87 +38,63 @@
 
       <!-- Body of the table containing the entries -->
       <tbody>
-      <tr class=form-inline">
+        <tr id="{{ account.id }}" class="form-inline" ng-class="rowClass(account)" ng-repeat="account in accounts">
           <td>
-          <input type="text" class="form-control" ng-model="newAccount.name" />
+            <span editable-text="account.name" e-placeholder="Nom du compte" e-name="name" e-form="rowform" e-required>
-        </td>
+              <a href="account/{{ account.id }}/entries">{{ account.name  }}</a>
-
+            </span>
-        <td></td>
-
-        <td></td>
-
-        <td>
-          <input type="text" class="form-control"
-            ng-model="newAccount.authorized_overdraft" />
           </td>
 
           <td>
+            <span ng-class="valueClass(account, account.current)">
+              {{ account.current }}
+            </span>
+          </td>
+
+          <td>
+            <span ng-class="valueClass(account, account.pointed)">
+              {{ account.pointed }}
+            </span>
+          </td>
+
+          <td>
+            <span editable-number="account.authorized_overdraft" e-max="0" e-name="authorized_overdraft" e-form="rowform">
+              {{ account.authorized_overdraft }}
+            </span>
+          </td>
+
+          <td>
+            <form editable-form name="rowform" onbeforesave="saveAccount($data, $index)" shown="inserted == account">
               <div class="btn-group">
-            <button class="btn btn-xs btn-success"
+                <button type="submit" class="btn btn-xs btn-success"
-              ng-click="createAccount(newAccount)">
+                  ng-if="rowform.$visible">
-              <span class="fa fa-plus"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default"
-              ng-click="resetAccount(newAccount)">
-              <span class="fa fa-times"></span>
-            </button>
-          </div>
-        </td>
-      </tr>
-
-      <tr id="account_{{account.id}}" class="form-inline" ng-if="!account.editing" ng-repeat-start="account in accounts">
-        <td><a href="account/{{ account.id }}/entries">{{ account.name }}</a></td>
-        <td><span ng-class="valueClass(account, account.current)">{{ account.current }}</span></td>
-        <td><span ng-class="valueClass(account, account.pointed)">{{ account.pointed }}</span></td>
-        <td>{{ account.authorized_overdraft }}</td>
-        <td>
-          <div class="btn-group">
-            <button class="btn btn-xs btn-success"
-              ng-click="editAccount(account)">
-              <span class="fa fa-pencil-square-o"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default"
-              ng-click="deleteAccount(account)">
-              <span class="fa fa-trash"></span>
-            </button>
-
-            <a class="btn btn-xs btn-default"
-              href="account/{{ account.id }}/scheduler">
-              <span class="fa fa-clock-o"></span>
-            </a>
-          </div>
-        </td>
-      </tr>
-
-      <tr id="account_{{account.id}}" class="form-inline" ng-if="account.editing" ng-repeat-end>
-        <td>
-          <input type="text" class="form-control" ng-model="account.name" />
-        </td>
-
-        <td><span ng-class="valueClass(account, account.current)">{{ account.current }}</span></td>
-        <td><span ng-class="valueClass(account, account.pointed)">{{ account.pointed }}</span></td>
-
-        <td>
-          <input type="text" class="form-control"
-            ng-model="account.authorized_overdraft" />
-        </td>
-
-        <td>
-          <div class="btn-group">
-            <button class="btn btn-xs btn-success"
-              ng-click="saveAccount(account)">
                   <span class="fa fa-floppy-o"></span>
                 </button>
 
                 <button class="btn btn-xs btn-default"
-              ng-click="cancelEditAccount(account)">
+                  ng-if="rowform.$visible && inserted == account"
+                  ng-click="accounts.splice(0,1)">
                   <span class="fa fa-times"></span>
                 </button>
+
+                <button class="btn btn-xs btn-default"
+                  ng-if="rowform.$visible && inserted != account" ng-click="rowform.$cancel()">
+                  <span class="fa fa-times"></span>
+                </button>
+
+                <button type="button" ng-show="!rowform.$visible"
+                  class="btn btn-xs btn-success" ng-click="rowform.$show()">
+                  <span class="fa fa-pencil-square-o"></span>
+                </button>
+
+                <a ng-if="!isNew(account)" class="btn btn-xs btn-default" href="account/{{ account.id }}/scheduler">
+                    <span class="fa fa-clock-o"></span>
+                </a>
               </div>
+            </form>
           </td>
         </tr>
       </tbody>
     </table>
+  </div>
 </div>