dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 15:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fullscreen modal template, sql generator modal

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-27 16:45:51 +01:00
parent 2268d6126b
commit 9c27c224ec
6 changed files with 109 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/web/src/commands/stdCommands.ts
View File

@@ -5,6 +5,7 @@ import { ThemeDefinition } from 'dbgate-types';
import ConnectionModal from '../modals/ConnectionModal.svelte'; import ConnectionModal from '../modals/ConnectionModal.svelte';
import AboutModal from '../modals/AboutModal.svelte'; import AboutModal from '../modals/AboutModal.svelte';
import ImportExportModal from '../modals/ImportExportModal.svelte'; import ImportExportModal from '../modals/ImportExportModal.svelte';
import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
import { showModal } from '../modals/modalTools'; import { showModal } from '../modals/modalTools';
import newQuery from '../query/newQuery'; import newQuery from '../query/newQuery';
import saveTabFile from '../utility/saveTabFile'; import saveTabFile from '../utility/saveTabFile';
@@ -12,7 +13,7 @@ import openNewTab from '../utility/openNewTab';
import getElectron from '../utility/getElectron'; import getElectron from '../utility/getElectron';
import { openElectronFile } from '../utility/openElectronFile'; import { openElectronFile } from '../utility/openElectronFile';
import { getDefaultFileFormat } from '../plugins/fileformats'; import { getDefaultFileFormat } from '../plugins/fileformats';
import { getCurrentConfig } from '../stores'; import { getCurrentConfig, getCurrentDatabase } from '../stores';
import './recentDatabaseSwitch'; import './recentDatabaseSwitch';
const electron = getElectron(); 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({ export function registerFileCommands({
idPrefix, idPrefix,
category, category,

1
packages/web/src/icons/FontIcon.svelte
View File

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

71
packages/web/src/modals/ImportExportModal.svelte
View File

@@ -113,7 +113,7 @@
...initialValues, ...initialValues,
}} }}
> >
<ModalBase {...$$restProps} fullScreen skipBody skipFooter> <ModalBase {...$$restProps} fullScreen>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
Import/Export Import/Export
{#if busy} {#if busy}
@@ -121,33 +121,31 @@
{/if} {/if}
</svelte:fragment> </svelte:fragment>
<div class="wrapper"> <HorizontalSplitter initialValue="70%">
<HorizontalSplitter initialValue="70%"> <div class="content" slot="1">
<div class="content" slot="1"> <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
<ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} /> </div>
</div>
<svelte:fragment slot="2"> <svelte:fragment slot="2">
<WidgetColumnBar> <WidgetColumnBar>
<WidgetColumnBarItem title="Output files" name="output" height="20%"> <WidgetColumnBarItem title="Output files" name="output" height="20%">
<RunnerOutputFiles {runnerId} {executeNumber} /> <RunnerOutputFiles {runnerId} {executeNumber} />
</WidgetColumnBarItem> </WidgetColumnBarItem>
<WidgetColumnBarItem title="Messages" name="messages"> <WidgetColumnBarItem title="Messages" name="messages">
<SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} /> <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
</WidgetColumnBarItem> </WidgetColumnBarItem>
<WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}> <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
<PreviewDataGrid reader={$previewReaderStore} /> <PreviewDataGrid reader={$previewReaderStore} />
</WidgetColumnBarItem> </WidgetColumnBarItem>
<WidgetColumnBarItem title="Advanced configuration" name="config" collapsed> <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
<FormTextField label="Schedule" name="schedule" /> <FormTextField label="Schedule" name="schedule" />
<FormTextField label="Start variable index" name="startVariableIndex" /> <FormTextField label="Start variable index" name="startVariableIndex" />
</WidgetColumnBarItem> </WidgetColumnBarItem>
</WidgetColumnBar> </WidgetColumnBar>
</svelte:fragment> </svelte:fragment>
</HorizontalSplitter> </HorizontalSplitter>
</div>
<div class="footer"> <svelte:fragment slot="footer">
<div class="flex m-2"> <div class="flex m-2">
{#if busy} {#if busy}
<LargeButton icon="icon close" on:click={handleCancel}>Cancel</LargeButton> <LargeButton icon="icon close" on:click={handleCancel}>Cancel</LargeButton>
@@ -158,30 +156,11 @@
<LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton> <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
</div> </div>
</div> </svelte:fragment>
</ModalBase> </ModalBase>
</FormProvider> </FormProvider>
<style> <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 { .content {
border-top: 1px solid var(--theme-border); border-top: 1px solid var(--theme-border);
flex: 1; flex: 1;

45
packages/web/src/modals/ModalBase.svelte
View File

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

28
packages/web/src/modals/SqlGeneratorModal.svelte Normal file
View File

@@ -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>

7
packages/web/src/stores.ts
View File

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