Use modal from Angular-Strap instead of the one in angular-ui-bootstrap.
This commit is contained in:
parent
0833536d5e
commit
bebe2aa874
@ -21,3 +21,21 @@
|
|||||||
.c3-ygrid-line.overdraft line {
|
.c3-ygrid-line.overdraft line {
|
||||||
stroke: #FF0000;
|
stroke: #FF0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Needed for modal backdrop opacity.
|
||||||
|
.modal-backdrop.am-fade {
|
||||||
|
opacity: .5;
|
||||||
|
transition: opacity .15s linear;
|
||||||
|
&.ng-enter {
|
||||||
|
opacity: 0;
|
||||||
|
&.ng-enter-active {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.ng-leave {
|
||||||
|
opacity: .5;
|
||||||
|
&.ng-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -31,14 +31,12 @@ var balanceChartModule = require('./balance-chart.component.js'),
|
|||||||
|
|
||||||
var ngResource = require('angular-resource'),
|
var ngResource = require('angular-resource'),
|
||||||
ngMessages = require('angular-messages'),
|
ngMessages = require('angular-messages'),
|
||||||
ngUiBootstrap = require('angular-ui-bootstrap'),
|
|
||||||
ngUiNotification = require('angular-ui-notification'),
|
ngUiNotification = require('angular-ui-notification'),
|
||||||
ngStrap = require('angular-strap');
|
ngStrap = require('angular-strap');
|
||||||
|
|
||||||
module.exports = angular.module('accountant.operations', [
|
module.exports = angular.module('accountant.operations', [
|
||||||
ngResource,
|
ngResource,
|
||||||
ngMessages,
|
ngMessages,
|
||||||
ngUiBootstrap,
|
|
||||||
ngUiNotification,
|
ngUiNotification,
|
||||||
ngStrap,
|
ngStrap,
|
||||||
accountModule,
|
accountModule,
|
||||||
@ -62,8 +60,8 @@ module.exports = angular.module('accountant.operations', [
|
|||||||
/*
|
/*
|
||||||
* Controller for the operations.
|
* Controller for the operations.
|
||||||
*/
|
*/
|
||||||
.controller('OperationController', function($routeParams, $uibModal,
|
.controller('OperationController', function($routeParams, $modal,
|
||||||
Notification, Operation, Account, $log, $q) {
|
Notification, Operation, Account, $log) {
|
||||||
|
|
||||||
var vm = this;
|
var vm = this;
|
||||||
|
|
||||||
@ -113,7 +111,7 @@ module.exports = angular.module('accountant.operations', [
|
|||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Save an operation and return a promise.
|
* Save an operation and return a promise.
|
||||||
*/
|
*/
|
||||||
vm.save = function(operation) {
|
vm.save = function(operation) {
|
||||||
operation.confirmed = true;
|
operation.confirmed = true;
|
||||||
@ -130,41 +128,47 @@ module.exports = angular.module('accountant.operations', [
|
|||||||
Notification.error(
|
Notification.error(
|
||||||
'Error while saving operation: ' + result.message
|
'Error while saving operation: ' + result.message
|
||||||
);
|
);
|
||||||
|
|
||||||
return $q.reject(result);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Delete an operation and return a promise.
|
* Delete an operation and return a promise.
|
||||||
*/
|
*/
|
||||||
|
vm.confirmDelete = function(operation) {
|
||||||
|
var title = "Delete operation #" + operation.id;
|
||||||
|
|
||||||
|
$modal({
|
||||||
|
templateUrl: operationDeleteTmpl,
|
||||||
|
controller: function($scope, title, operation, $delete) {
|
||||||
|
$scope.title = title;
|
||||||
|
$scope.operation = operation;
|
||||||
|
$scope.$delete = function() {
|
||||||
|
$scope.$hide();
|
||||||
|
$delete($scope.operation);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
locals: {
|
||||||
|
title: title,
|
||||||
|
operation: operation,
|
||||||
|
$delete: vm.delete
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
vm.delete = function(operation) {
|
vm.delete = function(operation) {
|
||||||
var id = operation.id;
|
var id = operation.id;
|
||||||
|
|
||||||
$uibModal.open({
|
return operation.$delete().then(function() {
|
||||||
component: 'operationDeleteModalComponent',
|
Notification.success('Operation #' + id + ' deleted.');
|
||||||
resolve: {
|
|
||||||
operation: function() {
|
|
||||||
return operation;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).result.then(function(operation) {
|
|
||||||
return operation.$delete().then(function() {
|
|
||||||
Notification.success('Operation #' + id + ' deleted.');
|
|
||||||
|
|
||||||
vm.operations = vm.load();
|
vm.operations = vm.load();
|
||||||
|
|
||||||
return operation;
|
return operation;
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
Notification.error(
|
Notification.error(
|
||||||
'An error occurred while trying to delete operation #' +
|
'An error occurred while trying to delete operation #' +
|
||||||
id + ':<br />' + result
|
id + ':<br />' + result
|
||||||
);
|
);
|
||||||
|
|
||||||
return $q.reject(result);
|
|
||||||
});
|
|
||||||
}, function() {
|
|
||||||
return false;
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -173,17 +177,28 @@ module.exports = angular.module('accountant.operations', [
|
|||||||
* @returns a promise.
|
* @returns a promise.
|
||||||
*/
|
*/
|
||||||
vm.modify = function(operation) {
|
vm.modify = function(operation) {
|
||||||
return $uibModal.open({
|
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||||
component: 'operationModifyModalComponent',
|
var title = "Operation";
|
||||||
resolve: {
|
|
||||||
operation: function() {
|
if (operation.id) {
|
||||||
return operation;
|
title = title + " #" + operation.id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$modal({
|
||||||
|
templateUrl: operationFormTmpl,
|
||||||
|
controller: function($scope, title, operation, $save) {
|
||||||
|
$scope.title = title;
|
||||||
|
$scope.operation = operation;
|
||||||
|
$scope.$save = function() {
|
||||||
|
$scope.$hide();
|
||||||
|
$save($scope.operation);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
locals: {
|
||||||
|
title: title,
|
||||||
|
operation: operation,
|
||||||
|
$save: vm.save
|
||||||
}
|
}
|
||||||
}).result.then(function(operation) {
|
|
||||||
return vm.save(operation);
|
|
||||||
}, function() {
|
|
||||||
return false;
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -194,78 +209,4 @@ module.exports = angular.module('accountant.operations', [
|
|||||||
vm.account = Account.get({id: $routeParams.accountId});
|
vm.account = Account.get({id: $routeParams.accountId});
|
||||||
})
|
})
|
||||||
|
|
||||||
.component('operationModifyModalComponent', {
|
|
||||||
templateUrl: operationFormTmpl,
|
|
||||||
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 "Operation #" + vm.operation.id;
|
|
||||||
} else {
|
|
||||||
return "Operation";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
.component('operationDeleteModalComponent', {
|
|
||||||
templateUrl: operationDeleteTmpl,
|
|
||||||
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 "Operation #" + vm.operation.id;
|
|
||||||
} else {
|
|
||||||
return "Operation";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
.name;
|
.name;
|
||||||
|
@ -1,16 +1,24 @@
|
|||||||
<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 l'opération #{{ $ctrl.operation.id }} ayant pour libellé :<br/>{{ $ctrl.operation.label }}
|
<p>Voulez-vous supprimer l'opération #{{ operation.id }} ayant pour libellé :<br/>{{ operation.label }}
|
||||||
</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>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||||
|
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
||||||
<!--
|
<!--
|
||||||
This file is part of Accountant.
|
This file is part of Accountant.
|
||||||
|
|
||||||
@ -14,58 +16,62 @@
|
|||||||
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/>.
|
||||||
-->
|
-->
|
||||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
<div class="modal-dialog">
|
||||||
<div class="modal-header">
|
<div class="modal-content">
|
||||||
<h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
|
<div class="modal-header">
|
||||||
</div>
|
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||||
|
</div>
|
||||||
<div class="modal-body" id="modal-body">
|
|
||||||
<form class="form-horizontal simple-form">
|
<div class="modal-body" id="modal-body">
|
||||||
<div class="form-group">
|
<form class="form-horizontal simple-form">
|
||||||
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
<div class="form-group">
|
||||||
<div class="col-sm-8">
|
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
||||||
<input class="form-control" id="operation-date" name="operation_date"
|
<div class="col-sm-8">
|
||||||
type="text" ng-model="$ctrl.operation.operation_date"
|
<input class="form-control" id="operation-date" name="operation_date"
|
||||||
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
|
type="text" ng-model="operation.operation_date"
|
||||||
placeholder="Operation date">
|
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
|
||||||
</div>
|
placeholder="Operation date">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
<div class="form-group">
|
||||||
<div class="col-sm-8">
|
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||||
<input class="form-control" id="label" name="label"
|
<div class="col-sm-8">
|
||||||
ng-model="$ctrl.operation.label" type="text" placeholder="Label">
|
<input class="form-control" id="label" name="label"
|
||||||
</input>
|
ng-model="operation.label" type="text" placeholder="Label">
|
||||||
</div>
|
</input>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
<div class="form-group">
|
||||||
<div class="col-sm-8">
|
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||||
<input class="form-control" id="value" name="value"
|
<div class="col-sm-8">
|
||||||
ng-model="$ctrl.operation.value" type="number" placeholder="Value">
|
<input class="form-control" id="value" name="value"
|
||||||
</input>
|
ng-model="operation.value" type="number" placeholder="Value">
|
||||||
</div>
|
</input>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
<div class="form-group">
|
||||||
<div class="col-sm-8">
|
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||||
<input class="form-control" id="category" name="category"
|
<div class="col-sm-8">
|
||||||
ng-model="$ctrl.operation.category" type="text" placeholder="Category">
|
<input class="form-control" id="category" name="category"
|
||||||
</input>
|
ng-model="operation.category" type="text" placeholder="Category">
|
||||||
</div>
|
</input>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">
|
<div class="modal-footer">
|
||||||
OK
|
<button class="btn btn-primary" type="button" ng-click="$save()">
|
||||||
</button>
|
OK
|
||||||
<button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">
|
</button>
|
||||||
Annuler
|
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||||
</button>
|
Annuler
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -103,7 +103,7 @@
|
|||||||
<!-- Delete operation, with confirm. -->
|
<!-- Delete operation, with confirm. -->
|
||||||
<button type="button" class="btn btn-default"
|
<button type="button" class="btn btn-default"
|
||||||
ng-if="operation.id && !operation.scheduled_operation_id"
|
ng-if="operation.id && !operation.scheduled_operation_id"
|
||||||
ng-click="operationsCtrl.delete(operation)">
|
ng-click="operationsCtrl.confirmDelete(operation)">
|
||||||
<span class="fa fa-trash-o"></span>
|
<span class="fa fa-trash-o"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user