switch database command

packages/web/src/modals/FavoriteModal.svelte

@@ -15,7 +15,7 @@
   import FormSelectField from '../forms/FormSelectField.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormButton from '../forms/FormButton.svelte';
-import { apiCall } from '../utility/api';
+  import { apiCall } from '../utility/api';
 
   export let editingData;
   export let savingTab;
@@ -29,8 +29,8 @@ import { apiCall } from '../utility/api';
         urlPath: _.kebabCase(_.deburr(savingTab.title)),
       }
     : editingData
-    ? _.pick(editingData, savedProperties)
-    : {};
+      ? _.pick(editingData, savedProperties)
+      : {};
 
   $: savedFile = savingTab && savingTab.props && savingTab.props.savedFile;
 

packages/web/src/modals/SwitchDatabaseModal.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import getElectron from '../utility/getElectron';
+  import hasPermission from '../utility/hasPermission';
+  import localforage from 'localforage';
+  import ModalBase from './ModalBase.svelte';
+  import uuidv1 from 'uuid/v1';
+  import { closeCurrentModal } from './modalTools';
+  import { copyTextToClipboard } from '../utility/clipboard';
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormValues from '../forms/FormValues.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormButton from '../forms/FormButton.svelte';
+  import { apiCall } from '../utility/api';
+  import FormConnectionSelect from '../impexp/FormConnectionSelect.svelte';
+  import FormDatabaseSelect from '../impexp/FormDatabaseSelect.svelte';
+  import { changeTab } from '../utility/common';
+
+  export let editingData;
+  export let callingTab;
+
+  const handleSubmit = async ev => {
+    const { conid, database } = ev.detail;
+    changeTab(callingTab.tabid, tab => ({
+      ...tab,
+      props: {
+        ...tab.props,
+        conid,
+        database,
+      },
+    }));
+    closeCurrentModal();
+    // console.log('SwitchDatabaseModal.handleSubmit', ev);
+    // changeTab(tabid, tab => ({ ...tab, busy }));
+  };
+
+  $: initialValues = {
+    conid: callingTab?.props?.conid,
+    database: callingTab?.props?.database,
+  };
+</script>
+
+<FormProvider {initialValues}>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Switch database</svelte:fragment>
+
+    <FormConnectionSelect name="conid" label="Server" direction="source" isNative />
+    <FormDatabaseSelect conidName="conid" name="database" label="Database" isNative />
+
+    <svelte:fragment slot="footer">
+      <FormValues let:values>
+        <FormSubmit value="OK" on:click={handleSubmit} />
+        <FormButton value="Cancel" on:click={closeCurrentModal} />
+      </FormValues>
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/tabpanel/TabsPanel.svelte

@@ -292,6 +292,7 @@
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
   import TabCloseButton from '../elements/TabCloseButton.svelte';
   import CloseTabModal from '../modals/CloseTabModal.svelte';
+  import SwitchDatabaseModal from '../modals/SwitchDatabaseModal.svelte';
 
   export let multiTabIndex;
   export let shownTab;
@@ -304,8 +305,8 @@
     $currentDatabase && $currentDatabase.name && $currentDatabase.connection
       ? `database://${$currentDatabase.name}-${$currentDatabase.connection._id}`
       : $currentDatabase && $currentDatabase.connection
-      ? `server://${$currentDatabase.connection._id}`
-      : '_no';
+        ? `server://${$currentDatabase.connection._id}`
+        : '_no';
 
   $: tabsWithDb = $openedTabs.filter(showTabFilterFunc).map(tab => ({
     ...tab,
@@ -372,6 +373,16 @@
             onClick: () => showModal(FavoriteModal, { savingTab: tab }),
           },
         ],
+      tabComponent &&
+        tabs[tabComponent] &&
+        tabs[tabComponent].allowSwitchDatabase &&
+        tabs[tabComponent].allowSwitchDatabase(props) && [
+          { divider: true },
+          {
+            text: 'Switch database',
+            onClick: () => showModal(SwitchDatabaseModal, { callingTab: tab }),
+          },
+        ],
       { divider: true },
       appobj &&
         appobj.createAppObjectMenu &&

packages/web/src/tabs/QueryTab.svelte

@@ -51,6 +51,8 @@
       getCurrentEditor() != null && !getCurrentEditor()?.isBusy() && getCurrentEditor()?.hasConnection(),
     onClick: () => getCurrentEditor().executeCurrent(),
   });
+
+  export const allowSwitchDatabase = props => true;
 </script>
 
 <script lang="ts">
@@ -336,6 +338,15 @@
 
   const quickExportHandlerRef = createQuickExportHandlerRef();
 
+  $: {
+    conid;
+    database;
+    if (canKill()) {
+      kill();
+    }
+    errorMessages = [];
+  }
+
   let isInitialized = false;
 </script>
 

packages/web/src/tabs/TableDataTab.svelte

@@ -57,6 +57,7 @@
 
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
+  export const allowSwitchDatabase = props => true;
 </script>
 
 <script lang="ts">

packages/web/src/tabs/ViewDataTab.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
+  export const allowSwitchDatabase = props => true;
 </script>
 
 <script lang="ts">
@@ -8,9 +9,9 @@
   import { findEngineDriver } from 'dbgate-tools';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
-import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
-import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
-import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';