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) {
+.component('operationModalComponent', {
-    return {
+    templateUrl: operationFormTmpl,
-        restrict: 'A',
+    bindings: {
-        scope: {
+        resolve: '<',
-            operation: '=ngModel'
+        close: '&',
-        },
+        dismiss: '&'
-        link: function(scope, element) {
+    },
-            var title = 'Operation';
+    controller: function() {
+        var vm = this;
 
-            if (scope.operation && scope.operation.id) {
+        vm.$onInit = function() {
-                title = title + ' #' + scope.operation.id;
+            vm.operation = vm.resolve.operation;
-            }
+        };
 
-            scope.form = {};
+        vm.ok = function() {
-
+            vm.close({
-            element.on('click', function() {
+                $value: vm.operation
-                scope.data = {};
-                angular.copy(scope.operation, scope.data);
-
-                // Open dialog with form.
-                $ngBootbox.customDialog({
-                    scope: scope,
-                    title: title,
-                    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;
-                            }
-                        },
-                        cancel: {
-                            label: 'Cancel',
-                            className: 'btn-default',
-                            callback: true
-                        }
-                    }
-                });
             });
-        }
+        };
-    };
+
+        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,43 +16,56 @@
 -->
 <!-- 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">
-  <div class="form-group">
+    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
-    <label class="col-sm-4 control-label" for="operation-date">Date</label>
+</div>
-    <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"
-      placeholder="Operation date">
-    </div>
-  </div>
 
-  <div class="form-group">
+<div class="modal-body" id="modal-body">
-    <label class="col-sm-4 control-label" for="label">Label</label>
+  <form class="form-horizontal simple-form">
-    <div class="col-sm-8">
+    <div class="form-group">
-      <input class="form-control" id="label" name="label"
+      <label class="col-sm-4 control-label" for="operation-date">Date</label>
-      ng-model="data.label"
+      <div class="col-sm-8">
-      type="text" placeholder="Label">
+        <input class="form-control" id="operation-date" name="operation_date"
-      </input>
+          type="text" ng-model="$ctrl.operation.operation_date"
+          bs-datepicker data-date-format="yyyy-MM-dd"
+          placeholder="Operation date">
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
+    <div class="form-group">
-    <label class="col-sm-4 control-label" for="value">Montant</label>
+      <label class="col-sm-4 control-label" for="label">Label</label>
-    <div class="col-sm-8">
+      <div class="col-sm-8">
-      <input class="form-control" id="value" name="value"
+        <input class="form-control" id="label" name="label"
-      ng-model="data.value"
+          ng-model="$ctrl.operation.label" type="text" placeholder="Label">
-      type="number" placeholder="Value">
+        </input>
-      </input>
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
+    <div class="form-group">
-    <label class="col-sm-4 control-label" for="category">Catégorie</label>
+      <label class="col-sm-4 control-label" for="value">Montant</label>
-    <div class="col-sm-8">
+      <div class="col-sm-8">
-      <input class="form-control" id="category" name="category"
+        <input class="form-control" id="value" name="value"
-      ng-model="data.category"
+          ng-model="$ctrl.operation.value" type="number" placeholder="Value">
-      type="text" placeholder="Category">
+        </input>
-      </input>
+      </div>
     </div>
-  </div>
+
-</form>
+    <div class="form-group">
+      <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="$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>