dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 19: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

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}