diff --git a/packages/datalib/src/GridConfig.ts b/packages/datalib/src/GridConfig.ts index 650e88217..c12a0c2ea 100644 --- a/packages/datalib/src/GridConfig.ts +++ b/packages/datalib/src/GridConfig.ts @@ -31,6 +31,7 @@ export interface GridConfig extends GridConfigColumns { formFilterColumns: string[]; multiColumnFilter?: string; searchInColumns?: string; + disabledFilterColumns: string[]; } export interface GridCache { @@ -48,6 +49,7 @@ export function createGridConfig(): GridConfig { focusedColumns: null, grouping: {}, formFilterColumns: [], + disabledFilterColumns: [], }; } diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index dd67c0402..a8dd11bf8 100644 --- a/packages/datalib/src/GridDisplay.ts +++ b/packages/datalib/src/GridDisplay.ts @@ -233,6 +233,7 @@ export abstract class GridDisplay { if (!filter) continue; const column = displayedColumnInfo[uniqueName]; if (!column) continue; + if (this.isFilterDisabled(uniqueName)) continue; try { const condition = parseFilter( filter, @@ -416,6 +417,7 @@ export abstract class GridDisplay { [uniqueName]: value, }, formViewRecordNumber: 0, + disabledFilterColumns: cfg.disabledFilterColumns.filter(x => x != uniqueName), })); this.reload(); } @@ -448,6 +450,7 @@ export abstract class GridDisplay { ...cfg, filters: _.omit(cfg.filters, [uniqueName]), formFilterColumns: (cfg.formFilterColumns || []).filter(x => x != uniqueName), + disabledFilterColumns: (cfg.disabledFilterColumns).filter(x => x != uniqueName), })); this.reload(); } @@ -463,6 +466,25 @@ export abstract class GridDisplay { this.reload(); } + toggleFilterEnabled(uniqueName) { + if (this.isFilterDisabled(uniqueName)) { + this.setConfig(cfg => ({ + ...cfg, + disabledFilterColumns: cfg.disabledFilterColumns.filter(x => x != uniqueName), + })); + } else { + this.setConfig(cfg => ({ + ...cfg, + disabledFilterColumns: [...cfg.disabledFilterColumns, uniqueName], + })); + } + this.reload(); + } + + isFilterDisabled(uniqueName: string) { + return this.config.disabledFilterColumns.includes(uniqueName); + } + setSort(uniqueName, order) { this.setConfig(cfg => ({ ...cfg, diff --git a/packages/web/src/datagrid/DataFilterControl.svelte b/packages/web/src/datagrid/DataFilterControl.svelte index c62b9bdb0..9508de601 100644 --- a/packages/web/src/datagrid/DataFilterControl.svelte +++ b/packages/web/src/datagrid/DataFilterControl.svelte @@ -34,6 +34,7 @@ export let onCustomCommand = null; export let customCommandTooltip = null; export let formatterFunction = null; + export let filterDisabled = false; export let pureName = null; export let schemaName = null; @@ -47,6 +48,7 @@ let isError; let isOk; let domInput; + let isDisabled; $: if (onGetReference && domInput) onGetReference(domInput); @@ -257,6 +259,7 @@ try { isOk = false; isError = false; + isDisabled = filterDisabled; if (value) { parseFilter(value, filterBehaviour); isOk = true; @@ -287,6 +290,7 @@ on:paste={handlePaste} class:isError class:isOk + class:isDisabled {placeholder} data-testid={`DataFilterControl_input_${uniqueName}`} /> @@ -345,4 +349,8 @@ input.isOk { background-color: var(--theme-bg-green); } + + input.isDisabled { + text-decoration: line-through; + } diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte index 83ff0dd9f..df5d6da95 100644 --- a/packages/web/src/datagrid/DataGridCore.svelte +++ b/packages/web/src/datagrid/DataGridCore.svelte @@ -2059,6 +2059,7 @@ selectTopmostCell(col.uniqueName); }} dataType={col.dataType} + filterDisabled={display.isFilterDisabled(col.uniqueName)} /> {/each} diff --git a/packages/web/src/formview/FormViewFilterColumn.svelte b/packages/web/src/formview/FormViewFilterColumn.svelte index 69836e4fc..c15f9546d 100644 --- a/packages/web/src/formview/FormViewFilterColumn.svelte +++ b/packages/web/src/formview/FormViewFilterColumn.svelte @@ -6,6 +6,7 @@ import ColumnLabel from '../elements/ColumnLabel.svelte'; import InlineButton from '../buttons/InlineButton.svelte'; import FontIcon from '../icons/FontIcon.svelte'; + import CheckboxField from '../forms/CheckboxField.svelte'; export let uniqueName; export let display; @@ -42,15 +43,23 @@ {:else} {uniqueName} {/if} - { - display.removeFilter(uniqueName); - }} - > - - +
+ { + display.toggleFilterEnabled(uniqueName); + }} + /> + { + display.removeFilter(uniqueName); + }} + > + + +
{/if}