From c7245581e38df107b4e3415446aa09a06ebfb3ba Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Fri, 25 Jan 2013 00:13:03 +0100
Subject: [PATCH] Added categories suggestions on editing. Closes #3.

---
 src/html/index.html    |  4 ++--
 src/html/js/entries.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/html/index.html b/src/html/index.html
index d1a0140..e1322fe 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -157,7 +157,7 @@
         <td><input type="text" class="input-mini" data-bind="value: value"/></td>
         <td></td>
         <td></td>
-        <td><input type="text" class="input-small" data-bind="value: category"/></td>
+        <td><input type="text" class="input-small" data-bind="value: category, typeahead: {source: $root.categories }"/></td>
         <td class="buttons">
             <a class="btn btn-mini btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-plus"></i></a>
             <a class="btn btn-mini" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
@@ -174,7 +174,7 @@
         <td><input type="text" class="input-mini" data-bind="value: value"/></td>
         <td data-bind="text: sold"></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, typeahead: {source: $root.categories }" /></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>
diff --git a/src/html/js/entries.js b/src/html/js/entries.js
index 5510ff0..8ac27e0 100644
--- a/src/html/js/entries.js
+++ b/src/html/js/entries.js
@@ -151,6 +151,22 @@ var ListViewModel = function() {
       });
     };
 
+    self.categories = ko.computed(function() {
+      var unwrap = ko.utils.unwrapObservable;
+
+      var entries=unwrap(self.entries);
+
+      var categories = ko.observableArray([]);
+
+      $.each(entries, function(index, entry) {
+        if(entry.category() && entry.category() != '' && categories.indexOf(entry.category()) == -1) {
+          categories.push(entry.category());
+        }
+      });
+
+      return categories();
+    });
+
     // Returns the data for the categories by summing values with same category
     self.expenseCategoriesChart = ko.computed(function() {
       var unwrap = ko.utils.unwrapObservable;
@@ -620,6 +636,24 @@ $(document).ajaxError(function(event, xhr, settings) {
   message("error", xhr.statusText, xhr.responseText);
 });
 
+// Bootstrap.Typeahead binding.
+// Use like so: data-bind="typeahead: { source: namespaces }"
+ko.bindingHandlers.typeahead = {
+  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
+    $(element).typeahead({
+      source: function() { return ko.utils.unwrapObservable(valueAccessor().source); },
+      onselect: function(value) { allBindingsAccessor().value(value); }
+    });
+  },
+
+  update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
+    $(element).typeahead({
+      source: function() { ko.utils.unwrapObservable(valueAccessor().source); },
+      onselect: function(value) { allBindingsAccessor().value(value); }
+    });
+  }
+};
+
 // Resize callback.
 $(window).resize(function() {
   if(window.chart) {