Use angular strap modal instead of angular-ui-bootstrap one.

src/accounts/account.delete.tmpl.html

@@ -1,16 +1,23 @@
-<div class="modal-header">
+<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
+  <div class="modal-dialog">
-</div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
+      </div>
 
-<div class="modal-body" id="modal-body">
+      <div class="modal-body" id="modal-body">
-    <p>Voulez-vous supprimer le compte #{{ $ctrl.account.id }} ayant pour nom :<br/>{{ $ctrl.account.name }}
+        <p>Voulez-vous supprimer le compte #{{ account.id }} ayant pour nom :<br/>{{ account.name }}
-    </p>
+        </p>
-<div class="modal-footer">
+      </div>
-  <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>
 
+      <div class="modal-footer">
+        <button class="btn btn-danger" type="button" ng-click="$delete()">
+          Supprimer
+        </button>
+        <button class="btn btn-default" type="button" ng-click="$hide()">
+          Annuler
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

src/accounts/account.form.tmpl.html

@@ -15,52 +15,58 @@
     You should have received a copy of the GNU Affero General Public License
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal-header">
+<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
+      </div>
+
+      <form name="form" class="form-horizontal simple-form" novalidate
+        ng-submit="$save()">
+        <div class="modal-body" id="modal-body">
+          <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="account.name"
+                type="text" placeholder="Account name"
+                required />
+
+              <div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
+                <p ng-message="required">The account name is required.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
+            <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
+            <div class="col-sm-8">
+              <div class="input-group">
+                <div class="input-group-addon">-</div>
+                <input class="form-control" id="authorized-overdraft"
+                  name="authorized_overdraft"
+                  ng-model="account.authorized_overdraft"
+                  type="number" placeholder="Authorized overdraft"
+                  required min="0"/>
+                <div class="input-group-addon">.00€</div>
+              </div>
+
+              <div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
+                <p ng-message="required">The authorized overdraft is required.</p>
+                <p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
+          <button class="btn btn-default" type="button" ng-click="$hide()">
+            Annuler
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
 </div>
-
-<form name="form" class="form-horizontal simple-form" novalidate ng-submit="$ctrl.ok()">
-  <div class="modal-body" id="modal-body">
-    <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="$ctrl.account.name"
-          type="text" placeholder="Account name"
-          required />
-
-        <div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
-          <p ng-message="required">The account name is required.</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
-      <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
-      <div class="col-sm-8">
-        <div class="input-group">
-          <div class="input-group-addon">-</div>
-          <input class="form-control" id="authorized-overdraft"
-            name="authorized_overdraft"
-            ng-model="$ctrl.authorized_overdraft"
-            ng-change="$ctrl.authorizedOverdraftChange()"
-            type="number" placeholder="Authorized overdraft"
-            required min="0"/>
-          <div class="input-group-addon">.00€</div>
-        </div>
-
-        <div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
-          <p ng-message="required">The authorized overdraft is required.</p>
-          <p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-footer">
-    <input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
-    <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
-      Annuler
-    </button>
-  </div>
-</form>

src/accounts/accounts.html

@@ -72,7 +72,7 @@
 
             <!-- Delete account, with confirm. -->
             <button type="button" class="btn btn-default"
-              ng-click="accountsCtrl.delete(account)">
+              ng-click="accountsCtrl.confirmDelete(account)">
               <span class="fa fa-trash-o"></span>
             </button>
 

src/accounts/index.js

@@ -23,7 +23,8 @@ var angular = require('angular');
 var ngResource       = require('angular-resource'),
     ngMessages       = require('angular-messages'),
     ngUiBootstrap    = require('angular-ui-bootstrap'),
-    ngUiNotification = require('angular-ui-notification');
+    ngUiNotification = require('angular-ui-notification'),
+    ngStrap          = require('angular-strap');
 
 var accountFormTmpl = require('./account.form.tmpl.html'),
     accountDeleteTmpl = require('./account.delete.tmpl.html');
