Implement composite filter support for DocumentList #1021

src/components/filters/Filters.js

@@ -19,12 +19,12 @@ class Filters extends Component {
     componentWillReceiveProps(props) {
         const {filtersActive} = props;
 
-        this.init(filtersActive ? filtersActive[0] : null);
+        this.init(filtersActive ? filtersActive : null);
     }
 
     componentDidMount() {
         const {filtersActive} = this.props;
-        filtersActive && this.init(filtersActive[0]);
+        filtersActive && this.init(filtersActive);
     }
 
     init = (filter) => {
@@ -44,24 +44,36 @@ class Filters extends Component {
         this.setState({
             notValidFields: !valid
         }, () => {
-            if (valid){
+            if (valid) {
                 const parsedFilter = filter.parameters ?
                     Object.assign({}, filter, {
                         parameters: this.parseToPatch(filter.parameters)
                     }) : filter;
-                this.setFilterActive([parsedFilter]);
+
+                this.setFilterActive(parsedFilter);
+
                 cb && cb();
             }
         });
     }
 
-    setFilterActive = (filter) => {
-        const {updateDocList} = this.props;
+    setFilterActive = (filterToAdd) => {
+        const { updateDocList } = this.props;
+        const { filter } = this.state;
+
+        let newFilter;
+        if (filter) {
+            newFilter = filter.filter( (item) => item.filterId !== filterToAdd.filterId );
+            newFilter.push(filterToAdd);
+        }
+        else {
+            newFilter = [filterToAdd];
+        }
 
         this.setState({
-            filter: filter
+            filter: newFilter
         }, () => {
-            updateDocList(filter);
+            updateDocList(newFilter);
         })
     }
 
@@ -75,8 +87,19 @@ class Filters extends Component {
         })
     }
 
-    clearFilters = () => {
-        this.setFilterActive(null)
+    clearFilters = (filterToClear) => {
+        const { updateDocList } = this.props;
+        const { filter } = this.state;
+
+        if (filter) {
+            let newFilter = filter.filter( (item) => item.filterId !== filterToClear.filterId );
+
+            this.setState({
+                filter: newFilter
+            }, () => {
+                updateDocList(newFilter);
+            })
+        }
     }
 
     dropdownToggled = () => {
@@ -97,13 +120,13 @@ class Filters extends Component {
     }
 
     isFilterValid = (filters) => {
-        if(filters.parameters){
+        if (filters.parameters) {
             return !(filters.parameters.filter(
                 item => item.mandatory && !item.value
             ).length);
-        }else{
-            return true;
         }
+
+        return true;
     }
 
     parseToPatch = (params) => {

src/components/filters/FiltersFrequent.js

@@ -30,19 +30,31 @@ class FiltersFrequent extends Component {
         dropdownToggled();
     }
 
+    isActive(filterId) {
+        const { active } = this.props;
+        let result = false;
+
+        if (active) {
+            let activeFilter = active.find( (item) => item.filterId === filterId );
+            result = (typeof activeFilter !== 'undefined') && activeFilter;
+        }
+
+        return result;
+    }
+
     render() {
         const {
             data, windowType, notValidFields, viewId, handleShow,
             applyFilters, clearFilters, active
         } = this.props;
 
-        const {openFilterId} = this.state;
+        const { openFilterId } = this.state;
 
         return (
             <div className="filter-wrapper">
                 {data.map((item, index) => {
-                    const isActive =
-                        active && (active.filterId == item.filterId);
+                    const isActive = this.isActive(item.filterId);
+
                     return (
                         <div className="filter-wrapper" key={index}>
                             <button

src/components/filters/FiltersItem.js

@@ -17,7 +17,6 @@ class FiltersItem extends Component {
             filter: props.data,
             isTooltipShow: false
         }
-
     }
 
     componentWillMount() {
@@ -36,14 +35,19 @@ class FiltersItem extends Component {
     }
 
     init = () => {
-        const {active} = this.props;
-        const {filter} = this.state;
+        const { active, data } = this.props;
+        const { filter } = this.state;
+        let activeFilter;
+
+        if (active) {
+            activeFilter = active.find( (item) => item.filterId === data.filterId );
+        }
 
         if(
-            filter.parameters && active && active.parameters &&
-            (active.filterId === filter.filterId)
+            filter.parameters && activeFilter && activeFilter.parameters &&
+            (activeFilter.filterId === filter.filterId)
         ){
-            active.parameters.map(item => {
+            activeFilter.parameters.map(item => {
                 this.mergeData(
                     item.parameterName,
                     item.value != null ? item.value : '',
@@ -120,8 +124,11 @@ class FiltersItem extends Component {
         const {
             clearFilters, closeFilterMenu, returnBackToDropdown
         } = this.props;
+        const {
+            filter
+        } = this.state;
 
-        clearFilters();
+        clearFilters(filter);
         closeFilterMenu();
         returnBackToDropdown && returnBackToDropdown();
     }

src/components/filters/FiltersNotFrequent.js

@@ -49,12 +49,25 @@ class FiltersNotFrequent extends Component {
             applyFilters, clearFilters, active
         } = this.props;
 
-        const {isOpenDropdown, openFilterId} = this.state;
+        const { isOpenDropdown, openFilterId } = this.state;
 
         const openFilter =
             getItemsByProperty(data, 'filterId', openFilterId)[0];
-        const activeFilter = active &&
-            getItemsByProperty(data, 'filterId', active.filterId)[0];
+
+        let activeFilter, activeFilterModel;
+        let activeFilterCaption = openFilter && openFilter.caption;
+        if (active && data) {
+            activeFilter = active.find( (item) => {
+                return data.find( (dataItem) => {
+                    if (dataItem.filterId === item.filterId) {
+                        activeFilterModel = dataItem;
+                        activeFilterCaption = dataItem.caption;
+                    }
+
+                    return (dataItem.filterId === item.filterId);
+                });
+            });
+        }
         const isActive = !!activeFilter;
 
         return (
@@ -69,7 +82,7 @@ class FiltersNotFrequent extends Component {
                     }
                 >
                     <i className="meta-icon-preview" />
-                    { isActive ? 'Filter: ' + activeFilter.caption : 'Filter'}
+                    { activeFilter ? 'Filter: ' + activeFilterCaption : 'Filter'}
                 </button>
 
                 { isOpenDropdown &&
@@ -90,7 +103,7 @@ class FiltersNotFrequent extends Component {
                             :
                             <FiltersItem
                                 windowType={windowType}
-                                data={openFilter || activeFilter}
+                                data={activeFilterModel || openFilter}
                                 closeFilterMenu={() =>
                                     this.toggleDropdown(false)
                                 }