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