Improve 'add entry' feature.

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

View File

@ -54,15 +54,10 @@
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div id="message-placeholder"></div> <div id="message-placeholder"></div>
</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"> <div class="row-fluid">
<table class="table table-striped table-condensed table-hover"> <table class="table table-striped table-condensed table-hover">
<thead> <thead>
@ -160,8 +155,8 @@
<td data-bind="text: pointedsold"></td> <td data-bind="text: pointedsold"></td>
<td><input type="text" class="input-small" data-bind="value: category"/></td> <td><input type="text" class="input-small" data-bind="value: category"/></td>
<td class="buttons"> <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 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 class="icon-ban-circle"></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> </td>
</tr> </tr>
</script> </script>

View File

@ -51,6 +51,17 @@ var ListViewModel = function() {
// Entry store and selection // Entry store and selection
self.entries = ko.observableArray([]); self.entries = ko.observableArray([]);
self.selectedItem = ko.observable(); 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 // Placeholder for saved value to cancel entry edition
self.savedItem = null; self.savedItem = null;
@ -179,7 +190,7 @@ var ListViewModel = function() {
// Transform to an array readable by jqplot Line renderer. // Transform to an array readable by jqplot Line renderer.
var chartValues = []; var chartValues = [];
$.each(entries, function(index, entry) { $.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))]); chartValues.push([unwrap(entry.value_date), Number(unwrap(entry.sold))]);
} }
}); });
@ -196,7 +207,10 @@ var ListViewModel = function() {
self.selectedItem(null); self.selectedItem(null);
// Update entries // 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 { } else {
// If no month, just remove all entries. // If no month, just remove all entries.
@ -277,7 +291,7 @@ var ListViewModel = function() {
// Function to select template in function of selected item. // Function to select template in function of selected item.
self.templateToUse = function (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 // 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. // Function to cancel current editing.
self.cancel = function() { self.cancel = function(item) {
// Reset selected item fields to saved item ones. // 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().id(self.savedItem.id); // id should not change, but just in case...
self.selectedItem().operation_date(self.savedItem.operation_date); self.selectedItem().operation_date(self.savedItem.operation_date);
self.selectedItem().value_date(self.savedItem.value_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... 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. // We are cancelling the new entry, just reset it.
if(self.selectedItem() && !self.selectedItem().id()) { if(item === self.newEntry()) {
self.entries.remove(self.selectedItem()); self.clearNewEntry();
} }
// Reset saved and selected items to null. // Reset saved and selected items to null.
@ -324,26 +347,12 @@ var ListViewModel = function() {
self.selectedItem(null); 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. // Function to save the current selected entry.
self.save = function() { self.save = function(item) {
var item = self.selectedItem(); //var item = self.selectedItem();
if(item === self.newEntry()) {
item.account_id(self.account().id());
}
// Ajax call to save the entry. // Ajax call to save the entry.
var type; var type;
@ -362,6 +371,7 @@ var ListViewModel = function() {
}).success(function(data) { }).success(function(data) {
message("success", "Save", data); message("success", "Save", data);
self.clearNewEntry();
self.selectedItem(null); self.selectedItem(null);
self.savedItem = null; self.savedItem = null;
@ -412,6 +422,7 @@ var ListViewModel = function() {
// Callback function to select a new account. // Callback function to select a new account.
self.selectAccount = function(account) { self.selectAccount = function(account) {
if(account) { if(account) {
self.newEntry().account_id(account.id());
self.account(account); self.account(account);
self.loadMonths(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 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'); 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...) // 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], { window.chart = $.jqplot(element.id, [entries], {
// Title of the chart // Title of the chart