From 50c90b085c51f5a7b9bb72572b6b4f25c1ef8cdd Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 16 Jun 2017 23:22:07 +0200 Subject: [PATCH] Use angular-ui-bootstrap instead of ngBootbox. --- src/accounts/account.delete.tmpl.html | 16 ++ src/accounts/account.form.tmpl.html | 75 ++++---- src/accounts/accounts.html | 13 +- src/accounts/index.js | 247 +++++++++++++------------- 4 files changed, 193 insertions(+), 158 deletions(-) create mode 100644 src/accounts/account.delete.tmpl.html diff --git a/src/accounts/account.delete.tmpl.html b/src/accounts/account.delete.tmpl.html new file mode 100644 index 0000000..f5fcd82 --- /dev/null +++ b/src/accounts/account.delete.tmpl.html @@ -0,0 +1,16 @@ +
+ +
+ +
+

Voulez-vous supprimer le compte #{{ $ctrl.account.id }} ayant pour nom :
{{ $ctrl.account.name }} +

+
+ + +
+ diff --git a/src/accounts/account.form.tmpl.html b/src/accounts/account.form.tmpl.html index e4fd738..4f41685 100644 --- a/src/accounts/account.form.tmpl.html +++ b/src/accounts/account.form.tmpl.html @@ -15,36 +15,51 @@ You should have received a copy of the GNU Affero General Public License along with Accountant. If not, see . --> -
-
- -
- -
-

The account name is required.

-
-
-
+
+ +
-
- -
-
-
-
- -
.00€
-
-
-

The authorized overdraft is required.

-

The authorized overdraft must be equal or greater than 0.

+
+ +
+ +
+ +
+

The account name is required.

+
-
- + +
+ +
+
+
-
+ +
.00€
+
+
+

The authorized overdraft is required.

+

The authorized overdraft must be equal or greater than 0.

