Use angular-ui-bootstrap for Operation deletion confirmation modal.

This commit is contained in:
Alexis Lahouze 2017-06-15 17:21:17 +02:00
parent 69d0e06b57
commit 4f3c196179
2 changed files with 71 additions and 23 deletions

View File

@ -22,22 +22,18 @@ var moment = require('moment');
var angular = require('angular'); var angular = require('angular');
var operationFormTmpl = require('./operation.form.tmpl.html'); var operationFormTmpl = require('./operation.form.tmpl.html'),
operationDeleteTmpl = require('./operation.delete.tmpl.html');
var ngResource = require('angular-resource'), var ngResource = require('angular-resource'),
ngMessages = require('angular-messages'), ngMessages = require('angular-messages'),
ngUiNotification = require('angular-ui-notification'), ngUiNotification = require('angular-ui-notification'),
ngBootbox = require('ngbootbox'),
ngStrap = require('angular-strap'); ngStrap = require('angular-strap');
// Note: ngBootbox seems to have no module.exports.
ngBootbox = 'ngBootbox';
var operationModule = angular.module('accountant.operations', [ var operationModule = angular.module('accountant.operations', [
ngResource, ngResource,
ngMessages, ngMessages,
ngUiNotification, ngUiNotification,
ngBootbox,
ngStrap ngStrap
]) ])
@ -58,7 +54,7 @@ var operationModule = angular.module('accountant.operations', [
* Controller for the operations. * Controller for the operations.
*/ */
.controller('OperationController', function($rootScope, $scope, $routeParams, .controller('OperationController', function($rootScope, $scope, $routeParams,
$ngBootbox, $uibModal, Notification, Operation, $log) { $uibModal, Notification, Operation, $log) {
var vm = this; var vm = this;
@ -139,26 +135,25 @@ var operationModule = angular.module('accountant.operations', [
vm.delete = function(operation, $index) { vm.delete = function(operation, $index) {
var id = operation.id; var id = operation.id;
$ngBootbox.confirm( $uibModal.open({
'Voulez-vous supprimer l\'opération \\\'' + operation.label + '\\\' ?', component: 'operationDeleteModalComponent',
function(result) { resolve: {
if (result) { operation: function() {
operation.$delete().then(function() { return operation;
Notification.success('Operation #' + id + ' deleted.'); }
}
// Remove operation from array. }).result.then(function(operation) {
vm.operation.splice($index, 1); // FIXME Alexis Lahouze 2017-06-15 Delete operation and reload data
// to update balances.
$scope.$emit('operationDeletedEvent', operation); $log.info('Delete operation', operation);
}, function() {
$log.info('modal-component dismissed at: ' + new Date());
}); });
}
}
);
}; };
vm.modify = function(operation, $index) { vm.modify = function(operation, $index) {
$uibModal.open({ $uibModal.open({
component: 'operationModalComponent', component: 'operationModifyModalComponent',
resolve: { resolve: {
operation: function() { operation: function() {
return operation; return operation;
@ -167,7 +162,7 @@ var operationModule = angular.module('accountant.operations', [
}).result.then(function(operation) { }).result.then(function(operation) {
// FIXME Alexis Lahouze 2017-06-15 Save Operation and reload data to // FIXME Alexis Lahouze 2017-06-15 Save Operation and reload data to
// update balances. // update balances.
$log.info('modal validated', operation); $log.info('Save operation', operation);
}, function() { }, function() {
$log.info('modal-component dismissed at: ' + new Date()); $log.info('modal-component dismissed at: ' + new Date());
}); });
@ -187,7 +182,7 @@ var operationModule = angular.module('accountant.operations', [
vm.load(moment().date(1).year(2000), moment()); vm.load(moment().date(1).year(2000), moment());
}) })
.component('operationModalComponent', { .component('operationModifyModalComponent', {
templateUrl: operationFormTmpl, templateUrl: operationFormTmpl,
bindings: { bindings: {
resolve: '<', resolve: '<',
@ -213,6 +208,43 @@ var operationModule = angular.module('accountant.operations', [
}); });
}; };
vm.title = function() {
// FIXME Alexis Lahouze 2017-06-15 i18n
if (vm.operation.id) {
return "Operation #" + vm.operation.id;
} else {
return "Operation";
}
};
}
})
.component('operationDeleteModalComponent', {
templateUrl: operationDeleteTmpl,
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() { vm.title = function() {
// FIXME Alexis Lahouze 2017-06-15 i18n // FIXME Alexis Lahouze 2017-06-15 i18n
if (vm.operation.id) { if (vm.operation.id) {

View File

@ -0,0 +1,16 @@
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
</div>
<div class="modal-body" id="modal-body">
<p>Voulez-vous supprimer l'opération #{{ $ctrl.operation.id }} ayant pour libellé :<br/>{{ $ctrl.operation.label }}
</p>
<div class="modal-footer">
<button class="btn btn-danger" type="button" ng-click="$ctrl.ok()">
Supprimer
</button>
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
Annuler
</button>
</div>