Use angular-ui-bootstrap instead of ngBootbox, remove usage of xeditable.

src/scheduler/index.js

@@ -20,23 +20,18 @@
 
 var angular = require('angular');
 
+var scheduleFormTmpl   = require('./schedule.form.tmpl.html'),
+    scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
+
 var ngMessages       = require('angular-messages'),
+    ngUiBootstrap    = require('angular-ui-bootstrap'),
     ngUiNotification = require('angular-ui-notification'),
-    ngBootbox        = require('ngbootbox'),
-    ngStrap          = require('angular-strap'),
-    ngXEditable      = require('angular-xeditable');
-
-// Note: ngBootbox seems to have no module.exports.
-ngBootbox = 'ngBootbox';
-
-// Note: angular-xeditable seems to have no module.exports.
-ngXEditable = 'xeditable';
+    ngStrap          = require('angular-strap');
 
 var schedulerModule = angular.module('accountant.scheduler', [
     ngMessages,
+    ngUiBootstrap,
     ngUiNotification,
-    ngBootbox,
-    ngXEditable,
     ngStrap
 ])
 
@@ -53,7 +48,7 @@ var schedulerModule = angular.module('accountant.scheduler', [
     );
 })
 
-.controller('SchedulerController', function($rootScope, $routeParams, $ngBootbox, Notification, ScheduledOperation) {
+.controller('SchedulerController', function($rootScope, $routeParams, Notification, ScheduledOperation, $log, $uibModal, $q) {
     var vm = this;
 
     // Operation store.
@@ -68,15 +63,14 @@ var schedulerModule = angular.module('accountant.scheduler', [
             account_id: $routeParams.accountId
         });
 
-        // Insert new operation at the beginning of the array.
-        vm.operations.splice(0, 0, operation);
+        return vm.modify(operation);
     };
 
     /*
      * Load operations.
      */
     vm.load = function() {
-        vm.operations = ScheduledOperation.query({
+        return ScheduledOperation.query({
             // eslint-disable-next-line camelcase
             account_id: $routeParams.accountId
         });
@@ -85,57 +79,153 @@ var schedulerModule = angular.module('accountant.scheduler', [
     /*
      * Save operation.
      */
-    vm.save = function($data, $index) {
-        var operation;
+    vm.save = function(operation) {
+        return operation.$save().then(function(operation) {
+            Notification.success('Scheduled operation #' + operation.id + ' saved.');
 
-        if ($data.$save) {
-            operation = $data;
-        } else {
-            operation = vm.operations[$index];
-            operation = angular.merge(operation, $data);
-        }
+            vm.operations = vm.load();
 
-        return operation.$save().then(function(data) {
-            Notification.success('Operation #' + data.id + ' saved.');
+            return operation;
+        }, function(result){
+            $log.error('Error while saving scheduled operation', operation, result);
+
+            Notification.error(
+                'Error while saving scheduled operation: ' + result.message
+            );
+
+            return $q.reject(result);
         });
     };
 
-    /*
-     * Cancel operation edition. Delete if new.
-     */
-    vm.cancelEdit = function(operation, rowform, $index) {
-        if (operation.id) {
-            rowform.$cancel();
-        } else {
-            vm.operations.splice($index, 1);
-        }
-    };
-
     /*
      * Delete operation.
      */
-    vm.delete = function(operation, $index) {
+    vm.delete = function(operation) {
         var id = operation.id;
 
-        $ngBootbox.confirm(
-            'Voulez-vous supprimer l\'operation planifiée \\\'' + operation.label + '\\\' ?',
-            function(result) {
-                if (result) {
-                    operation.$delete().then(function() {
+        $uibModal.open({
+            component: 'scheduleDeleteModalComponent',
+            resolve: {
+                operation: function() {
+                    return operation;
+                }
+            }
+        }).result.then(function(operation) {
+            return operation.$delete().then(function() {
                 Notification.success('Operation #' + id + ' deleted.');
 
-                        // Remove account from array.
-                        vm.operations.splice($index, 1);
-                    });
-                }
-            }
+                vm.operations = vm.load();
+
+                return operation;
+            }, function(result) {
+                Notification.error(
+                    'An error occurred while trying to delete operation #' +
+                    id + ':<br />' + result
                 );
+
+                return $q.reject(result);
+            });
+        }, function() {
+            return false;
+        });
+    };
+
+    /*
+     * Open the popup to modify the operation, save it on confirm.
+     * @returns a promise.
+     */
+    vm.modify = function(operation) {
+        return $uibModal.open({
+            component: 'scheduleModifyModalComponent',
+            resolve: {
+                operation: function() {
+                    return operation;
+                }
+            }
+        }).result.then(function(operation) {
+            return vm.save(operation);
+        }, function() {
+            return false;
+        });
     };
 
     // Load operations on controller initialization.
-    vm.load();
+    vm.operations = vm.load();
 })
 
-;
+.component('scheduleModifyModalComponent', {
+    templateUrl: scheduleFormTmpl,
+    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) {
+                return "Scheduled operation #" + vm.operation.id;
+            } else {
+                return "Scheduled operation";
+            }
+        };
+    }
+})
+
+
+.component('scheduleDeleteModalComponent', {
+    templateUrl: scheduleDeleteTmpl,
+    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) {
+                return "Scheduled operation #" + vm.operation.id;
+            } else {
+                return "Scheduled operation";
+            }
+        };
+    }
+});
 
 module.exports = schedulerModule;

src/scheduler/schedule.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>
+

src/scheduler/schedule.form.tmpl.html

@@ -0,0 +1,99 @@
+<!--
+    This file is part of Accountant.
+
+    Accountant is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Accountant is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
+<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="start-date">Date de début</label>
+      <div class="col-sm-8">
+        <input class="form-control" id="start-date" name="start_date"
+          type="text" ng-model="$ctrl.operation.start_date"
+          bs-datepicker data-date-format="yyyy-MM-dd"
+          placeholder="Scheduled operation start date">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="stop-date">Date de fin</label>
+      <div class="col-sm-8">
+        <input class="form-control" id="stop-date" name="stop_date"
+          type="text" ng-model="$ctrl.operation.stop_date"
+          bs-datepicker data-date-format="yyyy-MM-dd"
+          placeholder="Scheduled operation stop date">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="day">Jour</label>
+      <div class="col-sm-8">
+        <input class="form-control" id="day" name="day"
+          ng-model="$ctrl.operation.day" type="number" placeholder="Day">
+        </input>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="frequency">Fréquence</label>
+      <div class="col-sm-8">
+        <input class="form-control" id="frequency" name="frequency"
+          ng-model="$ctrl.operation.frequency" type="number" placeholder="Frequency">
+        </input>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <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="$ctrl.operation.label" type="text" placeholder="Label">
+        </input>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <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="$ctrl.operation.value" type="number" placeholder="Value">
+        </input>
+      </div>
+    </div>
+
+    <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/scheduler/scheduler.html

@@ -42,99 +42,49 @@
       <tr id="{{ operation.id }}" class="form-inline"
           ng-repeat="operation in schedulerCtrl.operations">
         <td class="col-md-1">
-          <span editable-text="operation.start_date"
-            e-style="width: 100%"
-            e-bs-datepicker e-data-date-format="yyyy-MM-dd"
-            e-name="start_date" e-form="rowform" e-required>
             {{ operation.start_date | date: "yyyy-MM-dd" }}
-          </span>
         </td>
 
         <td>
-          <span editable-text="operation.stop_date"
-            e-style="width: 100%"
-            e-bs-datepicker e-data-date-format="yyyy-MM-dd"
-            e-name="stop_date" e-form="rowform" e-required>
             {{ operation.stop_date | date: "yyyy-MM-dd" }}
-          </span>
         </td>
 
         <td>
-          <span editable-number="operation.day"
-            e-style="width: 100%"
-            e-name="day" e-form="rowform" e-required>
             {{ operation.day }}
-          </span>
         </td>
 
         <td>
-          <span editable-number="operation.frequency"
-            e-style="width: 100%"
-            e-name="frequency" e-form="rowform" e-required>
             {{ operation.frequency }}
-          </span>
         </td>
 
         <td>
-          <span editable-text="operation.label"
-            e-style="width: 100%"
-            e-placeholder="Libellé de l'opération"
-            e-name="label" e-form="rowform" e-required>
             {{ operation.label }}
-          </span>
         </td>
 
         <td>
-          <span editable-number="operation.value"
-            e-style="width: 100%"
-            e-name="value" e-form="rowform" e-required>
             {{ operation.value | currency : "€" }}
-          </span>
         </td>
 
         <td>
-          <span editable-text="operation.category"
-            e-style="width: 100%"
-            e-name="category" e-form="rowform">
             {{ operation.category }}
-          </span>
         </td>
 
         <td>
-          <form editable-form name="rowform"
-            onbeforesave="schedulerCtrl.save($data, $index)"
-            shown="!operation.id">
           <div class="btn-group btn-group-xs">
-              <!-- Save current operation -->
-              <button type="submit" class="btn btn-success"
-                ng-if="rowform.$visible" title="Save">
-                <span class="fa fa-floppy-o"></span>
-              </button>
-
             <!-- Edit operation. -->
             <button type="button" class="btn btn-default"
-                ng-if="!rowform.$visible"
-                ng-click="rowform.$show()" title="edit">
+              ng-click="schedulerCtrl.modify(operation)" title="edit">
               <span class="fa fa-pencil-square-o"></span>
             </button>
 
-              <!-- Cancel edit. -->
-              <button type="button" class="btn btn-default"
-                ng-if="rowform.$visible"
-                ng-click="schedulerCtrl.cancelEdit(operation, rowform, $index)"
-                title="Cancel">
-                <span class="fa fa-times"></span>
-              </button>
-
             <!-- Remove operation. -->
             <button type="button" class="btn btn-default"
               ng-if="operation.id"
-                ng-click="schedulerCtrl.delete(operation, $index)"
+              ng-click="schedulerCtrl.delete(operation)"
               title="remove">
               <span class="fa fa-trash"></span>
             </button>
           </div>
-          </form>
         </td>
       </tr>
     </tbody>