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,33 +121,31 @@
       {/if}
     </svelte:fragment>
 
-    <div class="wrapper">
-      <HorizontalSplitter initialValue="70%">
-        <div class="content" slot="1">
-          <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
-        </div>
+    <HorizontalSplitter initialValue="70%">
+      <div class="content" slot="1">
+        <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
+      </div>
 
-        <svelte:fragment slot="2">
-          <WidgetColumnBar>
-            <WidgetColumnBarItem title="Output files" name="output" height="20%">
-              <RunnerOutputFiles {runnerId} {executeNumber} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Messages" name="messages">
-              <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
-              <PreviewDataGrid reader={$previewReaderStore} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
-              <FormTextField label="Schedule" name="schedule" />
-              <FormTextField label="Start variable index" name="startVariableIndex" />
-            </WidgetColumnBarItem>
-          </WidgetColumnBar>
-        </svelte:fragment>
-      </HorizontalSplitter>
-    </div>
+      <svelte:fragment slot="2">
+        <WidgetColumnBar>
+          <WidgetColumnBarItem title="Output files" name="output" height="20%">
+            <RunnerOutputFiles {runnerId} {executeNumber} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Messages" name="messages">
+            <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
+            <PreviewDataGrid reader={$previewReaderStore} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
+            <FormTextField label="Schedule" name="schedule" />
+            <FormTextField label="Start variable index" name="startVariableIndex" />
+          </WidgetColumnBarItem>
+        </WidgetColumnBar>
+      </svelte:fragment>
+    </HorizontalSplitter>
 
-    <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>
-        <slot />
-      </div>
-    {:else}
+
+    <div class="content" class:noPadding class:fullScreen>
       <slot />
-    {/if}
-    {#if !skipFooter}
-      <div class="footer">
-        <slot name="footer" />
-      </div>
-    {/if}
+    </div>
+
+    <div class="footer" class:fullScreen>
+      <slot name="footer" />
+    </div>
   </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;