Allow disable/re-enable filter #1174

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: [],
   };
 }
 

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,

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;
+  }
 </style>

packages/web/src/datagrid/DataGridCore.svelte

@@ -2059,6 +2059,7 @@
                     selectTopmostCell(col.uniqueName);
                   }}
                   dataType={col.dataType}
+                  filterDisabled={display.isFilterDisabled(col.uniqueName)}
                 />
               </td>
             {/each}

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}
-      <InlineButton
+      <div class="flex items-center gap-2">
-        square
+        <CheckboxField
-        narrow
+          checked={!display.isFilterDisabled(uniqueName)}
-        on:click={() => {
+          on:change={() => {
-          display.removeFilter(uniqueName);
+            display.toggleFilterEnabled(uniqueName);
-        }}
+          }}
-      >
+        />
-        <FontIcon icon="icon close" />
+        <InlineButton
-      </InlineButton>
+          square
+          narrow
+          on:click={() => {
+            display.removeFilter(uniqueName);
+          }}
+        >
+          <FontIcon icon="icon close" />
+        </InlineButton>
+      </div>
     </div>
     <DataFilterControl
       filterBehaviour={computeFilterBehavoir(column, display, isDynamicStructure)}
@@ -64,6 +73,7 @@
       columnName={column ? (column.uniquePath.length == 1 ? column.uniquePath[0] : null) : uniqueName}
       foreignKey={column?.foreignKey}
       dataType={column?.dataType}
+      filterDisabled={display.isFilterDisabled(uniqueName)}
     />
   </div>
 {/if}