@@ -32,7 +33,8 @@ module.exports = angular.module('accountant.accounts', [
     ngResource,
     ngMessages,
     ngUiBootstrap,
-    ngUiNotification
+    ngUiNotification,
+    ngStrap,
 ])
 
     .config(function($resourceProvider) {
@@ -67,7 +69,7 @@ module.exports = angular.module('accountant.accounts', [
         return Account;
     })
 
-    .controller('AccountController', function(Account, Notification, $uibModal, $log, $q) {
+    .controller('AccountController', function(Account, Notification, $log, $q, $modal) {
         var vm = this;
 
         /*
@@ -138,55 +140,75 @@ module.exports = angular.module('accountant.accounts', [
             });
         };
 
+        vm.confirmDelete = function(account) {
+            var title = "Delete account #" + account.id;
+
+            $modal({
+                templateUrl: accountDeleteTmpl,
+                controller: function($scope, title, account, $delete) {
+                    $scope.title = title;
+                    $scope.account = account;
+                    $scope.$delete = function() {
+                        $scope.$hide();
+                        $delete($scope.account);
+                    };
+                },
+                locals: {
+                    title: title,
+                    account: account,
+                    $delete: vm.delete
+                }
+            });
+        };
+
         /*
          * Delete an account.
          */
-        vm.delete = function(account, $index) {
+        vm.delete = function(account) {
             var id = account.id;
 
-            $uibModal.open({
+            return account.$delete().then(function() {
-                component: 'accountDeleteModalComponent',
+                Notification.success('account #' + id + ' deleted.');
-                resolve: {
-                    account: function() {
-                        return account;
-                    }
-                }
-            }).result.then(function(account) {
-                return account.$delete().then(function() {
-                    Notification.success('account #' + id + ' deleted.');
 
-                    vm.accounts = Account.query();
+                vm.accounts = Account.query();
 
-                    return account;
+                return account;
-                }, function(result) {
+            }, function(result) {
-                    Notification.error(
+                Notification.error(
-                        'An error occurred while trying to delete account #' +
+                    'An error occurred while trying to delete account #' +
-                        id + ':<br />' + result
+                    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({
+            // FIXME Alexis Lahouze 2017-06-15 i18n
-                component: 'accountModifyModalComponent',
+            var title = "Account";
-                resolve: {
+
-                    account: function() {
+            if (account.id) {
-                        return account;
+                title = title + " #" + account.id;
-                    }
+            }
+
+            $modal({
+                templateUrl: accountFormTmpl,
+                controller: function($scope, title, account, $save) {
+                    $scope.title = title;
+                    $scope.account = account;
+                    $scope.account.authorized_overdraft *= -1;
+                    $scope.$save = function() {
+                        $scope.$hide();
+                        $scope.account.authorized_overdraft *= -1;
+                        $save($scope.account);
+                    };
+                },
+                locals: {
+                    title: title,
+                    account: account,
+                    $save: vm.save
                 }
-            }).result.then(function(account) {
-                return vm.save(account);
-            }, function() {
-                return false;
             });
         };
 
@@ -194,83 +216,4 @@ module.exports = angular.module('accountant.accounts', [
         vm.accounts = Account.query();
     })
 
-    .component('accountModifyModalComponent', {
-        templateUrl: accountFormTmpl,
-        bindings: {
-            resolve: '<',
-            close: '&',
-            dismiss: '&'
-        },
-        controller: function() {
-            var vm = this;
-
-            vm.$onInit = function() {
-                vm.account = vm.resolve.account;
-                vm.authorized_overdraft = - vm.account.authorized_overdraft;
-            };
-
-            vm.authorizedOverdraftChange = function() {
-                vm.account.authorized_overdraft = - vm.authorized_overdraft;
-            };
-
-            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";
-                }
-            };
-        }
-    })
-
     .name;