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

table structure tab

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-18 11:51:19 +01:00
parent b7663e2e06
commit 0524b4c5b6
11 changed files with 265 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/web/src/elements/ColumnLabel.svelte Normal file
View File

@@ -0,0 +1,46 @@
<script context="module" lang="ts">
export function getColumnIcon(column, forceIcon = false) {
if (column.autoIncrement) return 'img autoincrement';
if (column.foreignKey) return 'img foreign-key';
if (forceIcon) return 'img column';
return null;
}
</script>
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
export let notNull = false;
export let forceIcon = false;
export let headerText = '';
export let columnName = '';
export let extInfo = null;
$: icon = getColumnIcon($$props, forceIcon);
</script>
<span class="label" class:notNull>
{#if icon}
<FontIcon {icon} />
{/if}
{headerText || columnName}
{#if extInfo}
<span class="extinfo">{extInfo}</span>
{/if}
</span>
<style>
.label {
white-space: nowrap;
}
.label.notNull {
font-weight: bold;
}
.extinfo {
font-weight: normal;
margin-left: 5px;
color: var(--theme-font-3);
}
</style>

17
packages/web/src/elements/ConstraintLabel.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
export let constraintType;
export let constraintName;
function getConstraintIcon(type) {
if (type == 'primaryKey') return 'img primary-key';
if (type == 'foreignKey') return 'img foreign-key';
return null;
}
</script>
<span class="nowrap">
<FontIcon icon={getConstraintIcon(constraintType)} />
{constraintName}
</span>

43
packages/web/src/elements/ForeignKeyObjectListControl.svelte Normal file
View File

@@ -0,0 +1,43 @@
<script>
import _ from 'lodash';
import ConstraintLabel from '../elements/ConstraintLabel.svelte';
import ObjectListControl from '../elements/ObjectListControl.svelte';
export let collection;
export let title;
</script>
<ObjectListControl
{collection}
{title}
columns={[
{
fieldName: 'baseColumns',
header: 'Base columns',
slot: 0,
},
{
fieldName: 'refTableName',
header: 'Referenced table',
},
{
fieldName: 'refColumns',
header: 'Referenced columns',
slot: 1,
},
{
fieldName: 'updateAction',
header: 'ON UPDATE',
},
{
fieldName: 'deleteAction',
header: 'ON DELETE',
},
]}
>
<svelte:fragment slot="name" let:row><ConstraintLabel {...row} /></svelte:fragment>
<svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
<svelte:fragment slot="1" let:row>{row?.columns.map(x => x.refColumnName).join(', ')}</svelte:fragment>
</ObjectListControl>

78
packages/web/src/elements/ObjectListControl.svelte Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import TableControl from './TableControl.svelte';
export let title;
export let nameComponent;
export let collection;
export let columns;
export let showIfEmpty = false;
</script>
{#if collection?.length > 0 || showIfEmpty}
<div class="wrapper">
<div class="header">
<span class="title">{title}</span>
</div>
<div class="body">
<TableControl
rows={collection || []}
columns={[
{
fieldName: 'displayName',
header: 'Name',
slot: -1,
},
...columns,
]}
>
<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>
</div>
<style>
.wrapper {
margin-bottom: 20px;
}
.header {
background-color: var(--theme-bg-1);
padding: 5px;
}
.title {
font-weight: bold;
margin-left: 5px;
}
.body {
margin: 20px;
}
</style>
{/if}

23
packages/web/src/elements/TableControl.svelte
View File

@@ -1,10 +1,5 @@
<script lang="ts">
import _ from 'lodash';
import { compact } from 'lodash';
import { onMount } from 'svelte';
interface TableColumn {
<script lang="ts" context="module">
export interface TableControlColumn {
fieldName: string;
header: string;
component?: any;
@@ -12,8 +7,15 @@
formatter?: any;
slot?: number;
}
</script>
export let columns: TableColumn[];
<script lang="ts">
import _ from 'lodash';
import { compact } from 'lodash';
import { onMount } from 'svelte';
export let columns: TableControlColumn[];
export let rows;
export let focusOnCreate = false;
export let selectable = false;
@@ -54,7 +56,8 @@
{:else if col.formatter}
{col.formatter(row)}
{:else if col.slot != null}
{#if col.slot == 0}<slot name="0" {row} {index} />
{#if col.slot == -1}<slot name="-1" {row} {index} />
{:else if col.slot == 0}<slot name="0" {row} {index} />
{:else if col.slot == 1}<slot name="1" {row} {index} />
{:else if col.slot == 2}<slot name="2" {row} {index} />
{:else if col.slot == 3}<slot name="3" {row} {index} />
@@ -64,7 +67,7 @@
{:else if col.slot == 7}<slot name="7" {row} {index} />
{/if}
{:else}
{row[col.fieldName]}
{row[col.fieldName] || ''}
{/if}
</td>
{/each}