diff --git a/css/data-explorer.css b/css/data-explorer.css
index f0aa4dba..3023ebc1 100644
--- a/css/data-explorer.css
+++ b/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 {
diff --git a/src/model.js b/src/model.js
index a9c5270d..67a9141c 100644
--- a/src/model.js
+++ b/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
diff --git a/src/view.js b/src/view.js
index 73d4588e..601b73ff 100644
--- a/src/view.js
+++ b/src/view.js
@@ -66,6 +66,8 @@ my.DataExplorer = Backbone.View.extend({
\
Results found {{docCount}} \
\
+ \
+ \
\
\
\
@@ -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: ' \
+ × \
+ \
+
\
+
Filters
\
+ \
+
\
+
\
+ ',
+ 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: ' \