mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

query toolbar

Browse Source
This commit is contained in:
Jan Prochazka 2022-02-12 18:29:53 +01:00
parent a8265cebff
commit 1b77675ed7
6 changed files with 111 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/buttons/ToolStripContainer.svelte
View File

@ -10,7 +10,8 @@
.content {
position: absolute;
left: 0;
top: var(--dim-toolbar-height);
top: var(--dim-toolstrip-height);
border-top: 1px solid var(--theme-border);
right: 0;
bottom: 0;
display: flex;
@ -19,9 +20,9 @@
.toolstrip {
position: absolute;
left: 0;
height: var(--dim-toolbar-height);
height: var(--dim-toolstrip-height);
right: 0;
display: flex;
background: var(--theme-bg-0);
background: var(--theme-bg-1);
}
</style>

44
packages/web/src/buttons/ToolStripExportButton.svelte
View File

@ -0,0 +1,44 @@
<script lang="ts" context="module">
import { getContext, setContext } from 'svelte';
import { extensions } from '../stores';
import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
import createRef from '../utility/createRef';
export function createQuickExportHandlerRef() {
const quickExportHandlerRef = createRef(null);
setContext('quickExportHandlerRef', quickExportHandlerRef);
return quickExportHandlerRef;
}
export function registerQuickExportHandler(handler) {
const quickExportHandlerRef: any = getContext('quickExportHandlerRef');
if (quickExportHandlerRef) {
quickExportHandlerRef.set(handler);
}
}
</script>
<script lang="ts">
import getElectron from '../utility/getElectron';
import ToolStripCommandButton from './ToolStripCommandButton.svelte';
import ToolStripDropDownButton from './ToolStripDropDownButton.svelte';
const electron = getElectron();
export let quickExportHandlerRef;
function getExportMenu() {
return [
quickExportHandlerRef?.value ? createQuickExportMenuItems($extensions, quickExportHandlerRef?.value) : null,
{ divider: true },
{ command: 'sqlDataGrid.export', text: 'Advanced settings' },
];
}
</script>
{#if electron}
<ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
{:else}
<ToolStripCommandButton command="sqlDataGrid.export" />
{/if}

4
packages/web/src/datagrid/SqlDataGridCore.svelte
View File

@ -66,6 +66,7 @@
<script lang="ts">
import _ from 'lodash';
import { getContext } from 'svelte';
import { registerQuickExportHandler } from '../buttons/ToolStripExportButton.svelte';
import registerCommand from '../commands/registerCommand';
import ImportExportModal from '../modals/ImportExportModal.svelte';
@ -196,8 +197,7 @@
fmt
);
};
const setQuickExportHandler = getContext('setQuickExportHandler');
if (setQuickExportHandler) (setQuickExportHandler as any)(quickExportHandler);
registerQuickExportHandler(quickExportHandler);
registerMenu(
{ command: 'sqlDataGrid.openActiveChart', tag: 'chart' },

98
packages/web/src/tabs/QueryTab.svelte
View File

@ -68,6 +68,8 @@
import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
import { showSnackbarError } from '../utility/snackbar';
import { apiCall, apiOff, apiOn } from '../utility/api';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
export let tabid;
export let conid;
@ -270,52 +272,60 @@
}
</script>
<VerticalSplitter isSplitter={visibleResultTabs}>
<svelte:fragment slot="1">
{#if driver?.dialect?.nosql}
<AceEditor
mode="javascript"
value={$editorState.value || ''}
splitterOptions={driver?.getQuerySplitterOptions('script')}
menu={createMenu()}
on:input={e => setEditorData(e.detail)}
on:focus={() => {
activator.activate();
invalidateCommands();
}}
bind:this={domEditor}
/>
{:else}
<SqlEditor
engine={$connection && $connection.engine}
{conid}
{database}
splitterOptions={driver?.getQuerySplitterOptions('script')}
value={$editorState.value || ''}
menu={createMenu()}
on:input={e => setEditorData(e.detail)}
on:focus={() => {
activator.activate();
invalidateCommands();
}}
bind:this={domEditor}
/>
{/if}
</svelte:fragment>
<svelte:fragment slot="2">
<ResultTabs tabs={[{ label: 'Messages', slot: 0 }]} {sessionId} {executeNumber}>
<svelte:fragment slot="0">
<SocketMessageView
eventName={sessionId ? `session-info-${sessionId}` : null}
on:messageClick={handleMesageClick}
{executeNumber}
showProcedure
showLine
<ToolStripContainer>
<VerticalSplitter isSplitter={visibleResultTabs}>
<svelte:fragment slot="1">
{#if driver?.dialect?.nosql}
<AceEditor
mode="javascript"
value={$editorState.value || ''}
splitterOptions={driver?.getQuerySplitterOptions('script')}
menu={createMenu()}
on:input={e => setEditorData(e.detail)}
on:focus={() => {
activator.activate();
invalidateCommands();
}}
bind:this={domEditor}
/>
</svelte:fragment>
</ResultTabs>
{:else}
<SqlEditor
engine={$connection && $connection.engine}
{conid}
{database}
splitterOptions={driver?.getQuerySplitterOptions('script')}
value={$editorState.value || ''}
menu={createMenu()}
on:input={e => setEditorData(e.detail)}
on:focus={() => {
activator.activate();
invalidateCommands();
}}
bind:this={domEditor}
/>
{/if}
</svelte:fragment>
<svelte:fragment slot="2">
<ResultTabs tabs={[{ label: 'Messages', slot: 0 }]} {sessionId} {executeNumber}>
<svelte:fragment slot="0">
<SocketMessageView
eventName={sessionId ? `session-info-${sessionId}` : null}
on:messageClick={handleMesageClick}
{executeNumber}
showProcedure
showLine
/>
</svelte:fragment>
</ResultTabs>
</svelte:fragment>
</VerticalSplitter>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="query.execute" />
<ToolStripCommandButton command="query.kill" />
<ToolStripCommandButton command="query.save" />
<ToolStripCommandButton command="query.formatCode" />
</svelte:fragment>
</VerticalSplitter>
</ToolStripContainer>
{#if sessionId}
<StatusBarTabItem icon={busy ? 'icon loading' : 'icon check'} text={busy ? 'Running...' : 'Finished'} />

16
packages/web/src/tabs/TableDataTab.svelte
View File

@ -58,6 +58,7 @@
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
export let tabid;
export let conid;
@ -119,18 +120,7 @@
setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
$: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
let quickExportHandler = null;
function setQuickExportHandler(value) {
quickExportHandler = value;
}
setContext('setQuickExportHandler', setQuickExportHandler);
function getExportMenu() {
return [
quickExportHandler ? createQuickExportMenuItems($extensions, quickExportHandler) : null,
{ divider: true },
{ command: 'sqlDataGrid.export', text: 'Advanced settings' },
];
}
const quickExportHandlerRef = createQuickExportHandlerRef();
</script>
<ToolStripContainer>
@ -151,7 +141,7 @@
<ToolStripCommandButton command="tableData.save" />
<ToolStripCommandButton command="dataGrid.insertNewRow" />
<ToolStripCommandButton command="dataGrid.deleteSelectedRows" />
<ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
<ToolStripExportButton {quickExportHandlerRef} />
</svelte:fragment>
</ToolStripContainer>

5
packages/web/src/tabs/ViewDataTab.svelte
View File

@ -10,6 +10,7 @@
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 DataGrid from '../datagrid/DataGrid.svelte';
import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
@ -50,6 +51,8 @@ import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
const collapsedLeftColumnStore = writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
$: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
const quickExportHandlerRef = createQuickExportHandlerRef();
</script>
{#if display}
@ -66,7 +69,7 @@ import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
/>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="dataGrid.refresh" />
<ToolStripCommandButton command="sqlDataGrid.export" />
<ToolStripExportButton {quickExportHandlerRef} />
</svelte:fragment>
</ToolStripContainer>
{/if}