[NEP-12629] Initial URL filters

Author: Sergei Aksiutin

dist/react-filterbar.js

@@ -0,0 +1,8 @@
+---
+TEST: "[]"
+Book 1: "[]"
+Book 10: '[[{"field":"title","type":"text","label":"Title","filterUid":"title","uid":"title","value":"Book
+  10"}]]'
+Title wit OR: '[[{"field":"author","type":"select","label":"Author","url":"/authors","default":"Author
+  31","filterUid":"author","uid":"author","value":"Author 31"}],[{"field":"title","type":"text","label":"Title","filterUid":"title","uid":"title","value":"Book
+  10"}]]'

dist/react-filterbar.min.js

@@ -82,6 +82,7 @@ def loop_over_queries(queries, haystack)
 
   def search(needle, haystack)
     field, type, value = needle.first.values_at(*%w(field type value))
+    value ||= ""
     case type.to_sym
     when :date
       haystack.select do |hay|

example/public/js/react-filterbar.js

@@ -37,8 +37,8 @@ export class FilterBarActor {
     this.filterBarStore.updateFilter(groupKey, inputKey, value);
   }
 
-  disableFilter(groupKey, inputKey) {
-    this.filterBarStore.disableFilter(groupKey, inputKey)
+  clearActiveFilter(groupKey, inputKey) {
+    this.filterBarStore.clearActiveFilter(groupKey, inputKey)
   }
 
   applyFilters() {
@@ -59,14 +59,17 @@ export class FilterBarActor {
   }
 
   applyQuickFilter(filterName, value, quickFilterName, blockName) {
-    let filter = this.filterBarStore.getFilter(filterName)
+    var filter = this.filterBarStore.getFilter(filterName)
+
     if (filter.type === 'multi_select') {
       value = value.split(",").map(function (string) {
         return string.trim();
       });
     }
+
     this.filterBarStore.enableQuickFilter(quickFilterName, blockName);
-    this.enableFilter(filterName, value);
+    this.filterBarStore.setActiveFilters([]);
+    this.filterBarStore.addGroupFilter(filterName, undefined, value);
     this.applyFilters();
   }
 
@@ -107,17 +110,9 @@ export class FilterBarActor {
     var filters = JSON.parse(savedSearch.configuration);
 
     if (this.verifySavedFilters(filters)) {
-      if (filters instanceof Array) {
-        filters.forEach((filter) =>
-          this.enableFilter(filter.uid, filter.value)
-        );
-      } else {
-        for (var filter in filters) {
-          this.enableFilter(filter, filters[filter]);
-        }
-      }
-
+      this.filterBarStore.setActiveFilters(filters);
       this.applyFilters();
+      this.filterBarStore.emitChange();
     } else {
       this.deleteSavedSearch(searchId, 'One of the filters in this saved search cannot be applied anymore. Remove saved search?');
     }
@@ -139,15 +134,7 @@ export class FilterBarActor {
   }
 
   saveFilters(name) {
-    var filters = [];
-    for (var [filterUid, filter] of this.filterBarStore.enabledFilters()) {
-      filters.push({
-        uid: filterUid,
-        type: filter.type,
-        field: filter.field,
-        value: filter.value,
-      });
-    }
+    const filters = this.filterBarStore.getActiveFilters();
 
     var savedSearchPacket = {
       saved_search: {

example/saved_search.yml

@@ -48,17 +48,25 @@ function setupConfiguration(configuration) {
   configuration.tableConfiguration.page = Number(url.query(true).page);
 
   if (url.query(true).q !== "") {
-    for (var filter of JSON.parse(url.query(true).q)) {
-      var configFilter = configuration.filterBarConfiguration.filters[filter.uid];
-
-      if (configFilter) {
-        configFilter.enabled = true;
-        configFilter.value = filter.value;
-
-        if (filter.operator) {
-          configFilter.operator = filter.operator;
+    const activeFilters = JSON.parse(url.query(true).q);
+    configuration.filterBarConfiguration.activeFilters = [];
+    for (var groupFilters of activeFilters) {
+      const _groupFilters = []
+      groupFilters.map(function(filter) {
+        var configFilter = configuration.filterBarConfiguration.filters[filter.uid];
+
+        if (configFilter) {
+          configFilter.filterUid = filter.uid;
+          configFilter.uid = filter.uid;
+          configFilter.value = filter.value;
+
+          if (filter.operator) {
+            configFilter.operator = filter.operator;
+          }
         }
-      }
+        _groupFilters.push(configFilter);
+      });
+      configuration.filterBarConfiguration.activeFilters.push(_groupFilters);
     }
   }
 

example/server.rb

@@ -53,6 +53,7 @@ export class FilterBar extends React.Component {
           <FilterDisplay
             filterBarActor={this.context.filterBarActor}
             filterBarStore={this.context.filterBarStore}
+            filters={ this.context.filterBarStore.getActiveFilters() }
           />
         </div>
       </div>

src/actors/FilterBarActor.js

@@ -53,11 +53,13 @@ export class FilterButton extends React.Component {
   }
 }
 
+FilterButton.propTypes = {
+  filters: React.PropTypes.object.isRequired,
+  onClick: React.PropTypes.func.isRequired,
+  title: React.PropTypes.string.isRequired
+};
+
 FilterButton.contextTypes = {
   filterBarActor: React.PropTypes.object,
   filterBarStore: React.PropTypes.object
 };
-
-FilterButton.propTypes = {
-  disabledFilters: React.PropTypes.object.isRequired
-};

src/app.js

@@ -6,39 +6,31 @@ export class FilterDisplay extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { filters: props.enabledFilters };
+    this.state = { filters: props.filters };
   }
 
-  componentWillMount() {
-    var self = this;
-    var quickFilters = this.context.filterBarStore.quickFilters;
-    Object.keys(this.getStateFromStores().filters).map(function(filterUid) {
-      Object.keys(quickFilters).map(function(blockName) {
-        Object.keys(quickFilters[blockName]).map(function(filterName) {
-          var quickFilter = quickFilters[blockName][filterName];
-          if (quickFilter.filters && quickFilter.filters[filterUid]) {
-            if (self.getStateFromStores().filters[filterUid].type == 'multi_select') {
-              if (self.getStateFromStores().filters[filterUid].value.join(",") === quickFilter.filters[filterUid].value)
-                quickFilter.active = true;
-            } else {
-              if (self.getStateFromStores().filters[filterUid].value ===  quickFilter.filters[filterUid].value) {
-                quickFilter.active = true;
-              }
-            }
-          }
-        });
-      });
-    });
-    this.context.filterBarStore.addChangeListener(this.onChange.bind(this));
+  componentDidMount() {
+    // TODO: Potential memory leak issue
+    // https://github.com/facebook/react/issues/6266#issuecomment-196998237
+    this.onChange = this.onChange.bind(this);
+    this.context.filterBarStore.addChangeListener(this.onChange);
   }
 
   onChange() {
     this.setState(this.getStateFromStores());
   }
 
+  onFilterRemove(groupKey, inputKey) {
+    this.context.filterBarActor.clearActiveFilter(groupKey, inputKey);
+  }
+
+  onButtonClick(filterUid, groupKey) {
+    this.context.filterBarStore.addGroupFilter(filterUid, groupKey);
+  }
+
   getStateFromStores() {
     return {
-      filters: this.context.filterBarStore.getEnabled()
+      filters: this.context.filterBarStore.getActiveFilters()
     };
   }
 
@@ -51,45 +43,60 @@ export class FilterDisplay extends React.Component {
   }
 
   addGroup(filterUid) {
-    this.context.filterBarStore.addGroupFilter(-1, filterUid);
+    this.context.filterBarStore.addGroupFilter(filterUid);
   }
 
   render() {
-    var filters = [];
-    this.getActiveFilters().map(function(groupFilters, idx) {
+    const filters = []
+    const ctrl = this;
+
+    this.state.filters.map(function(groupFilters, idx) {
       if (idx > 0) {
         filters.push(
           (
-            <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>OR</div>
+            <div
+              key={ Math.random() }
+              style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }
+            >OR</div>
           )
         )
       }
 
       filters.push(
         (<FilterGroup
-          key={ idx }
+          key={ Math.random() }
           groupKey={ idx }
           filters={ groupFilters }
+          onFilterRemove={ ctrl.onFilterRemove.bind(ctrl) }
+          onButtonClick={ ctrl.onButtonClick.bind(ctrl) }
         />)
       );
 
     })
 
     if (filters.length === 0) {
       filters.push((
-        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+        <div
+          style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }
+          key={ Math.random() }
+        >
           <FilterButton
-          filters={ this.getFilters() }
-          title="ADD FILTER"
-          onClick={ this.addGroup.bind(this) }
+            key={ Math.random() }
+            filters={ this.getFilters() }
+            title="ADD FILTER"
+            onClick={ this.addGroup.bind(this) }
         />
         </div>)
       );
     } else {
       filters.push(
         (
-        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+        <div
+          style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }
+          key={ Math.random() }
+        >
           <FilterButton
+            key={ Math.random() }
             filters={ this.getFilters() }
             title="OR"
             onClick={ this.addGroup.bind(this) }
@@ -111,11 +118,11 @@ export class FilterDisplay extends React.Component {
 }
 
 FilterDisplay.propTypes = {
-  enabledFilters: React.PropTypes.object.isRequired
+  filters: React.PropTypes.array.isRequired
 };
 
 FilterDisplay.defaultProps = {
-  enabledFilters: {}
+  filters: []
 };
 
 FilterDisplay.contextTypes = {