multi column filter #491

packages/datalib/src/GridConfig.ts

@@ -30,6 +30,7 @@ export interface GridConfig extends GridConfigColumns {
   formViewRecordNumber?: number;
   formFilterColumns: string[];
   formColumnFilterText?: string;
+  multiColumnFilter?: string;
 }
 
 export interface GridCache {

packages/datalib/src/GridDisplay.ts

@@ -14,7 +14,7 @@ import type {
 import { parseFilter, getFilterType } from 'dbgate-filterparser';
 import { filterName } from 'dbgate-tools';
 import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
-import { Expression, Select, treeToSql, dumpSqlSelect, Condition } from 'dbgate-sqltree';
+import { Expression, Select, treeToSql, dumpSqlSelect, Condition, CompoudCondition } from 'dbgate-sqltree';
 import { isTypeLogical } from 'dbgate-tools';
 
 export interface DisplayColumn {
@@ -213,6 +213,32 @@ export abstract class GridDisplay {
       }
     }
 
+    if (this.baseTableOrView && this.config.multiColumnFilter) {
+      try {
+        const condition = parseFilter(this.config.multiColumnFilter, 'string');
+        if (condition) {
+          const orCondition: CompoudCondition = {
+            conditionType: 'or',
+            conditions: [],
+          };
+          for (const column of this.baseTableOrView.columns) {
+            orCondition.conditions.push(
+              _.cloneDeepWith(condition, (expr: Expression) => {
+                if (expr.exprType == 'placeholder') {
+                  return this.createColumnExpression(column, { alias: 'basetbl' });
+                }
+              })
+            );
+          }
+          if (orCondition.conditions.length > 0) {
+            conditions.push(orCondition);
+          }
+        }
+      } catch (err) {
+        console.warn(err.message);
+      }
+    }
+
     if (conditions.length > 0) {
       select.where = {
         conditionType: 'and',
@@ -336,6 +362,15 @@ export abstract class GridDisplay {
     this.reload();
   }
 
+  setMutliColumnFilter(value) {
+    this.setConfig(cfg => ({
+      ...cfg,
+      multiColumnFilter: value,
+      formViewRecordNumber: 0,
+    }));
+    this.reload();
+  }
+
   showFilter(uniqueName) {
     this.setConfig(cfg => {
       if (!cfg.filters.uniqueName)

packages/web/src/datagrid/DataGrid.svelte

@@ -87,6 +87,7 @@
   export let isDynamicStructure = false;
   export let macroCondition;
   export let onRunMacro;
+  export let hasMultiColumnFilter = false;
 
   export let loadedRows;
 
@@ -181,6 +182,7 @@
           {isDynamicStructure}
           {useEvalFilters}
           {isFormView}
+          {hasMultiColumnFilter}
           driver={display?.driver}
         />
       </WidgetColumnBarItem>

packages/web/src/datagrid/TableDataGrid.svelte

@@ -159,6 +159,7 @@
       {display}
       showReferences
       showMacros
+      hasMultiColumnFilter
       onRunMacro={handleRunMacro}
       macroCondition={macro => macro.type == 'transformValue'}
       onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}

packages/web/src/formview/FormViewFilters.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import _ from 'lodash';
+  import InlineButton from '../buttons/InlineButton.svelte';
   import DataFilterControl from '../datagrid/DataFilterControl.svelte';
 
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import keycodes from '../utility/keycodes';
   import FormViewFilterColumn from './FormViewFilterColumn.svelte';
   // import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte';
@@ -21,16 +23,19 @@
   export let useEvalFilters;
   export let isFormView;
 
+  export let hasMultiColumnFilter;
+
   $: baseTable = display?.baseTable;
   $: formFilterColumns = display?.config?.formFilterColumns;
   $: filters = display?.config?.filters;
+  $: multiColumnFilter = display?.config?.multiColumnFilter;
 
   $: allFilterNames = isFormView ? _.union(_.keys(filters || {}), formFilterColumns || []) : _.keys(filters);
 </script>
 
 {#if isFormView}
   <div class="m-1">
-    <div>Column filter</div>
+    <div>Column name filter</div>
     <div class="flex">
       <input
         type="text"
@@ -54,18 +59,35 @@
   </div>
 {/if}
 
-<!-- <DataFilterControl
-  filterType='string'
-  filter={filters[uniqueName]}
-  setFilter={value => display.setFilter(uniqueName, value)}
-  {driver}
-  {conid}
-  {database}
-  {schemaName}
-  {pureName}
-  columnName={column.uniquePath.length == 1 ? column.uniquePath[0] : null}
-  foreignKey={column.foreignKey}
-/> -->
+{#if hasMultiColumnFilter}
+  <div class="m-1">
+    <div class="space-between">
+      <span>Multi column filter</span>
+      {#if multiColumnFilter}
+        <InlineButton
+          square
+          narrow
+          on:click={() => {
+            display.setMutliColumnFilter(null);
+          }}
+        >
+          <FontIcon icon="icon close" />
+        </InlineButton>
+      {/if}
+    </div>
+
+    <DataFilterControl
+      filterType="string"
+      filter={multiColumnFilter}
+      setFilter={value => display.setMutliColumnFilter(value)}
+      {driver}
+      {conid}
+      {database}
+      {schemaName}
+      {pureName}
+    />
+  </div>
+{/if}
 
 <ManagerInnerContainer width={managerSize}>
   {#each allFilterNames as uniqueName}

packages/web/src/tabs/ViewDataTab.svelte

@@ -66,6 +66,7 @@ import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/T
       cache={$cache}
       setCache={cache.update}
       focusOnVisible
+      hasMultiColumnFilter
       gridCoreComponent={SqlDataGridCore}
       formViewComponent={SqlFormView}
     />