Rewrote entry management.

This commit is contained in:
Alexis Lahouze 2015-08-16 00:40:51 +02:00
parent caa68a7385
commit 913b39076e
2 changed files with 167 additions and 233 deletions

View File

@ -26,8 +26,8 @@ accountantApp
.controller( .controller(
"EntryController", [ "EntryController", [
"$scope", "$http", "$rootScope", "$filter", "$routeParams", "Entries", "$scope", "$http", "$rootScope", "$filter", "$routeParams", "notificationService", "Entries",
function($scope, $http, $rootScope, $filter, $routeParams, Entries) { function($scope, $http, $rootScope, $filter, $routeParams, notificationService, Entries) {
// Range for entries. // Range for entries.
$scope.begin = moment.utc().startOf('month'); $scope.begin = moment.utc().startOf('month');
$scope.end = moment.utc().endOf('month'); $scope.end = moment.utc().endOf('month');
@ -39,15 +39,15 @@ accountantApp
$scope.account = null; $scope.account = null;
// Function to reset the new entry. // Function to reset the new entry.
$scope.resetNewEntry = function() { $scope.addEntry = function() {
// The new entry. if(!$scope.inserted) {
$scope.newEntry = new Entries({}); $scope.inserted = new Entries();
$scope.inserted.account_id = $routeParams.accountId;
$scope.entries.splice(0, 0, $scope.inserted);
}
}; };
$scope.resetNewEntry();
$scope.setExtremes = function(e) { $scope.setExtremes = function(e) {
begin = moment.utc(e.min); begin = moment.utc(e.min);
end = moment.utc(e.max); end = moment.utc(e.max);
@ -279,6 +279,9 @@ accountantApp
$scope.getAccountStatus($routeParams.accountId); $scope.getAccountStatus($routeParams.accountId);
}); });
/*
* Get account status.
*/
$scope.getAccountStatus = function(accountId) { $scope.getAccountStatus = function(accountId) {
$scope.categoriesChartConfig.loading = true; $scope.categoriesChartConfig.loading = true;
@ -335,94 +338,72 @@ accountantApp
}); });
}; };
// Starts editing an entry
$scope.editEntry = function(entry) {
// Enter edit state.
entry.confirmed=true;
entry.editing=true;
};
// Cancel current editing entry or clears field if a new one. // Cancel current editing entry or clears field if a new one.
$scope.cancelEditEntry = function(entry) { $scope.cancelEditEntry = function(entry, rowform) {
sold = entry.sold; if(entry == $scope.inserted) {
entry.$get(function(entry) { $scope.entries.splice(0, 1);
entry.sold = sold; } else {
}); rowform.$cancel();
}
}; };
// Points an entry. /*
$scope.togglePointedEntry = function(entry) { * Toggle pointed indicator for an entry.
entry.confirmed = true; */
$scope.togglePointedEntry = function(entry, rowform) {
entry.pointed = !entry.pointed; entry.pointed = !entry.pointed;
// Save entry if not editing it.
if(!rowform.$visible) {
$scope.saveEntry(entry); $scope.saveEntry(entry);
}
}; };
// Confirm an entry. /*
$scope.confirmEntry = function(entry) { * Toggle cancel indicator for an entry.
entry.confirmed = true; */
$scope.saveEntry(entry);
};
// Confirm an entry.
$scope.toggleCanceledEntry = function(entry) { $scope.toggleCanceledEntry = function(entry) {
entry.canceled = !entry.canceled; entry.canceled = !entry.canceled;
$scope.saveEntry(entry); $scope.saveEntry(entry);
}; };
// Create an new entry. /*
$scope.createEntry = function(entry) { * Save an entry and emit entrySavedEvent, or entryCreatedEvent.
entry.account_id = $scope.account.id; */
$scope.saveEntry = function($data, $index) {
// Check if $data is already a resource.
var entry;
// Ajax call to create an entry if($data.$save) {
$scope.newEntry.$save(function(data) { entry = $data;
$scope.resetNewEntry(); } else {
entry = $scope.entries[$index];
// Send the "entry saved" event. entry = angular.merge(entry, $data);
$scope.$emit("entryCreatedEvent", entry);
});
};
$rootScope.$on("entryCreatedEvent", function(e, entry) {
new PNotify({
type: "success",
title: "Save",
text: "Entry #" + entry.id + " created."
});
});
// Saves an existing entry.
$scope.saveEntry = function(entry) {
if(!entry.account_id) {
entry.account_id = $scope.account.id;
} }
sold = entry.sold; entry.confirmed = true;
// Ajax call to save an entry var promise = entry.$save();
entry.$save(function(data) {
data.sold = sold;
// Send the "entry saved" event. if(entry == $scope.inserted) {
$scope.$emit("entrySavedEvent", entry); promise = promise.then(function(data) {
$scope.inserted = false;
notificationService.success("Entry #" + data.id + " created.");
}); });
}; } else {
promise = promise.then(function(data) {
notificationService.success("Entry #" + data.id + " saved.");
});
}
$rootScope.$on("entrySavedEvent", function(e, entry) { promise = promise.then(function(data) {
$scope.getAccountStatus($routeParams.accountId); $scope.getAccountStatus($routeParams.accountId);
}); });
$rootScope.$on("entrySavedEvent", function(e, entry) { return promise;
new PNotify({ };
type: "success",
title: "Save",
text: "Entry #" + entry.id + " saved."
});
});
$scope.removeEntry = function(entry) { $scope.removeEntry = function(entry) {
$scope.removingEntry = entry; $scope.removingEntry = entry;

View File

@ -16,16 +16,23 @@
--> -->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<!-- Chart row --> <!-- Chart row -->
<div class="row"> <div>
<div class="row">
<!-- Sold evolution chart placeholder --> <!-- Sold evolution chart placeholder -->
<highchart id="sold-chart" config="soldChartConfig" class="col-md-8"></highchart> <highchart id="sold-chart" config="soldChartConfig" class="col-md-8"></highchart>
<!-- Category piechart --> <!-- Category piechart -->
<highchart id="categories-chart" config="categoriesChartConfig" class="col-md-4"></highchart> <highchart id="categories-chart" config="categoriesChartConfig" class="col-md-4"></highchart>
</div> </div>
<!-- Row with entry table --> <div class="row">
<div class="row"> <div class="col-md-3 col-md-offset-1">
<button class="btn btn-success" ng-click="addEntry()">Ajouter</button>
</div>
</div>
<!-- Row with entry table -->
<div class="row">
<table class="table table-condensed table-hover"> <table class="table table-condensed table-hover">
<!-- Head of the table containing column headers and size --> <!-- Head of the table containing column headers and size -->
<thead> <thead>
@ -41,137 +48,83 @@
<!-- Body of the table containing the entries --> <!-- Body of the table containing the entries -->
<tbody> <tbody>
<!-- The new entry row. -->
<tr class="form-inline">
<td class="col-md-1">
<input type="text" class="form-control input-sm" ng-model="newEntry.operation_date" data-date-format="yyyy-MM-dd" bs-datepicker/>
</td>
<td>
<input type="text" class="form-control input-sm" ng-model="newEntry.label"/>
</td>
<td class="col-md-1">
<input type="text" class="form-control input-sm" ng-model="newEntry.value"/>
</td>
<td class="col-md-1">
<!-- The new entry has no sold. -->
</td>
<td class="col-md-3">
<input type="text" class="form-control input-sm" ng-model="newEntry.category"/>
</td>
<td class="col-md-2">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-success"
ng-click="createEntry(newEntry)" title="Save">
<span class="fa fa-plus"></span>
</button>
<button type="button" class="btn btn-xs btn-default"
ng-click="newEntry.pointed=!newEntry.pointed"
ng-class="{active: newEntry.pointed}" title="point">
<span ng-class="{'fa fa-check-square-o': newEntry.pointed, 'fa fa-square-o': !newEntry.pointed}"></span>
</button>
<button type="button" class="btn btn-xs btn-default"
ng-click="resetNewEntry()" title="Cancel">
<span class="fa fa-times"></span>
</button>
</div>
</td>
</tr>
<!-- Row for an editing entry. --> <!-- Row for an editing entry. -->
<tr id="entry_{{entry.id}}" class="form-inline" <tr id="{{entry.id}}" class="form-inline"
ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}" ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
ng-repeat-start="entry in entries" ng-if="entry.editing"> ng-repeat="entry in entries">
<td class="col-md-1"> <td>
<input type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-MM-dd" bs-datepicker/> <span editable-text="entry.operation_date" e-data-date-format="yyyy-MM-dd" e-bs-datepicker e-class="input-sm" e-form="rowform" e-required>
<small>{{ entry.operation_date | date:"yyyy-MM-dd" }}</small>
</span>
</td> </td>
<td> <td>
<input type="text" class="form-control input-sm" ng-model="entry.label"/> <span editable-text="entry.label" e-class="input-sm" e-placeholder="Libélé de l'opération" e-name="label" e-form="rowform" e-required>
<small>{{ entry.label }}</small>
</span>
</td> </td>
<td class="col-md-1 col-xs-1"> <td>
<input type="text" class="form-control input-sm" ng-model="entry.value"/> <span editable-number="entry.value" e-class="input-sm" e-name="value" e-form="rowform" e-required>
<small>{{ entry.value }}</small>
</span>
</td> </td>
<td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}"> <td ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
<small>{{entry.sold}}</small> <small>{{ entry.sold }}</small>
</td> </td>
<td class="col-md-3"> <td>
<input type="text" class="form-control input-sm" ng-model="entry.category"/> <span editable-text="entry.category" e-class="input-sm" e-placeholder="Catégorie" e-form="rowform" e-required>
<small>{{ entry.category }}</small>
</span>
</td> </td>
<td class="col-md-2"> <td>
<form editable-form name="rowform" onbeforesave="saveEntry($data, $index)" shown="entry == inserted">
<!-- new row buttons -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-xs btn-success" ng-click="saveEntry(entry)" title="Save"> <!-- Save current entry, for editing and non-confirmed non-canceled entries -->
<button type="submit" class="btn btn-xs btn-success"
ng-if="!entry.canceled && (!entry.confirmed || rowform.$visible)"
title="Save">
<span class="fa fa-floppy-o"></span> <span class="fa fa-floppy-o"></span>
</button> </button>
<button type="button" class="btn btn-xs btn-default" ng-click="cancelEditEntry(entry)" title="Cancel"> <!-- Edit entry, for non-canceled and non-editing entries-->
<span class="fa fa-times"></span>
</button>
<button type="button" class="btn btn-xs btn-default" <button type="button" class="btn btn-xs btn-default"
ng-click="entry.pointed = !entry.pointed" ng-if="!entry.canceled && !rowform.$visible"
ng-class="{active: entry.pointed}" title="point"> ng-click="rowform.$show()" title="edit">
<span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
</button>
</div>
</td>
</tr>
<!-- Row for a displayed entry. -->
<tr id="entry_{{entry.id}}"
ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
ng-repeat-end ng-if="!entry.editing">
<td class="col-md-1">
<small><span>{{entry.operation_date | date:"yyyy-MM-dd"}}</span></small>
</td>
<td>
<small><span>{{entry.label}}</span></small>
</td>
<td class="col-md-1">
<small><span>{{entry.value}}</span></small>
</td>
<td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
<small>{{entry.sold}}</small>
</td>
<td class="col-md-3">
<small><span>{{entry.category}}</span></small>
</td>
<td class="col-md-2">
<!-- Button group for a saved entry. -->
<div class="btn-group">
<button class="btn btn-xs btn-success" ng-if="!entry.confirmed && !entry.canceled" ng-click="confirmEntry(entry)" title="Save">
<span class="fa fa-plus"></span>
</button>
<button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="editEntry(entry)" title="edit">
<span class="fa fa-pencil-square-o"></span> <span class="fa fa-pencil-square-o"></span>
</button> </button>
<button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="togglePointedEntry(entry)" ng-class="{active: entry.pointed}" title="point"> <!-- Cancel edition, for editing entries. -->
<button type="button" class="btn btn-xs btn-default"
ng-if="rowform.$visible"
ng-click="cancelEditEntry(entry, rowform)">
<span class="fa fa-times"></span>
</button>
<!-- Toggle pointed entry, for non-canceled entries. -->
<button type="button" class="btn btn-xs btn-default"
ng-if="!entry.canceled"
ng-click="togglePointedEntry(entry, rowform)"
ng-class="{active: entry.pointed}" title="point">
<span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span> <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
</button> </button>
<button class="btn btn-xs btn-default" ng-click="toggleCanceledEntry(entry)" ng-class="{active: entry.canceled}" title="cancel"> <!-- Toggle canceled entry, for non-editing entries. -->
<button type="button" class="btn btn-xs btn-default"
ng-click="toggleCanceledEntry(entry)"
ng-if="!rowform.$visible"
ng-class="{active: entry.canceled}" title="cancel">
<span class="fa fa-remove"></span> <span class="fa fa-remove"></span>
</button> </button>
</div> </div>
</form>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>