[NEP-12629] Rework filters logic by adding AND/OR conditions.

Author: Sergei Aksiutin

docs/react-components-structure.md

@@ -0,0 +1,29 @@
+React Components Structure
+--------------------------
+
+FilterBar
+  -> FilterList
+      -> FilterListOption
+  -> ApplyFiltersButton
+  -> ClearFiltersButton
+  -> SaveFiltersButton
+  -> SavedSearchesList
+  -> ConfigurationButton *
+  -> ExportResultsButton *
+  -> BatchActionsList
+  -> FilterDisplay
+      -> FilterGroup
+          -> FilterItem
+          -> FilterButton
+      -> FilterButton
+
+
+{} - available filters
+[] - default filters
+[
+  [filter1] -> when adding new add new filter1
+]
+
+[
+  [filter1, filter2] -> when adding "ADD" button and add new filter2
+]

example/public/js/react-filterbar.js

@@ -23,10 +23,6 @@ export class FilterBarActor {
     this.filterBarStore.enableFilter(filterUid, value);
   }
 
-  disableFilter(filterUid) {
-    this.filterBarStore.disableFilter(filterUid);
-  }
-
   disableAllFilters() {
     this.filterBarStore.disableAllFilters();
     this.filterBarStore.disableAllQuickFilters();
@@ -37,8 +33,12 @@ export class FilterBarActor {
     this.applyFilters();
   }
 
-  updateFilter(filterUid, propKey, propValue) {
-    this.filterBarStore.updateFilter(filterUid, propKey, propValue);
+  updateFilter(groupKey, inputKey, value) {
+    this.filterBarStore.updateFilter(groupKey, inputKey, value);
+  }
+
+  disableFilter(groupKey, inputKey) {
+    this.filterBarStore.disableFilter(groupKey, inputKey)
   }
 
   applyFilters() {

src/actors/FilterBarActor.js

@@ -18,10 +18,6 @@ export class FilterBar extends React.Component {
       <div>
         <div>
           <div className="btn-group margin-bottom-sm">
-            <FilterList
-              disabledFilters={this.context.filterBarStore.getDisabled()}
-            />
-
             <ApplyFiltersButton
               filterBarActor={this.context.filterBarActor}
             />

src/components/FilterBar/FilterBar.react.js

@@ -0,0 +1,63 @@
+import { FilterListOption } from "../FilterList/FilterListOption.react";
+export class FilterButton extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { filters: props.filters };
+  }
+
+  componentDidMount() {
+    this.context.filterBarStore.addChangeListener(this.onChange.bind(this));
+  }
+
+  onChange() {
+    this.setState(this.getStateFromStores());
+  }
+
+  getStateFromStores() {
+    return {
+      filters: this.context.filterBarStore.getFilters()
+    };
+  }
+
+  onClick(filterUid) {
+    this.props.onClick(filterUid);
+  }
+
+  render() {
+    var optionKey = "";
+    var filterOptions = Object.keys(this.state.filters).map(function(filterUid) {
+      optionKey = "option-" + filterUid;
+      return (
+        <FilterListOption
+          onClick={ this.onClick.bind(this) }
+          filterUid={filterUid}
+          key={optionKey}
+          label={this.state.filters[filterUid].label}
+        />
+      );
+    }, this);
+    return (
+      <div className='btn-group'>
+        <button className='btn btn-default dropdown-toggle' data-toggle='dropdown' type='button'>
+          <span>{ this.props.title }</span>
+          <i className='icon icon-add'></i>
+        </button>
+        <div className='dropdown-menu' role='menu'>
+          <ul className='filter-options'>
+            {filterOptions}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+FilterButton.contextTypes = {
+  filterBarActor: React.PropTypes.object,
+  filterBarStore: React.PropTypes.object
+};
+
+FilterButton.propTypes = {
+  disabledFilters: React.PropTypes.object.isRequired
+};

src/components/FilterBar/FilterDisplay/FilterButton.react.js

@@ -1,5 +1,7 @@
 import {FilterInput} from "./FilterInput.react";
-
+import {FilterButton} from "./FilterButton.react";
+import {FilterGroup} from "./FilterGroup.react";
+import { FilterList } from "../FilterList/FilterList.react";
 export class FilterDisplay extends React.Component {
   constructor(props) {
     super(props);
@@ -40,30 +42,68 @@ export class FilterDisplay extends React.Component {
     };
   }
 
+  getActiveFilters() {
+    return this.context.filterBarStore.getActiveFilters();
+  }
+
+  getFilters() {
+    return this.context.filterBarStore.getFilters();
+  }
+
+  addGroup(filterUid) {
+    this.context.filterBarStore.addGroupFilter(-1, filterUid);
+  }
+
   render() {
-    var filters = Object.keys(this.state.filters).map(function(filterUid) {
-      var filter = this.state.filters[filterUid];
+    var filters = [];
+    this.getActiveFilters().map(function(groupFilters, idx) {
+      if (idx > 0) {
+        filters.push(
+          (
+            <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>OR</div>
+          )
+        )
+      }
 
-      return (
-        <FilterInput
-          filterUid={filterUid}
-          key={filterUid}
-          label={filter.label}
-          type={filter.type}
-          value={filter.value}
-          operator={filter.operator}
-        />
+      filters.push(
+        (<FilterGroup
+          key={ idx }
+          groupKey={ idx }
+          filters={ groupFilters }
+        />)
       );
-    }, this);
+
+    })
 
     if (filters.length === 0) {
-      filters = (<div>No Filters Enabled!</div>);
+      filters.push((
+        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+          <FilterButton
+          filters={ this.getFilters() }
+          title="ADD FILTER"
+          onClick={ this.addGroup.bind(this) }
+        />
+        </div>)
+      );
+    } else {
+      filters.push(
+        (
+        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+          <FilterButton
+            filters={ this.getFilters() }
+            title="OR"
+            onClick={ this.addGroup.bind(this) }
+          />
+        </div>
+      ));
     }
 
     return (
       <div className="navbar filterbar">
-        <div className="panel panel-default">
-          {filters}
+        <div className="panel panel-default" style={ { paddingTop: 'unset', paddingBottom: 'unset' } }>
+          <div style={ { display: 'flex', float: 'left', flexWrap: 'wrap' } }>
+            {filters}
+          </div>
         </div>
       </div>
     );

src/components/FilterBar/FilterDisplay/FilterDisplay.react.js

@@ -0,0 +1,71 @@
+import { FilterInput } from "./FilterInput.react"
+import { FilterButton } from "./FilterButton.react"
+
+export class FilterGroup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { filters: props.filters };
+  }
+
+  getFilters() {
+    return this.context.filterBarStore.getFilters();
+  }
+
+  onButtonClick(filterUid) {
+    this.context.filterBarStore.addGroupFilter(this.props.groupKey, filterUid);
+  }
+
+  render() {
+    const { groupKey } = this.props;
+    var filters = [];
+    this.state.filters.map(function(filter, idx) {
+      if (idx > 0) {
+        filters.push(
+          (
+            <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>AND</div>
+          )
+        );
+      }
+
+      filters.push(
+        (
+        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+          <FilterInput
+            groupKey={ groupKey }
+            inputKey={ idx }
+            filterUid={filter.uid}
+            key={filter.uid}
+            label={filter.label}
+            type={filter.type}
+            value={filter.value}
+            operator={filter.operator}
+          />
+        </div>)
+      );
+    });
+
+    filters.push(
+      (
+        <div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
+          <FilterButton
+            filters={ this.getFilters() }
+            title="ADD"
+            onClick={ this.onButtonClick.bind(this) }
+          />
+        </div>
+      )
+    );
+
+    return (
+      <div style={ { display: 'flex', flexWrap: 'wrap', borderRadius: '5px', border: '1px solid #c0c0c0', backgroundColor: '#eee', marginTop: '7px', marginBottom: '7px' } }>
+        {filters}
+      </div>
+    )
+  }
+}
+
+FilterGroup.contextTypes = {
+  filterBarActor: React.PropTypes.object,
+  filterBarStore: React.PropTypes.object
+};

src/components/FilterBar/FilterDisplay/FilterGroup.react.js

@@ -6,14 +6,17 @@ export class FilterInput extends React.Component {
   }
 
   onClick() {
-    this.context.filterBarActor.disableFilter(this.props.filterUid);
+    const { groupKey, inputKey } = this.props;
+    this.context.filterBarActor.disableFilter(groupKey, inputKey);
   }
 
   objectProperties() {
     var key = Date.now();
     return(
       {
         filterUid: this.props.filterUid,
+        groupKey: this.props.groupKey,
+        inputKey: this.props.inputKey,
         key: key,
         value: this.props.value,
         type: this.props.type,
@@ -26,7 +29,7 @@ export class FilterInput extends React.Component {
     var propObject = this.objectProperties();
     var inputs = new FilterInputFactory(propObject);
     return (
-      <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 filter">
+      <div className="filter">
         <ul className={this.filterKey}>
           <li>
             <i

src/components/FilterBar/FilterDisplay/FilterInput.react.js

@@ -24,7 +24,7 @@ export class DateInput extends React.Component {
   }
 
   onBlur() {
-    this.context.filterBarActor.updateFilter(this.props.filterUid, "value", this.state.value);
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, this.state.value);
   }
 
   componentDidMount() {

src/components/FilterBar/FilterDisplay/Inputs/DateInput.react.js

@@ -18,7 +18,7 @@ export class DateTimeInput extends React.Component {
   }
 
   onBlur() {
-    this.context.filterBarActor.updateFilter(this.props.filterUid, "value", this.state.value);
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, this.state.value);
   }
 
   componentDidMount() {

src/components/FilterBar/FilterDisplay/Inputs/DateTimeInput.react.js

@@ -72,6 +72,7 @@ export class LazyMultiSelectInput extends React.Component {
     } else {
       filter.value = event.target.value.split(",");
     }
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, filter.value);
   }
 
   render() {

src/components/FilterBar/FilterDisplay/Inputs/LazyMultiSelectInput.react.js

@@ -52,6 +52,7 @@ export class LazySelectInput extends React.Component {
   onSelect(event) {
     let filter = this.context.filterBarStore.getFilter(this.props.filterUid);
     filter.value = event.target.value;
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, filter.value);
   }
 
   render() {

src/components/FilterBar/FilterDisplay/Inputs/LazySelectInput.react.js

@@ -37,6 +37,7 @@ export class MultiSelectInput extends React.Component {
 
   onSelect(event) {
     this.getFilterFromFilterBarStore().value = this.getSelectedValues()
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, this.getSelectedValues());
   }
 
   getSelectedValues() {

src/components/FilterBar/FilterDisplay/Inputs/MultiSelectInput.react.js

@@ -16,7 +16,7 @@ export class RangeInput extends React.Component {
   }
 
   onBlur() {
-    this.context.filterBarActor.updateFilter(this.props.filterUid, "value", this.state.value);
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, this.state.value);
   }
 
   render() {

src/components/FilterBar/FilterDisplay/Inputs/RangeInput.react.js

@@ -49,7 +49,7 @@ export class RelativeDateInput extends React.Component {
   }
 
   updateFilter(newValue) {
-    this.context.filterBarActor.updateFilter(this.props.filterUid, "value", newValue);
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, newValue);
   }
 
   intToMoment(value) {

src/components/FilterBar/FilterDisplay/Inputs/RelativeDateInput.react.js

@@ -37,7 +37,7 @@ export class SelectInput extends React.Component {
 
   onSelect(event) {
     this.setState({value: event.target.value});
-    this.context.filterBarActor.updateFilter(this.props.filterUid, "value", event.target.value);
+    this.context.filterBarActor.updateFilter(this.props.groupKey, this.props.inputKey, event.target.value);
   }
 
   displayOption(option) {