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

table editor - improved UX

Browse Source
This commit is contained in:
Jan Prochazka
2021-12-09 12:30:11 +01:00
parent 092ed25032
commit 7d5f7791db
6 changed files with 127 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/appobj/DatabaseAppObject.svelte
View File

@@ -34,6 +34,9 @@
editor: {
columns: [],
},
},
{
forceNewTab: true,
}
);
};

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

@@ -142,6 +142,9 @@ registerCommand({
editor: {
columns: [],
},
},
{
forceNewTab: true,
}
);
},

2
packages/web/src/elements/ForeignKeyObjectListControl.svelte
View File

@@ -11,6 +11,7 @@
export let clickable;
export let onRemove = null;
export let onAddNew = null;
export let emptyMessage = null;
</script>
<ObjectListControl
@@ -18,6 +19,7 @@
{title}
{onAddNew}
{clickable}
{emptyMessage}
on:clickrow
columns={[
{

96
packages/web/src/elements/ObjectListControl.svelte
View File

@@ -9,11 +9,12 @@
export let collection;
export let columns;
export let showIfEmpty = false;
export let emptyMessage = null;
export let clickable;
export let onAddNew;
</script>
{#if collection?.length > 0 || showIfEmpty}
{#if collection?.length > 0 || showIfEmpty || emptyMessage}
<div class="wrapper">
<div class="header">
<span class="title mr-1">{title}</span>
@@ -21,49 +22,56 @@
<Link onClick={onAddNew}><FontIcon icon="icon add" /> Add new</Link>
{/if}
</div>
<div class="body">
<TableControl
rows={collection || []}
columns={[
{
fieldName: 'displayName',
header: 'Name',
slot: -1,
},
...columns,
]}
{clickable}
on:clickrow
>
<svelte:fragment slot="-1" let:row>
<slot name="name" {row} />
</svelte:fragment>
<svelte:fragment slot="0" let:row>
<slot name="0" {row} />
</svelte:fragment>
<svelte:fragment slot="1" let:row>
<slot name="1" {row} />
</svelte:fragment>
<svelte:fragment slot="2" let:row>
<slot name="2" {row} />
</svelte:fragment>
<svelte:fragment slot="3" let:row>
<slot name="3" {row} />
</svelte:fragment>
<svelte:fragment slot="4" let:row>
<slot name="4" {row} />
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<slot name="5" {row} />
</svelte:fragment>
<svelte:fragment slot="6" let:row>
<slot name="6" {row} />
</svelte:fragment>
<svelte:fragment slot="7" let:row>
<slot name="7" {row} />
</svelte:fragment>
</TableControl>
</div>
{#if (collection?.length || 0) == 0 && emptyMessage}
<div class="body">
{emptyMessage}
</div>
{/if}
{#if collection?.length > 0 || showIfEmpty}
<div class="body">
<TableControl
rows={collection || []}
columns={[
{
fieldName: 'displayName',
header: 'Name',
slot: -1,
},
...columns,
]}
{clickable}
on:clickrow
>
<svelte:fragment slot="-1" let:row>
<slot name="name" {row} />
</svelte:fragment>
<svelte:fragment slot="0" let:row>
<slot name="0" {row} />
</svelte:fragment>
<svelte:fragment slot="1" let:row>
<slot name="1" {row} />
</svelte:fragment>
<svelte:fragment slot="2" let:row>
<slot name="2" {row} />
</svelte:fragment>
<svelte:fragment slot="3" let:row>
<slot name="3" {row} />
</svelte:fragment>
<svelte:fragment slot="4" let:row>
<slot name="4" {row} />
</svelte:fragment>
<svelte:fragment slot="5" let:row>
<slot name="5" {row} />
</svelte:fragment>
<svelte:fragment slot="6" let:row>
<slot name="6" {row} />
</svelte:fragment>
<svelte:fragment slot="7" let:row>
<slot name="7" {row} />
</svelte:fragment>
</TableControl>
</div>
{/if}
</div>
{/if}

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

@@ -1,60 +1,60 @@
<script lang="ts" context="module">
const getCurrentEditor = () => getActiveComponent('TableEditor');
registerCommand({
id: 'tableEditor.addColumn',
category: 'Table editor',
name: 'Add column',
icon: 'icon add-column',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentEditor()?.writable(),
onClick: () => getCurrentEditor().addColumn(),
});
// registerCommand({
// id: 'tableEditor.addColumn',
// category: 'Table editor',
// name: 'Add column',
// icon: 'icon add-column',
// toolbar: true,
// isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addColumn(),
// });
registerCommand({
id: 'tableEditor.addPrimaryKey',
category: 'Table editor',
name: 'Add primary key',
icon: 'icon add-key',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
onClick: () => getCurrentEditor().addPrimaryKey(),
});
// registerCommand({
// id: 'tableEditor.addPrimaryKey',
// category: 'Table editor',
// name: 'Add primary key',
// icon: 'icon add-key',
// toolbar: true,
// isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
// onClick: () => getCurrentEditor().addPrimaryKey(),
// });
registerCommand({
id: 'tableEditor.addForeignKey',
category: 'Table editor',
name: 'Add foreign key',
icon: 'icon add-key',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentEditor()?.writable(),
onClick: () => getCurrentEditor().addForeignKey(),
});
// registerCommand({
// id: 'tableEditor.addForeignKey',
// category: 'Table editor',
// name: 'Add foreign key',
// icon: 'icon add-key',
// toolbar: true,
// isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addForeignKey(),
// });
registerCommand({
id: 'tableEditor.addIndex',
category: 'Table editor',
name: 'Add index',
icon: 'icon add-key',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentEditor()?.writable(),
onClick: () => getCurrentEditor().addIndex(),
});
// registerCommand({
// id: 'tableEditor.addIndex',
// category: 'Table editor',
// name: 'Add index',
// icon: 'icon add-key',
// toolbar: true,
// isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addIndex(),
// });
registerCommand({
id: 'tableEditor.addUnique',
category: 'Table editor',
name: 'Add unique',
icon: 'icon add-key',
toolbar: true,
isRelatedToTab: true,
testEnabled: () => getCurrentEditor()?.writable(),
onClick: () => getCurrentEditor().addUnique(),
});
// registerCommand({
// id: 'tableEditor.addUnique',
// category: 'Table editor',
// name: 'Add unique',
// icon: 'icon add-key',
// toolbar: true,
// isRelatedToTab: true,
// testEnabled: () => getCurrentEditor()?.writable(),
// onClick: () => getCurrentEditor().addUnique(),
// });
</script>
<script lang="ts">
@@ -103,9 +103,9 @@
});
}
export function allowAddPrimaryKey() {
return writable() && !tableInfo?.primaryKey;
}
// export function allowAddPrimaryKey() {
// return writable() && !tableInfo?.primaryKey;
// }
export function addPrimaryKey() {
showModal(PrimaryKeyEditorModal, {
@@ -155,10 +155,10 @@
<ObjectListControl
collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
title={`Columns (${columns?.length || 0})`}
showIfEmpty
emptyMessage="No columns defined"
clickable={writable()}
on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo })}
onAddNew={addColumn}
onAddNew={writable() ? addColumn : null}
columns={[
{
fieldName: 'notNull',
@@ -219,7 +219,8 @@
<ObjectListControl
collection={_.compact([primaryKey])}
title="Primary key"
onAddNew={primaryKey ? null : addPrimaryKey}
emptyMessage={writable() ? 'No primary key defined' : null}
onAddNew={writable() && !primaryKey && columns?.length > 0 ? addPrimaryKey : null}
clickable={writable()}
on:clickrow={e => showModal(PrimaryKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
columns={[
@@ -251,8 +252,9 @@
<ObjectListControl
collection={indexes}
onAddNew={addIndex}
onAddNew={writable() && columns?.length > 0 ? addIndex : null}
title={`Indexes (${indexes?.length || 0})`}
emptyMessage={writable() ? 'No index defined' : null}
clickable={writable()}
on:clickrow={e => showModal(UniqueEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
columns={[
@@ -284,8 +286,9 @@
<ObjectListControl
collection={uniques}
onAddNew={addUnique}
onAddNew={writable() && columns?.length > 0 ? addUnique : null}
title={`Unique constraints (${uniques?.length || 0})`}
emptyMessage={writable() ? 'No unique defined' : null}
clickable={writable()}
on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
columns={[
@@ -317,8 +320,9 @@
<ForeignKeyObjectListControl
collection={foreignKeys}
onAddNew={addForeignKey}
onAddNew={writable() && columns?.length > 0 ? addForeignKey : null}
title={`Foreign keys (${foreignKeys?.length || 0})`}
emptyMessage={writable() ? 'No foreign key defined' : null}
clickable={writable()}
onRemove={row => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}
on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}

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

@@ -165,10 +165,10 @@
clearEditorData();
}
$: {
// if (!$editorState.isLoading && !$editorValue)
if (domEditor && !pureName) domEditor.addColumn();
}
// $: {
// // if (!$editorState.isLoading && !$editorValue)
// if (domEditor && !pureName) domEditor.addColumn();
// }
</script>
<TableEditor