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

table edit fixes

Browse Source
This commit is contained in:
Jan Prochazka
2021-09-09 13:42:13 +02:00
parent d348ef21db
commit 61ec9e4365
4 changed files with 254 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/query/useEditorData.ts
View File

@@ -133,14 +133,14 @@ export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = n
}; };
const clearEditorData = async () => { const clearEditorData = async () => {
await localforage.removeItem(localStorageKey);
localStorage.removeItem(localStorageKey);
editorState.update(x => ({ editorState.update(x => ({
...x, ...x,
value: null, value: null,
errorMessage: null, errorMessage: null,
isLoading: false, isLoading: false,
})); }));
await localforage.removeItem(localStorageKey);
localStorage.removeItem(localStorageKey);
}; };
onMount(() => { onMount(() => {

188
packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte
View File

@@ -37,114 +37,115 @@
constraintType, constraintType,
}; };
} }
</script> </script>
<ModalBase {...$$restProps}> <FormProvider>
<svelte:fragment slot="header" <ModalBase {...$$restProps}>
>{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment <svelte:fragment slot="header"
> >{constraintInfo ? `Edit ${constraintLabel}` : `Add ${constraintLabel}`}</svelte:fragment
>
<div class="largeFormMarker"> <div class="largeFormMarker">
<div class="row">
<div class="label col-3">Constraint name</div>
<div class="col-9">
<TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
</div>
</div>
{#each columns as column, index}
<div class="row"> <div class="row">
<div class="label col-3">Column {index + 1}</div> <div class="label col-3">Constraint name</div>
<div class="col-6"> <div class="col-9">
{#key column.columnName} <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
<SelectField </div>
value={column.columnName} </div>
isNative
options={tableInfo.columns.map(col => ({ {#each columns as column, index}
label: col.columnName, <div class="row">
value: col.columnName, <div class="label col-3">Column {index + 1}</div>
}))} <div class="col-6">
on:change={e => { {#key column.columnName}
if (e.detail) { <SelectField
columns = columns.map((col, i) => (i == index ? { columnName: e.detail } : col)); value={column.columnName}
} isNative
options={tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
}))}
on:change={e => {
if (e.detail) {
columns = columns.map((col, i) => (i == index ? { columnName: e.detail } : col));
}
}}
/>
{/key}
</div>
<div class="col-3 button">
<FormStyledButton
value="Delete"
on:click={e => {
const x = [...columns];
x.splice(index, 1);
columns = x;
}} }}
/> />
</div>
</div>
{/each}
<div class="row">
<div class="label col-3">Add new column</div>
<div class="col-9">
{#key columns.length}
<SelectField
placeholder="Select column"
value={''}
on:change={e => {
if (e.detail)
columns = [
...columns,
{
columnName: e.detail,
},
];
}}
isNative
options={[
{
label: 'Choose column',
value: '',
},
...tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
})),
]}
/>
{/key} {/key}
</div> </div>
<div class="col-3 button">
<FormStyledButton
value="Delete"
on:click={e => {
const x = [...columns];
x.splice(index, 1);
columns = x;
}}
/>
</div>
</div>
{/each}
<div class="row">
<div class="label col-3">Add new column</div>
<div class="col-9">
{#key columns.length}
<SelectField
placeholder="Select column"
value={''}
on:change={e => {
if (e.detail)
columns = [
...columns,
{
columnName: e.detail,
},
];
}}
isNative
options={[
{
label: 'Choose column',
value: '',
},
...tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
})),
]}
/>
{/key}
</div> </div>
</div> </div>
</div>
<svelte:fragment slot="footer"> <svelte:fragment slot="footer">
<FormStyledButton <FormSubmit
value={'Save'} value={'Save'}
on:click={() => {
closeCurrentModal();
if (constraintInfo) {
setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
} else {
setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
}
}}
/>
<FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
{#if constraintInfo}
<FormStyledButton
type="button"
value="Remove"
on:click={() => { on:click={() => {
closeCurrentModal(); closeCurrentModal();
setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo)); if (constraintInfo) {
setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
} else {
setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
}
}} }}
/> />
{/if}
</svelte:fragment> <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
</ModalBase> {#if constraintInfo}
<FormStyledButton
type="button"
value="Remove"
on:click={() => {
closeCurrentModal();
setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
}}
/>
{/if}
</svelte:fragment>
</ModalBase>
</FormProvider>
<style> <style>
.row { .row {
@@ -161,5 +162,4 @@
align-self: center; align-self: center;
text-align: right; text-align: right;
} }
</style> </style>

288
packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
View File

@@ -62,164 +62,166 @@
} }
</script> </script>
<ModalBase {...$$restProps}> <FormProvider>
<svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment> <ModalBase {...$$restProps}>
<svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
<div class="largeFormMarker"> <div class="largeFormMarker">
<div class="row">
<div class="label col-3">Constraint name</div>
<div class="col-9">
<TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
</div>
</div>
<div class="row">
<div class="label col-3">Referenced table</div>
<div class="col-9">
<SelectField
value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
isNative
notSelected
options={(dbInfo?.tables || []).map(tbl => ({
label: fullNameToLabel(tbl),
value: fullNameToString(tbl),
}))}
on:change={e => {
if (e.detail) {
const name = fullNameFromString(e.detail);
refTableName = name.pureName;
refSchemaName = name.schemaName;
}
}}
/>
</div>
</div>
<div class="row">
<div class="label col-3">On update action</div>
<div class="col-9">
<SelectField
value={updateAction}
isNative
notSelected
options={foreignKeyActionsOptions}
on:change={e => {
updateAction = e.detail || null;
}}
/>
</div>
</div>
<div class="row">
<div class="label col-3">On delete action</div>
<div class="col-9">
<SelectField
value={deleteAction}
isNative
notSelected
options={foreignKeyActionsOptions}
on:change={e => {
deleteAction = e.detail || null;
}}
/>
</div>
</div>
<div class="row">
<div class="col-5 mr-1">
Base column - {tableInfo.pureName}
</div>
<div class="col-5 ml-1">
Ref column - {refTableName || '(table not set)'}
</div>
</div>
{#each columns as column, index}
<div class="row"> <div class="row">
<div class="col-5 mr-1"> <div class="label col-3">Constraint name</div>
{#key column.columnName} <div class="col-9">
<SelectField <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
value={column.columnName}
isNative
notSelected
options={tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
}))}
on:change={e => {
if (e.detail) {
columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
}
}}
/>
{/key}
</div> </div>
<div class="col-5 ml-1"> </div>
{#key column.refColumnName}
<SelectField <div class="row">
value={column.refColumnName} <div class="label col-3">Referenced table</div>
isNative <div class="col-9">
notSelected <SelectField
options={(refTableInfo?.columns || []).map(col => ({ value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
label: col.columnName, isNative
value: col.columnName, notSelected
}))} options={(dbInfo?.tables || []).map(tbl => ({
on:change={e => { label: fullNameToLabel(tbl),
if (e.detail) { value: fullNameToString(tbl),
columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col)); }))}
} on:change={e => {
}} if (e.detail) {
/> const name = fullNameFromString(e.detail);
{/key} refTableName = name.pureName;
</div> refSchemaName = name.schemaName;
<div class="col-2 button"> }
<FormStyledButton
value="Delete"
on:click={e => {
const x = [...columns];
x.splice(index, 1);
columns = x;
}} }}
/> />
</div> </div>
</div> </div>
{/each}
<FormStyledButton <div class="row">
type="button" <div class="label col-3">On update action</div>
value="Add column" <div class="col-9">
on:click={() => { <SelectField
columns = [...columns, {}]; value={updateAction}
}} isNative
/> notSelected
</div> options={foreignKeyActionsOptions}
on:change={e => {
updateAction = e.detail || null;
}}
/>
</div>
</div>
<svelte:fragment slot="footer"> <div class="row">
<FormStyledButton <div class="label col-3">On delete action</div>
value={'Save'} <div class="col-9">
on:click={() => { <SelectField
closeCurrentModal(); value={deleteAction}
if (constraintInfo) { isNative
setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint())); notSelected
} else { options={foreignKeyActionsOptions}
setTableInfo(tbl => editorAddConstraint(tbl, getConstraint())); on:change={e => {
} deleteAction = e.detail || null;
}} }}
/> />
</div>
</div>
<div class="row">
<div class="col-5 mr-1">
Base column - {tableInfo.pureName}
</div>
<div class="col-5 ml-1">
Ref column - {refTableName || '(table not set)'}
</div>
</div>
{#each columns as column, index}
<div class="row">
<div class="col-5 mr-1">
{#key column.columnName}
<SelectField
value={column.columnName}
isNative
notSelected
options={tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
}))}
on:change={e => {
if (e.detail) {
columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
}
}}
/>
{/key}
</div>
<div class="col-5 ml-1">
{#key column.refColumnName}
<SelectField
value={column.refColumnName}
isNative
notSelected
options={(refTableInfo?.columns || []).map(col => ({
label: col.columnName,
value: col.columnName,
}))}
on:change={e => {
if (e.detail) {
columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));
}
}}
/>
{/key}
</div>
<div class="col-2 button">
<FormStyledButton
value="Delete"
on:click={e => {
const x = [...columns];
x.splice(index, 1);
columns = x;
}}
/>
</div>
</div>
{/each}
<FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
{#if constraintInfo}
<FormStyledButton <FormStyledButton
type="button" type="button"
value="Remove" value="Add column"
on:click={() => { on:click={() => {
closeCurrentModal(); columns = [...columns, {}];
setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
}} }}
/> />
{/if} </div>
</svelte:fragment>
</ModalBase> <svelte:fragment slot="footer">
<FormSubmit
value={'Save'}
on:click={() => {
closeCurrentModal();
if (constraintInfo) {
setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
} else {
setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
}
}}
/>
<FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
{#if constraintInfo}
<FormStyledButton
type="button"
value="Remove"
on:click={() => {
closeCurrentModal();
setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
}}
/>
{/if}
</svelte:fragment>
</ModalBase>
</FormProvider>
<style> <style>
.row { .row {

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

@@ -66,7 +66,7 @@
const { editorState, editorValue, setEditorData, clearEditorData } = useEditorData({ tabid }); const { editorState, editorValue, setEditorData, clearEditorData } = useEditorData({ tabid });
$: showTable = $editorValue || tableInfoWithPairingId; $: showTable = $editorValue ? $editorValue.current : tableInfoWithPairingId;
export function canSave() { export function canSave() {
return objectTypeField == 'tables' && !!$editorValue; return objectTypeField == 'tables' && !!$editorValue;
@@ -74,7 +74,7 @@
export function save() { export function save() {
const driver = findEngineDriver($connection, $extensions); const driver = findEngineDriver($connection, $extensions);
const sql = getAlterTableScript(tableInfoWithPairingId, $editorValue, {}, $dbInfo, driver); const sql = getAlterTableScript($editorValue.base, $editorValue.current, {}, $dbInfo, driver);
showModal(ConfirmSqlModal, { showModal(ConfirmSqlModal, {
sql, sql,
@@ -114,9 +114,16 @@
dbInfo={$dbInfo} dbInfo={$dbInfo}
setTableInfo={objectTypeField == 'tables' setTableInfo={objectTypeField == 'tables'
? tableInfoUpdater => ? tableInfoUpdater =>
setEditorData(tbl => { setEditorData(tbl =>
if (tbl) return tableInfoUpdater(tbl); tbl
return tableInfoUpdater(tableInfoWithPairingId); ? {
}) base: tbl.base,
current: tableInfoUpdater(tbl.current),
}
: {
base: tableInfoWithPairingId,
current: tableInfoUpdater(tableInfoWithPairingId),
}
)
: null} : null}
/> />