[#147,widget/filtereditor][m]: add filter support in filter widget plus move to sidebar and tidy up.

* model.js: xsmall tweak to set value of term filter to empty string rather than null.

css/multiview.css

@@ -96,14 +96,21 @@
   * Filter Editor
   *********************************************************/
 
-.recline-filter-editor .filter-term .input-append a {
-  margin-left: -5px;
+.recline-filter-editor {
+  padding: 8px;
 }
 
-.recline-facet-viewer .facet-summary label {
-  display: inline;
+.recline-filter-editor .filter-term a {
+  font-size: 18px;
 }
 
+.recline-filter-editor input,
+.recline-filter-editor select
+{
+  width: 175px;
+}
+
+
 /**********************************************************
   * Fields Widget
   *********************************************************/

src/model.js

@@ -425,7 +425,7 @@ my.Query = Backbone.Model.extend({
   addTermFilter: function(fieldId, value) {
     var filters = this.get('filters');
     var filter = { term: {} };
-    filter.term[fieldId] = value;
+    filter.term[fieldId] = value || '';
     filters.push(filter);
     this.set({filters: filters});
     // change does not seem to be triggered automatically

src/view.multiview.js

@@ -224,10 +224,16 @@ my.MultiView = Backbone.View.extend({
     this.el.find('.query-editor-here').append(queryEditor.el);
 
     var filterEditor = new recline.View.FilterEditor({
-      model: this.model.queryState
+      model: this.model
     });
     this.$filterEditor = filterEditor.el;
-    this.el.find('.header').append(filterEditor.el);
+    $dataSidebar.append(filterEditor.el);
+    // are there actually any filters to show?
+    if (this.model.get('filters') && this.model.get('filters').length > 0) {
+      this.$filterEditor.show();
+    } else {
+      this.$filterEditor.hide();
+    }
 
     var fieldsView = new recline.View.Fields({
       model: this.model

src/widget.filtereditor.js

@@ -8,37 +8,45 @@ this.recline.View = this.recline.View || {};
 my.FilterEditor = Backbone.View.extend({
   className: 'recline-filter-editor well', 
   template: ' \
-    <div class="row filters"> \
-      <div class="span1"> \
-        <h3>Filters</h3> \
-      </div> \
-      <div class="span11"> \
-        <form class="form-horizontal"> \
-          <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="span4"> \
-            <p>To add a filter use the column menu in the grid view.</p> \
-            <button type="submit" class="btn">Update</button> \
+    <div class="filters"> \
+      <h3>Filters</h3> \
+      <a href="#" class="js-add-filter">Add filter</a> \
+      <form class="form-stacked js-add" style="display: none;"> \
+        <fieldset> \
+          <label>Filter type</label> \
+          <select class="filterType"> \
+            <option value="term">Term (text) filter</option> \
+          </select> \
+          <label>Field</label> \
+          <select class="fields"> \
+            {{#fields}} \
+            <option value="{{id}}">{{label}}</option> \
+            {{/fields}} \
+          </select> \
+          <button type="submit" class="btn">Add</button> \
+        </fieldset> \
+      </form> \
+      <form class="form-stacked js-edit"> \
+        {{#termFilters}} \
+        <div class="control-group filter-term filter" data-filter-id={{id}}> \
+          <label class="control-label" for="">{{label}}</label> \
+          <div class="controls"> \
+              <input type="text" value="{{value}}" name="{{fieldId}}" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \
+              <a class="js-remove-filter" href="#">&times;</a> \
           </div> \
-        </form> \
-      </div> \
+        </div> \
+        {{/termFilters}} \
+        {{#termFilters.length}} \
+        <button type="submit" class="btn">Update</button> \
+        {{/termFilters.length}} \
+      </form> \
     </div> \
   ',
   events: {
     'click .js-remove-filter': 'onRemoveFilter',
-    'submit form': 'onTermFiltersUpdate'
+    'click .js-add-filter': 'onAddFilterShow',
+    'submit form.js-edit': 'onTermFiltersUpdate',
+    'submit form.js-add': 'onAddFilter'
   },
   initialize: function() {
     this.el = $(this.el);
@@ -48,7 +56,7 @@ my.FilterEditor = Backbone.View.extend({
     this.render();
   },
   render: function() {
-    var tmplData = $.extend(true, {}, this.model.toJSON());
+    var tmplData = $.extend(true, {}, this.model.queryState.toJSON());
     // we will use idx in list as there id ...
     tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
       filter.id = idx;
@@ -66,14 +74,27 @@ my.FilterEditor = Backbone.View.extend({
         value: filter.term[fieldId]
       };
     });
+    tmplData.fields = this.model.fields.toJSON();
     var out = Mustache.render(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();
+  },
+  onAddFilterShow: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    $target.hide();
+    this.el.find('form.js-add').show();
+  },
+  onAddFilter: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    $target.hide();
+    var filterType = $target.find('select.filterType').val();
+    var field = $target.find('select.fields').val();
+    if (filterType === 'term') {
+      this.model.queryState.addTermFilter(field);
     }
+    // trigger render explicitly as queryState change will not be triggered (as blank value for filter)
+    this.render();
   },
   onRemoveFilter: function(e) {
     e.preventDefault();

test/index.html

@@ -62,6 +62,7 @@
   <script type="text/javascript" src="view.timeline.test.js"></script>
   <script type="text/javascript" src="view.multiview.test.js"></script>
   <script type="text/javascript" src="util.test.js"></script>
+  <script type="text/javascript" src="widget.filtereditor.test.js"></script>
 </head>
 <body>
   <h1 id="qunit-header">Qunit Tests</h1>

test/widget.filtereditor.test.js

@@ -0,0 +1,26 @@
+module("Widget - Filter Editor");
+
+test('basics', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.FilterEditor({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+  assertPresent('.js-add-filter', view.elSidebar);
+  var $addForm = view.el.find('form.js-add');
+  ok(!$addForm.is(":visible"));
+  view.el.find('.js-add-filter').click();
+  ok(!view.el.find('.js-add-filter').is(":visible"));
+  ok($addForm.is(":visible"));
+
+  $addForm.find('select.fields').val('country');
+  $addForm.submit();
+  ok(!$addForm.is(":visible"));
+  $editForm = view.el.find('form.js-edit');
+  equal($editForm.find('.filter-term').length, 1)
+
+  equal(_.keys(dataset.queryState.attributes.filters[0].term)[0], 'country');
+
+  view.remove();
+});
+