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

fk editor

Browse Source
This commit is contained in:
Jan Prochazka
2021-06-24 11:27:58 +02:00
parent 039d3b4058
commit 4db464772e
5 changed files with 197 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
packages/web/src/tableeditor/ForeignKeyEditorModal.svelte Normal file
View File

@@ -0,0 +1,167 @@
<script lang="ts">
import FormStyledButton from '../elements/FormStyledButton.svelte';
import uuidv1 from 'uuid/v1';
import FormSelectField from '../forms/FormSelectField.svelte';
import FormTextField from '../forms/FormTextField.svelte';
import FormCheckboxField from '../forms/FormCheckboxField.svelte';
import FormProvider from '../forms/FormProvider.svelte';
import FormSubmit from '../forms/FormSubmit.svelte';
import ModalBase from '../modals/ModalBase.svelte';
import { closeCurrentModal } from '../modals/modalTools';
import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
import DropDownButton from '../elements/DropDownButton.svelte';
import DataTypeEditor from './DataTypeEditor.svelte';
import { editorAddConstraint, editorDeleteConstraint, editorModifyConstraint } from 'dbgate-tools';
import TextField from '../forms/TextField.svelte';
import SelectField from '../forms/SelectField.svelte';
export let constraintInfo;
export let setTableInfo;
export let tableInfo;
export let dbInfo;
let constraintName = constraintInfo?.constraintName;
let columns = constraintInfo?.columns || [];
let refTableName = constraintInfo?.refTableName;
let refSchemaName = constraintInfo?.refSchemaName;
$: refTableInfo = dbInfo?.tables?.find(x => x.pureName == refTableName && x.schemaName == refSchemaName);
function getConstraint() {
return {
pairingId: uuidv1(),
...constraintInfo,
columns,
pureName: tableInfo.pureName,
schemaName: tableInfo.schemaName,
constraintName,
constraintType: 'foreignKey',
refTableName,
refSchemaName,
};
}
</script>
<ModalBase {...$$restProps}>
<svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
<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="col-5 mr-1">
Base column - {tableInfo.pureName}
</div>
<div class="col-5 ml-1">
Ref column - {refTableName}
</div>
</div>
{#each columns as column, index}
<div class="row">
<div class="col-5 mr-1">
{#key column.columnName}
<SelectField
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 ? { ...col, columnName: e.detail } : col));
}
}}
/>
{/key}
</div>
<div class="col-5 ml-1">
{#key column.refColumnName}
<SelectField
value={column.refColumnName}
isNative
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="Add column"
on:click={() => {
columns = [...columns, {}];
}}
/>
</div>
<svelte:fragment slot="footer">
<FormStyledButton
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>
<style>
.row {
margin: var(--dim-large-form-margin);
display: flex;
}
.row .label {
white-space: nowrap;
align-self: center;
}
.button {
align-self: center;
text-align: right;
}
</style>

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

@@ -22,7 +22,6 @@
testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
onClick: () => getCurrentEditor().addPrimaryKey(),
});
</script>
<script lang="ts">
@@ -42,12 +41,14 @@
import { useDbCore } from '../utility/metadataLoaders';
import ColumnEditorModal from './ColumnEditorModal.svelte';
import ForeignKeyEditorModal from './ForeignKeyEditorModal.svelte';
import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
export const activator = createActivator('TableEditor', true);
export let tableInfo;
export let setTableInfo;
export let dbInfo;
export function writable() {
return !!setTableInfo;
@@ -86,7 +87,6 @@
}
$: console.log('tableInfo', tableInfo);
</script>
<div class="wrapper">
@@ -154,7 +154,12 @@
<svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
</ObjectListControl>
<ForeignKeyObjectListControl collection={foreignKeys} title="Foreign keys" />
<ForeignKeyObjectListControl
collection={foreignKeys}
title="Foreign keys"
clickable={writable()}
on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}
/>
<ForeignKeyObjectListControl collection={dependencies} title="Dependencies" />
</div>
@@ -168,5 +173,4 @@
background-color: var(--theme-bg-0);
overflow: auto;
}
</style>