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

src/model.js

@@ -214,8 +214,13 @@ my.Query = Backbone.Model.extend({
     filter.term[fieldId] = value;
     filters.push(filter);
     this.set({filters: filters});
-    // change does not seem to be triggered ...
+    // change does not seem to be triggered automatically
-    this.trigger('change');
+    if (value) {
+      this.trigger('change');
+    } else {
+      // adding a new blank filter and do not want to trigger a new query
+      this.trigger('change:filters:new-blank');
+    }
   },
   // ### removeFilter
   //

src/view-grid.js

@@ -76,6 +76,9 @@ my.DataGrid = Backbone.View.extend({
       facet: function() { 
         self.model.queryState.addFacet(self.state.currentColumn);
       },
+      filter: function() {
+        self.model.queryState.addTermFilter(self.state.currentColumn, '');
+      },
       transform: function() { self.showTransformDialog('transform') },
       sortAsc: function() { self.setColumnSort('asc') },
       sortDesc: function() { self.setColumnSort('desc') },
@@ -167,9 +170,13 @@ my.DataGrid = Backbone.View.extend({
                 <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
                 <ul class="dropdown-menu data-table-menu pull-right"> \
                   <li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
+                  <li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \
+                  <li class="divider"></li> \
                   <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
                   <li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
+                  <li class="divider"></li> \
                   <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
+                  <li class="divider"></li> \
                   <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
                 </ul> \
               </div> \

src/view.js

@@ -295,33 +295,41 @@ my.FilterEditor = Backbone.View.extend({
       </div> \
       <div class="span11"> \
         <form class="form-horizontal"> \
-          {{#termFilters}} \
+          <div class="row"> \
-          <div class="control-group filter-term filter" data-filter-id={{id}}> \
+            <div class="span6"> \
-            <label class="control-label" for="">{{label}}</label> \
+              {{#termFilters}} \
-            <div class="controls"> \
+              <div class="control-group filter-term filter" data-filter-id={{id}}> \
-              <div class="input-append"> \
+                <label class="control-label" for="">{{label}}</label> \
-                <input type="text" value="{{value}}" name="{{fieldId}}" class="span4" readonly="" /> \
+                <div class="controls"> \
-                <a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
+                  <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');
   }
 });