open related datble column menu #41

packages/web/src/appobj/databaseObjectAppObject.js

@@ -79,7 +79,7 @@ const defaultTabs = {
   views: 'ViewDataTab',
 };
 
-async function openObjectDetail(
+export async function openDatabaseObjectDetail(
   setOpenedTabs,
   tabComponent,
   sqlTemplate,
@@ -128,7 +128,7 @@ function Menu({ data, makeAppObj, setOpenedTabs, showModal }) {
                 />
               ));
             } else {
-              openObjectDetail(setOpenedTabs, menu.tab, menu.sqlTemplate, data);
+              openDatabaseObjectDetail(setOpenedTabs, menu.tab, menu.sqlTemplate, data);
             }
           }}
         >
@@ -147,7 +147,7 @@ const databaseObjectAppObject = () => (
   const key = title;
   const Icon = (props) => getIconImage(icons[objectTypeField], props);
   const onClick = ({ schemaName, pureName }) => {
-    openObjectDetail(
+    openDatabaseObjectDetail(
       setOpenedTabs,
       defaultTabs[objectTypeField],
       defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -4,8 +4,11 @@ import ColumnLabel from './ColumnLabel';
 import DropDownButton from '../widgets/DropDownButton';
 import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
 import { useSplitterDrag } from '../widgets/Splitter';
-import { FontIcon } from '../icons';
+import { FontIcon, TableIcon } from '../icons';
 import { isTypeDateTime } from '@dbgate/tools';
+import { openNewTab } from '../utility/common';
+import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject';
+import { useSetOpenedTabs } from '../utility/globalState';
 
 const HeaderDiv = styled.div`
   display: flex;
@@ -37,8 +40,44 @@ const GroupingLabel = styled.span`
   white-space: nowrap;
 `;
 
-export default function ColumnHeaderControl({ column, setSort, onResize, order, setGrouping, grouping }) {
+export default function ColumnHeaderControl({
+  column,
+  setSort,
+  onResize,
+  order,
+  setGrouping,
+  grouping,
+  conid,
+  database,
+}) {
   const onResizeDown = useSplitterDrag('clientX', onResize);
+  const { foreignKey } = column;
+  const setOpenedTabs = useSetOpenedTabs();
+
+  const openReferencedTable = () => {
+    openDatabaseObjectDetail(setOpenedTabs, 'TableDataTab', null, {
+      schemaName: foreignKey.refSchemaName,
+      pureName: foreignKey.refTableName,
+      conid,
+      database,
+      objectTypeField: 'tables',
+    });
+    // openNewTab(setOpenedTabs, {
+    //   title: foreignKey.refTableName,
+    //   tooltip,
+    //   icon: sqlTemplate ? 'sql.svg' : icons[objectTypeField],
+    //   tabComponent: sqlTemplate ? 'QueryTab' : tabComponent,
+    //   props: {
+    //     schemaName,
+    //     pureName,
+    //     conid,
+    //     database,
+    //     objectTypeField,
+    //     initialArgs: sqlTemplate ? { sqlTemplate } : null,
+    //   },
+    // });
+  };
+  console.log('COLUMN', column);
   return (
     <HeaderDiv>
       <LabelDiv>
@@ -63,6 +102,12 @@ export default function ColumnHeaderControl({ column, setSort, onResize, order,
           <DropDownMenuItem onClick={() => setSort('ASC')}>Sort ascending</DropDownMenuItem>
           <DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
           <DropDownMenuDivider />
+          {foreignKey && (
+            <DropDownMenuItem onClick={openReferencedTable}>
+              Open table <strong>{foreignKey.refTableName}</strong>
+            </DropDownMenuItem>
+          )}
+          {foreignKey && <DropDownMenuDivider />}
           <DropDownMenuItem onClick={() => setGrouping('GROUP')}>Group by</DropDownMenuItem>
           <DropDownMenuItem onClick={() => setGrouping('MAX')}>MAX</DropDownMenuItem>
           <DropDownMenuItem onClick={() => setGrouping('MIN')}>MIN</DropDownMenuItem>

packages/web/src/datagrid/DataGridCore.js

@@ -1174,6 +1174,8 @@ export default function DataGridCore(props) {
               >
                 <ColumnHeaderControl
                   column={col}
+                  conid={conid}
+                  database={database}
                   setSort={display.sortable ? (order) => display.setSort(col.uniqueName, order) : null}
                   order={display.getSortOrder(col.uniqueName)}
                   onResize={(diff) => display.resizeColumn(col.uniqueName, col.widthNumber, diff)}