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

data duplicator style

Browse Source
This commit is contained in:
Jan Prochazka
2023-02-12 19:52:53 +01:00
parent 5e207a6c16
commit 83f01c52f2
2 changed files with 110 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/web/src/elements/ObjectConfigurationControl.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts">
export let title;
</script>
<div class="wrapper">
<div class="header">
<span class="title mr-1">{title}</span>
</div>
<div class="body">
<slot />
</div>
</div>
<style>
.wrapper {
margin-bottom: 20px;
}
.header {
background-color: var(--theme-bg-1);
padding: 5px;
}
.title {
font-weight: bold;
margin-left: 5px;
}
.body {
margin: 20px;
}
</style>

141
packages/web/src/tabs/DataDuplicatorTab.svelte
View File

@@ -22,6 +22,7 @@
import ToolStripContainer from '../buttons/ToolStripContainer.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';
import ObjectConfigurationControl from '../elements/ObjectConfigurationControl.svelte';
import TableControl from '../elements/TableControl.svelte'; import TableControl from '../elements/TableControl.svelte';
import VerticalSplitter from '../elements/VerticalSplitter.svelte'; import VerticalSplitter from '../elements/VerticalSplitter.svelte';
import CheckboxField from '../forms/CheckboxField.svelte'; import CheckboxField from '../forms/CheckboxField.svelte';
@@ -153,6 +154,8 @@
isChecked, isChecked,
operation, operation,
matchColumn1, matchColumn1,
file: `${name}.jsonl`,
table: tableInfo?.schemaName ? `${tableInfo?.schemaName}.${tableInfo?.pureName}` : tableInfo?.pureName,
}; };
}); });
@@ -162,76 +165,79 @@
<ToolStripContainer> <ToolStripContainer>
<VerticalSplitter> <VerticalSplitter>
<svelte:fragment slot="1"> <svelte:fragment slot="1">
<div> <div class="wrapper">
<div class="bold m-2">Source archive</div> <ObjectConfigurationControl title="Configuration">
<SelectField <div class="bold m-2">Source archive</div>
isNative <SelectField
value={$editorState.value?.archiveFolder} isNative
on:change={e => { value={$editorState.value?.archiveFolder}
setEditorData(old => ({ on:change={e => {
...old, setEditorData(old => ({
archiveFolder: e.detail, ...old,
})); archiveFolder: e.detail,
}} }));
options={$archiveFolders?.map(x => ({ }}
label: x.name, options={$archiveFolders?.map(x => ({
value: x.name, label: x.name,
})) || []} value: x.name,
/> })) || []}
/>
</ObjectConfigurationControl>
<div class="bold m-2">Imported files</div> <ObjectConfigurationControl title="Imported files">
<TableControl
<TableControl rows={tableRows}
rows={tableRows} columns={[
columns={[ { header: '', fieldName: 'isChecked', slot: 1 },
{ header: '', fieldName: 'isChecked', slot: 1 }, { header: 'Source file', fieldName: 'file' },
{ header: 'File=>Table', fieldName: 'name' }, { header: 'Target table', fieldName: 'table' },
{ header: 'Operation', fieldName: 'operation', slot: 2 }, { header: 'Operation', fieldName: 'operation', slot: 2 },
{ header: 'Match column', fieldName: 'matchColumn1', slot: 3 }, { header: 'Match column', fieldName: 'matchColumn1', slot: 3 },
]} ]}
> >
<svelte:fragment slot="1" let:row> <svelte:fragment slot="1" let:row>
<CheckboxField <CheckboxField
checked={row.isChecked} checked={row.isChecked}
on:change={e => { on:change={e => {
changeTable({ ...row, isChecked: e.target.checked }); changeTable({ ...row, isChecked: e.target.checked });
}} }}
/> />
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="2" let:row> <svelte:fragment slot="2" let:row>
<SelectField
isNative
value={row.operation}
on:change={e => {
changeTable({ ...row, operation: e.detail });
}}
disabled={!row.isChecked}
options={[
{ label: 'Copy row', value: 'copy' },
{ label: 'Lookup (find matching row)', value: 'lookup' },
{ label: 'Insert if not exists', value: 'insertMissing' },
]}
/>
</svelte:fragment>
<svelte:fragment slot="3" let:row>
{#if row.operation != 'copy'}
<SelectField <SelectField
isNative isNative
value={row.matchColumn1} value={row.operation}
on:change={e => { on:change={e => {
changeTable({ ...row, matchColumn1: e.detail }); changeTable({ ...row, operation: e.detail });
}} }}
disabled={!row.isChecked} disabled={!row.isChecked}
options={$dbinfo?.tables options={[
?.find(x => x.pureName?.toUpperCase() == row.name.toUpperCase()) { label: 'Copy row', value: 'copy' },
?.columns?.map(col => ({ { label: 'Lookup (find matching row)', value: 'lookup' },
label: col.columnName, { label: 'Insert if not exists', value: 'insertMissing' },
value: col.columnName, ]}
})) || []}
/> />
{/if} </svelte:fragment>
</svelte:fragment> <svelte:fragment slot="3" let:row>
</TableControl> {#if row.operation != 'copy'}
<SelectField
isNative
value={row.matchColumn1}
on:change={e => {
changeTable({ ...row, matchColumn1: e.detail });
}}
disabled={!row.isChecked}
options={$dbinfo?.tables
?.find(x => x.pureName?.toUpperCase() == row.name.toUpperCase())
?.columns?.map(col => ({
label: col.columnName,
value: col.columnName,
})) || []}
/>
{/if}
</svelte:fragment>
</TableControl>
</ObjectConfigurationControl>
</div> </div>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="2"> <svelte:fragment slot="2">
@@ -255,3 +261,12 @@
font-weight: bold; font-weight: bold;
} }
</style> --> </style> -->
<style>
.wrapper {
overflow-y: auto;
background-color: var(--theme-bg-0);
flex: 1;
display: flex;
flex-direction: column;
}
</style>