Improve 'add entry' feature.
This commit is contained in:
parent
cfef22ee65
commit
c5e7b8c94b
@ -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> Ajouter une entré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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user