Use angular-ui-bootstrap instead of ngBootbox.

src/accounts/account.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 le compte #{{ $ctrl.account.id }} ayant pour nom :<br/>{{ $ctrl.account.name }}
+    </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/accounts/account.form.tmpl.html

@@ -15,12 +15,17 @@
     You should have received a copy of the GNU Affero General Public License
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<form class="form-horizontal" ng-submit="submitForm()" name="form" novalidate>
+<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" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
       <label class="col-sm-4 control-label" for="name">Account name</label>
       <div class="col-sm-8">
         <input class="form-control" id="name" name="name"
-      ng-model="data.name"
+        ng-model="$ctrl.account.name"
         type="text" placeholder="Account name"
         required />
         <div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
@@ -36,7 +41,7 @@
           <div class="input-group-addon">-</div>
           <input class="form-control" id="authorized-overdraft"
           name="authorized_overdraft"
-        ng-model="data.authorized_overdraft"
+          ng-model="$ctrl.account.authorized_overdraft"
           type="number" placeholder="Authorized overdraft"
           required min="0"/>
           <div class="input-group-addon">.00€</div>
@@ -48,3 +53,13 @@
       </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/accounts/accounts.html

@@ -31,7 +31,7 @@
     <tbody>
       <tr>
         <td colspan="5">
-          <button class="btn btn-success" account-form-dialog>
+          <button class="btn btn-success" ng-click="accountsCtrl.add()">
             Ajouter
           </button>
         </td>
@@ -64,19 +64,14 @@
           <div class="btn-group btn-group-xs">
             <!-- Edit account. -->
             <button type="button" class="btn btn-success"
-              account-form-dialog ng-model="accountsCtrl.account">
+              ng-model="accountsCtrl.account"
+              ng-click="accountsCtrl.modify(account)">
               <span class="fa fa-pencil-square-o"></span>
             </button>
 
-            <!-- Cancel account edition. -->
-            <button type="button" class="btn btn-default"
-              ng-click="accountsCtrl.cancelEdit(rowform, account, $index)">
-              <span class="fa fa-times"></span>
-            </button>
-
             <!-- Delete account, with confirm. -->
             <button type="button" class="btn btn-default"
-              ng-click="accountsCtrl.delete(account, $index)">
+              ng-click="accountsCtrl.delete(account)">
               <span class="fa fa-trash-o"></span>
             </button>
 

src/accounts/index.js

@@ -22,19 +22,17 @@ var angular = require('angular');
 
 var ngResource       = require('angular-resource'),
     ngMessages       = require('angular-messages'),
-    ngUiNotification = require('angular-ui-notification'),
+    ngUiBootstrap    = require('angular-ui-bootstrap'),
-    ngBootbox        = require('ngbootbox');
+    ngUiNotification = require('angular-ui-notification');
 
