Merge pull request #623 from revolist/filter-update

fix: allow filter updates

src/components.d.ts

@@ -436,7 +436,6 @@ export namespace Components {
         "disableDynamicFiltering": boolean;
         "filterCaptions": FilterCaptions | undefined;
         "filterEntities": Record<string, LogicFunction>;
-        "filterItems": MultiFilterItem;
         "filterNames": Record<string, string>;
         "getChanges": () => Promise<ShowData | undefined>;
         "show": (newEntity?: ShowData) => Promise<void>;
@@ -1815,7 +1814,6 @@ declare namespace LocalJSX {
         "disableDynamicFiltering"?: boolean;
         "filterCaptions"?: FilterCaptions | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
-        "filterItems"?: MultiFilterItem;
         "filterNames"?: Record<string, string>;
         "onFilterChange"?: (event: RevogrFilterPanelCustomEvent<MultiFilterItem>) => void;
         "onResetChange"?: (event: RevogrFilterPanelCustomEvent<ColumnProp>) => void;

src/plugins/filter/filter.panel.tsx

@@ -60,7 +60,7 @@ export class FilterPanel {
   @State() currentFilterId = -1;
   @State() currentFilterType: FilterType = defaultType;
   @State() changes: ShowData | undefined;
-  @Prop() filterItems: MultiFilterItem = {};
+  @State() filterItems: MultiFilterItem = {};
   @Prop() filterNames: Record<string, string> = {};
   @Prop() filterEntities: Record<string, LogicFunction> = {};
   @Prop() filterCaptions: FilterCaptions | undefined;
@@ -105,6 +105,7 @@ export class FilterPanel {
 
   @Method() async show(newEntity?: ShowData) {
     this.changes = newEntity;
+    this.filterItems = newEntity?.filterItems || {};
     if (this.changes) {
       this.changes.type = this.changes.type || defaultType;
     }
@@ -127,7 +128,7 @@ export class FilterPanel {
 
   getFilterItemsList() {
     const prop = this.changes?.prop;
-    if (!(prop || prop === 0)) return '';
+    if (typeof prop === 'undefined') return '';
 
     const propFilters = this.filterItems[prop] || [];
     const capts = Object.assign(

src/plugins/filter/filter.plugin.tsx

@@ -1,5 +1,4 @@
 import { h } from '@stencil/core';
-import reduce from 'lodash/reduce';
 
 import type { ColumnProp, ColumnRegular, DataType, PluginProviders } from '@type';
 import { BasePlugin } from '../base.plugin';
@@ -74,7 +73,6 @@ export class FilterPlugin extends BasePlugin {
     this.revogrid.registerVNode = [
       ...existingNodes,
       <revogr-filter-panel
-        filterItems={this.multiFilterItems}
         filterNames={this.filterNameIndexByType}
         filterEntities={this.filterFunctionsIndexedByType}
         filterCaptions={config?.localization?.captions}
@@ -115,7 +113,7 @@ export class FilterPlugin extends BasePlugin {
     this.addEventListener(
       FILTER_CONFIG_CHANGED_EVENT,
       ({ detail }: CustomEvent<ColumnFilterConfig | boolean>) => {
-        if (!detail) {
+        if (!detail || typeof detail === 'object' && (!detail.multiFilterItems || !Object.keys(detail.multiFilterItems).length)) {
           this.clearFiltering();
           return;
         }
@@ -138,6 +136,8 @@ export class FilterPlugin extends BasePlugin {
   initConfig(config: ColumnFilterConfig) {
     if (config.multiFilterItems) {
       this.multiFilterItems = { ...config.multiFilterItems };
+    } else {
+      this.multiFilterItems = {};
     }
     // Add custom filters
     if (config.customFilters) {
@@ -181,18 +181,13 @@ export class FilterPlugin extends BasePlugin {
     }
 
     if (config.collection) {
-      this.filterCollection = reduce(
-        config.collection,
-        (result: FilterCollection, item, prop) => {
-          if (this.filterFunctionsIndexedByType[item.type]) {
-            result[prop] = item;
-          } else {
-            console.warn(`${item.type} type is not found.`);
-          }
-          return result;
-        },
-        {},
+      this.filterCollection = Object.fromEntries(
+        Object.entries(config.collection).filter(
+          ([, item]) => this.filterFunctionsIndexedByType[item.type],
+        ),
       );
+    } else {
+      this.filterCollection = {};
     }
 
     if (config.localization) {
@@ -212,14 +207,6 @@ export class FilterPlugin extends BasePlugin {
       return;
     }
     e.preventDefault();
-
-    // close if same
-    const changes = await this.pop?.getChanges();
-    if (changes && changes?.prop === e.detail.prop) {
-      this.pop?.show();
-      return;
-    }
-
     if (!this.pop) {
       return;
     }
@@ -236,6 +223,7 @@ export class FilterPlugin extends BasePlugin {
       autoCorrect: true,
       prop,
       filterTypes: this.getColumnFilter(e.detail.filter),
+      filterItems: this.multiFilterItems,
     });
   }
 

src/plugins/filter/filter.types.ts

@@ -129,4 +129,5 @@ export type ShowData = {
    */
   autoCorrect?: boolean;
   filterTypes?: Record<string, string[]>;
+  filterItems?: MultiFilterItem;
 } & FilterItem;

src/serve/controller.js

@@ -237,16 +237,13 @@ window.theme = function (theme) {
 
 window.onload = onLoad;
 
-/**
- * On load function
- */
-function onLoad() {
+window.clearFilter = () => {
   const grid = document.querySelector('revo-grid');
+  grid.filter = {};
+};
 
-  grid.readonly = false;
-  grid.range = true;
-  grid.resize = true;
-
+window.setFilter = () => {
+  const grid = document.querySelector('revo-grid');
   const filterFunc = (cellValue, extraValue) => {
     if (!cellValue) {
       return false;
@@ -260,7 +257,7 @@ function onLoad() {
   filterFunc.extra = 'input';
 
   const filterConfig = {
-    include: ['newEqual'],
+    // include: ['newEqual'],
     customFilters: {
       newEqual: {
         columnFilterType: 'myFilterType', // column filter type id
@@ -269,11 +266,30 @@ function onLoad() {
       },
     },
     disableDynamicFiltering: true,
+    multiFilterItems: {
+      0: [
+        {
+          type: "contains",
+          value: '9:0',
+        },
+      ],
+    },
   };
 
   grid.filter = filterConfig;
+};
 
+/**
+ * On load function
+ */
+function onLoad() {
+  const grid = document.querySelector('revo-grid');
+
+  grid.readonly = false;
+  grid.range = true;
+  grid.resize = true;
   grid.filter = true;
+
   grid.exporting = true;
   grid.rowHeaders = true;
   grid.rowDefinitions = [{

src/serve/data.js

@@ -115,7 +115,7 @@ export function generateFakeDataObject(config = {}) {
           'custom-row-index': rowIndex
         };
       }
-      columns[rgCol].cellParser = () => 'a';
+      // columns[rgCol].cellParser = () => 'a';
       columns[rgCol].cellTemplate = (h, { value }) => {
       //   // delay
       //   // for(let i = 0; i < 10000000; i++) {

src/serve/index.html

@@ -50,6 +50,8 @@ <h6>Data size</h6>
           </div>
 
           <h6 class="mt-4">Action</h6>
+          <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="setFilter()">Set filter</button>
+          <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="clearFilter()">Clear filter</button>
           <button type="button" class="btn btn-primary btn-sm mt-1" onclick="setTrimmed([2])">Trim 3rd row</button>
           <button type="button" class="btn btn-outline-primary btn-sm mt-1" onclick="setTrimmed([])">Clear trimmed</button>
           <button type="button" class="btn btn-primary btn-sm mt-1" onclick="setGrouping(['key'])">Group by: