Refactoring.

This commit is contained in:
Alexis Lahouze 2015-08-18 17:15:56 +02:00
parent cf657c1ad7
commit a23d653738
2 changed files with 146 additions and 209 deletions

View File

@ -26,23 +26,21 @@ accountantApp
.controller( .controller(
"SchedulerController", [ "SchedulerController", [
"$scope", "$rootScope", "$routeParams", "ScheduledOperations", "$scope", "$rootScope", "$routeParams", "notificationService", "ScheduledOperations",
function($scope, $rootScope, $routeParams, ScheduledOperations) { function($scope, $rootScope, $routeParams, notificationService, ScheduledOperations) {
// Operations store and selection // Operations store and selection
$scope.operations = []; $scope.operations = [];
$scope.selectedOperation = null;
// Placeholder for saved value to cancel entry edition
$scope.savedOperation = null;
$scope.categories = []; $scope.categories = [];
$scope.resetNewOperation = function() { $scope.addOperation = function() {
$scope.newOperation = new ScheduledOperations({}); if(! $scope.inserted) {
$scope.inserted = new ScheduledOperations({});
$scope.inserted.account_id = $routeParams.accountId;
$scope.operations.splice(0, 0, $scope.inserted);
}
}; };
$scope.resetNewOperation();
$scope.loadOperations = function(accountId) { $scope.loadOperations = function(accountId) {
// Clean up selected entry. // Clean up selected entry.
$scope.selectedOperation = null; $scope.selectedOperation = null;
@ -50,95 +48,44 @@ accountantApp
$scope.operations = ScheduledOperations.query({ $scope.operations = ScheduledOperations.query({
account: $routeParams.accountId account: $routeParams.accountId
}, function(data) {
$scope.$emit("operationsLoadedEvent", {operations: data});
}); });
}; };
// Returns true if the entry is in editing state.
$scope.isEditing = function(operation) {
return operation.state === 'edit';
};
$scope.isDisplaying = function(operation) {
return !operation.state;
};
$scope.createOperation = function(operation) {
operation.account_id = $routeParams.accountId;
operation.$save(function(data) {
$scope.resetNewOperation();
$scope.$emit("operationCreatedEvent", data);
});
};
// Notify on success.
$scope.$on("operationCreatedEvent", function(e, operation) {
new PNotify({
type: "success",
title: "Save",
text: "Operation #" + operation.id + " created."
});
});
// Save operation. // Save operation.
$scope.saveOperation = function(operation) { $scope.saveOperation = function($data, $index) {
operation.$save(function(data) { var operation;
$scope.$emit("operationSavedEvent", operation);
});
};
// Notify on success. if($data.$save) {
$scope.$on("operationSavedEvent", function(e, operation) { operation = $data;
new PNotify({ } else {
type: "success", operation = $scope.operations[$index];
title: "Save", operation = angular.merge(operation, $data);
text: "Operation #" + operation.id + " saved." }
var promise = operation.$save()
if(operation == $scope.inserted) {
promise = promise.then(function(data) {
$scope.inserted = false;
return data;
}); });
}); }
$scope.editOperation = function(operation) { return promise.then(function(data) {
// Enter edit state. notificationService.success("Operation #" + data.id + " saved.");
operation.state='edit'; return data;
});
}; };
// Reload operation from server to cancel edition. // Reload operation from server to cancel edition.
$scope.cancelEditOperation = function(operation) { $scope.cancelEditOperation = function(operation, rowform) {
operation.$get(); if(operation == $scope.inserted) {
}; $scope.entries.splice(0, 1);
} else {
// Remove an operation. rowform.$cancel();
$scope.removeOperation = function(operation, modalScope) {
operation.$delete(function(data) {
new PNotify({
type: "success",
title: "Delete",
text: "Operation #" + operation.id + " deleted."
});
// Send the "entry removed" event.
$scope.$emit("operationRemovedEvent", operation);
$scope.closeModal(modalScope);
});
};
// Close modal.
$scope.closeModal = function(modalScope) {
// Close the modal dialog
if(modalScope && modalScope.dismiss) {
modalScope.dismiss();
} }
}; };
// Load operations on account selection.
// FIXME Alexis Lahouze 2015-07-15 Deprecated.
$rootScope.$on("accountSelectedEvent", function(event, args){
$scope.loadOperations(args.account.id);
});
// Load operations on controller initialization. // Load operations on controller initialization.
$scope.loadOperations($routeParams.accountId); $scope.loadOperations($routeParams.accountId);
}]); }]);

View File

@ -16,139 +16,129 @@
--> -->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<!-- Row with entry table --> <!-- Row with entry table -->
<div class="row"> <div>
<table class="table table-striped table-condensed table-hover"> <div class="row">
<!-- Head of the table containing column headers and size --> <div class="col-md-3 col-md-offset-1">
<thead> <button class="btn btn-success" ng-click="addOperation()">Ajouter</button>
<tr> </div>
<th style="width: 120px">Date de d&eacute;but</th> </div>
<th style="width: 120px">Date de fin</th>
<th style="width: 20px">Jour</th>
<th style="width: 20px">Fr&eacute;q.</th>
<th>Libell&eacute; de l'op&eacute;ration</th>
<th style="width: 50px">Montant</th>
<th style="width: 100px">Cat&eacute;gorie</th>
<th style="width: 60px">Actions</th>
</tr>
</thead>
<!-- Body of the table containing the entries --> <div class="row">
<tbody> <table class="table table-striped table-condensed table-hover">
<tr class="form-inline"> <!-- Head of the table containing column headers and size -->
<td> <thead>
<input type="text" class="form-control input-sm" ng-model="newOperation.start_date" data-date-format="yyyy-MM-dd" bs-datepicker/> <tr>
</td> <th class="col-md-1">Date de d&eacute;but</th>
<th class="col-md-1">Date de fin</th>
<th class="col-md-1">Jour</th>
<th class="col-md-1">Fr&eacute;q.</th>
<th>Libell&eacute; de l'op&eacute;ration</th>
<th class="col-md-1">Montant</th>
<th class="col-md-2">Cat&eacute;gorie</th>
<th class="col-md-1">Actions</th>
</tr>
</thead>
<td> <!-- Body of the table containing the entries -->
<input type="text" class="form-control input-sm" ng-model="newOperation.stop_date" data-date-format="yyyy-MM-dd" bs-datepicker/> <tbody>
</td> <tr id="{{ operation.id }}" class="form-inline"
ng-repeat="operation in operations">
<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" }}
</span>
</td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="newOperation.day"/> <span editable-text="operation.stop_date"
</td> 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" }}
</span>
</td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="newOperation.frequency"/> <span editable-number="operation.day"
</td> e-style="width: 100%"
e-name="day" e-form="rowform" e-required>
{{ operation.day }}
</span>
</td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="newOperation.label"/> <span editable-number="operation.frequency"
</td> e-style="width: 100%"
e-name="frequency" e-form="rowform" e-required>
{{ operation.frequency }}
</span>
</td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="newOperation.value"/> <span editable-text="operation.label"
</td> e-style="width: 100%"
e-placeholder="Libellé de l'opération"
e-name="label" e-form="rowform" e-required>
{{ operation.label }}
</span>
</td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="newOperation.category" bs-typeahead="categories"/> <span editable-number="operation.value"
</td> e-style="width: 100%"
e-name="value" e-form="rowform" e-required>
{{ operation.value }}
</span>
</td>
<td> <td>
<div class="btn-group"> <span editable-text="operation.category"
<button class="btn btn-xs btn-success" ng-click="createOperation(newOperation)" title="Save"> e-style="width: 100%"
<span class="fa fa-plus"></span> e-name="category" e-form="rowform">
</button> {{ operation.category }}
</span>
</td>
<button class="btn btn-xs btn-default" ng-click="resetNewOperation()" title="Cancel"> <td>
<span class="fa fa-times"></span> <form editable-form name="rowform"
</button> onbeforesave="saveOperation($data, $index)"
</div> shown="operation == inserted">
</td> <div class="btn-group">
</tr> <!-- Save current operation -->
<button type="submit" class="btn btn-xs btn-success"
ng-if="rowform.$visible" title="Save">
<span class="fa fa-floppy-o"></span>
</button>
<tr id="operation_{{operation.id}}" class="form-inline" <!-- Edit operation. -->
ng-repeat-start="operation in operations" <button type="button" class="btn btn-xs btn-default"
ng-if="isDisplaying(operation)"> ng-if="!rowform.$visible"
<td>{{operation.start_date}}</td> ng-click="rowform.$show()" title="edit">
<span class="fa fa-pencil-square-o"></span>
</button>
<td>{{operation.stop_date}}</td> <!-- Cancel edit. -->
<button type="button" class="btn btn-xs btn-default"
ng-if="rowform.$visible"
ng-click="cancelEditOperation(operations, rowform)"
title="Cancel">
<span class="fa fa-times"></span>
</button>
<td>{{operation.day}}</td> <!-- Remove operation. -->
<button type="button" class="btn btn-xs btn-default"
<td>{{operation.frequency}}</td> bs-modal="static/templates/operation_remove.html"
title="remove">
<td>{{operation.label}}</td> <span class="fa fa-trash"></span>
</button>
<td>{{operation.value}}</td> </div>
</form>
<td>{{operation.category}}</td> </td>
</tr>
<td> </tbody>
<div class="btn-group"> </table>
<button class="btn btn-xs btn-default" ng-click="editOperation(operation)" title="edit"> </div>
<span class="fa fa-pencil-square-o"></span>
</button>
<button class="btn btn-xs btn-default" bs-modal="static/templates/operation_remove.html" title="remove">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
<tr id="operation_{{operation.id}}" class="form-inline"
ng-repeat-end
ng-if="isEditing(operation)">
<td>
<input type="text" class="form-control input-sm" ng-model="operation.start_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.stop_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.day"/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.frequency"/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.label"/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.value"/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="operation.category" bs-typeahead="categories"/>
</td>
<td>
<div class="btn-group">
<button class="btn btn-xs btn-success" ng-click="saveOperation(operation)" title="Save">
<span class="fa fa-floppy-o"></span>
</button>
<button class="btn btn-xs btn-default" ng-click="cancelEditOperation(operation)" title="Cancel">
<span class="fa fa-times"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>