Merge pull request #631 from revolist/filter-plugin-hidden

fix: hidden rows in filter plugin

src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, HyperFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -19,7 +19,7 @@ import { DSourceState, Groups } from "./store/index";
 import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { EventData } from "./components/overlay/selection.utils";
-export { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, HyperFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -434,7 +434,6 @@ export namespace Components {
           * Disables dynamic filtering. A way to apply filters on Save only
          */
         "disableDynamicFiltering": boolean;
-        "extraContent"?: (h: HyperFunc<VNode>, data: ShowData) => VNode | VNode[];
         "filterCaptions": FilterCaptions | undefined;
         "filterEntities": Record<string, LogicFunction>;
         "filterNames": Record<string, string>;
@@ -1813,7 +1812,6 @@ declare namespace LocalJSX {
           * Disables dynamic filtering. A way to apply filters on Save only
          */
         "disableDynamicFiltering"?: boolean;
-        "extraContent"?: (h: HyperFunc<VNode>, data: ShowData) => VNode | VNode[];
         "filterCaptions"?: FilterCaptions | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
         "filterNames"?: Record<string, string>;

src/components/revoGrid/plugin.service.ts

@@ -1,11 +1,11 @@
-import { PluginBaseComponent, PluginProviders } from '@type';
-import { BasePlugin, GridPlugin } from 'src/plugins';
+import { PluginBaseComponent, PluginProviders, PluginServiceBase } from '@type';
+import { GridPlugin } from 'src/plugins';
 
 /**
  * Plugin service
  * Manages plugins
  */
-export class PluginService {
+export class PluginService implements PluginServiceBase {
   /**
    * Plugins
    * Define plugins collection
@@ -72,7 +72,7 @@ export class PluginService {
   /**
    * Get plugin by class
    */
-  getByClass<T extends BasePlugin>(
+  getByClass<T extends PluginBaseComponent>(
     pluginClass: new (...args: any[]) => T,
   ): T | undefined {
     return this.internalPlugins.find(p => p instanceof pluginClass) as

src/components/revoGrid/revo-grid.tsx

@@ -1394,6 +1394,7 @@ export class RevoGridComponent {
       dimension: this.dimensionProvider,
       viewport: this.viewportProvider,
       selection: this.selectionStoreConnector,
+      plugins: this.pluginService,
     };
 
     return pluginData;

src/index.ts

@@ -4,4 +4,4 @@ export * from './plugins';
 export * from './components';
 export * from './utils';
 export { TextEditor } from './components/editors/text-editor';
-export { h } from '@stencil/core';
+export { h, type FunctionalComponent } from '@stencil/core';

src/plugins/filter/filter.panel.tsx

@@ -21,7 +21,7 @@ import {
   MultiFilterItem,
   ShowData,
 } from './filter.types';
-import { ColumnProp, HyperFunc } from '@type';
+import type { ColumnProp } from '@type';
 import { FilterType } from './filter.indexed';
 
 const defaultType: FilterType = 'none';
@@ -48,7 +48,7 @@ export class FilterPanel {
     // drops the filter
     reset: 'Reset',
     cancel: 'Cancel',
-    add: 'Add more condition...',
+    add: 'Add condition',
     placeholder: 'Enter value...',
     and: 'and',
     or: 'or',
@@ -68,9 +68,6 @@ export class FilterPanel {
    * Disables dynamic filtering. A way to apply filters on Save only
    */
   @Prop() disableDynamicFiltering = false;
-
-  @Prop() extraContent?: (h: HyperFunc<VNode>, data: ShowData) => VNode | VNode[];
-
   @Event() filterChange: EventEmitter<MultiFilterItem>;
   @Event() resetChange: EventEmitter<ColumnProp>;
 
@@ -132,7 +129,7 @@ export class FilterPanel {
     const prop = this.changes?.prop;
     if (typeof prop === 'undefined') return '';
 
-    const propFilters = this.filterItems[prop]?.filter(f => !f.hidden) || [];
+    const propFilters = this.filterItems[prop];
     const capts = Object.assign(
       this.filterCaptionsInternal,
       this.filterCaptions,
@@ -141,6 +138,9 @@ export class FilterPanel {
       <div key={this.filterId}>
         {propFilters.map((filter, index) => {
           let andOrButton;
+          if (filter.hidden) {
+            return;
+          }
 
           // hide toggle button if there is only one filter and the last one
           if (index !== this.filterItems[prop].length - 1) {
@@ -175,7 +175,7 @@ export class FilterPanel {
           );
         })}
 
-        {propFilters.length > 0 ? <div class="add-filter-divider" /> : ''}
+        {propFilters.filter(f => !f.hidden).length > 0 ? <div class="add-filter-divider" /> : ''}
       </div>
     );
   }
@@ -365,6 +365,15 @@ export class FilterPanel {
     const options: VNode[] = [];
     const prop = this.changes.prop;
 
+    const hidden = new Set<string>();
+    Object.entries(this.filterItems).forEach(([_, values]) => {
+      values.forEach((filter) => {
+        if (filter.hidden) {
+          hidden.add(filter.type);
+        }
+      })
+    });
+
     if (!isDefaultTypeRemoved) {
       const capts = Object.assign(
         this.filterCaptionsInternal,
@@ -384,14 +393,17 @@ export class FilterPanel {
     }
 
     for (let gIndex in this.changes.filterTypes) {
-      options.push(
-        ...this.changes.filterTypes[gIndex].map(k => (
-          <option value={k} selected={type === k}>
-            {this.filterNames[k]}
-          </option>
-        )),
-      );
-      options.push(<option disabled></option>);
+      const group = this.changes.filterTypes[gIndex].filter(k => !hidden.has(k));
+      if (group.length) {
+        options.push(
+          ...group.map(k => (
+            <option value={k} selected={type === k}>
+              {this.filterNames[k]}
+            </option>
+          )),
+        );
+        options.push(<option disabled></option>);
+      }
     }
     return options;
   }
@@ -444,7 +456,7 @@ export class FilterPanel {
         }}
       >
         <slot slot="header" />
-        { this.extraContent?.(h, this.changes) }
+        { this.changes.extraContent?.(this.changes) || '' }
         <label>{capts.title}</label>
         <div class="filter-holder">{this.getFilterItemsList()}</div>
 

src/plugins/filter/filter.plugin.tsx

@@ -1,6 +1,6 @@
 import { h, type VNode } from '@stencil/core';
 
-import type { ColumnProp, ColumnRegular, DataType, HyperFunc, PluginProviders } from '@type';
+import type { ColumnProp, ColumnRegular, DataType, PluginProviders } from '@type';
 import { BasePlugin } from '../base.plugin';
 import { FILTER_PROP, isFilterBtn } from './filter.button';
 import {
@@ -47,6 +47,14 @@ export class FilterPlugin extends BasePlugin {
   filterCollection: FilterCollection = {};
   multiFilterItems: MultiFilterItem = {};
 
+  /**
+   * Filter types
+   * @example
+   * {
+   *    string: ['contains', 'beginswith'],
+   *    number: ['eqN', 'neqN', 'gt']
+   *  }
+   */
   filterByType: Record<string, string[]> =
     { ...filterTypes };
   filterNameIndexByType: Record<string, string> = {
@@ -58,12 +66,12 @@ export class FilterPlugin extends BasePlugin {
 
   filterProp = FILTER_PROP;
 
-  extraHyperContent?: (h: HyperFunc<VNode>, data: ShowData) => VNode | VNode[];
+  extraHyperContent?: (data: ShowData) => VNode | VNode[];
 
   constructor(
     public revogrid: HTMLRevoGridElement,
     providers: PluginProviders,
-    config?: ColumnFilterConfig,
+    public config?: ColumnFilterConfig,
   ) {
     super(revogrid, providers);
     if (config) {
@@ -82,7 +90,6 @@ export class FilterPlugin extends BasePlugin {
         onFilterChange={e => this.onFilterChange(e.detail)}
         onResetChange={e => this.onFilterReset(e.detail)}
         disableDynamicFiltering={config?.disableDynamicFiltering}
-        extraContent={this.extraHyperContent}
         ref={e => (this.pop = e)}
       > { this.extraContent() }</revogr-filter-panel>,
     ];
@@ -111,7 +118,7 @@ export class FilterPlugin extends BasePlugin {
     };
     this.addEventListener(
       'headerclick',
-      (e: CustomEvent<HTMLRevoGridElementEventMap['headerclick']>) =>
+      (e) =>
         this.headerclick(e),
     );
     this.addEventListener(
@@ -220,14 +227,18 @@ export class FilterPlugin extends BasePlugin {
     const buttonPos = el.getBoundingClientRect();
     const prop = e.detail.prop;
 
-    this.pop.show({
+    const data: ShowData = {
+      ...e.detail,
       ...this.filterCollection[prop],
       x: buttonPos.x - gridPos.x,
       y: buttonPos.y - gridPos.y + buttonPos.height,
       autoCorrect: true,
-      prop,
       filterTypes: this.getColumnFilter(e.detail.filter),
       filterItems: this.multiFilterItems,
+    };
+    this.pop.show({
+      ...data,
+      extraContent: this.extraHyperContent,
     });
   }
 

src/plugins/filter/filter.types.ts

@@ -1,5 +1,5 @@
-import { ColumnProp } from '@type';
-import { FilterType } from './filter.indexed';
+import type { ColumnProp, ColumnRegular } from '@type';
+import type { FilterType } from './filter.indexed';
 
 export type DateEnum =
   | 'today'
@@ -143,4 +143,6 @@ export type ShowData = {
   autoCorrect?: boolean;
   filterTypes?: Record<string, string[]>;
   filterItems?: MultiFilterItem;
-} & FilterItem;
+  // pass vnodes from plugins
+  extraContent?: (data: ShowData) => any;
+} & FilterItem & Omit<ColumnRegular, 'filter'>;

src/types/plugin.types.ts

@@ -1,9 +1,19 @@
+import { PluginBaseComponent } from '@type';
 import ColumnDataProvider from '../services/column.data.provider';
 import { DataProvider } from '../services/data.provider';
 import DimensionProvider from '../services/dimension.provider';
 import type { SelectionStoreConnector } from '../services/selection.store.connector';
 import ViewportProvider from '../services/viewport.provider';
 
+export interface PluginServiceBase {
+    get(): PluginBaseComponent[];
+    add(plugin: PluginBaseComponent): void;
+    remove(plugin: PluginBaseComponent): void;
+    getByClass<T extends PluginBaseComponent>(
+        pluginClass: new (...args: any[]) => T,
+      ): T | undefined;
+}
+
 /**
  * Services that are provided by the various plugins for use by the grid. Each plugin
  * is responsible for providing a specific service, and the `PluginProviders` type collects all the services provided
@@ -30,6 +40,12 @@ export type PluginProviders = {
      * The viewport service provides access to the grid's viewport state.
      */
     viewport: ViewportProvider;
+
+    /**
+     * Plugin services
+     */
+
+    plugins: PluginServiceBase;
 };