Multi Filtering improvement to current filter plugin

src/components.d.ts

@@ -15,7 +15,7 @@ import { DataInput } from "./plugins/export/types";
 import { VNode } from "@stencil/core";
 import { ColumnSource, RowSource } from "./components/data/columnService";
 import { LogicFunction } from "./plugins/filter/filter.types";
-import { FilterItem, ShowData } from "./plugins/filter/filter.pop";
+import { FilterItem, MultiFilterItem, ShowData } from "./plugins/filter/filter.pop";
 import { DataSourceState, Groups } from "./store/dataSource/data.store";
 import { ViewportData } from "./components/revo-grid/viewport.interfaces";
 import { ElementScroll } from "./components/revo-grid/viewport.scrolling.service";
@@ -699,6 +699,7 @@ declare namespace LocalJSX {
         "filterNames"?: Record<string, string>;
         "filterTypes"?: Record<string, string[]>;
         "onFilterChange"?: (event: CustomEvent<FilterItem>) => void;
+        "onMultiFilterChange"?: (event: CustomEvent<MultiFilterItem>) => void;
         "uuid"?: string;
     }
     interface RevogrFocus {

src/plugins/filter/filter.button.tsx

@@ -4,6 +4,8 @@ import { RevoGrid } from '../../interfaces';
 export const FILTER_BUTTON_CLASS = 'rv-filter';
 export const FILTER_BUTTON_ACTIVE = 'active';
 export const FILTER_PROP = 'hasFilter';
+export const AND_OR_BUTTON = 'and-or-button';
+export const TRASH_BUTTON = 'trash-button';
 
 type Props = {
   column: RevoGrid.ColumnRegular;
@@ -27,6 +29,19 @@ export const FilterButton = ({ column }: Props) => {
   );
 };
 
+export const TrashButton = () => {
+  return (
+    <div class={{ [TRASH_BUTTON]: true }}>
+      <svg style={{ width: '18px', height: '18px' }} viewBox="0 0 24 24">
+        <path fill="currentColor" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" />
+      </svg>
+    </div>
+  );
+};
+export const AndOrButton = ({ isAnd }: any) => {
+  return <button class={{ [AND_OR_BUTTON]: true }}>{isAnd ? 'and' : 'or'}</button>;
+};
+
 export function isFilterBtn(e: HTMLElement) {
   if (e.classList.contains(FILTER_BUTTON_CLASS)) {
     return true;

src/plugins/filter/filter.plugin.tsx

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import BasePlugin from '../basePlugin';
 import { RevoGrid } from '../../interfaces';
 import { FILTER_PROP, isFilterBtn } from './filter.button';
-import { FilterItem } from './filter.pop';
+import { FilterItem, MultiFilterItem } from './filter.pop';
 import { filterEntities, filterNames, FilterType, filterTypes } from './filter.service';
 import { LogicFunction } from './filter.types';
 
@@ -17,12 +17,12 @@ export type FilterCaptions = {
   save: string;
   reset: string;
   cancel: string;
-}
+};
 
 export type FilterLocalization = {
   captions: FilterCaptions;
   filterNames: Record<FilterType, string>;
-}
+};
 
 /**
  * @typedef ColumnFilterConfig
@@ -76,8 +76,9 @@ export default class FilterPlugin extends BasePlugin {
         uuid={`filter-${uiid}`}
         filterNames={this.possibleFilterNames}
         filterEntities={this.possibleFilterEntities}
-        filterCaptions={config.localization?.captions}
+        filterCaptions={config?.localization?.captions}
         onFilterChange={e => this.onFilterChange(e.detail)}
+        onMultiFilterChange={e => this.onMultiFilterChange(e.detail)}
         ref={e => (this.pop = e)}
       />,
     ]);
@@ -185,7 +186,18 @@ export default class FilterPlugin extends BasePlugin {
 
   // called on internal component change
   private async onFilterChange(filterItem: FilterItem) {
-    this.filterByProps({ [filterItem.prop]: filterItem });
+    console.log('onFilterChange', filterItem);
+    // this.filterByProps({ [filterItem.prop]: filterItem });
+  }
+
+  private async onMultiFilterChange(filterItems: MultiFilterItem) {
+    console.log('onMultiFilterChange', filterItems);
+    const { source, columns } = await this.getData();
+    const { defaultPrevented, detail } = this.emit('beforefilterapply', { collection: this.filterCollection, source, columns });
+    if (defaultPrevented) {
+      return;
+    }
+    this.doMultiFiltering(detail.collection, detail.source, detail.columns, filterItems);
   }
 
   /**
@@ -246,6 +258,40 @@ export default class FilterPlugin extends BasePlugin {
     this.emit('afterFilterApply');
   }
 
+  async doMultiFiltering(collection: FilterCollection, items: RevoGrid.DataType[], columns: RevoGrid.ColumnRegular[], filterItems: MultiFilterItem) {
+    const columnsToUpdate: RevoGrid.ColumnRegular[] = [];
+    // todo improvement: loop through collection of props
+    columns.forEach(rgCol => {
+      const column = { ...rgCol };
+      const hasFilter = filterItems[column.prop];
+      if (column[FILTER_PROP] && !hasFilter) {
+        delete column[FILTER_PROP];
+        columnsToUpdate.push(column);
+      }
+      if (!column[FILTER_PROP] && hasFilter) {
+        columnsToUpdate.push(column);
+        column[FILTER_PROP] = true;
+      }
+    });
+    const itemsToFilter = this.getRowMultiFilter(items, filterItems);
+    // check is filter event prevented
+    const { defaultPrevented } = this.emit('beforefiltertrimmed', { collection, itemsToFilter, source: items });
+    if (defaultPrevented) {
+      return;
+    }
+
+    // const test = { 1: true };
+    // check is trimmed event prevented
+    const isAddedEvent = await this.revogrid.addTrimmed(itemsToFilter, FILTER_TRIMMED_TYPE);
+    if (isAddedEvent.defaultPrevented) {
+      return;
+    }
+
+    // applies the hasFilter to the columns to show filter icon
+    await this.revogrid.updateColumns(columnsToUpdate);
+    this.emit('afterFilterApply');
+  }
+
   async clearFiltering() {
     this.filterCollection = {};
     await this.runFiltering();
@@ -265,7 +311,7 @@ export default class FilterPlugin extends BasePlugin {
     const columns = await this.revogrid.getColumns();
     return {
       source,
-      columns
+      columns,
     };
   }
 
@@ -282,4 +328,60 @@ export default class FilterPlugin extends BasePlugin {
     });
     return trimmed;
   }
+  private getRowMultiFilter(rows: RevoGrid.DataType[], filterItems: MultiFilterItem) {
+    const propKeys = Object.keys(filterItems);
+
+    const trimmed: Record<number, boolean> = {};
+    let propFilterSatisfiedCount: number = 0;
+    let lastFilterResults: boolean[] = [];
+
+    // each rows
+    rows.forEach((model, rowIndex) => {
+      // working on all props
+      for (const prop of propKeys) {
+        const propFilters = filterItems[prop];
+
+        propFilterSatisfiedCount = 0;
+        lastFilterResults = [];
+
+        // testing each filter for a prop
+        for (const [filterIndex, filterData] of propFilters.entries()) {
+          // the filter LogicFunction based on the type
+          const filter = filterEntities[filterData.type];
+
+          // THE MAGIC OF FILTERING IS HERE
+          if (filterData.relation === 'or') {
+            lastFilterResults = [];
+            if (filter(model[prop], filterData.value)) {
+              continue;
+            }
+            propFilterSatisfiedCount++;
+          } else if (filterData.relation === 'and') {
+            // 'and' relation will need to know the next filter
+            // so we save this current filter to include it in the next filter
+            lastFilterResults.push(!filter(model[prop], filterData.value));
+
+            // check first if we have a filter on the next index to pair it with this current filter
+            const nextFilterData = propFilters[filterIndex + 1];
+            // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
+            if (!nextFilterData || nextFilterData.relation !== 'and') {
+              // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
+              if (lastFilterResults.indexOf(true) === -1) {
+                lastFilterResults = [];
+                continue;
+              }
+
+              // we need to add all of the lastFilterResults since we need to satisfy all
+              propFilterSatisfiedCount += lastFilterResults.length;
+              lastFilterResults = [];
+            }
+          }
+        } // end of propFilters forEach
+
+        // add to the list of removed/trimmed rows of filter condition is satisfied
+        if (propFilterSatisfiedCount === propFilters.length) trimmed[rowIndex] = true;
+      } // end of for-of propKeys
+    });
+    return trimmed;
+  }
 }