perspective: open table ctx menu

packages/datalib/src/PerspectiveDisplay.ts

@@ -47,6 +47,10 @@ export class PerspectiveDisplayColumn {
     return this.parentNodes[level]?.title;
   }
 
+  getParentDataAttributes(level) {
+    return this.parentNodes[level]?.headerDataAttributes;
+  }
+
   // hasParentNode(node: PerspectiveTreeNode) {
   //   return this.parentNodes.includes(node);
   // }

packages/datalib/src/PerspectiveTreeNode.ts

@@ -68,6 +68,9 @@ export abstract class PerspectiveTreeNode {
   get fieldName() {
     return this.codeName;
   }
+  get headerDataAttributes() {
+    return {};
+  }
   get dataField() {
     return this.codeName;
   }
@@ -375,6 +378,18 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
 
     return condition;
   }
+
+  get headerDataAttributes() {
+    if (this.foreignKey) {
+      return {
+        schemaName: this.foreignKey.refSchemaName,
+        pureName: this.foreignKey.refTableName,
+        conid: this.databaseConfig.conid,
+        database: this.databaseConfig.database,
+      };
+    }
+    return null;
+  }
 }
 
 export class PerspectiveTableNode extends PerspectiveTreeNode {
@@ -432,6 +447,15 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
   getBaseTableFromThis() {
     return this.table;
   }
+
+  get headerDataAttributes() {
+    return {
+      schemaName: this.table.schemaName,
+      pureName: this.table.pureName,
+      conid: this.databaseConfig.conid,
+      database: this.databaseConfig.database,
+    };
+  }
 }
 
 export class PerspectiveViewNode extends PerspectiveTreeNode {

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveDisplayColumn } from 'dbgate-datalib';
-  import _ from 'lodash';
+  import _, { mapKeys } from 'lodash';
 
   import DropDownButton from '../buttons/DropDownButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
@@ -17,15 +17,10 @@
       ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName)
       : -1;
   $: isSortDefined = config.sort?.[parentUniqueName]?.length > 0;
-
 </script>
 
 {#if column.isVisible(columnLevel)}
-  <th
+  <th rowspan={column.rowSpan} class="columnHeader" data-column={column.columnIndex}>
-    rowspan={column.rowSpan}
-    class="columnHeader"
-    data-column={column.columnIndex}
-  >
     <div class="wrap">
       <div class="label">
         {column.title}
@@ -51,7 +46,12 @@
   </th>
 {/if}
 {#if column.showParent(columnLevel)}
-  <th colspan={column.getColSpan(columnLevel)} class="tableHeader">{column.getParentName(columnLevel)}</th>
+  <th
+    colspan={column.getColSpan(columnLevel)}
+    class="tableHeader"
+    {..._.mapKeys(column.getParentDataAttributes(columnLevel), (v, k) => `data-${k}`)}
+    >{column.getParentName(columnLevel)}</th
+  >
 {/if}
 
 <style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -30,6 +30,7 @@
   import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte';
   import createRef from '../utility/createRef';
   import { getPerspectiveNodeMenu } from './perspectiveMenu';
+  import openNewTab from '../utility/openNewTab';
 
   const dbg = debug('dbgate:PerspectivaTable');
   export const activator = createActivator('PerspectiveTable', true);
@@ -176,6 +177,28 @@
       registerCloseHandler(() => {
         td.classList.remove('highlight');
       });
+
+      const pureName = td.getAttribute('data-pureName');
+      const schemaName = td.getAttribute('data-schemaName');
+      if (pureName) {
+        res.push({
+          text: `Open table ${pureName}`,
+          onClick: () => {
+            openNewTab({
+              title: pureName,
+              icon: 'img table',
+              tabComponent: 'TableDataTab',
+              props: {
+                schemaName,
+                pureName,
+                conid,
+                database,
+                objectTypeField: 'tables',
+              },
+            });
+          },
+        });
+      }
     }
 
     res.push([