perspective filters supports lookup

packages/datalib/src/PerspectiveConfig.ts

@@ -1,3 +1,5 @@
+import { ForeignKeyInfo } from "dbgate-types";
+
 export interface PerspectiveConfigColumns {
   expandedColumns: string[];
   checkedColumns: string[];
@@ -21,7 +23,9 @@ export interface PerspectiveCustomJoinConfig {
 export interface PerspectiveFilterColumnInfo {
   columnName: string;
   filterType: string;
-  tableName: string;
+  pureName: string;
+  schemaName: string;
+  foreignKey: ForeignKeyInfo;
 }
 export interface PerspectiveConfig extends PerspectiveConfigColumns {
   filters: { [uniqueName: string]: string };

packages/datalib/src/PerspectiveTreeNode.ts

@@ -353,7 +353,9 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     return {
       columnName: this.columnName,
       filterType: this.filterType,
-      tableName: this.column.pureName,
+      pureName: this.column.pureName,
+      schemaName: this.column.schemaName,
+      foreignKey: this.foreignKey,
     };
   }
 

packages/filterparser/src/filterTool.ts

@@ -3,7 +3,7 @@ import moment from 'moment';
 
 export type FilterMultipleValuesMode = 'is' | 'is_not' | 'contains' | 'begins' | 'ends';
 
-export function getFilterValueExpression(value, dataType) {
+export function getFilterValueExpression(value, dataType?) {
   if (value == null) return 'NULL';
   if (isTypeDateTime(dataType)) return moment(value).format('YYYY-MM-DD HH:mm:ss');
   if (value === true) return 'TRUE';

packages/web/src/elements/ManagerInnerContainer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let width;
-  export let isFlex;
+  export let isFlex = false;
 </script>
 
 <div style={`max-width: ${width}px`} class:isFlex>

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -4,13 +4,17 @@
   import _ from 'lodash';
 
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
-import FontIcon from '../icons/FontIcon.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte';
 
   export let managerSize;
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
 
+  export let conid;
+  export let database;
+  export let driver;
+
   $: allFilterNames = _.keys(config.filterInfos || {});
 </script>
 
@@ -25,6 +29,9 @@ import FontIcon from '../icons/FontIcon.svelte';
       <PerspectiveFiltersColumn
         filterInfo={config.filterInfos[uniqueName]}
         {uniqueName}
+        {conid}
+        {database}
+        {driver}
         filter={config.filters[uniqueName]}
         onSetFilter={value =>
           setConfig(cfg => ({

packages/web/src/perspectives/PerspectiveFiltersColumn.svelte

@@ -4,22 +4,39 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { getFilterType } from 'dbgate-filterparser';
+  import { getFilterType, getFilterValueExpression } from 'dbgate-filterparser';
   import { PerspectiveFilterColumnInfo } from 'dbgate-datalib';
+  import { showModal } from '../modals/modalTools';
+  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import ValueLookupModal from '../modals/ValueLookupModal.svelte';
 
   export let filterInfo: PerspectiveFilterColumnInfo;
 
   export let filter;
   export let onSetFilter;
   export let onRemoveFilter;
+
+  export let conid;
+  export let database;
+  export let driver;
 </script>
 
 <div class="m-1">
   <div class="space-between">
-    {filterInfo.columnName} ({filterInfo.tableName})
+    {filterInfo.columnName} ({filterInfo.pureName})
     <InlineButton square narrow on:click={onRemoveFilter}>
       <FontIcon icon="icon close" />
     </InlineButton>
   </div>
-  <DataFilterControl filterType={filterInfo.filterType} {filter} setFilter={onSetFilter} />
+  <DataFilterControl
+    filterType={filterInfo.filterType}
+    {filter}
+    setFilter={onSetFilter}
+    {conid}
+    {database}
+    {driver}
+    columnName={filterInfo.columnName}
+    pureName={filterInfo.pureName}
+    foreignKey={filterInfo.foreignKey}
+  />
 </div>

packages/web/src/perspectives/PerspectiveView.svelte

@@ -58,6 +58,7 @@
   export let database;
   export let schemaName;
   export let pureName;
+  export let driver;
 
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
@@ -118,7 +119,7 @@
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem title="Filters" name="tableFilters">
-        <PerspectiveFilters {managerSize} {config} {setConfig} />
+        <PerspectiveFilters {managerSize} {config} {setConfig} {conid} {database} {driver} />
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -26,6 +26,9 @@
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import { extensions } from '../stores';
 
   export let tabid;
   export let conid;
@@ -35,6 +38,9 @@
 
   export const activator = createActivator('PerspectiveTab', true);
 
+  $: connection = useConnectionInfo({ conid });
+  $: driver = findEngineDriver($connection, $extensions);
+
   const config = usePerspectiveConfig(tabid);
   const cache = new PerspectiveCache();
   const loadedCounts = writable({});
@@ -51,6 +57,7 @@
     {database}
     {schemaName}
     {pureName}
+    {driver}
     config={$config}
     setConfig={(value, reload) => {
       if (reload) {