fullscreen modal template, sql generator modal

packages/web/src/commands/stdCommands.ts

@@ -5,6 +5,7 @@ import { ThemeDefinition } from 'dbgate-types';
 import ConnectionModal from '../modals/ConnectionModal.svelte';
 import AboutModal from '../modals/AboutModal.svelte';
 import ImportExportModal from '../modals/ImportExportModal.svelte';
+import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
 import { showModal } from '../modals/modalTools';
 import newQuery from '../query/newQuery';
 import saveTabFile from '../utility/saveTabFile';
@@ -12,7 +13,7 @@ import openNewTab from '../utility/openNewTab';
 import getElectron from '../utility/getElectron';
 import { openElectronFile } from '../utility/openElectronFile';
 import { getDefaultFileFormat } from '../plugins/fileformats';
-import { getCurrentConfig } from '../stores';
+import { getCurrentConfig, getCurrentDatabase } from '../stores';
 import './recentDatabaseSwitch';
 
 const electron = getElectron();
@@ -188,6 +189,23 @@ registerCommand({
     }),
 });
 
+registerCommand({
+  id: 'sql.generator',
+  category: 'SQL',
+  name: 'SQL Generator',
+  toolbar: true,
+  icon: 'icon sql-generator',
+  testEnabled: () => getCurrentDatabase() != null,
+  onClick: () =>
+    showModal(SqlGeneratorModal, {
+      importToArchive: true,
+      initialValues: {
+        conid: getCurrentDatabase()?.connection?._id,
+        database: getCurrentDatabase()?.name,
+      },
+    }),
+});
+
 export function registerFileCommands({
   idPrefix,
   category,

packages/web/src/icons/FontIcon.svelte

@@ -16,6 +16,7 @@
     'icon add': 'mdi mdi-plus-circle',
     'icon connection': 'mdi mdi-connection',
     'icon cell-data': 'mdi mdi-details',
+    'icon sql-generator': 'mdi mdi-cog-transfer',
 
     'icon database': 'mdi mdi-database',
     'icon server': 'mdi mdi-server',

packages/web/src/modals/ImportExportModal.svelte

@@ -113,7 +113,7 @@
     ...initialValues,
   }}
 >
-  <ModalBase {...$$restProps} fullScreen skipBody skipFooter>
+  <ModalBase {...$$restProps} fullScreen>
     <svelte:fragment slot="header">
       Import/Export
       {#if busy}
@@ -121,7 +121,6 @@
       {/if}
     </svelte:fragment>
 
-    <div class="wrapper">
     <HorizontalSplitter initialValue="70%">
       <div class="content" slot="1">
         <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
@@ -145,9 +144,8 @@
         </WidgetColumnBar>
       </svelte:fragment>
     </HorizontalSplitter>
-    </div>
 
-    <div class="footer">
+    <svelte:fragment slot="footer">
       <div class="flex m-2">
         {#if busy}
           <LargeButton icon="icon close" on:click={handleCancel}>Cancel</LargeButton>
@@ -158,30 +156,11 @@
 
         <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
       </div>
-    </div>
+    </svelte:fragment>
   </ModalBase>
 </FormProvider>
 
 <style>
-  .wrapper {
-    display: flex;
-
-    position: fixed;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 100px;
-  }
-  .footer {
-    position: fixed;
-    height: 100px;
-    left: 0;
-    right: 0;
-    bottom: 0px;
-    border-top: 1px solid var(--theme-border);
-    background-color: var(--theme-bg-modalheader);
-  }
-
   .content {
     border-top: 1px solid var(--theme-border);
     flex: 1;

packages/web/src/modals/ModalBase.svelte

@@ -8,8 +8,6 @@
   export let fullScreen = false;
   export let noPadding = false;
   export let modalId;
-  export let skipBody = false;
-  export let skipFooter = false;
 
   function handleCloseModal() {
     if (modalId == getActiveModalId()) {
@@ -43,18 +41,14 @@
         </div>
       </div>
     {/if}
-    {#if !skipBody}
+
-      <div class="content" class:noPadding>
+    <div class="content" class:noPadding class:fullScreen>
       <slot />
     </div>
-    {:else}
+
-      <slot />
+    <div class="footer" class:fullScreen>
-    {/if}
-    {#if !skipFooter}
-      <div class="footer">
       <slot name="footer" />
     </div>
-    {/if}
   </div>
 </div>
 
@@ -113,18 +107,37 @@
     background-color: var(--theme-bg-modalheader);
   }
 
-  .content {
+  .content:not(.fullScreen) {
     border-bottom: 1px solid var(--theme-border);
     border-top: 1px solid var(--theme-border);
   }
 
-  .content:not(.noPadding) {
+  .content:not(.noPadding):not(.fullScreen) {
     padding: 15px;
   }
 
-  .footer {
+  .content.fullScreen {
+    display: flex;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    bottom: 100px;
+  }
+
+  .footer:not(.fullScreen) {
     border-bottom: 1px solid var(--theme-border);
     padding: 15px;
     background-color: var(--theme-bg-modalheader);
   }
+
+  .footer.fullScreen {
+    position: fixed;
+    height: 100px;
+    left: 0;
+    right: 0;
+    bottom: 0px;
+    border-top: 1px solid var(--theme-border);
+    background-color: var(--theme-bg-modalheader);
+  }
 </style>

packages/web/src/modals/SqlGeneratorModal.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import LargeButton from '../elements/LargeButton.svelte';
+
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let conid;
+  export let database;
+
+  let busy = false;
+</script>
+
+<ModalBase {...$$restProps} fullScreen>
+  <svelte:fragment slot="header">
+    SQL Generator
+    {#if busy}
+      <FontIcon icon="icon loading" />
+    {/if}
+  </svelte:fragment>
+
+  <svelte:fragment slot="footer">
+    <div class="flex m-2">
+      <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
+    </div>
+  </svelte:fragment>
+</ModalBase>

packages/web/src/stores.ts

@@ -119,3 +119,10 @@ recentDatabases.subscribe(value => {
   recentDatabasesValue = value;
 });
 export const getRecentDatabases = () => _.compact(recentDatabasesValue);
+
+let currentDatabaseValue = null;
+currentDatabase.subscribe(value => {
+  currentDatabaseValue = value;
+  invalidateCommands();
+});
+export const getCurrentDatabase = () => currentDatabaseValue;