feat(datagrid-web): control column filters values and operators

mendix · Dec 20, 2024 · 0be971b · 0be971b
1 parent c06713f
commit 0be971b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -61,7 +61,7 @@ const Container = observer((props: Props): ReactElement => {
         onClickTrigger: props.onClickTrigger,
         onClick: props.onClick
     });
-    useOnResetFiltersEvent(props.rootStore.staticInfo.name, props.rootStore.staticInfo.filtersChannelName);
+    useOnResetFiltersEvent(rootStore.staticInfo.name, rootStore.staticInfo.filtersChannelName);
 
     const visibleColumnsCount = selectActionHelper.showCheckboxColumn
         ? columnsStore.visibleColumns.length + 1

diff --git a/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx
@@ -84,7 +84,9 @@ describe("Datagrid", () => {
             filterList: [],
             configurationStorageType: "attribute",
             configurationAttribute: undefined,
-            loadingType: "spinner"
+            loadingType: "spinner",
+            storeFilterValues: true,
+            storeOperatorValues: true
         };
         const user = userEvent.setup();
         let renderCount = 0;

diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/ColumnGroupStore.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/state/ColumnGroupStore.ts
@@ -43,7 +43,7 @@ export class ColumnGroupStore implements IColumnGroupStore, IColumnParentStore {
     isResizing: boolean = false;
 
     constructor(
-        props: Pick<DatagridContainerProps, "columns" | "datasource">,
+        props: Pick<DatagridContainerProps, "columns" | "datasource" | "storeFilterValues" | "storeOperatorValues">,
         info: StaticInfo,
         dsViewState: Array<FilterCondition | undefined> | null
     ) {
@@ -55,7 +55,13 @@ export class ColumnGroupStore implements IColumnGroupStore, IColumnParentStore {
             const column = new ColumnStore(i, columnProps, this);
             this._allColumnsById.set(column.columnId, column);
             this._allColumns[i] = column;
-            this.columnFilters[i] = new ColumnFilterStore(columnProps, info, initCond);
+            this.columnFilters[i] = new ColumnFilterStore(
+                columnProps,
+                info,
+                initCond,
+                props.storeFilterValues,
+                props.storeOperatorValues
+            );
         });
 
         this.sorting = new ColumnsSortingStore(

diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx
@@ -23,11 +23,21 @@ export class ColumnFilterStore implements IColumnFilterStore {
     private _widget: ReactNode;
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPIv2;
-
-    constructor(props: ColumnsType, info: StaticInfo, dsViewState: FilterCondition | null) {
+    private storeFilterValue: boolean;
+    private storeOperatorValue: boolean;
+
+    constructor(
+        props: ColumnsType,
+        info: StaticInfo,
+        dsViewState: FilterCondition | null,
+        storeFilterValue: boolean,
+        storeOperatorValue: boolean
+    ) {
         this._widget = props.filter;
         this._filterStore = this.createFilterStore(props, dsViewState);
         this._context = this.createContext(this._filterStore, info);
+        this.storeFilterValue = storeFilterValue;
+        this.storeOperatorValue = storeOperatorValue;
 
         makeObservable<this, "_updateStore">(this, {
             _updateStore: action,
@@ -96,7 +106,29 @@ export class ColumnFilterStore implements IColumnFilterStore {
     }
 
     get settings(): FilterData | undefined {
-        return this._filterStore?.toJSON();
+        switch (this._filterStore?.type) {
+            case "date":
+            case "number":
+            case "string":
+                const settings = this._filterStore?.toJSON();
+                if (settings && !this.storeOperatorValue) {
+                    settings[0] = this._filterStore?.defaultState[0];
+                }
+
+                if (settings && !this.storeFilterValue) {
+                    settings[1] = null;
+                    settings[2] = null;
+                }
+                return settings;
+            case "refselect":
+            case "select":
+                if (!this.storeFilterValue) {
+                    return [];
+                }
+                return this._filterStore?.toJSON();
+            default:
+                return undefined;
+        }
     }
 
     set settings(data: FilterData | undefined) {