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

tabstrips

Browse Source
This commit is contained in:
Jan Prochazka
2022-02-13 08:22:23 +01:00
parent 488b200fcb
commit e0b8eb3e79
10 changed files with 354 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/mainMenuDefinition.js
View File

@@ -19,8 +19,8 @@ module.exports = [
label: 'Window', label: 'Window',
submenu: [ submenu: [
{ command: 'new.query', hideDisabled: true }, { command: 'new.query', hideDisabled: true },
{ command: 'new.modelCompare', hideDisabled: true },
{ command: 'new.freetable', hideDisabled: true }, { command: 'new.freetable', hideDisabled: true },
{ command: 'new.shell', hideDisabled: true },
{ divider: true }, { divider: true },
{ command: 'tabs.closeTab', hideDisabled: true }, { command: 'tabs.closeTab', hideDisabled: true },
{ command: 'tabs.closeAll', hideDisabled: true }, { command: 'tabs.closeAll', hideDisabled: true },
@@ -50,6 +50,14 @@ module.exports = [
{ command: 'settings.show' }, { command: 'settings.show' },
], ],
}, },
{
label: 'Tools',
submenu: [
{ command: 'sql.generator' },
{ command: 'file.import' },
{ command: 'new.modelCompare' },
],
},
{ {
label: 'Help', label: 'Help',
submenu: [ submenu: [

3
packages/web/src/buttons/ToolStripCommandButton.svelte
View File

@@ -12,11 +12,12 @@
export let command; export let command;
export let component = ToolStripButton; export let component = ToolStripButton;
export let hideDisabled = false;
$: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any; $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
</script> </script>
{#if cmd} {#if cmd && (!hideDisabled || cmd.enabled)}
<svelte:component <svelte:component
this={component} this={component}
title={getCommandTitle(cmd)} title={getCommandTitle(cmd)}

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

@@ -103,6 +103,7 @@ registerCommand({
category: 'New', category: 'New',
icon: 'img shell', icon: 'img shell',
name: 'JavaScript Shell', name: 'JavaScript Shell',
menuName:' New JavaScript shell',
onClick: () => { onClick: () => {
openNewTab({ openNewTab({
title: 'Shell #', title: 'Shell #',
@@ -539,6 +540,7 @@ export function registerFileCommands({
category, category,
name: 'Undo', name: 'Undo',
group: 'undo', group: 'undo',
icon: 'icon undo',
testEnabled: () => getCurrentEditor()?.canUndo(), testEnabled: () => getCurrentEditor()?.canUndo(),
onClick: () => getCurrentEditor().undo(), onClick: () => getCurrentEditor().undo(),
}); });
@@ -547,6 +549,7 @@ export function registerFileCommands({
category, category,
group: 'redo', group: 'redo',
name: 'Redo', name: 'Redo',
icon: 'icon redo',
testEnabled: () => getCurrentEditor()?.canRedo(), testEnabled: () => getCurrentEditor()?.canRedo(),
onClick: () => getCurrentEditor().redo(), onClick: () => getCurrentEditor().redo(),
}); });

1
packages/web/src/formview/FormView.svelte
View File

@@ -356,6 +356,7 @@
return {}; return {};
}, {}); }, {});
registerMenu( registerMenu(
{ command: 'dataForm.refresh' },
{ placeTag: 'switch' }, { placeTag: 'switch' },
{ command: 'dataForm.copyToClipboard' }, { command: 'dataForm.copyToClipboard' },
{ divider: true }, { divider: true },

106
packages/web/src/tableeditor/TableEditor.svelte
View File

@@ -1,60 +1,60 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
const getCurrentEditor = () => getActiveComponent('TableEditor'); const getCurrentEditor = () => getActiveComponent('TableEditor');
// registerCommand({ registerCommand({
// id: 'tableEditor.addColumn', id: 'tableEditor.addColumn',
// category: 'Table editor', category: 'Table editor',
// name: 'Add column', name: 'Add column',
// icon: 'icon add-column', icon: 'icon add-column',
// toolbar: true, toolbar: true,
// isRelatedToTab: true, isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(), testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addColumn(), onClick: () => getCurrentEditor().addColumn(),
// }); });
// registerCommand({ registerCommand({
// id: 'tableEditor.addPrimaryKey', id: 'tableEditor.addPrimaryKey',
// category: 'Table editor', category: 'Table editor',
// name: 'Add primary key', name: 'Add primary key',
// icon: 'icon add-key', icon: 'icon add-key',
// toolbar: true, toolbar: true,
// isRelatedToTab: true, isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(), testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
// onClick: () => getCurrentEditor().addPrimaryKey(), onClick: () => getCurrentEditor().addPrimaryKey(),
// }); });
// registerCommand({ registerCommand({
// id: 'tableEditor.addForeignKey', id: 'tableEditor.addForeignKey',
// category: 'Table editor', category: 'Table editor',
// name: 'Add foreign key', name: 'Add foreign key',
// icon: 'icon add-key', icon: 'icon add-key',
// toolbar: true, toolbar: true,
// isRelatedToTab: true, isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(), testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addForeignKey(), onClick: () => getCurrentEditor().addForeignKey(),
// }); });
// registerCommand({ registerCommand({
// id: 'tableEditor.addIndex', id: 'tableEditor.addIndex',
// category: 'Table editor', category: 'Table editor',
// name: 'Add index', name: 'Add index',
// icon: 'icon add-key', icon: 'icon add-key',
// toolbar: true, toolbar: true,
// isRelatedToTab: true, isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(), testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addIndex(), onClick: () => getCurrentEditor().addIndex(),
// }); });
// registerCommand({ registerCommand({
// id: 'tableEditor.addUnique', id: 'tableEditor.addUnique',
// category: 'Table editor', category: 'Table editor',
// name: 'Add unique', name: 'Add unique',
// icon: 'icon add-key', icon: 'icon add-key',
// toolbar: true, toolbar: true,
// isRelatedToTab: true, isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(), testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addUnique(), onClick: () => getCurrentEditor().addUnique(),
// }); });
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -105,9 +105,9 @@
}); });
} }
// export function allowAddPrimaryKey() { export function allowAddPrimaryKey() {
// return writable() && !tableInfo?.primaryKey; return writable() && !tableInfo?.primaryKey;
// } }
export function addPrimaryKey() { export function addPrimaryKey() {
showModal(PrimaryKeyEditorModal, { showModal(PrimaryKeyEditorModal, {

398
packages/web/src/tabs/CompareModelTab.svelte
View File

@@ -162,6 +162,8 @@
import { useArchiveFolders, useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders'; import { useArchiveFolders, useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
import resolveApi from '../utility/resolveApi'; import resolveApi from '../utility/resolveApi';
import { showSnackbarSuccess } from '../utility/snackbar'; import { showSnackbarSuccess } from '../utility/snackbar';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
export let tabid; export let tabid;
@@ -336,226 +338,234 @@
const menu = getContextMenu(); const menu = getContextMenu();
</script> </script>
<div class="wrapper" use:contextMenu={menu}> <ToolStripContainer>
<VerticalSplitter> <div class="wrapper" use:contextMenu={menu}>
<div slot="1" class="flexcol"> <VerticalSplitter>
<FormProviderCore {values}> <div slot="1" class="flexcol">
<div class="topbar"> <FormProviderCore {values}>
<div class="col-3"> <div class="topbar">
<FormConnectionSelect <div class="col-3">
name="sourceConid" <FormConnectionSelect
label="Source server" name="sourceConid"
templateProps={{ noMargin: true }} label="Source server"
isNative
allowChooseModel
notSelected
/>
</div>
<div class="col-3">
{#if $values?.sourceConid == '__model'}
<FormSelectField
name="sourceDatabase"
label="Source DB model"
templateProps={{ noMargin: true }} templateProps={{ noMargin: true }}
isNative isNative
options={($archiveFolders || []).map(x => ({ label: x.name, value: `archive:${x.name}` }))} allowChooseModel
notSelected notSelected
/> />
{:else} </div>
<div class="col-3">
{#if $values?.sourceConid == '__model'}
<FormSelectField
name="sourceDatabase"
label="Source DB model"
templateProps={{ noMargin: true }}
isNative
options={($archiveFolders || []).map(x => ({ label: x.name, value: `archive:${x.name}` }))}
notSelected
/>
{:else}
<FormDatabaseSelect
conidName="sourceConid"
name="sourceDatabase"
label="Source database"
templateProps={{ noMargin: true }}
isNative
notSelected
/>
{/if}
</div>
<div class="deployButton">
<InlineButton on:click={deploy}>
<div class="arrow">
<FontIcon icon="icon arrow-right-bold" />
</div>
Deploy (experimental)
</InlineButton>
</div>
<div class="col-3">
<FormConnectionSelect
name="targetConid"
label="Target server"
templateProps={{ noMargin: true }}
isNative
notSelected
/>
</div>
<div class="col-3">
<FormDatabaseSelect <FormDatabaseSelect
conidName="sourceConid" conidName="targetConid"
name="sourceDatabase" name="targetDatabase"
label="Source database" label="Target database"
templateProps={{ noMargin: true }} templateProps={{ noMargin: true }}
isNative isNative
notSelected notSelected
/> />
{/if} </div>
</div> </div>
<div class="deployButton"> <div class="filters">
<InlineButton on:click={deploy}> <SearchInput placeholder="Search tables or objects" bind:value={filter} />
<div class="arrow">
<FontIcon icon="icon arrow-right-bold" />
</div>
Deploy (experimental)
</InlineButton>
</div>
<div class="col-3">
<FormConnectionSelect
name="targetConid"
label="Target server"
templateProps={{ noMargin: true }}
isNative
notSelected
/>
</div>
<div class="col-3">
<FormDatabaseSelect
conidName="targetConid"
name="targetDatabase"
label="Target database"
templateProps={{ noMargin: true }}
isNative
notSelected
/>
</div>
</div>
<div class="filters">
<SearchInput placeholder="Search tables or objects" bind:value={filter} />
<RowsFilterSwitcher
icon="img add"
label="Added"
{values}
field="hideAdded"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'added'),
$values,
'added'
).length}
/>
<RowsFilterSwitcher
icon="img minus"
label="Removed"
{values}
field="hideRemoved"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'removed'),
$values,
'removed'
).length}
/>
<RowsFilterSwitcher
icon="img changed"
label="Changed"
{values}
field="hideChanged"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'changed'),
$values,
'changed'
).length}
/>
<RowsFilterSwitcher
icon="img equal"
label="Equal"
{values}
field="hideEqual"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'equal'),
$values,
'equal'
).length}
/>
{#each _.keys(DbDiffCompareDefs) as objectTypeField}
<RowsFilterSwitcher <RowsFilterSwitcher
icon={DbDiffCompareDefs[objectTypeField].icon} icon="img add"
label={DbDiffCompareDefs[objectTypeField].plural} label="Added"
{values} {values}
field={'hide_' + objectTypeField} field="hideAdded"
count={filterDiffRowsByFlag( count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.objectTypeField == objectTypeField), diffRowsAll.filter(x => x.state == 'added'),
$values, $values,
objectTypeField 'added'
).length}
/>
<RowsFilterSwitcher
icon="img minus"
label="Removed"
{values}
field="hideRemoved"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'removed'),
$values,
'removed'
).length}
/>
<RowsFilterSwitcher
icon="img changed"
label="Changed"
{values}
field="hideChanged"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'changed'),
$values,
'changed'
).length}
/>
<RowsFilterSwitcher
icon="img equal"
label="Equal"
{values}
field="hideEqual"
count={filterDiffRowsByFlag(
diffRowsAll.filter(x => x.state == 'equal'),
$values,
'equal'
).length} ).length}
/> />
{/each}
</div>
</FormProviderCore>
<div class="tableWrapper"> {#each _.keys(DbDiffCompareDefs) as objectTypeField}
<ScrollableTableControl <RowsFilterSwitcher
rows={diffRows} icon={DbDiffCompareDefs[objectTypeField].icon}
bind:selectedIndex={pairIndex} label={DbDiffCompareDefs[objectTypeField].plural}
selectable {values}
disableFocusOutline field={'hide_' + objectTypeField}
columns={[ count={filterDiffRowsByFlag(
{ fieldName: 'isChecked', header: '', width: '50px', slot: 1, headerSlot: 2 }, diffRowsAll.filter(x => x.objectTypeField == objectTypeField),
{ fieldName: 'type', header: 'Type', width: '100px', slot: 3 }, $values,
{ fieldName: 'sourceSchemaName', header: 'Schema' }, objectTypeField
{ fieldName: 'sourcePureName', header: 'Name' }, ).length}
{ fieldName: 'state', header: 'Action', width: '100px' }, />
{ fieldName: 'targetSchemaName', header: 'Schema' }, {/each}
{ fieldName: 'targetPureName', header: 'Name' }, </div>
]} </FormProviderCore>
>
<input
type="checkbox"
slot="1"
let:row
disabled={row.state == 'equal'}
checked={!!$values[`isChecked_${row['identifier']}`]}
on:change={e => {
// @ts-ignore
$values = { ...$values, [`isChecked_${row.identifier}`]: e.target.checked };
}}
/>
<svelte:fragment slot="2">
<InlineButton on:click={handleCheckAll}>
<FontIcon icon="icon check-all" />
</InlineButton>
</svelte:fragment>
<svelte:fragment slot="3" let:row>
<FontIcon icon={row.typeIcon} />
{row.typeName}
</svelte:fragment>
</ScrollableTableControl>
</div>
</div>
<svelte:fragment slot="2"> <div class="tableWrapper">
<TabControl
tabs={[
{
label: 'DDL',
slot: 1,
},
{
label: 'Synchronize script',
slot: 2,
},
{
label: 'Columns',
slot: 3,
},
]}
>
<svelte:fragment slot="1">
<DiffView
leftTitle={diffRows[pairIndex]?.target?.pureName}
rightTitle={diffRows[pairIndex]?.source?.pureName}
leftText={getCreateObjectScript(diffRows[pairIndex]?.target, driver)}
rightText={getCreateObjectScript(diffRows[pairIndex]?.source, driver)}
/>
</svelte:fragment>
<svelte:fragment slot="2">
<SqlEditor readOnly value={sqlPreview} />
</svelte:fragment>
<svelte:fragment slot="3">
<ScrollableTableControl <ScrollableTableControl
rows={diffColumns} rows={diffRows}
bind:selectedIndex={pairIndex}
selectable
disableFocusOutline disableFocusOutline
columns={[ columns={[
{ fieldName: 'sourceColumnName', header: 'Name', width: '100px' }, { fieldName: 'isChecked', header: '', width: '50px', slot: 1, headerSlot: 2 },
{ fieldName: 'sourceDataType', header: 'Type' }, { fieldName: 'type', header: 'Type', width: '100px', slot: 3 },
{ fieldName: 'sourceNotNull', header: 'Not null', slot: 1 }, { fieldName: 'sourceSchemaName', header: 'Schema' },
{ fieldName: 'sourcePureName', header: 'Name' },
{ fieldName: 'state', header: 'Action', width: '100px' }, { fieldName: 'state', header: 'Action', width: '100px' },
{ fieldName: 'targetColumnName', header: 'Schema' }, { fieldName: 'targetSchemaName', header: 'Schema' },
{ fieldName: 'targetDataType', header: 'Name' }, { fieldName: 'targetPureName', header: 'Name' },
{ fieldName: 'targetNotNull', header: 'Not null', slot: 2 },
]} ]}
> >
<input type="checkbox" disabled slot="1" let:row checked={!!row.sourceNotNull} /> <input
<input type="checkbox" disabled slot="2" let:row checked={!!row.targetNotNull} /> type="checkbox"
slot="1"
let:row
disabled={row.state == 'equal'}
checked={!!$values[`isChecked_${row['identifier']}`]}
on:change={e => {
// @ts-ignore
$values = { ...$values, [`isChecked_${row.identifier}`]: e.target.checked };
}}
/>
<svelte:fragment slot="2">
<InlineButton on:click={handleCheckAll}>
<FontIcon icon="icon check-all" />
</InlineButton>
</svelte:fragment>
<svelte:fragment slot="3" let:row>
<FontIcon icon={row.typeIcon} />
{row.typeName}
</svelte:fragment>
</ScrollableTableControl> </ScrollableTableControl>
</svelte:fragment> </div>
</TabControl> </div>
</svelte:fragment>
</VerticalSplitter> <svelte:fragment slot="2">
</div> <TabControl
tabs={[
{
label: 'DDL',
slot: 1,
},
{
label: 'Synchronize script',
slot: 2,
},
{
label: 'Columns',
slot: 3,
},
]}
>
<svelte:fragment slot="1">
<DiffView
leftTitle={diffRows[pairIndex]?.target?.pureName}
rightTitle={diffRows[pairIndex]?.source?.pureName}
leftText={getCreateObjectScript(diffRows[pairIndex]?.target, driver)}
rightText={getCreateObjectScript(diffRows[pairIndex]?.source, driver)}
/>
</svelte:fragment>
<svelte:fragment slot="2">
<SqlEditor readOnly value={sqlPreview} />
</svelte:fragment>
<svelte:fragment slot="3">
<ScrollableTableControl
rows={diffColumns}
disableFocusOutline
columns={[
{ fieldName: 'sourceColumnName', header: 'Name', width: '100px' },
{ fieldName: 'sourceDataType', header: 'Type' },
{ fieldName: 'sourceNotNull', header: 'Not null', slot: 1 },
{ fieldName: 'state', header: 'Action', width: '100px' },
{ fieldName: 'targetColumnName', header: 'Schema' },
{ fieldName: 'targetDataType', header: 'Name' },
{ fieldName: 'targetNotNull', header: 'Not null', slot: 2 },
]}
>
<input type="checkbox" disabled slot="1" let:row checked={!!row.sourceNotNull} />
<input type="checkbox" disabled slot="2" let:row checked={!!row.targetNotNull} />
</ScrollableTableControl>
</svelte:fragment>
</TabControl>
</svelte:fragment>
</VerticalSplitter>
</div>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="compareModels.reportDiff" />
<ToolStripCommandButton command="compareModels.swap" />
<ToolStripCommandButton command="compareModels.deploy" />
<ToolStripCommandButton command="compareModels.refresh" />
</svelte:fragment>
</ToolStripContainer>
<style> <style>
.wrapper { .wrapper {

21
packages/web/src/tabs/DiagramTab.svelte
View File

@@ -23,6 +23,9 @@
import { findEngineDriver } from 'dbgate-tools'; import { findEngineDriver } from 'dbgate-tools';
import createActivator, { getActiveComponent } from '../utility/createActivator'; import createActivator, { getActiveComponent } from '../utility/createActivator';
import DiagramDesigner from '../designer/DiagramDesigner.svelte'; import DiagramDesigner from '../designer/DiagramDesigner.svelte';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import invalidateCommands from '../commands/invalidateCommands';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -47,6 +50,7 @@
export function undo() { export function undo() {
dispatchModel({ type: 'undo' }); dispatchModel({ type: 'undo' });
invalidateCommands();
} }
export function canRedo() { export function canRedo() {
@@ -55,20 +59,24 @@
export function redo() { export function redo() {
dispatchModel({ type: 'redo' }); dispatchModel({ type: 'redo' });
invalidateCommands();
} }
const handleChange = (value, skipUndoChain) => const handleChange = (value, skipUndoChain) => {
// @ts-ignore // @ts-ignore
dispatchModel({ dispatchModel({
type: 'compute', type: 'compute',
useMerge: skipUndoChain, useMerge: skipUndoChain,
compute: v => (_.isFunction(value) ? value(v) : value), compute: v => (_.isFunction(value) ? value(v) : value),
}); });
invalidateCommands();
};
const { editorState, editorValue, setEditorData } = useEditorData({ const { editorState, editorValue, setEditorData } = useEditorData({
tabid, tabid,
onInitialData: value => { onInitialData: value => {
dispatchModel({ type: 'reset', value }); dispatchModel({ type: 'reset', value });
invalidateCommands();
}, },
}); });
@@ -90,4 +98,13 @@
} }
</script> </script>
<DiagramDesigner value={$modelState.value || {}} {conid} {database} onChange={handleChange} menu={createMenu} /> <ToolStripContainer>
<DiagramDesigner value={$modelState.value || {}} {conid} {database} onChange={handleChange} menu={createMenu} />
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="designer.arrange" />
<ToolStripCommandButton command="diagram.save" />
<ToolStripCommandButton command="diagram.export" />
<ToolStripCommandButton command="diagram.undo" />
<ToolStripCommandButton command="diagram.redo" />
</svelte:fragment>
</ToolStripContainer>

44
packages/web/src/tabs/ShellTab.svelte
View File

@@ -37,6 +37,8 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import invalidateCommands from '../commands/invalidateCommands'; import invalidateCommands from '../commands/invalidateCommands';
import registerCommand from '../commands/registerCommand'; import registerCommand from '../commands/registerCommand';
@@ -211,21 +213,29 @@
} }
</script> </script>
<VerticalSplitter> <ToolStripContainer>
<svelte:fragment slot="1"> <VerticalSplitter>
<AceEditor <svelte:fragment slot="1">
value={$editorState.value || ''} <AceEditor
menu={createMenu()} value={$editorState.value || ''}
on:input={e => setEditorData(e.detail)} menu={createMenu()}
on:focus={() => { on:input={e => setEditorData(e.detail)}
activator.activate(); on:focus={() => {
invalidateCommands(); activator.activate();
}} invalidateCommands();
bind:this={domEditor} }}
mode="javascript" bind:this={domEditor}
/> mode="javascript"
/>
</svelte:fragment>
<svelte:fragment slot="2">
<RunnerOutputPane {runnerId} {executeNumber} />
</svelte:fragment>
</VerticalSplitter>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="shell.execute" />
<ToolStripCommandButton command="shell.kill" />
<ToolStripCommandButton command="shell.save" />
<ToolStripCommandButton command="shell.copyNodeScript" />
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="2"> </ToolStripContainer>
<RunnerOutputPane {runnerId} {executeNumber} />
</svelte:fragment>
</VerticalSplitter>

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

@@ -137,10 +137,13 @@
/> />
<svelte:fragment slot="toolstrip"> <svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="dataGrid.refresh" /> <ToolStripCommandButton command="dataGrid.refresh" hideDisabled />
<ToolStripCommandButton command="dataForm.refresh" hideDisabled />
<ToolStripCommandButton command="tableData.save" /> <ToolStripCommandButton command="tableData.save" />
<ToolStripCommandButton command="dataGrid.insertNewRow" /> <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
<ToolStripCommandButton command="dataGrid.deleteSelectedRows" /> <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />
<ToolStripCommandButton command="dataGrid.switchToForm" hideDisabled />
<ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
<ToolStripExportButton {quickExportHandlerRef} /> <ToolStripExportButton {quickExportHandlerRef} />
</svelte:fragment> </svelte:fragment>
</ToolStripContainer> </ToolStripContainer>

50
packages/web/src/tabs/TableStructureTab.svelte
View File

@@ -58,6 +58,8 @@
import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte'; import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
import openNewTab from '../utility/openNewTab'; import openNewTab from '../utility/openNewTab';
import { apiCall } from '../utility/api'; import { apiCall } from '../utility/api';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -162,26 +164,34 @@
// } // }
</script> </script>
<TableEditor <ToolStripContainer>
bind:this={domEditor} <TableEditor
tableInfo={showTable} bind:this={domEditor}
dbInfo={$dbInfo} tableInfo={showTable}
{driver} dbInfo={$dbInfo}
setTableInfo={objectTypeField == 'tables' {driver}
? tableInfoUpdater => setTableInfo={objectTypeField == 'tables'
setEditorData(tbl => ? tableInfoUpdater =>
tbl setEditorData(tbl =>
? { tbl
base: tbl.base, ? {
current: tableInfoUpdater(tbl.current), base: tbl.base,
} current: tableInfoUpdater(tbl.current),
: { }
base: tableInfoWithPairingId, : {
current: tableInfoUpdater(tableInfoWithPairingId), base: tableInfoWithPairingId,
} current: tableInfoUpdater(tableInfoWithPairingId),
) }
: null} )
/> : null}
/>
<svelte:fragment slot="toolstrip">
<ToolStripCommandButton command="tableStructure.save" />
<ToolStripCommandButton command="tableStructure.reset" />
<ToolStripCommandButton command="tableEditor.addColumn" />
<ToolStripCommandButton command="tableEditor.addIndex" />
</svelte:fragment>
</ToolStripContainer>
{#if objectTypeField == 'tables'} {#if objectTypeField == 'tables'}
<StatusBarTabItem <StatusBarTabItem