Rewrote account management.

2015-08-16 00:39:53 +02:00 · 2015-08-16 00:39:53 +02:00 · caa68a7385
commit caa68a7385
parent d26f086a43
3 changed files with 129 additions and 139 deletions
--- a/accountant/frontend/static/js/accounts.js
+++ b/accountant/frontend/static/js/accounts.js
@ -29,8 +29,20 @@ accountantApp

 .controller(
    "AccountController", [
-        "$scope", "$rootScope", "$routeParams", "Accounts",
-        function($scope, $rootScope, $routeParams, Accounts) {
+        "$scope", "$rootScope", "$routeParams", "Accounts", "notificationService",
+        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";
        }
    };

-    /*
-     * Create a new account and emit accountCreatedEvent.
-     */
-    $scope.createAccount = function(account) {
-      account.$save(function(account) {
-        // Reset new account.
-        $scope.cancelEditAccount(account);
+    $scope.addAccount = function() {
+      if(!$scope.inserted) {
+        $scope.inserted = new Accounts();
+        $scope.inserted.authorized_overdraft = 0;
+        $scope.accounts.splice(0,0, $scope.inserted);
+      }
+    };

-        $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({
-        type: "success",
-        title: "Save",
-        text: "Account #" + account.id + " created."
-      });
+      notificationService.success("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) {
-      account.$save(function(data) {
-        $scope.$emit("accountSavedEvent", account);
+    $scope.saveAccount = function($data, $index) {
+      var account = $scope.accounts[$index];
+
+      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) {
--- a/accountant/frontend/static/js/app.js
+++ b/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({
-                    type: "error",
-                    title: response.data.title,
-                    text: response.data.text,
-                    width: 300
-                });
-
+                notificationService.error(response.data.text);
                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'
+})
 ;
--- a/accountant/frontend/static/templates/accounts.html
+++ b/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" />
-        </td>
-
-        <td></td>
-
-        <td></td>
-
-        <td>
-          <input type="text" class="form-control"
-            ng-model="newAccount.authorized_overdraft" />
+            <span editable-text="account.name" e-placeholder="Nom du compte" e-name="name" e-form="rowform" e-required>
+              <a href="account/{{ account.id }}/entries">{{ account.name  }}</a>
+            </span>
          </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"
-              ng-click="createAccount(newAccount)">
-              <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)">
+                <button type="submit" class="btn btn-xs btn-success"
+                  ng-if="rowform.$visible">
                  <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>