Use angular-ui-bootstrap instead of ngBootbox, remove usage of xeditable.
This commit is contained in:
parent
13320602bf
commit
ddb0b08ef2
@ -20,23 +20,18 @@
|
|||||||
|
|
||||||
var angular = require('angular');
|
var angular = require('angular');
|
||||||
|
|
||||||
|
var scheduleFormTmpl = require('./schedule.form.tmpl.html'),
|
||||||
|
scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
|
||||||
|
|
||||||
var ngMessages = require('angular-messages'),
|
var ngMessages = require('angular-messages'),
|
||||||
|
ngUiBootstrap = require('angular-ui-bootstrap'),
|
||||||
ngUiNotification = require('angular-ui-notification'),
|
ngUiNotification = require('angular-ui-notification'),
|
||||||
ngBootbox = require('ngbootbox'),
|
ngStrap = require('angular-strap');
|
||||||
ngStrap = require('angular-strap'),
|
|
||||||
ngXEditable = require('angular-xeditable');
|
|
||||||
|
|
||||||
// Note: ngBootbox seems to have no module.exports.
|
|
||||||
ngBootbox = 'ngBootbox';
|
|
||||||
|
|
||||||
// Note: angular-xeditable seems to have no module.exports.
|
|
||||||
ngXEditable = 'xeditable';
|
|
||||||
|
|
||||||
var schedulerModule = angular.module('accountant.scheduler', [
|
var schedulerModule = angular.module('accountant.scheduler', [
|
||||||
ngMessages,
|
ngMessages,
|
||||||
|
ngUiBootstrap,
|
||||||
ngUiNotification,
|
ngUiNotification,
|
||||||
ngBootbox,
|
|
||||||
ngXEditable,
|
|
||||||
ngStrap
|
ngStrap
|
||||||
])
|
])
|
||||||
|
|
||||||
@ -53,7 +48,7 @@ var schedulerModule = angular.module('accountant.scheduler', [
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|
||||||
.controller('SchedulerController', function($rootScope, $routeParams, $ngBootbox, Notification, ScheduledOperation) {
|
.controller('SchedulerController', function($rootScope, $routeParams, Notification, ScheduledOperation, $log, $uibModal, $q) {
|
||||||
var vm = this;
|
var vm = this;
|
||||||
|
|
||||||
// Operation store.
|
// Operation store.
|
||||||
@ -68,15 +63,14 @@ var schedulerModule = angular.module('accountant.scheduler', [
|
|||||||
account_id: $routeParams.accountId
|
account_id: $routeParams.accountId
|
||||||
});
|
});
|
||||||
|
|
||||||
// Insert new operation at the beginning of the array.
|
return vm.modify(operation);
|
||||||
vm.operations.splice(0, 0, operation);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Load operations.
|
* Load operations.
|
||||||
*/
|
*/
|
||||||
vm.load = function() {
|
vm.load = function() {
|
||||||
vm.operations = ScheduledOperation.query({
|
return ScheduledOperation.query({
|
||||||
// eslint-disable-next-line camelcase
|
// eslint-disable-next-line camelcase
|
||||||
account_id: $routeParams.accountId
|
account_id: $routeParams.accountId
|
||||||
});
|
});
|
||||||
@ -85,57 +79,153 @@ var schedulerModule = angular.module('accountant.scheduler', [
|
|||||||
/*
|
/*
|
||||||
* Save operation.
|
* Save operation.
|
||||||
*/
|
*/
|
||||||
vm.save = function($data, $index) {
|
vm.save = function(operation) {
|
||||||
var operation;
|
return operation.$save().then(function(operation) {
|
||||||
|
Notification.success('Scheduled operation #' + operation.id + ' saved.');
|
||||||
|
|
||||||
if ($data.$save) {
|
vm.operations = vm.load();
|
||||||
operation = $data;
|
|
||||||
} else {
|
|
||||||
operation = vm.operations[$index];
|
|
||||||
operation = angular.merge(operation, $data);
|
|
||||||
}
|
|
||||||
|
|
||||||
return operation.$save().then(function(data) {
|
return operation;
|
||||||
Notification.success('Operation #' + data.id + ' saved.');
|
}, function(result){
|
||||||
|
$log.error('Error while saving scheduled operation', operation, result);
|
||||||
|
|
||||||
|
Notification.error(
|
||||||
|
'Error while saving scheduled operation: ' + result.message
|
||||||
|
);
|
||||||
|
|
||||||
|
return $q.reject(result);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Cancel operation edition. Delete if new.
|
|
||||||
*/
|
|
||||||
vm.cancelEdit = function(operation, rowform, $index) {
|
|
||||||
if (operation.id) {
|
|
||||||
rowform.$cancel();
|
|
||||||
} else {
|
|
||||||
vm.operations.splice($index, 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Delete operation.
|
* Delete operation.
|
||||||
*/
|
*/
|
||||||
vm.delete = function(operation, $index) {
|
vm.delete = function(operation) {
|
||||||
var id = operation.id;
|
var id = operation.id;
|
||||||
|
|
||||||
$ngBootbox.confirm(
|
$uibModal.open({
|
||||||
'Voulez-vous supprimer l\'operation planifiée \\\'' + operation.label + '\\\' ?',
|
component: 'scheduleDeleteModalComponent',
|
||||||
function(result) {
|
resolve: {
|
||||||
if (result) {
|
operation: function() {
|
||||||
operation.$delete().then(function() {
|
return operation;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).result.then(function(operation) {
|
||||||
|
return operation.$delete().then(function() {
|
||||||
Notification.success('Operation #' + id + ' deleted.');
|
Notification.success('Operation #' + id + ' deleted.');
|
||||||
|
|
||||||
// Remove account from array.
|
vm.operations = vm.load();
|
||||||
vm.operations.splice($index, 1);
|
|
||||||
});
|
return operation;
|
||||||
}
|
}, function(result) {
|
||||||
}
|
Notification.error(
|
||||||
|
'An error occurred while trying to delete operation #' +
|
||||||
|
id + ':<br />' + result
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return $q.reject(result);
|
||||||
|
});
|
||||||
|
}, function() {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Open the popup to modify the operation, save it on confirm.
|
||||||
|
* @returns a promise.
|
||||||
|
*/
|
||||||
|
vm.modify = function(operation) {
|
||||||
|
return $uibModal.open({
|
||||||
|
component: 'scheduleModifyModalComponent',
|
||||||
|
resolve: {
|
||||||
|
operation: function() {
|
||||||
|
return operation;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).result.then(function(operation) {
|
||||||
|
return vm.save(operation);
|
||||||
|
}, function() {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// Load operations on controller initialization.
|
// Load operations on controller initialization.
|
||||||
vm.load();
|
vm.operations = vm.load();
|
||||||
})
|
})
|
||||||
|
|
||||||
;
|
.component('scheduleModifyModalComponent', {
|
||||||
|
templateUrl: scheduleFormTmpl,
|
||||||
|
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 "Scheduled operation #" + vm.operation.id;
|
||||||
|
} else {
|
||||||
|
return "Scheduled operation";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.component('scheduleDeleteModalComponent', {
|
||||||
|
templateUrl: scheduleDeleteTmpl,
|
||||||
|
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 "Scheduled operation #" + vm.operation.id;
|
||||||
|
} else {
|
||||||
|
return "Scheduled operation";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
module.exports = schedulerModule;
|
module.exports = schedulerModule;
|
||||||
|
16
src/scheduler/schedule.delete.tmpl.html
Normal file
16
src/scheduler/schedule.delete.tmpl.html
Normal 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 l'opération #{{ $ctrl.operation.id }} ayant pour libellé :<br/>{{ $ctrl.operation.label }}
|
||||||
|
</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>
|
||||||
|
|
99
src/scheduler/schedule.form.tmpl.html
Normal file
99
src/scheduler/schedule.form.tmpl.html
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<!--
|
||||||
|
This file is part of Accountant.
|
||||||
|
|
||||||
|
Accountant is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
Accountant is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||||
|
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
||||||
|
<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">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-4 control-label" for="start-date">Date de début</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="start-date" name="start_date"
|
||||||
|
type="text" ng-model="$ctrl.operation.start_date"
|
||||||
|
bs-datepicker data-date-format="yyyy-MM-dd"
|
||||||
|
placeholder="Scheduled operation start date">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-4 control-label" for="stop-date">Date de fin</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="stop-date" name="stop_date"
|
||||||
|
type="text" ng-model="$ctrl.operation.stop_date"
|
||||||
|
bs-datepicker data-date-format="yyyy-MM-dd"
|
||||||
|
placeholder="Scheduled operation stop date">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-4 control-label" for="day">Jour</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="day" name="day"
|
||||||
|
ng-model="$ctrl.operation.day" type="number" placeholder="Day">
|
||||||
|
</input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input class="form-control" id="frequency" name="frequency"
|
||||||
|
ng-model="$ctrl.operation.frequency" type="number" placeholder="Frequency">
|
||||||
|
</input>
|
||||||
|
</div>
|
||||||
|
</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="$ctrl.operation.label" type="text" placeholder="Label">
|
||||||
|
</input>
|
||||||
|
</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="$ctrl.operation.value" type="number" placeholder="Value">
|
||||||
|
</input>
|
||||||
|
</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="$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>
|
@ -42,99 +42,49 @@
|
|||||||
<tr id="{{ operation.id }}" class="form-inline"
|
<tr id="{{ operation.id }}" class="form-inline"
|
||||||
ng-repeat="operation in schedulerCtrl.operations">
|
ng-repeat="operation in schedulerCtrl.operations">
|
||||||
<td class="col-md-1">
|
<td class="col-md-1">
|
||||||
<span editable-text="operation.start_date"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-bs-datepicker e-data-date-format="yyyy-MM-dd"
|
|
||||||
e-name="start_date" e-form="rowform" e-required>
|
|
||||||
{{ operation.start_date | date: "yyyy-MM-dd" }}
|
{{ operation.start_date | date: "yyyy-MM-dd" }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-text="operation.stop_date"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-bs-datepicker e-data-date-format="yyyy-MM-dd"
|
|
||||||
e-name="stop_date" e-form="rowform" e-required>
|
|
||||||
{{ operation.stop_date | date: "yyyy-MM-dd" }}
|
{{ operation.stop_date | date: "yyyy-MM-dd" }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-number="operation.day"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-name="day" e-form="rowform" e-required>
|
|
||||||
{{ operation.day }}
|
{{ operation.day }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-number="operation.frequency"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-name="frequency" e-form="rowform" e-required>
|
|
||||||
{{ operation.frequency }}
|
{{ operation.frequency }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-text="operation.label"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-placeholder="Libellé de l'opération"
|
|
||||||
e-name="label" e-form="rowform" e-required>
|
|
||||||
{{ operation.label }}
|
{{ operation.label }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-number="operation.value"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-name="value" e-form="rowform" e-required>
|
|
||||||
{{ operation.value | currency : "€" }}
|
{{ operation.value | currency : "€" }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<span editable-text="operation.category"
|
|
||||||
e-style="width: 100%"
|
|
||||||
e-name="category" e-form="rowform">
|
|
||||||
{{ operation.category }}
|
{{ operation.category }}
|
||||||
</span>
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<form editable-form name="rowform"
|
|
||||||
onbeforesave="schedulerCtrl.save($data, $index)"
|
|
||||||
shown="!operation.id">
|
|
||||||
<div class="btn-group btn-group-xs">
|
<div class="btn-group btn-group-xs">
|
||||||
<!-- Save current operation -->
|
|
||||||
<button type="submit" class="btn btn-success"
|
|
||||||
ng-if="rowform.$visible" title="Save">
|
|
||||||
<span class="fa fa-floppy-o"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Edit operation. -->
|
<!-- Edit operation. -->
|
||||||
<button type="button" class="btn btn-default"
|
<button type="button" class="btn btn-default"
|
||||||
ng-if="!rowform.$visible"
|
ng-click="schedulerCtrl.modify(operation)" title="edit">
|
||||||
ng-click="rowform.$show()" title="edit">
|
|
||||||
<span class="fa fa-pencil-square-o"></span>
|
<span class="fa fa-pencil-square-o"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Cancel edit. -->
|
|
||||||
<button type="button" class="btn btn-default"
|
|
||||||
ng-if="rowform.$visible"
|
|
||||||
ng-click="schedulerCtrl.cancelEdit(operation, rowform, $index)"
|
|
||||||
title="Cancel">
|
|
||||||
<span class="fa fa-times"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Remove operation. -->
|
<!-- Remove operation. -->
|
||||||
<button type="button" class="btn btn-default"
|
<button type="button" class="btn btn-default"
|
||||||
ng-if="operation.id"
|
ng-if="operation.id"
|
||||||
ng-click="schedulerCtrl.delete(operation, $index)"
|
ng-click="schedulerCtrl.delete(operation)"
|
||||||
title="remove">
|
title="remove">
|
||||||
<span class="fa fa-trash"></span>
|
<span class="fa fa-trash"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
Loading…
Reference in New Issue
Block a user