Use angular-ui-bootstrap for Operation deletion confirmation modal.
This commit is contained in:
parent
69d0e06b57
commit
4f3c196179
@ -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.
|
|
||||||
vm.operation.splice($index, 1);
|
|
||||||
|
|
||||||
$scope.$emit('operationDeletedEvent', operation);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
}).result.then(function(operation) {
|
||||||
|
// FIXME Alexis Lahouze 2017-06-15 Delete operation and reload data
|
||||||
|
// to update balances.
|
||||||
|
$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) {
|
||||||
|
16
src/operations/operation.delete.tmpl.html
Normal file
16
src/operations/operation.delete.tmpl.html
Normal 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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user