From 9d9d46fbeed83cee831321794aa7372dad77d096 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 10 Jul 2015 11:49:59 +0200 Subject: [PATCH] Improve accounts app using resources and events. --- accountant/frontend/static/js/accounts.js | 293 ++++++++++++---------- 1 file changed, 155 insertions(+), 138 deletions(-) diff --git a/accountant/frontend/static/js/accounts.js b/accountant/frontend/static/js/accounts.js index 781b6d7..3cef9fc 100644 --- a/accountant/frontend/static/js/accounts.js +++ b/accountant/frontend/static/js/accounts.js @@ -14,31 +14,28 @@ You should have received a copy of the GNU Affero General Public License along with Accountant. If not, see . */ -// Account object -function account() { - this.id=ko.observable(); - this.name=ko.observable(); - this.authorized_overdraft=ko.observable(); - this.future=ko.observable(); - this.current=ko.observable(); - this.pointed=ko.observable(); -} +// vim: set tw=80 ts=2 sw=2 sts=2: // The AccountController. -accountantApp.controller( - "AccountController", function($scope, $http, $rootScope, $window) { - // Account store and selection - $scope.account = null; - $scope.accounts = []; +accountantApp - $scope.savedAccount = null; - $scope.editingAccount = null; - $scope.removedAccount = null; +.factory("Accounts", ["$resource", function($resource) { + return $resource( + "/api/accounts/:id", { + id: "@id" + } + ); +}]) + +.controller( + "AccountController", [ + "$scope", "$rootScope", "$window", "Accounts", + function($scope, $rootScope, $window, Accounts) { $scope.accountClass = function(account) { - if(account == $scope.account) { - return "active"; - } + if(account == $scope.selectedAccount) { + return "active"; + } }; $scope.valueClass = function(account, value) { @@ -53,145 +50,165 @@ accountantApp.controller( } }; - $scope.addAccount = function() { - $scope.editingAccount = { - id: null, - name: null, - authorized_overdraft: null - }; + /* + * Create a new account and emit accountCreatedEvent. + */ + $scope.createAccount = function(account) { + account.$save(function(account) { + // Reset new account. + $scope.resetAccount(account); - angular.element("#edit-account").modal(); + $scope.$emit("accountCreatedEvent", account); + }); }; - $scope.show = function() { - console.debug("show"); - }; + /* + * Notify on account created event. + */ + $rootScope.$on("accountCreatedEvent", function(e, account) { + new PNnotify({ + type: "success", + title: "Save", + text: "Account #" + account.id + " created." + }); + }); + /* + * Reload accounts on account created event. + */ + $rootScope.$on("accountCreatedEvent", function(e, account) { + $scope.loadAccounts(); + }); + + /* + * Start account edition. + */ $scope.editAccount = function(account) { - if(account) { - $scope.editingAccount = account; - $scope.savedAccount = angular.copy(account); - } + account.editing = true; }; - $scope.cancelEditAccount = function(account, modalScope) { - if($scope.savedAccount) { - account.name = $scope.savedAccount.name; - account.authorized_overdraft = $scope.savedAccount.authorized_overdraft; - } - - $scope.editingAccount = null; - $scope.savedAccount = null; - - if(modalScope && modalScope.dismiss) { - modalScope.dismiss(); - } - }; - - $scope.saveAccount = function(account, modalScope) { - // Ajax call to save the entry. - var type; - var url = "/api/accounts"; - + /* + * Cancel account edition. + */ + $scope.cancelEditAccount = function(account) { if(account.id) { - url += "/" + 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); + }); + }; + + /* + * Notify on account saved event. + */ + $rootScope.$on("accountSavedEvent", function(e, account) { + new PNnotify({ + type: "success", + title: "Save", + text: "Account #" + account.id + " saved." + }); + }); + + /* + * Delete an account and emut accountDeletedEvent. + */ + $scope.deleteAccount = function(account, modalScope) { + account.$delete(function(data) { + $scope.$emit("accountDeletedEvent", account); + }); + }; + + /* + * Notify on account deleted event. + */ + $rootScope.$on("accountDeletedEvent", function(e, account) { + new PNotify({ + type: "success", + title: "Save", + text: "Account #" + account.id + " deleted." + }); + }); + + /* + * Reload acounts when an account is deleted. + */ + $rootScope.$on("accountDeletedEvent", function(e, account) { + // Reset the selected account if this is the one whe have deleted. + if($scope.selectedAccount.id == account.id) { + $scope.selectedAccount = null; } - $http.put(url, angular.toJson(account)).success(function(data) { - $.pnotify({ - type: "success", - title: "Save", - text: data - }); + $scope.loadAccounts(); + }); - $scope.editingAccount = null; - $scope.savedAccount = null; - - if(modalScope && modalScope.dismiss) { - modalScope.dismiss(); - } - - // Reload accounts to update solds. - $scope.loadAccounts(); - }).error(function(data) { - if(data.error_type == 'validation') { - angular.forEach(data.errors, function(errors, field) { - // $scope.form[field].$setValidity('server', false); - //$scope.errors[field] = errors.join(', '); - }); - } else { - $.pnotify({ - type: "error", - title: "Save", - text: data.errors - }); - } - }); - }; - - // Function to remove of an entry. - $scope.accountRemove = function(account, modalScope) { - $http.delete("/api/accounts/" + account.id).success(function (data) { - $.pnotify({ - type: "success", - title: "Save", - text: data - }); - - // Reload accounts to update solds. - $scope.loadAccounts(); - - if(modalScope && modalScope.dismiss) { - modalScope.dismiss(); - } - }); - }; - - // Function to load accounts + /* + * Reload accounts and emit accountsLoadedEvent. + */ $scope.loadAccounts = function() { - $http.get("/api/accounts").success(function (data) { - // Update accounts - $scope.accounts = angular.fromJson(data); + // Reset the new account. + $scope.newAccount = new Accounts(); + // Load accounts using the resource. + $scope.accounts = Accounts.query(function (data) { $scope.$emit("accountsLoadedEvent", $scope.accounts); }); }; - // Callback function to select a new account. - $scope.selectAccount = function(account) { - if(account) { - $scope.account = account; - - $scope.$emit("accountSelectedEvent", {account: $scope.account}); - } - }; - + /* + * Update the selected account with loaded one or select the first of the + * list. + */ $rootScope.$on("accountsLoadedEvent", function(e, accounts) { - var accountToSelect = null; - - // Reset selected account to the new instance corresponding to the old one. - if($scope.account) { - // Find the new instance of the previously selected account. - angular.forEach($scope.accounts, function(account) { - if(account.id == $scope.account.id) { - accountToSelect = account; - } - }); - } + var accountToSelect = null; + // Reset selected account to the new instance corresponding to the old + // one. + if($scope.selectedAccount) { + // Find the new instance of the previously selected account. + angular.forEach($scope.accounts, function(account) { + if(account.id == $scope.selectedAccount.id) { + // No need to emit accountSelectedEvent. + $scope.selectedAccount = account; + } + }); + } else { // Set selected account to first one if not yet selected - if(!accountToSelect && $scope.accounts.length > 0){ - accountToSelect = $scope.accounts[0]; - } - - $scope.selectAccount(accounts[0]); + $scope.selectAccount($scope.accounts[0]); + } }); - // TODO Alexis Lahouze 2015-06-16 Replace by refresh account. - $rootScope.$on("entrySavedEvent", $scope.loadAccounts); - $rootScope.$on("entryRemovedEvent", $scope.loadAccounts); - $rootScope.$on("operationSavedEvent", $scope.loadAccounts); - $rootScope.$on("operationRemovedEvent", $scope.loadAccounts); + /* + * Select the account to display and emit accountSelectedEvent. + */ + $scope.selectAccount = function(account) { + $scope.selectedAccount = account; + + $scope.$emit("accountSelectedEvent", {account: account}); + }; + + /* + * Refresh account information. + */ + $scope.refreshAccount = function() { + $scope.selectedAccount.$get(); + }; + + $rootScope.$on("entrySavedEvent", $scope.refreshAccount); + $rootScope.$on("entryCreatedEvent", $scope.refreshAccount); + $rootScope.$on("entryRemovedEvent", $scope.refreshAccount); + //$rootScope.$on("operationSavedEvent", $scope.refreshAccount); + //$rootScope.$on("operationRemovedEvent", $scope.refreshAccount); $scope.loadAccounts(); -}); +}]);