From ddb0b08ef2c36061ad5395eaba008cbab6ba9fd4 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sat, 17 Jun 2017 00:25:01 +0200 Subject: [PATCH] Use angular-ui-bootstrap instead of ngBootbox, remove usage of xeditable. --- src/scheduler/index.js | 190 +++++++++++++++++------- src/scheduler/schedule.delete.tmpl.html | 16 ++ src/scheduler/schedule.form.tmpl.html | 99 ++++++++++++ src/scheduler/scheduler.html | 78 ++-------- 4 files changed, 269 insertions(+), 114 deletions(-) create mode 100644 src/scheduler/schedule.delete.tmpl.html create mode 100644 src/scheduler/schedule.form.tmpl.html diff --git a/src/scheduler/index.js b/src/scheduler/index.js index ca384fa..deaf866 100644 --- a/src/scheduler/index.js +++ b/src/scheduler/index.js @@ -20,23 +20,18 @@ var angular = require('angular'); +var scheduleFormTmpl = require('./schedule.form.tmpl.html'), + scheduleDeleteTmpl = require('./schedule.delete.tmpl.html'); + var ngMessages = require('angular-messages'), + ngUiBootstrap = require('angular-ui-bootstrap'), ngUiNotification = require('angular-ui-notification'), - ngBootbox = require('ngbootbox'), - ngStrap = require('angular-strap'), - ngXEditable = require('angular-xeditable'); - -// Note: ngBootbox seems to have no module.exports. -ngBootbox = 'ngBootbox'; - -// Note: angular-xeditable seems to have no module.exports. -ngXEditable = 'xeditable'; + ngStrap = require('angular-strap'); var schedulerModule = angular.module('accountant.scheduler', [ ngMessages, + ngUiBootstrap, ngUiNotification, - ngBootbox, - ngXEditable, ngStrap ]) @@ -53,7 +48,7 @@ var schedulerModule = angular.module('accountant.scheduler', [ ); }) -.controller('SchedulerController', function($rootScope, $routeParams, $ngBootbox, Notification, ScheduledOperation) { +.controller('SchedulerController', function($rootScope, $routeParams, Notification, ScheduledOperation, $log, $uibModal, $q) { var vm = this; // Operation store. @@ -68,15 +63,14 @@ var schedulerModule = angular.module('accountant.scheduler', [ account_id: $routeParams.accountId }); - // Insert new operation at the beginning of the array. - vm.operations.splice(0, 0, operation); + return vm.modify(operation); }; /* * Load operations. */ vm.load = function() { - vm.operations = ScheduledOperation.query({ + return ScheduledOperation.query({ // eslint-disable-next-line camelcase account_id: $routeParams.accountId }); @@ -85,57 +79,153 @@ var schedulerModule = angular.module('accountant.scheduler', [ /* * Save operation. */ - vm.save = function($data, $index) { - var operation; + vm.save = function(operation) { + return operation.$save().then(function(operation) { + Notification.success('Scheduled operation #' + operation.id + ' saved.'); - if ($data.$save) { - operation = $data; - } else { - operation = vm.operations[$index]; - operation = angular.merge(operation, $data); - } + vm.operations = vm.load(); - return operation.$save().then(function(data) { - Notification.success('Operation #' + data.id + ' saved.'); + return operation; + }, function(result){ + $log.error('Error while saving scheduled operation', operation, result); + + Notification.error( + 'Error while saving scheduled operation: ' + result.message + ); + + return $q.reject(result); }); }; - /* - * Cancel operation edition. Delete if new. - */ - vm.cancelEdit = function(operation, rowform, $index) { - if (operation.id) { - rowform.$cancel(); - } else { - vm.operations.splice($index, 1); - } - }; - /* * Delete operation. */ - vm.delete = function(operation, $index) { + vm.delete = function(operation) { var id = operation.id; - $ngBootbox.confirm( - 'Voulez-vous supprimer l\'operation planifiée \\\'' + operation.label + '\\\' ?', - function(result) { - if (result) { - operation.$delete().then(function() { - Notification.success('Operation #' + id + ' deleted.'); - - // Remove account from array. - vm.operations.splice($index, 1); - }); + $uibModal.open({ + component: 'scheduleDeleteModalComponent', + resolve: { + operation: function() { + return operation; } } - ); + }).result.then(function(operation) { + return operation.$delete().then(function() { + Notification.success('Operation #' + id + ' deleted.'); + + vm.operations = vm.load(); + + return operation; + }, function(result) { + Notification.error( + 'An error occurred while trying to delete operation #' + + id + ':
' + result + ); + + return $q.reject(result); + }); + }, function() { + return false; + }); + }; + + /* + * Open the popup to modify the operation, save it on confirm. + * @returns a promise. + */ + vm.modify = function(operation) { + return $uibModal.open({ + component: 'scheduleModifyModalComponent', + resolve: { + operation: function() { + return operation; + } + } + }).result.then(function(operation) { + return vm.save(operation); + }, function() { + return false; + }); }; // Load operations on controller initialization. - vm.load(); + vm.operations = vm.load(); }) -; +.component('scheduleModifyModalComponent', { + templateUrl: scheduleFormTmpl, + bindings: { + resolve: '<', + close: '&', + dismiss: '&' + }, + controller: function() { + var vm = this; + + vm.$onInit = function() { + vm.operation = vm.resolve.operation; + }; + + vm.ok = function() { + vm.close({ + $value: vm.operation + }); + }; + + vm.cancel = function() { + vm.dismiss({ + $value: 'cancel' + }); + }; + + vm.title = function() { + // FIXME Alexis Lahouze 2017-06-15 i18n + if (vm.operation.id) { + return "Scheduled operation #" + vm.operation.id; + } else { + return "Scheduled operation"; + } + }; + } +}) + + +.component('scheduleDeleteModalComponent', { + templateUrl: scheduleDeleteTmpl, + bindings: { + resolve: '<', + close: '&', + dismiss: '&' + }, + controller: function() { + var vm = this; + + vm.$onInit = function() { + vm.operation = vm.resolve.operation; + }; + + vm.ok = function() { + vm.close({ + $value: vm.operation + }); + }; + + vm.cancel = function() { + vm.dismiss({ + $value: 'cancel' + }); + }; + + vm.title = function() { + // FIXME Alexis Lahouze 2017-06-15 i18n + if (vm.operation.id) { + return "Scheduled operation #" + vm.operation.id; + } else { + return "Scheduled operation"; + } + }; + } +}); module.exports = schedulerModule; diff --git a/src/scheduler/schedule.delete.tmpl.html b/src/scheduler/schedule.delete.tmpl.html new file mode 100644 index 0000000..545ce03 --- /dev/null +++ b/src/scheduler/schedule.delete.tmpl.html @@ -0,0 +1,16 @@ +
+ +
+ +
+

Voulez-vous supprimer l'opération #{{ $ctrl.operation.id }} ayant pour libellé :
{{ $ctrl.operation.label }} +

+
+ + +
+ diff --git a/src/scheduler/schedule.form.tmpl.html b/src/scheduler/schedule.form.tmpl.html new file mode 100644 index 0000000..c7dcdf2 --- /dev/null +++ b/src/scheduler/schedule.form.tmpl.html @@ -0,0 +1,99 @@ + + + +
+ +
+ +
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+
+
+ +
+ + +
diff --git a/src/scheduler/scheduler.html b/src/scheduler/scheduler.html index fb495b3..1185b5c 100644 --- a/src/scheduler/scheduler.html +++ b/src/scheduler/scheduler.html @@ -42,99 +42,49 @@ - {{ operation.start_date | date: "yyyy-MM-dd" }} - - {{ operation.stop_date | date: "yyyy-MM-dd" }} - - {{ operation.day }} - - {{ operation.frequency }} - - {{ operation.label }} - - {{ operation.value | currency : "€" }} - - {{ operation.category }} - -
-
- - +
+ + - - - - - - - - -
- + + +