Merge pull request #1230 from dbgate/feature/disable-filter

Feature/disable filter

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
-        square
-        narrow
-        on:click={() => {
-          display.removeFilter(uniqueName);
-        }}
-      >
-        <FontIcon icon="icon close" />
-      </InlineButton>
+      <div class="flex items-center gap-2">
+        <CheckboxField
+          checked={!display.isFilterDisabled(uniqueName)}
+          on:change={() => {
+            display.toggleFilterEnabled(uniqueName);
+          }}
+        />
+        <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}

packages/web/src/formview/FormViewFilters.svelte

@@ -8,6 +8,7 @@
   import keycodes from '../utility/keycodes';
   import FormViewFilterColumn from './FormViewFilterColumn.svelte';
   import { stringFilterBehaviour } from 'dbgate-tools';
+  import CheckboxField from '../forms/CheckboxField.svelte';
   // import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte';
 
   export let managerSize;
@@ -64,6 +65,13 @@
     <div class="space-between">
       <span>Multi column filter</span>
       {#if multiColumnFilter}
+      <div class="flex items-center gap-2">
+        <CheckboxField
+          checked={!display.isMultiColumnFilterDisabled()}
+          on:change={() => {
+            display.toggleMultiColumnFilterEnabled();
+          }}
+        />
         <InlineButton
           square
           narrow
@@ -73,6 +81,7 @@
         >
           <FontIcon icon="icon close" />
         </InlineButton>
+      </div>
       {/if}
     </div>
 
@@ -85,6 +94,7 @@
       {database}
       {schemaName}
       {pureName}
+      filterDisabled={display.isMultiColumnFilterDisabled()}
     />
   </div>
 {/if}