filter list in perspective

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

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
     );

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>

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>

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>