Improve 'add entry' feature.

src/html/index.html

@@ -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 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>
       </tr>
     </script>

src/html/js/entries.js

@@ -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.
+      // 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.
@@ -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() {
+    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.
       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