Use angular-ui-bootstrap instead of ngBootbox.

This commit is contained in:
Alexis Lahouze 2017-06-16 23:22:07 +02:00
parent f75e65a3de
commit 50c90b085c
4 changed files with 193 additions and 158 deletions

View File

@ -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>

View File

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

View File

@ -31,7 +31,7 @@
<tbody> <tbody>
<tr> <tr>
<td colspan="5"> <td colspan="5">
<button class="btn btn-success" account-form-dialog> <button class="btn btn-success" ng-click="accountsCtrl.add()">
Ajouter Ajouter
</button> </button>
</td> </td>
@ -64,19 +64,14 @@
<div class="btn-group btn-group-xs"> <div class="btn-group btn-group-xs">
<!-- Edit account. --> <!-- Edit account. -->
<button type="button" class="btn btn-success" <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> <span class="fa fa-pencil-square-o"></span>
</button> </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. --> <!-- Delete account, with confirm. -->
<button type="button" class="btn btn-default" <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> <span class="fa fa-trash-o"></span>
</button> </button>

View File

@ -22,19 +22,17 @@ var angular = require('angular');
var ngResource = require('angular-resource'), var ngResource = require('angular-resource'),
ngMessages = require('angular-messages'), 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', [ var accountModule = angular.module('accountant.accounts', [
ngResource, ngResource,
ngMessages, ngMessages,
ngUiNotification, ngUiBootstrap,
ngBootbox ngUiNotification
]) ])
.config(function($resourceProvider) { .config(function($resourceProvider) {
@ -69,7 +67,7 @@ var accountModule = angular.module('accountant.accounts', [
return Account; return Account;
}) })
.controller('AccountController', function($ngBootbox, Account, Notification) { .controller('AccountController', function(Account, Notification, $uibModal, $log, $q) {
var vm = this; var vm = this;
/* /*
@ -116,35 +114,27 @@ var accountModule = angular.module('accountant.accounts', [
}); });
// Insert account at the begining of the array. // 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. * Save account.
*/ */
vm.save = function(account) { vm.save = function(account) {
// var account = vm.accounts[$index];
// account = angular.merge(account, $data);
return account.$save().then(function(data) { return account.$save().then(function(data) {
Notification.success('Account #' + data.id + ' saved.'); Notification.success('Account #' + data.id + ' saved.');
// TODO Alexis Lahouze 2016-03-08 Update solds vm.accounts = Account.query();
return data; 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) { vm.delete = function(account, $index) {
var id = account.id; 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. // Load accounts.
vm.accounts = Account.query(); 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, 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; module.exports = accountModule;