perspectives:add to filter ctx menu

packages/datalib/src/PerspectiveConfig.ts

@@ -21,6 +21,7 @@ export interface PerspectiveCustomJoinConfig {
 export interface PerspectiveFilterColumnInfo {
   columnName: string;
   filterType: string;
+  tableName: string;
 }
 export interface PerspectiveConfig extends PerspectiveConfigColumns {
   filters: { [uniqueName: string]: string };

packages/datalib/src/PerspectiveTreeNode.ts

@@ -5,6 +5,7 @@ import {
   PerspectiveConfig,
   PerspectiveConfigColumns,
   PerspectiveCustomJoinConfig,
+  PerspectiveFilterColumnInfo,
 } from './PerspectiveConfig';
 import _isEqual from 'lodash/isEqual';
 import _cloneDeep from 'lodash/cloneDeep';
@@ -152,25 +153,25 @@ export abstract class PerspectiveTreeNode {
     }
   }
 
-  setFilter(value) {
-    this.setConfig(
-      cfg => ({
-        ...cfg,
-        filters: {
-          ...cfg.filters,
-          [this.uniqueName]: value,
-        },
-        filterInfos: {
-          ...cfg.filterInfos,
-          [this.uniqueName]: {
-            columnName: this.columnName,
-            filterType: this.filterType,
-          },
-        },
-      }),
-      true
-    );
-  }
+  // setFilter(value) {
+  //   this.setConfig(
+  //     cfg => ({
+  //       ...cfg,
+  //       filters: {
+  //         ...cfg.filters,
+  //         [this.uniqueName]: value,
+  //       },
+  //       filterInfos: {
+  //         ...cfg.filterInfos,
+  //         [this.uniqueName]: {
+  //           columnName: this.columnName,
+  //           filterType: this.filterType,
+  //         },
+  //       },
+  //     }),
+  //     true
+  //   );
+  // }
 
   getFilter() {
     return this.config.filters[this.uniqueName];
@@ -232,6 +233,10 @@ export abstract class PerspectiveTreeNode {
   getBaseTableFromThis() {
     return null;
   }
+
+  get filterInfo(): PerspectiveFilterColumnInfo {
+    return null;
+  }
 }
 
 export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
@@ -344,6 +349,14 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     return this.refTable;
   }
 
+  get filterInfo(): PerspectiveFilterColumnInfo {
+    return {
+      columnName: this.columnName,
+      filterType: this.filterType,
+      tableName: this.column.pureName,
+    };
+  }
+
   parseFilterCondition() {
     const filter = this.getFilter();
     if (!filter) return null;

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -16,10 +16,9 @@
 <ManagerInnerContainer width={managerSize}>
   {#each allFilterNames as uniqueName}
     <PerspectiveFiltersColumn
-      columnName={config.filterInfos[uniqueName].columnName}
+      filterInfo={config.filterInfos[uniqueName]}
       {uniqueName}
       filter={config.filters[uniqueName]}
-      filterType={config.filterInfos[uniqueName].filterType}
       onSetFilter={value =>
         setConfig(cfg => ({
           ...cfg,

packages/web/src/perspectives/PerspectiveFiltersColumn.svelte

@@ -5,20 +5,21 @@
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { getFilterType } from 'dbgate-filterparser';
+  import { PerspectiveFilterColumnInfo } from 'dbgate-datalib';
+
+  export let filterInfo: PerspectiveFilterColumnInfo;
 
   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}
+    {filterInfo.columnName} ({filterInfo.tableName})
     <InlineButton square narrow on:click={onRemoveFilter}>
       <FontIcon icon="icon close" />
     </InlineButton>
   </div>
-  <DataFilterControl {filterType} {filter} setFilter={onSetFilter} />
+  <DataFilterControl filterType={filterInfo.filterType} {filter} setFilter={onSetFilter} />
 </div>

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -17,7 +17,19 @@
 
   function createMenu() {
     const customJoin = node.customJoinConfig;
+    const filterInfo = node.filterInfo;
     return [
+      filterInfo && {
+        text: 'Add to filter',
+        onClick: () =>
+          setConfig(cfg => ({
+            ...cfg,
+            filterInfos: {
+              ...cfg.filterInfos,
+              [node.uniqueName]: filterInfo,
+            },
+          })),
+      },
       customJoin && {
         text: 'Remove custom join',
         onClick: () =>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -282,7 +282,7 @@
             {/each}
           </tr>
         {/each}
-        <tr>
+        <!-- <tr>
           {#each display.columns as column}
             <th class="filter">
               <DataFilterControl
@@ -293,7 +293,7 @@
               />
             </th>
           {/each}
-        </tr>
+        </tr> -->
       </thead>
       <tbody>
         {#each display.rows as row}