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

This commit is contained in:
Alexis Lahouze 2017-07-08 09:12:25 +02:00
parent 0c85266ab2
commit d4400b788d
4 changed files with 135 additions and 179 deletions

View File

@ -1,16 +1,23 @@
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3> <h3 class="modal-title" id="modal-title">{{ title }}</h3>
</div> </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>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-danger" type="button" ng-click="$ctrl.ok()"> <button class="btn btn-danger" type="button" ng-click="$delete()">
Supprimer Supprimer
</button> </button>
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()"> <button class="btn btn-default" type="button" ng-click="$hide()">
Annuler Annuler
</button> </button>
</div> </div>
</div>
</div>
</div>

View File

@ -15,17 +15,21 @@
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/>.
--> -->
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3> <h3 class="modal-title" id="modal-title">{{ title }}</h3>
</div> </div>
<form name="form" class="form-horizontal simple-form" novalidate ng-submit="$ctrl.ok()"> <form name="form" class="form-horizontal simple-form" novalidate
ng-submit="$save()">
<div class="modal-body" id="modal-body"> <div class="modal-body" id="modal-body">
<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="$ctrl.account.name" ng-model="account.name"
type="text" placeholder="Account name" type="text" placeholder="Account name"
required /> required />
@ -42,8 +46,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="$ctrl.authorized_overdraft" ng-model="account.authorized_overdraft"
ng-change="$ctrl.authorizedOverdraftChange()"
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>
@ -59,8 +62,11 @@
<div class="modal-footer"> <div class="modal-footer">
<input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/> <input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()"> <button class="btn btn-default" type="button" ng-click="$hide()">
Annuler Annuler
</button> </button>
</div> </div>
</form> </form>
</div>
</div>
</div>

View File

@ -72,7 +72,7 @@
<!-- 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)"> ng-click="accountsCtrl.confirmDelete(account)">
<span class="fa fa-trash-o"></span> <span class="fa fa-trash-o"></span>
</button> </button>

View File

@ -23,7 +23,8 @@ var angular = require('angular');
var ngResource = require('angular-resource'), var ngResource = require('angular-resource'),
ngMessages = require('angular-messages'), ngMessages = require('angular-messages'),
ngUiBootstrap = require('angular-ui-bootstrap'), 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'), var accountFormTmpl = require('./account.form.tmpl.html'),
accountDeleteTmpl = require('./account.delete.tmpl.html'); accountDeleteTmpl = require('./account.delete.tmpl.html');
@ -32,7 +33,8 @@ module.exports = angular.module('accountant.accounts', [
ngResource, ngResource,
ngMessages, ngMessages,
ngUiBootstrap, ngUiBootstrap,
ngUiNotification ngUiNotification,
ngStrap,
]) ])
.config(function($resourceProvider) { .config(function($resourceProvider) {
@ -67,7 +69,7 @@ module.exports = angular.module('accountant.accounts', [
return Account; return Account;
}) })
.controller('AccountController', function(Account, Notification, $uibModal, $log, $q) { .controller('AccountController', function(Account, Notification, $log, $q, $modal) {
var vm = this; var vm = this;
/* /*
@ -138,20 +140,33 @@ 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. * Delete an account.
*/ */
vm.delete = function(account, $index) { vm.delete = function(account) {
var id = account.id; var id = account.id;
$uibModal.open({
component: 'accountDeleteModalComponent',
resolve: {
account: function() {
return account;
}
}
}).result.then(function(account) {
return account.$delete().then(function() { return account.$delete().then(function() {
Notification.success('account #' + id + ' deleted.'); Notification.success('account #' + id + ' deleted.');
@ -163,30 +178,37 @@ module.exports = angular.module('accountant.accounts', [
'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. * Open the popup to modify the account, save it on confirm.
* @returns a promise.
*/ */
vm.modify = function(account) { 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(); 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; .name;