+
+
+
+ +
+ +
+ + +
diff --git a/src/accounts/accounts.html b/src/accounts/accounts.html index ec10817..5455b6a 100644 --- a/src/accounts/accounts.html +++ b/src/accounts/accounts.html @@ -31,7 +31,7 @@ - @@ -64,19 +64,14 @@
- - - diff --git a/src/accounts/index.js b/src/accounts/index.js index 3429bb7..888cd7a 100644 --- a/src/accounts/index.js +++ b/src/accounts/index.js @@ -22,19 +22,17 @@ var angular = require('angular'); var ngResource = require('angular-resource'), ngMessages = require('angular-messages'), - ngUiNotification = require('angular-ui-notification'), - ngBootbox = require('ngbootbox'); + ngUiBootstrap = require('angular-ui-bootstrap'), + ngUiNotification = require('angular-ui-notification'); -// Note: ngBootbox seems to have no module.exports. -ngBootbox = 'ngBootbox'; - -var accountFormTmpl = require('./account.form.tmpl.html'); +var accountFormTmpl = require('./account.form.tmpl.html'), + accountDeleteTmpl = require('./account.delete.tmpl.html'); var accountModule = angular.module('accountant.accounts', [ ngResource, ngMessages, - ngUiNotification, - ngBootbox + ngUiBootstrap, + ngUiNotification ]) .config(function($resourceProvider) { @@ -69,7 +67,7 @@ var accountModule = angular.module('accountant.accounts', [ return Account; }) -.controller('AccountController', function($ngBootbox, Account, Notification) { +.controller('AccountController', function(Account, Notification, $uibModal, $log, $q) { var vm = this; /* @@ -116,35 +114,27 @@ var accountModule = angular.module('accountant.accounts', [ }); // Insert account at the begining of the array. - vm.accounts.splice(0, 0, account); - }; - - /* - * Cancel account edition. Remove it from array if a new one. - */ - vm.cancelEdit = function(rowform, account, $index) { - if (account.id) { - rowform.$cancel(); - } else { - // Account not saved, just remove it from array. - vm.accounts.splice($index, 1); - } + return vm.modify(account); }; /* * Save account. */ vm.save = function(account) { - // var account = vm.accounts[$index]; - - // account = angular.merge(account, $data); - return account.$save().then(function(data) { Notification.success('Account #' + data.id + ' saved.'); - // TODO Alexis Lahouze 2016-03-08 Update solds + vm.accounts = Account.query(); return data; + }, function(result){ + $log.error('Error while saving account', account, result); + + Notification.error( + 'Error while saving account: ' + result.message + ); + + return $q.reject(result); }); }; @@ -154,109 +144,128 @@ var accountModule = angular.module('accountant.accounts', [ vm.delete = function(account, $index) { var id = account.id; - $ngBootbox.confirm( - 'Voulez-vous supprimer le compte \'' + account.name + '\' ?', - function(result) { - if (result) { - account.$delete().then(function() { - Notification.success('Account #' + id + ' deleted.'); - - // Remove account from array. - vm.accounts.splice($index, 1); - }); + $uibModal.open({ + component: 'accountDeleteModalComponent', + resolve: { + account: function() { + return account; } } - ); + }).result.then(function(account) { + return account.$delete().then(function() { + Notification.success('account #' + id + ' deleted.'); + + vm.accounts = Account.query(); + + return account; + }, function(result) { + Notification.error( + 'An error occurred while trying to delete account #' + + id + ':
' + result + ); + + return $q.reject(result); + }); + }, function() { + return false; + }); + }; + + /* + * Open the popup to modify the account, save it on confirm. + * @returns a promise. + */ + vm.modify = function(account) { + return $uibModal.open({ + component: 'accountModifyModalComponent', + resolve: { + account: function() { + return account; + } + } + }).result.then(function(account) { + return vm.save(account); + }, function() { + return false; + }); }; // Load accounts. vm.accounts = Account.query(); }) -.directive('accountFormDialog', function(Account, $ngBootbox, Notification, $log) { - return { - restrict: 'A', - scope: { - account: '=ngModel' - }, - link: function(scope, element) { - var title = 'Account'; +.component('accountModifyModalComponent', { + templateUrl: accountFormTmpl, + bindings: { + resolve: '<', + close: '&', + dismiss: '&' + }, + controller: function() { + var vm = this; - if (scope.account && scope.account.id) { - title = title + ' #' + scope.account.id; - } + vm.$onInit = function() { + vm.account = vm.resolve.account; + }; - scope.form = {}; - - scope.submitForm = function() { - // check to make sure the form is completely valid - if (!scope.form.$valid) { - return false; - } - - // Authorized overdraft is a positive integer but data is a negative integer. - // eslint-disable-next-line camelcase - scope.data.authorized_overdraft = -scope.data.authorized_overdraft; - - angular.copy(scope.data, scope.account); - - // Save account - $log.log(scope.account); - return scope.account.$save().then( - function(data) { - Notification.success('Account #' + data.id + ' saved.'); - - scope.account.getSolds(); - - return data; - }, - function(data) { - Notification.error('Error while saving account #' + data.id); - scope.account.getSolds(); - $log.log(data); - return false; - } - ); - }; - - element.on('click', function() { - // Create new account if not passed in ng-model. - if (!scope.account) { - scope.account = new Account({ - // eslint-disable-next-line camelcase - authorized_overdraft: 0 - }); - } - - scope.data = {}; - angular.copy(scope.account, scope.data); - - // Authorized overdraft must be positive in form. - // eslint-disable-next-line camelcase - scope.data.authorized_overdraft = -scope.data.authorized_overdraft; - - // Open dialog with form. - $ngBootbox.customDialog({ - scope: scope, - title: title, - templateUrl: accountFormTmpl, - onEscape: true, - buttons: { - save: { - label: 'Save', - className: 'btn-success', - callback: scope.submitForm - }, - cancel: { - label: 'Cancel', - className: 'btn-default', - callback: true - } - } - }); + vm.ok = function() { + vm.close({ + $value: vm.account }); - } - }; + }; + + vm.cancel = function() { + vm.dismiss({ + $value: 'cancel' + }); + }; + + vm.title = function() { + // FIXME Alexis Lahouze 2017-06-15 i18n + if (vm.account.id) { + return "Account #" + vm.account.id; + } else { + return "Account"; + } + }; + } +}) + +.component('accountDeleteModalComponent', { + templateUrl: accountDeleteTmpl, + bindings: { + resolve: '<', + close: '&', + dismiss: '&' + }, + controller: function() { + var vm = this; + + vm.$onInit = function() { + vm.account = vm.resolve.account; + }; + + vm.ok = function() { + vm.close({ + $value: vm.account + }); + }; + + vm.cancel = function() { + vm.dismiss({ + $value: 'cancel' + }); + }; + + vm.title = function() { + // FIXME Alexis Lahouze 2017-06-15 i18n + if (vm.account.id) { + return "Account #" + vm.account.id; + } else { + return "Account"; + } + }; + } }); module.exports = accountModule;