From 9051ba2ee1ebef70c984638faf624c933f0cd974 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 4 Aug 2022 08:16:22 +0200
Subject: [PATCH] filter list in perspective

---
 packages/datalib/src/PerspectiveConfig.ts     |  7 ++++
 packages/datalib/src/PerspectiveTreeNode.ts   |  7 ++++
 .../perspectives/PerspectiveFilters.svelte    | 39 +++++++++++++++++++
 .../PerspectiveFiltersColumn.svelte           | 24 ++++++++++++
 .../src/perspectives/PerspectiveView.svelte   |  6 +++
 5 files changed, 83 insertions(+)
 create mode 100644 packages/web/src/perspectives/PerspectiveFilters.svelte
 create mode 100644 packages/web/src/perspectives/PerspectiveFiltersColumn.svelte

diff --git a/packages/datalib/src/PerspectiveConfig.ts b/packages/datalib/src/PerspectiveConfig.ts
index a3e836d0f..bf7d2eea8 100644
--- a/packages/datalib/src/PerspectiveConfig.ts
+++ b/packages/datalib/src/PerspectiveConfig.ts
@@ -17,8 +17,14 @@ export interface PerspectiveCustomJoinConfig {
     refColumnName: string;
   }[];
 }
+
+export interface PerspectiveFilterColumnInfo {
+  columnName: string;
+  filterType: string;
+}
 export interface PerspectiveConfig extends PerspectiveConfigColumns {
   filters: { [uniqueName: string]: string };
+  filterInfos: { [uniqueName: string]: PerspectiveFilterColumnInfo };
   sort: {
     [parentUniqueName: string]: {
       uniqueName: string;
@@ -35,6 +41,7 @@ export function createPerspectiveConfig(): PerspectiveConfig {
     uncheckedColumns: [],
     customJoins: [],
     filters: {},
+    filterInfos: {},
     sort: {},
   };
 }
diff --git a/packages/datalib/src/PerspectiveTreeNode.ts b/packages/datalib/src/PerspectiveTreeNode.ts
index 70e9ca0b5..7a463ed4a 100644
--- a/packages/datalib/src/PerspectiveTreeNode.ts
+++ b/packages/datalib/src/PerspectiveTreeNode.ts
@@ -160,6 +160,13 @@ export abstract class PerspectiveTreeNode {
           ...cfg.filters,
           [this.uniqueName]: value,
         },
+        filterInfos: {
+          ...cfg.filterInfos,
+          [this.uniqueName]: {
+            columnName: this.columnName,
+            filterType: this.filterType,
+          },
+        },
       }),
       true
     );
diff --git a/packages/web/src/perspectives/PerspectiveFilters.svelte b/packages/web/src/perspectives/PerspectiveFilters.svelte
new file mode 100644
index 000000000..9b02568b2
--- /dev/null
+++ b/packages/web/src/perspectives/PerspectiveFilters.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
+
+  import _ from 'lodash';
+
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte';
+
+  export let managerSize;
+  export let config: PerspectiveConfig;
+  export let setConfig: ChangePerspectiveConfigFunc;
+
+  $: allFilterNames = _.keys(config.filterInfos || {});
+</script>
+
+<ManagerInnerContainer width={managerSize}>
+  {#each allFilterNames as uniqueName}
+    <PerspectiveFiltersColumn
+      columnName={config.filterInfos[uniqueName].columnName}
+      {uniqueName}
+      filter={config.filters[uniqueName]}
+      filterType={config.filterInfos[uniqueName].filterType}
+      onSetFilter={value =>
+        setConfig(cfg => ({
+          ...cfg,
+          filters: {
+            ...cfg.filters,
+            [uniqueName]: value,
+          },
+        }))}
+      onRemoveFilter={value =>
+        setConfig(cfg => ({
+          ...cfg,
+          filters: _.omit(cfg.filters, [uniqueName]),
+          filterInfos: _.omit(cfg.filterInfos, [uniqueName]),
+        }))}
+    />
+  {/each}
+</ManagerInnerContainer>
diff --git a/packages/web/src/perspectives/PerspectiveFiltersColumn.svelte b/packages/web/src/perspectives/PerspectiveFiltersColumn.svelte
new file mode 100644
index 000000000..3e8d015e1
--- /dev/null
+++ b/packages/web/src/perspectives/PerspectiveFiltersColumn.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import DataFilterControl from '../datagrid/DataFilterControl.svelte';
+
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { getFilterType } from 'dbgate-filterparser';
+
+  export let filter;
+  export let onSetFilter;
+  export let onRemoveFilter;
+  export let filterType;
+  export let columnName;
+</script>
+
+<div class="m-1">
+  <div class="space-between">
+    {columnName}
+    <InlineButton square narrow on:click={onRemoveFilter}>
+      <FontIcon icon="icon close" />
+    </InlineButton>
+  </div>
+  <DataFilterControl {filterType} {filter} setFilter={onSetFilter} />
+</div>
diff --git a/packages/web/src/perspectives/PerspectiveView.svelte b/packages/web/src/perspectives/PerspectiveView.svelte
index c8b967445..518cc16f3 100644
--- a/packages/web/src/perspectives/PerspectiveView.svelte
+++ b/packages/web/src/perspectives/PerspectiveView.svelte
@@ -49,6 +49,8 @@
   import registerCommand from '../commands/registerCommand';
   import { showModal } from '../modals/modalTools';
   import CustomJoinModal from './CustomJoinModal.svelte';
+  import JsonViewFilters from '../jsonview/JsonViewFilters.svelte';
+  import PerspectiveFilters from './PerspectiveFilters.svelte';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -114,6 +116,10 @@
           {/if}
         </ManagerInnerContainer>
       </WidgetColumnBarItem>
+
+      <WidgetColumnBarItem title="Filters" name="tableFilters" height={'15%'}>
+        <PerspectiveFilters {managerSize} {config} {setConfig} />
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>