Use angular-ui-bootstrap for Operation modal.
This commit is contained in:
Alexis Lahouze
parent
3537470cff
commit
9acaa4033e
|
|
@ -58,7 +58,7 @@ var operationModule = angular.module('accountant.operations', [
|
|||
* Controller for the operations.
|
||||
*/
|
||||
.controller('OperationController', function($rootScope, $scope, $routeParams,
|
||||
$ngBootbox, Notification, Operation) {
|
||||
$ngBootbox, $uibModal, Notification, Operation, $log) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
|
|
@ -167,6 +167,23 @@ var operationModule = angular.module('accountant.operations', [
|
|||
);
|
||||
};
|
||||
|
||||
vm.modify = function(operation, $index) {
|
||||
$uibModal.open({
|
||||
component: 'operationModalComponent',
|
||||
resolve: {
|
||||
operation: function() {
|
||||
return operation;
|
||||
}
|
||||
}
|
||||
}).result.then(function(operation) {
|
||||
// FIXME Alexis Lahouze 2017-06-15 Save Operation and reload data to
|
||||
// update balances.
|
||||
$log.info('modal validated', operation);
|
||||
}, function() {
|
||||
$log.info('modal-component dismissed at: ' + new Date());
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Reload operations on rangeSelectedEvent.
|
||||
*/
|
||||
|
|
@ -181,56 +198,41 @@ var operationModule = angular.module('accountant.operations', [
|
|||
vm.load(moment().date(1).year(2000), moment());
|
||||
})
|
||||
|
||||
.directive('operationFormDialog', function($log, $ngBootbox) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
operation: '=ngModel'
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var title = 'Operation';
|
||||
.component('operationModalComponent', {
|
||||
templateUrl: operationFormTmpl,
|
||||
bindings: {
|
||||
resolve: '<',
|
||||
close: '&',
|
||||
dismiss: '&'
|
||||
},
|
||||
controller: function() {
|
||||
var vm = this;
|
||||
|
||||
if (scope.operation && scope.operation.id) {
|
||||
title = title + ' #' + scope.operation.id;
|
||||
}
|
||||
vm.$onInit = function() {
|
||||
vm.operation = vm.resolve.operation;
|
||||
};
|
||||
|
||||
scope.form = {};
|
||||
|
||||
element.on('click', function() {
|
||||
scope.data = {};
|
||||
angular.copy(scope.operation, scope.data);
|
||||
|
||||
// Open dialog with form.
|
||||
$ngBootbox.customDialog({
|
||||
scope: scope,
|
||||
title: title,
|
||||
templateUrl: operationFormTmpl,
|
||||
onEscape: true,
|
||||
buttons: {
|
||||
save: {
|
||||
label: 'Save',
|
||||
className: 'btn-success',
|
||||
callback: function() {
|
||||
// Validate form
|
||||
$log.log(scope.form);
|
||||
|
||||
// Save operation
|
||||
$log.log(scope.operation);
|
||||
|
||||
// TODO Alexis Lahouze 2016-05-24 Save operation, handle return.
|
||||
return false;
|
||||
}
|
||||
},
|
||||
cancel: {
|
||||
label: 'Cancel',
|
||||
className: 'btn-default',
|
||||
callback: true
|
||||
}
|
||||
}
|
||||
});
|
||||
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";
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = operationModule;
|
||||
|
|
|
|||
|
|
@ -16,43 +16,56 @@
|
|||
-->
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
||||
<form class="form-horizontal" role="form" name="form">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="operation-date" name="operation_date" ng-model="data.operation_date"
|
||||
type="text" bs-datepicker data-date-format="yyyy-MM-dd"
|
||||
placeholder="Operation date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ $ctrl.title() }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="label" name="label"
|
||||
ng-model="data.label"
|
||||
type="text" placeholder="Label">
|
||||
</input>
|
||||
<div class="modal-body" id="modal-body">
|
||||
<form class="form-horizontal simple-form">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="operation-date" name="operation_date"
|
||||
type="text" ng-model="$ctrl.operation.operation_date"
|
||||
bs-datepicker data-date-format="yyyy-MM-dd"
|
||||
placeholder="Operation date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="value" name="value"
|
||||
ng-model="data.value"
|
||||
type="number" placeholder="Value">
|
||||
</input>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="label" name="label"
|
||||
ng-model="$ctrl.operation.label" type="text" placeholder="Label">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="category" name="category"
|
||||
ng-model="data.category"
|
||||
type="text" placeholder="Category">
|
||||
</input>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="value" name="value"
|
||||
ng-model="$ctrl.operation.value" type="number" placeholder="Value">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="category" name="category"
|
||||
ng-model="$ctrl.operation.category" type="text" placeholder="Category">
|
||||
</input>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
<!-- Edit operation, for non-canceled operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
operation-form-dialog ng-model="operation" title="edit">
|
||||
ng-click="operationsCtrl.modify(operation, $index)" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue