[#66,filters][m]: full editing of text filters plus add text filter via column menu in grid view - fixes #66.

src/view.js

@@ -295,33 +295,41 @@ my.FilterEditor = Backbone.View.extend({
       </div> \
       <div class="span11"> \
         <form class="form-horizontal"> \
-          {{#termFilters}} \
-          <div class="control-group filter-term filter" data-filter-id={{id}}> \
-            <label class="control-label" for="">{{label}}</label> \
-            <div class="controls"> \
-              <div class="input-append"> \
-                <input type="text" value="{{value}}" name="{{fieldId}}" class="span4" readonly="" /> \
-                <a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
+          <div class="row"> \
+            <div class="span6"> \
+              {{#termFilters}} \
+              <div class="control-group filter-term filter" data-filter-id={{id}}> \
+                <label class="control-label" for="">{{label}}</label> \
+                <div class="controls"> \
+                  <div class="input-append"> \
+                    <input type="text" value="{{value}}" name="{{fieldId}}" class="span4" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \
+                    <a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
+                  </div> \
+                </div> \
               </div> \
+              {{/termFilters}} \
             </div> \
+          <div class="span2"> \
+            <button type="submit" class="btn">Update</button> \
           </div> \
-          {{/termFilters}} \
         </form> \
       </div> \
     </div> \
   ',
   events: {
     'click .js-hide': 'onHide',
-    'click .js-remove-filter': 'onRemoveFilter'
+    'click .js-remove-filter': 'onRemoveFilter',
+    'submit form': 'onTermFiltersUpdate'
   },
   initialize: function() {
     this.el = $(this.el);
     _.bindAll(this, 'render');
     this.model.bind('change', this.render);
+    this.model.bind('change:filters:new-blank', this.render);
     this.render();
   },
   render: function() {
-    var tmplData = this.model.toJSON();
+    var tmplData = $.extend(true, {}, this.model.toJSON());
     // we will use idx in list as there id ...
     tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
       filter.id = idx;
@@ -333,6 +341,7 @@ my.FilterEditor = Backbone.View.extend({
     tmplData.termFilters = _.map(tmplData.termFilters, function(filter) {
       var fieldId = _.keys(filter.term)[0];
       return {
+        id: filter.id,
         fieldId: fieldId,
         label: fieldId,
         value: filter.term[fieldId]
@@ -356,6 +365,21 @@ my.FilterEditor = Backbone.View.extend({
     var $target = $(e.target);
     var filterId = $target.closest('.filter').attr('data-filter-id');
     this.model.removeFilter(filterId);
+  },
+  onTermFiltersUpdate: function(e) {
+   var self = this;
+    e.preventDefault();
+    var filters = self.model.get('filters');
+    var $form = $(e.target);
+    _.each($form.find('input'), function(input) {
+      var $input = $(input);
+      var filterIndex = parseInt($input.attr('data-filter-id'));
+      var value = $input.val();
+      var fieldId = $input.attr('data-filter-field');
+      filters[filterIndex].term[fieldId] = value;
+    });
+    self.model.set({filters: filters});
+    self.model.trigger('change');
   }
 });