mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/appobj/ColumnAppObject.svelte
View File

@ -3,7 +3,7 @@
</script>
<script lang="ts">
import { getColumnIcon } from '../datagrid/ColumnLabel.svelte';
import { getColumnIcon } from '../elements/ColumnLabel.svelte';
import AppObjectCore from './AppObjectCore.svelte';

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

@ -1,4 +1,5 @@
import { commands } from '../stores';
import invalidateCommands from './invalidateCommands';
export interface SubCommand {
text: string;
@ -38,6 +39,7 @@ export default function registerCommand(command: GlobalCommand) {
enabled: !testEnabled,
},
}));
invalidateCommands();
// if (enabledStore) {
// enabledStore.subscribe(value => {
// commands.update(x => ({
@ -50,4 +52,3 @@ export default function registerCommand(command: GlobalCommand) {
// });
// }
}

2
packages/web/src/datagrid/ColumnHeaderControl.svelte
View File

@ -3,7 +3,7 @@
import DropDownButton from '../elements/DropDownButton.svelte';
import splitterDrag from '../utility/splitterDrag';
import ColumnLabel from './ColumnLabel.svelte';
import ColumnLabel from '../elements/ColumnLabel.svelte';
import { isTypeDateTime } from 'dbgate-tools';
import { openDatabaseObjectDetail } from '../appobj/DatabaseObjectAppObject.svelte';

2
packages/web/src/datagrid/ColumnManagerRow.svelte
View File

@ -2,7 +2,7 @@
import { plusExpandIcon } from '../icons/expandIcons';
import FontIcon from '../icons/FontIcon.svelte';
import ColumnLabel from './ColumnLabel.svelte';
import ColumnLabel from '../elements/ColumnLabel.svelte';
export let column;
export let display;

0
packages/web/src/datagrid/ColumnLabel.svelte → packages/web/src/elements/ColumnLabel.svelte
View File

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}

107
packages/web/src/tabs/TableStructureTab.svelte Normal file
View File

@ -0,0 +1,107 @@
<script lang="ts" context="module">
export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
export const allowAddToFavorites = props => true;
</script>
<script lang="ts">
import _ from 'lodash';
import ColumnLabel from '../elements/ColumnLabel.svelte';
import ConstraintLabel from '../elements/ConstraintLabel.svelte';
import ForeignKeyObjectListControl from '../elements/ForeignKeyObjectListControl.svelte';
import ObjectListControl from '../elements/ObjectListControl.svelte';
import { useDbCore } from '../utility/metadataLoaders';
export let tabid;
export let conid;
export let database;
export let schemaName;
export let pureName;
export let objectTypeField = 'tables';
$: tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
$: columns = $tableInfo?.columns;
$: primaryKey = $tableInfo?.primaryKey;
$: foreignKeys = $tableInfo?.foreignKeys;
$: dependencies = $tableInfo?.dependencies;
</script>
<div class="wrapper">
<ObjectListControl
collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
title="Columns"
columns={[
{
fieldName: 'notNull',
header: 'Not NULL',
sortable: true,
slot: 0,
},
{
fieldName: 'dataType',
header: 'Data Type',
sortable: true,
},
{
fieldName: 'defaultValue',
header: 'Default value',
sortable: true,
},
{
fieldName: 'isSparse',
header: 'Is Sparse',
sortable: true,
slot: 1,
},
{
fieldName: 'computedExpression',
header: 'Computed Expression',
sortable: true,
},
{
fieldName: 'isPersisted',
header: 'Is Persisted',
sortable: true,
slot: 2,
},
]}
>
<svelte:fragment slot="0" let:row>{row?.notNull ? 'YES' : 'NO'}</svelte:fragment>
<svelte:fragment slot="1" let:row>{row?.isSparse ? 'YES' : 'NO'}</svelte:fragment>
<svelte:fragment slot="2" let:row>{row?.isPersisted ? 'YES' : 'NO'}</svelte:fragment>
<svelte:fragment slot="name" let:row><ColumnLabel {...row} forceIcon /></svelte:fragment>
</ObjectListControl>
<ObjectListControl
collection={_.compact([primaryKey])}
title="Primary key"
columns={[
{
fieldName: 'columns',
header: 'Columns',
slot: 0,
},
]}
>
<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>
</ObjectListControl>
<ForeignKeyObjectListControl collection={foreignKeys} title="Foreign keys" />
<ForeignKeyObjectListControl collection={dependencies} title="Dependencies" />
</div>
<style>
.wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--theme-bg-0);
overflow: auto;
}
</style>

4
packages/web/src/tabs/index.js
View File

@ -1,6 +1,6 @@
import * as TableDataTab from './TableDataTab.svelte';
import * as ViewDataTab from './ViewDataTab.svelte';
// import TableStructureTab from './TableStructureTab';
import * as TableStructureTab from './TableStructureTab.svelte';
import * as QueryTab from './QueryTab.svelte';
import * as ShellTab from './ShellTab.svelte';
// import InfoPageTab from './InfoPageTab';
@ -17,7 +17,7 @@ import * as MarkdownEditorTab from './MarkdownEditorTab.svelte';
export default {
TableDataTab,
ViewDataTab,
// TableStructureTab,
TableStructureTab,
QueryTab,
// InfoPageTab,
ShellTab,