-// Note: ngBootbox seems to have no module.exports.
+var accountFormTmpl = require('./account.form.tmpl.html'),
-ngBootbox = 'ngBootbox';
+    accountDeleteTmpl = require('./account.delete.tmpl.html');
-
-var accountFormTmpl = require('./account.form.tmpl.html');
 
 var accountModule = angular.module('accountant.accounts', [
     ngResource,
     ngMessages,
-    ngUiNotification,
+    ngUiBootstrap,
-    ngBootbox
+    ngUiNotification
 ])
 
 .config(function($resourceProvider) {
@@ -69,7 +67,7 @@ var accountModule = angular.module('accountant.accounts', [
     return Account;
 })
 
-.controller('AccountController', function($ngBootbox, Account, Notification) {
+.controller('AccountController', function(Account, Notification, $uibModal, $log, $q) {
     var vm = this;
 
     /*
@@ -116,35 +114,27 @@ var accountModule = angular.module('accountant.accounts', [
         });
 
         // Insert account at the begining of the array.
-        vm.accounts.splice(0, 0, account);
+        return vm.modify(account);
-    };
-
-    /*
-     * Cancel account edition. Remove it from array if a new one.
-     */
-    vm.cancelEdit = function(rowform, account, $index) {
-        if (account.id) {
-            rowform.$cancel();
-        } else {
-            // Account not saved, just remove it from array.
-            vm.accounts.splice($index, 1);
-        }
     };
 
     /*
      * Save account.
      */
     vm.save = function(account) {
-        // var account = vm.accounts[$index];
-
-        // account = angular.merge(account, $data);
-
         return account.$save().then(function(data) {
             Notification.success('Account #' + data.id + ' saved.');
 
-            // TODO Alexis Lahouze 2016-03-08 Update solds
+            vm.accounts = Account.query();
 
             return data;
+        }, function(result){
+            $log.error('Error while saving account', account, result);
+
+            Notification.error(
+                'Error while saving account: ' + result.message
+            );
+
+            return $q.reject(result);
         });
     };
 
@@ -154,109 +144,128 @@ var accountModule = angular.module('accountant.accounts', [
     vm.delete = function(account, $index) {
         var id = account.id;
 
-        $ngBootbox.confirm(
+        $uibModal.open({
-            'Voulez-vous supprimer le compte \'' + account.name + '\' ?',
+            component: 'accountDeleteModalComponent',
-            function(result) {
+            resolve: {
-                if (result) {
+                account: function() {
-                    account.$delete().then(function() {
+                    return account;
-                        Notification.success('Account #' + id + ' deleted.');
+                }
+            }
+        }).result.then(function(account) {
+            return account.$delete().then(function() {
+                Notification.success('account #' + id + ' deleted.');
 
-                        // Remove account from array.
+                vm.accounts = Account.query();
-                        vm.accounts.splice($index, 1);
+
-                    });
+                return account;
-                }
+            }, function(result) {
-            }
+                Notification.error(
+                    'An error occurred while trying to delete account #' +
+                    id + ':<br />' + result
                 );
+
+                return $q.reject(result);
+            });
+        }, function() {
+            return false;
+        });
+    };
+
+    /*
+     * Open the popup to modify the account, save it on confirm.
+     * @returns a promise.
+     */
+    vm.modify = function(account) {
+        return $uibModal.open({
+            component: 'accountModifyModalComponent',
+            resolve: {
+                account: function() {
+                    return account;
+                }
+            }
+        }).result.then(function(account) {
+            return vm.save(account);
+        }, function() {
+            return false;
+        });
     };
 
     // Load accounts.
     vm.accounts = Account.query();
 })
 
-.directive('accountFormDialog', function(Account, $ngBootbox, Notification, $log) {
+.component('accountModifyModalComponent', {
-    return {
-        restrict: 'A',
-        scope: {
-            account: '=ngModel'
-        },
-        link: function(scope, element) {
-            var title = 'Account';
-
-            if (scope.account && scope.account.id) {
-                title = title + ' #' + scope.account.id;
-            }
-
-            scope.form = {};
-
-            scope.submitForm = function() {
-                // check to make sure the form is completely valid
-                if (!scope.form.$valid) {
-                    return false;
-                }
-
-                // Authorized overdraft is a positive integer but data is a negative integer.
-                // eslint-disable-next-line camelcase
-                scope.data.authorized_overdraft = -scope.data.authorized_overdraft;
-
-                angular.copy(scope.data, scope.account);
-
-                // Save account
-                $log.log(scope.account);
-                return scope.account.$save().then(
-                    function(data) {
-                        Notification.success('Account #' + data.id + ' saved.');
-
-                        scope.account.getSolds();
-
-                        return data;
-                    },
-                    function(data) {
-                        Notification.error('Error while saving account #' + data.id);
-                        scope.account.getSolds();
-                        $log.log(data);
-                        return false;
-                    }
-                );
-            };
-
-            element.on('click', function() {
-                // Create new account if not passed in ng-model.
-                if (!scope.account) {
-                    scope.account = new Account({
-                        // eslint-disable-next-line camelcase
-                        authorized_overdraft: 0
-                    });
-                }
-
-                scope.data = {};
-                angular.copy(scope.account, scope.data);
-
-                // Authorized overdraft must be positive in form.
-                // eslint-disable-next-line camelcase
-                scope.data.authorized_overdraft = -scope.data.authorized_overdraft;
-
-                // Open dialog with form.
-                $ngBootbox.customDialog({
-                    scope: scope,
-                    title: title,
     templateUrl: accountFormTmpl,
-                    onEscape: true,
+    bindings: {
-                    buttons: {
+        resolve: '<',
-                        save: {
+        close: '&',
-                            label: 'Save',
+        dismiss: '&'
-                            className: 'btn-success',
-                            callback: scope.submitForm
     },
-                        cancel: {
+    controller: function() {
-                            label: 'Cancel',
+        var vm = this;
-                            className: 'btn-default',
+
-                            callback: true
+        vm.$onInit = function() {
-                        }
+            vm.account = vm.resolve.account;
-                    }
+        };
+
+        vm.ok = function() {
+            vm.close({
+                $value: vm.account
             });
+        };
+
+        vm.cancel = function() {
+            vm.dismiss({
+                $value: 'cancel'
             });
+        };
+
+        vm.title = function() {
+            // FIXME Alexis Lahouze 2017-06-15 i18n
+            if (vm.account.id) {
+                return "Account #" + vm.account.id;
+            } else {
+                return "Account";
             }
         };
+    }
+})
+
+.component('accountDeleteModalComponent', {
+    templateUrl: accountDeleteTmpl,
+    bindings: {
+        resolve: '<',
+        close: '&',
+        dismiss: '&'
+    },
+    controller: function() {
+        var vm = this;
+
+        vm.$onInit = function() {
+            vm.account = vm.resolve.account;
+        };
+
+        vm.ok = function() {
+            vm.close({
+                $value: vm.account
+            });
+        };
+
+        vm.cancel = function() {
+            vm.dismiss({
+                $value: 'cancel'
+            });
+        };
+
+        vm.title = function() {
+            // FIXME Alexis Lahouze 2017-06-15 i18n
+            if (vm.account.id) {
+                return "Account #" + vm.account.id;
+            } else {
+                return "Account";
+            }
+        };
+    }
 });
 
 module.exports = accountModule;