database object context menu

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -14,6 +14,113 @@
     views: 'ViewDataTab',
   };
 
+  const menus = {
+    tables: [
+      {
+        label: 'Open data',
+        tab: 'TableDataTab',
+        forceNewTab: true,
+      },
+      {
+        label: 'Open form',
+        tab: 'TableDataTab',
+        forceNewTab: true,
+        initialData: {
+          grid: {
+            isFormView: true,
+          },
+        },
+      },
+      {
+        label: 'Open structure',
+        tab: 'TableStructureTab',
+      },
+      {
+        label: 'Query designer',
+        isQueryDesigner: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'Export',
+        isExport: true,
+      },
+      {
+        label: 'Open in free table editor',
+        isOpenFreeTable: true,
+      },
+      {
+        label: 'Open active chart',
+        isActiveChart: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'SQL: CREATE TABLE',
+        sqlTemplate: 'CREATE TABLE',
+      },
+    ],
+    views: [
+      {
+        label: 'Open data',
+        tab: 'ViewDataTab',
+        forceNewTab: true,
+      },
+      {
+        label: 'Open structure',
+        tab: 'TableStructureTab',
+      },
+      {
+        label: 'Query designer',
+        isQueryDesigner: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'Export',
+        isExport: true,
+      },
+      {
+        label: 'Open in free table editor',
+        isOpenFreeTable: true,
+      },
+      {
+        label: 'Open active chart',
+        isActiveChart: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'SQL: CREATE VIEW',
+        sqlTemplate: 'CREATE OBJECT',
+      },
+      {
+        label: 'SQL: CREATE TABLE',
+        sqlTemplate: 'CREATE TABLE',
+      },
+    ],
+    procedures: [
+      {
+        label: 'SQL: CREATE PROCEDURE',
+        sqlTemplate: 'CREATE OBJECT',
+      },
+      {
+        label: 'SQL: EXECUTE',
+        sqlTemplate: 'EXECUTE PROCEDURE',
+      },
+    ],
+    functions: [
+      {
+        label: 'SQL: CREATE FUNCTION',
+        sqlTemplate: 'CREATE OBJECT',
+      },
+    ],
+  };
+
   export async function openDatabaseObjectDetail(
     tabComponent,
     sqlTemplate,
@@ -51,11 +158,15 @@
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
-  import { currentDatabase, openedConnections } from '../stores';
+  import { currentDatabase, extensions, openedConnections } from '../stores';
   import openNewTab from '../utility/openNewTab';
   import { filterName } from 'dbgate-datalib';
   import { getConnectionInfo } from '../utility/metadataLoaders';
   import fullDisplayName from '../utility/fullDisplayName';
+  import ImportExportModal from '../modals/ImportExportModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { findEngineDriver } from 'dbgate-tools';
+  import uuidv1 from 'uuid/v1';
 
   export let data;
 
@@ -89,6 +200,103 @@
     //   },
     // });
   }
+
+  const getDriver = async () => {
+    const conn = await getConnectionInfo(data);
+    if (!conn) return;
+    const driver = findEngineDriver(conn, $extensions);
+    return driver;
+  };
+
+  function createMenu() {
+    const { objectTypeField } = data;
+    return menus[objectTypeField].map(menu => {
+      if (menu.divider) return menu;
+      return {
+        text: menu.label,
+        onClick: async () => {
+          if (menu.isExport) {
+            showModal(ImportExportModal, {
+              initialValues: {
+                sourceStorageType: 'database',
+                sourceConnectionId: data.conid,
+                sourceDatabaseName: data.database,
+                sourceSchemaName: data.schemaName,
+                sourceList: [data.pureName],
+              },
+            });
+          } else if (menu.isOpenFreeTable) {
+            const coninfo = await getConnectionInfo(data);
+            openNewTab({
+              title: data.pureName,
+              icon: 'img free-table',
+              tabComponent: 'FreeTableTab',
+              props: {
+                initialArgs: {
+                  functionName: 'tableReader',
+                  props: {
+                    connection: {
+                      ...coninfo,
+                      database: data.database,
+                    },
+                    schemaName: data.schemaName,
+                    pureName: data.pureName,
+                  },
+                },
+              },
+            });
+          } else if (menu.isActiveChart) {
+            const driver = await getDriver();
+            const dmp = driver.createDumper();
+            dmp.put('^select * from %f', data);
+            openNewTab(
+              {
+                title: data.pureName,
+                icon: 'img chart',
+                tabComponent: 'ChartTab',
+                props: {
+                  conid: data.conid,
+                  database: data.database,
+                },
+              },
+              {
+                editor: {
+                  config: { chartType: 'bar' },
+                  sql: dmp.s,
+                },
+              }
+            );
+          } else if (menu.isQueryDesigner) {
+            openNewTab(
+              {
+                title: 'Query #',
+                icon: 'img query-design',
+                tabComponent: 'QueryDesignTab',
+                props: {
+                  conid: data.conid,
+                  database: data.database,
+                },
+              },
+              {
+                editor: {
+                  tables: [
+                    {
+                      ...data,
+                      designerId: uuidv1(),
+                      left: 50,
+                      top: 50,
+                    },
+                  ],
+                },
+              }
+            );
+          } else {
+            openDatabaseObjectDetail(menu.tab, menu.sqlTemplate, data, menu.forceNewTab, menu.initialData);
+          }
+        },
+      };
+    });
+  }
 </script>
 
 <AppObjectCore
@@ -96,6 +304,7 @@
   {data}
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
   icon={icons[data.objectTypeField]}
+  menu={createMenu}
   on:click={handleClick}
   on:expand
 />