Use angular-ui-bootstrap for Operation modal.

src/operations/index.js

@@ -58,7 +58,7 @@ var operationModule = angular.module('accountant.operations', [
  * Controller for the operations.
  */
 .controller('OperationController', function($rootScope, $scope, $routeParams,
-    $ngBootbox, Notification, Operation) {
+    $ngBootbox, $uibModal, Notification, Operation, $log) {
 
     var vm = this;
 
@@ -167,6 +167,23 @@ var operationModule = angular.module('accountant.operations', [
         );
     };
 
+    vm.modify = function(operation, $index) {
+        $uibModal.open({
+            component: 'operationModalComponent',
+            resolve: {
+                operation: function() {
+                    return operation;
+                }
+            }
+        }).result.then(function(operation) {
+            // FIXME Alexis Lahouze 2017-06-15 Save Operation and reload data to
+            // update balances.
+            $log.info('modal validated', operation);
+        }, function() {
+            $log.info('modal-component dismissed at: ' + new Date());
+        });
+    };
+
     /*
      * Reload operations on rangeSelectedEvent.
      */
@@ -181,56 +198,41 @@ var operationModule = angular.module('accountant.operations', [
     vm.load(moment().date(1).year(2000), moment());
 })
 
-.directive('operationFormDialog', function($log, $ngBootbox) {
-    return {
-        restrict: 'A',
-        scope: {
-            operation: '=ngModel'
-        },
-        link: function(scope, element) {
-            var title = 'Operation';
-
-            if (scope.operation && scope.operation.id) {
-                title = title + ' #' + scope.operation.id;
-            }
-
-            scope.form = {};
-
-            element.on('click', function() {
-                scope.data = {};
-                angular.copy(scope.operation, scope.data);
-
-                // Open dialog with form.
-                $ngBootbox.customDialog({
-                    scope: scope,
-                    title: title,
+.component('operationModalComponent', {
     templateUrl: operationFormTmpl,
-                    onEscape: true,
-                    buttons: {
-                        save: {
-                            label: 'Save',
-                            className: 'btn-success',
-                            callback: function() {
-                                // Validate form
-                                $log.log(scope.form);
-
-                                // Save operation
-                                $log.log(scope.operation);
-
-                                // TODO Alexis Lahouze 2016-05-24 Save operation, handle return.
-                                return false;
-                            }
+    bindings: {
+        resolve: '<',
+        close: '&',
+        dismiss: '&'
     },
-                        cancel: {
-                            label: 'Cancel',
-                            className: 'btn-default',
-                            callback: true
-                        }
-                    }
+    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 "Operation #" + vm.operation.id;
+            } else {
+                return "Operation";
             }
         };
+    }
 });
 
 module.exports = operationModule;

src/operations/operation.form.tmpl.html

@@ -16,12 +16,18 @@
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
 <!-- kate: space-indent on; indent-width 2; mixedindent off; -->
-<form class="form-horizontal" role="form" name="form">
+<div class="modal-header">
+    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <form class="form-horizontal simple-form">
     <div class="form-group">
       <label class="col-sm-4 control-label" for="operation-date">Date</label>
       <div class="col-sm-8">
-      <input class="form-control" id="operation-date" name="operation_date" ng-model="data.operation_date"
-      type="text" bs-datepicker data-date-format="yyyy-MM-dd"
+        <input class="form-control" id="operation-date" name="operation_date"
+          type="text" ng-model="$ctrl.operation.operation_date"
+          bs-datepicker data-date-format="yyyy-MM-dd"
           placeholder="Operation date">
       </div>
     </div>
@@ -30,8 +36,7 @@
       <label class="col-sm-4 control-label" for="label">Label</label>
       <div class="col-sm-8">
         <input class="form-control" id="label" name="label"
-      ng-model="data.label"
-      type="text" placeholder="Label">
+          ng-model="$ctrl.operation.label" type="text" placeholder="Label">
         </input>
       </div>
     </div>
@@ -40,8 +45,7 @@
       <label class="col-sm-4 control-label" for="value">Montant</label>
       <div class="col-sm-8">
         <input class="form-control" id="value" name="value"
-      ng-model="data.value"
-      type="number" placeholder="Value">
+          ng-model="$ctrl.operation.value" type="number" placeholder="Value">
         </input>
       </div>
     </div>
@@ -50,9 +54,18 @@
       <label class="col-sm-4 control-label" for="category">Catégorie</label>
       <div class="col-sm-8">
         <input class="form-control" id="category" name="category"
-      ng-model="data.category"
-      type="text" placeholder="Category">
+          ng-model="$ctrl.operation.category" type="text" placeholder="Category">
         </input>
       </div>
     </div>
   </form>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">
+    OK
+  </button>
+  <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
+    Annuler
+  </button>
+</div>

src/operations/operations.html

@@ -68,7 +68,7 @@
               <!-- Edit operation, for non-canceled operation. -->
               <button type="button" class="btn btn-default"
                 ng-if="!operation.canceled"
-                operation-form-dialog ng-model="operation" title="edit">
+                ng-click="operationsCtrl.modify(operation, $index)" title="edit">
                 <span class="fa fa-pencil-square-o"></span>
               </button>