table editor

This commit is contained in:
Jan Prochazka 2021-06-17 14:29:45 +02:00
parent dea6700a25
commit bf725dd563
5 changed files with 55 additions and 16 deletions

View File

@ -1,8 +1,41 @@
import uuidv1 from 'uuid/v1';
import { ColumnInfo, ConstraintInfo, PrimaryKeyInfo, TableInfo } from 'dbgate-types';
function processPrimaryKey(table: TableInfo, oldColumn: ColumnInfo, newColumn: ColumnInfo) {
export interface EditorColumnInfo extends ColumnInfo {
isPrimaryKey?: boolean;
}
export function fillEditorColumnInfo(column: ColumnInfo, table: TableInfo): EditorColumnInfo {
return {
isPrimaryKey: !!(table.primaryKey && table.primaryKey.columns.find(x => x.columnName == column.columnName)),
...column,
};
}
function processPrimaryKey(table: TableInfo, oldColumn: EditorColumnInfo, newColumn: EditorColumnInfo) {
if (!oldColumn?.isPrimaryKey && newColumn?.isPrimaryKey) {
// let primaryKey = table.primaryKey
// if (!primaryKey) {
// primaryKey = {
// constraintType: 'primaryKey',
// pureName: table.pureName,
// schemaName: table.schemaName,
// columns: [],
// };
// }
// return {
// ...table,
// primaryKey: {
// ...primaryKey,
// columns:[
// ...primaryKey.columns,
// {
// columnName: newColumn.columnName,
// },
// ]
// }
// }
if (!table.primaryKey) {
table.primaryKey = {
constraintType: 'primaryKey',
@ -34,7 +67,7 @@ function processPrimaryKey(table: TableInfo, oldColumn: ColumnInfo, newColumn: C
}
}
export function editorAddColumn(table: TableInfo, column: ColumnInfo): TableInfo {
export function editorAddColumn(table: TableInfo, column: EditorColumnInfo): TableInfo {
const res = {
...table,
columns: [...table.columns, { ...column, pairingId: uuidv1() }],
@ -45,7 +78,7 @@ export function editorAddColumn(table: TableInfo, column: ColumnInfo): TableInfo
return res;
}
export function editorModifyColumn(table: TableInfo, column: ColumnInfo): TableInfo {
export function editorModifyColumn(table: TableInfo, column: EditorColumnInfo): TableInfo {
const oldColumn = table?.columns?.find(x => x.pairingId == column.pairingId);
const res = {
@ -57,7 +90,7 @@ export function editorModifyColumn(table: TableInfo, column: ColumnInfo): TableI
return res;
}
export function editorDeleteColumn(table: TableInfo, column: ColumnInfo): TableInfo {
export function editorDeleteColumn(table: TableInfo, column: EditorColumnInfo): TableInfo {
const res = {
...table,
columns: table.columns.filter(col => col.pairingId != column.pairingId),

View File

@ -21,7 +21,6 @@ function fillTableExtendedInfo(db: DatabaseInfo): DatabaseInfo {
columns: (obj.columns || []).map(column => ({
pureName: obj.pureName,
schemaName: obj.schemaName,
isPrimaryKey: !!(obj.primaryKey && obj.primaryKey.columns.find(x => x.columnName == column.columnName)),
...column,
})),
primaryKey: obj.primaryKey

View File

@ -52,7 +52,6 @@ export interface ColumnInfo extends NamedObjectInfo {
isSparse: boolean;
defaultValue: string;
defaultConstraint: string;
isPrimaryKey?: boolean; // only used in editor
}
export interface DatabaseObjectInfo extends NamedObjectInfo {

View File

@ -13,7 +13,7 @@
import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
import DropDownButton from '../elements/DropDownButton.svelte';
import DataTypeEditor from './DataTypeEditor.svelte';
import { editorAddColumn, editorDeleteColumn, editorModifyColumn } from 'dbgate-tools';
import { editorAddColumn, editorDeleteColumn, editorModifyColumn, fillEditorColumnInfo } from 'dbgate-tools';
export let columnInfo;
export let setTableInfo;
@ -22,7 +22,7 @@
</script>
<FormProvider initialValues={columnInfo}>
<FormProvider initialValues={fillEditorColumnInfo(columnInfo, tableInfo)}>
<ModalBase {...$$restProps}>
<svelte:fragment slot="header"
>{columnInfo ? 'Edit column' : `Add column ${(tableInfo?.columns || []).length + 1}`}</svelte:fragment

View File

@ -30,6 +30,7 @@
return {
pairingId: uuidv1(),
...constraintInfo,
columns,
pureName: tableInfo.pureName,
schemaName: tableInfo.schemaName,
constraintName,
@ -56,14 +57,21 @@
<div class="row">
<div class="label col-3">Column {index + 1}</div>
<div class="col-6">
<SelectField
value={column.columnName}
isNative
options={tableInfo.columns.map(col => ({
label: col.columnName,
value: col.columnName,
}))}
/>
{#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 ? { columnName: e.detail } : col));
}
}}
/>
{/key}
</div>
<div class="col-3 button">
<FormStyledButton