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

src/operations/index.js

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

src/operations/operation.delete.tmpl.html

@@ -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>
+