From 020382a153173aca0d0c098bde8c8994fa598b5a Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 1 Jan 2022 10:27:31 +0100
Subject: [PATCH] datagrid: list of active filters in left column

---
 packages/datalib/src/GridDisplay.ts              |  4 ++++
 packages/web/src/datagrid/DataGrid.svelte        | 14 ++++++++++++--
 .../web/src/jsonview/JsonViewFilterColumn.svelte | 16 ++++++++++++++--
 packages/web/src/jsonview/JsonViewFilters.svelte |  3 ++-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts
index c5c48544c..8a32913d5 100644
--- a/packages/datalib/src/GridDisplay.ts
+++ b/packages/datalib/src/GridDisplay.ts
@@ -127,6 +127,10 @@ export abstract class GridDisplay {
     return this.getColumns(null).filter(col => col.isChecked || col.uniquePath.length == 1);
   }
 
+  findColumn(uniqueName: string) {
+    return this.getColumns(null).find(x => x.uniqueName == uniqueName);
+  }
+
   getFkTarget(column: DisplayColumn): TableInfo {
     return null;
   }
diff --git a/packages/web/src/datagrid/DataGrid.svelte b/packages/web/src/datagrid/DataGrid.svelte
index e861b34c7..95b16745a 100644
--- a/packages/web/src/datagrid/DataGrid.svelte
+++ b/packages/web/src/datagrid/DataGrid.svelte
@@ -176,10 +176,20 @@
       <WidgetColumnBarItem
         title="Filters"
         name="jsonFilters"
-        height="30%"
+        height={'30%'}
         skip={!isDynamicStructure || !display?.filterable}
       >
-        <JsonViewFilters {...$$props} {managerSize} />
+        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} />
+      </WidgetColumnBarItem>
+
+      <WidgetColumnBarItem
+        title="Filters"
+        name="tableFilters"
+        height={'15%'}
+        skip={!display?.filterable || isDynamicStructure || display.filterCount == 0}
+        collapsed={isDetailView}
+      >
+        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} />
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem
diff --git a/packages/web/src/jsonview/JsonViewFilterColumn.svelte b/packages/web/src/jsonview/JsonViewFilterColumn.svelte
index 7a97aee8d..930b80473 100644
--- a/packages/web/src/jsonview/JsonViewFilterColumn.svelte
+++ b/packages/web/src/jsonview/JsonViewFilterColumn.svelte
@@ -4,10 +4,21 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../elements/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
+  import { getFilterType } from 'dbgate-filterparser';
 
   export let uniqueName;
   export let display;
   export let filters;
+  export let isDynamicStructure;
+
+  function computeFilterType(isDynamicStructure, display, uniqueName) {
+    if (isDynamicStructure) return 'mongo';
+    const col = display.findColumn(uniqueName);
+    if (col) {
+      return col.filterType || getFilterType(col.dataType);
+    }
+    return 'string';
+  }
 </script>
 
 <div class="m-1">
@@ -15,15 +26,16 @@
     <ColumnLabel columnName={uniqueName} />
     <InlineButton
       square
+      narrow
       on:click={() => {
         display.removeFilter(uniqueName);
       }}
     >
-      <FontIcon icon="icon delete" />
+      <FontIcon icon="icon close" />
     </InlineButton>
   </div>
   <DataFilterControl
-    filterType="mongo"
+    filterType={computeFilterType(isDynamicStructure, display, uniqueName)}
     filter={filters[uniqueName]}
     setFilter={value => display.setFilter(uniqueName, value)}
   />
diff --git a/packages/web/src/jsonview/JsonViewFilters.svelte b/packages/web/src/jsonview/JsonViewFilters.svelte
index 4da0a8ecf..819b00dc4 100644
--- a/packages/web/src/jsonview/JsonViewFilters.svelte
+++ b/packages/web/src/jsonview/JsonViewFilters.svelte
@@ -6,6 +6,7 @@
 
   export let managerSize;
   export let display;
+  export let isDynamicStructure;
 
   $: filters = display?.config?.filters;
 
@@ -14,6 +15,6 @@
 
 <ManagerInnerContainer width={managerSize}>
   {#each allFilterNames as uniqueName}
-    <JsonViewFilterColumn {uniqueName} {display} {filters} />
+    <JsonViewFilterColumn {uniqueName} {display} {filters} {isDynamicStructure} />
   {/each}
 </ManagerInnerContainer>