[#66,filters,view][m]: new FilterEditor view which shows current filters and allowed them to be removed.

css/data-explorer.css

@@ -60,8 +60,8 @@
   clear: both;
 }
 
-.recline-facet-viewer {
-  clear: both;
+.recline-filter-editor .filter-term .input-append a {
+  margin-left: -5px;
 }
 
 .recline-facet-viewer .facet-summary label {

src/model.js

@@ -217,6 +217,15 @@ my.Query = Backbone.Model.extend({
     // change does not seem to be triggered ...
     this.trigger('change');
   },
+  // ### removeFilter
+  //
+  // Remove a filter from filters at index filterIndex
+  removeFilter: function(filterIndex) {
+    var filters = this.get('filters');
+    filters.splice(filterIndex, 1);
+    this.set({filters: filters});
+    this.trigger('change');
+  },
   // ### addFacet
   //
   // Add a Facet to this query

src/view.js

@@ -66,6 +66,8 @@ my.DataExplorer = Backbone.View.extend({
       <div class="recline-results-info"> \
         Results found <span class="doc-count">{{docCount}}</span> \
       </div> \
+      <div class="query-editor-here" style="display:inline;"></div> \
+      <div class="clearfix"></div> \
     </div> \
     <div class="data-view-container"></div> \
     <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
@@ -168,11 +170,15 @@ my.DataExplorer = Backbone.View.extend({
     var queryEditor = new my.QueryEditor({
       model: this.model.queryState
     });
-    this.el.find('.header').append(queryEditor.el);
-    var queryFacetEditor = new my.FacetViewer({
+    this.el.find('.query-editor-here').append(queryEditor.el);
+    var filterEditor = new my.FilterEditor({
+      model: this.model.queryState
+    });
+    this.el.find('.header').append(filterEditor.el);
+    var facetViewer = new my.FacetViewer({
       model: this.model
     });
-    this.el.find('.header').append(queryFacetEditor.el);
+    this.el.find('.header').append(facetViewer.el);
   },
 
   setupRouting: function() {
@@ -205,7 +211,6 @@ my.DataExplorer = Backbone.View.extend({
   }
 });
 
-
 my.QueryEditor = Backbone.View.extend({
   className: 'recline-query-editor', 
   template: ' \
@@ -280,6 +285,80 @@ my.QueryEditor = Backbone.View.extend({
   }
 });
 
+my.FilterEditor = Backbone.View.extend({
+  className: 'recline-filter-editor well', 
+  template: ' \
+    <a class="close js-hide" href="#">&times;</a> \
+    <div class="row filters"> \
+      <div class="span1"> \
+        <h3>Filters</h3> \
+      </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> \
+            </div> \
+          </div> \
+          {{/termFilters}} \
+        </form> \
+      </div> \
+    </div> \
+  ',
+  events: {
+    'click .js-hide': 'onHide',
+    'click .js-remove-filter': 'onRemoveFilter'
+  },
+  initialize: function() {
+    this.el = $(this.el);
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.render();
+  },
+  render: function() {
+    var tmplData = this.model.toJSON();
+    // we will use idx in list as there id ...
+    tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
+      filter.id = idx;
+      return filter;
+    });
+    tmplData.termFilters = _.filter(tmplData.filters, function(filter) {
+      return filter.term !== undefined;
+    });
+    tmplData.termFilters = _.map(tmplData.termFilters, function(filter) {
+      var fieldId = _.keys(filter.term)[0];
+      return {
+        fieldId: fieldId,
+        label: fieldId,
+        value: filter.term[fieldId]
+      }
+    });
+    var out = $.mustache(this.template, tmplData);
+    this.el.html(out);
+    // are there actually any facets to show?
+    if (this.model.get('filters').length > 0) {
+      this.el.show();
+    } else {
+      this.el.hide();
+    }
+  },
+  onHide: function(e) {
+    e.preventDefault();
+    this.el.hide();
+  },
+  onRemoveFilter: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    var filterId = $target.closest('.filter').attr('data-filter-id');
+    this.model.removeFilter(filterId);
+  }
+});
+
 my.FacetViewer = Backbone.View.extend({
   className: 'recline-facet-viewer well', 
   template: ' \