alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve 'add entry' feature.

Browse Source
This commit is contained in:
Alexis Lahouze 2013-01-24 19:31:37 +01:00
parent cfef22ee65
commit c5e7b8c94b
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/html/index.html
View File

@ -54,15 +54,10 @@
</div>
</div>
<div class="row-fluid">
<div id="message-placeholder"></div>
</div>
<div class="row-fluid">
<a class="btn btn-primary" data-bind="click: $root.add" href="#" title="Add entry"><i class="icon-plus"></i>&nbsp;Ajouter une entr&eacute;e</a>
</div>
<div class="row-fluid">
<table class="table table-striped table-condensed table-hover">
<thead>
@ -160,8 +155,8 @@
<td data-bind="text: pointedsold"></td>
<td><input type="text" class="input-small" data-bind="value: category"/></td>
<td class="buttons">
<a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-ban-circle"></i></a>
<a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="save"><i data-bind="css: {'icon-plus': $root.newEntry() === $data, 'icon-ok': $root.newEntry() != $data }"></i></a>
<a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="cancel"><i data-bind="css: {'icon-remove': $root.newEntry() === $data, 'icon-ban-circle': $root.newEntry() != $data }"></i></a>
</td>
</tr>
</script>

67
src/html/js/entries.js
View File

@ -51,6 +51,17 @@ var ListViewModel = function() {
// Entry store and selection
self.entries = ko.observableArray([]);
self.selectedItem = ko.observable();
self.newEntry = ko.observable(ko.mapping.fromJS({
id: null,
value_date: null,
operation_date: null,
label: null,
value: null,
sold: null,
pointedsold: null,
category: null,
account_id: null
}));
// Placeholder for saved value to cancel entry edition
self.savedItem = null;
@ -179,7 +190,7 @@ var ListViewModel = function() {
// Transform to an array readable by jqplot Line renderer.
var chartValues = [];
$.each(entries, function(index, entry) {
if(entry.value_date && unwrap(entry.value_date)) {
if(unwrap(entry.value_date) && unwrap(entry.sold)) {
chartValues.push([unwrap(entry.value_date), Number(unwrap(entry.sold))]);
}
});
@ -196,7 +207,10 @@ var ListViewModel = function() {
self.selectedItem(null);
// Update entries
self.entries(ko.utils.arrayMap($.parseJSON(data), ko.mapping.fromJS));
self.clearNewEntry()
var entries = [self.newEntry()].concat(ko.utils.arrayMap($.parseJSON(data), ko.mapping.fromJS));
self.entries(entries);
});
} else {
// If no month, just remove all entries.
@ -277,7 +291,7 @@ var ListViewModel = function() {
// Function to select template in function of selected item.
self.templateToUse = function (item) {
return self.selectedItem() === item ? 'editTmpl' : 'itemsTmpl';
return self.selectedItem() === item || self.newEntry() === item ? 'editTmpl' : 'itemsTmpl';
};
// Function to edit an item
@ -302,10 +316,19 @@ var ListViewModel = function() {
});
};
self.clearNewEntry = function() {
self.newEntry().id(null); // id should not change, but just in case...
self.newEntry().operation_date(null);
self.newEntry().value_date(null);
self.newEntry().label(null);
self.newEntry().value(null);
self.newEntry().account_id(self.account().id()); // account_id should not change, but just in case...
};
// Function to cancel current editing.
self.cancel = function() {
self.cancel = function(item) {
// Reset selected item fields to saved item ones.
if(self.selectedItem() && self.savedItem) {
if(item === self.selectedItem() && self.savedItem) {
self.selectedItem().id(self.savedItem.id); // id should not change, but just in case...
self.selectedItem().operation_date(self.savedItem.operation_date);
self.selectedItem().value_date(self.savedItem.value_date);
@ -314,9 +337,9 @@ var ListViewModel = function() {
self.selectedItem().account_id(self.savedItem.account_id); // account_id should not change, but just in case...
}
// This item was just added: remove it from the entries array.
if(self.selectedItem() && !self.selectedItem().id()) {
self.entries.remove(self.selectedItem());
// We are cancelling the new entry, just reset it.
if(item === self.newEntry()) {
self.clearNewEntry();
}
// Reset saved and selected items to null.
@ -324,26 +347,12 @@ var ListViewModel = function() {
self.selectedItem(null);
};
// Function to add a new entry.
self.add = function() {
self.entries.unshift(ko.mapping.fromJS({
id: null,
value_date: null,
operation_date: null,
label: null,
value: null,
sold: null,
pointedsold: null,
category: null,
account_id: self.account().id()
}));
self.edit(self.entries()[0]);
};
// Function to save the current selected entry.
self.save = function() {
var item = self.selectedItem();
self.save = function(item) {
//var item = self.selectedItem();
if(item === self.newEntry()) {
item.account_id(self.account().id());
}
// Ajax call to save the entry.
var type;
@ -362,6 +371,7 @@ var ListViewModel = function() {
}).success(function(data) {
message("success", "Save", data);
self.clearNewEntry();
self.selectedItem(null);
self.savedItem = null;
@ -412,6 +422,7 @@ var ListViewModel = function() {
// Callback function to select a new account.
self.selectAccount = function(account) {
if(account) {
self.newEntry().account_id(account.id());
self.account(account);
self.loadMonths(account);
}
@ -434,8 +445,6 @@ drawChart = function(entries, element) {
var firstDate = new Date(Date.parse(entries[0][0]).valueOf() - day).format('yyyy-mm-dd');
var lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + day).format('yyyy-mm-dd');
console.debug(entries)
// Plot chart, and store it in a window parameter for resize callback (need to be done better than it...)
window.chart = $.jqplot(element.id, [entries], {
// Title of the chart