table structure tab

packages/web/src/appobj/ColumnAppObject.svelte

@@ -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';
 

packages/web/src/commands/registerCommand.ts

@@ -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) {
   //   });
   // }
 }
-

packages/web/src/datagrid/ColumnHeaderControl.svelte

@@ -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';
 

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -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;

packages/web/src/elements/ConstraintLabel.svelte

@@ -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>

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -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>

packages/web/src/elements/ObjectListControl.svelte

@@ -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}

packages/web/src/elements/TableControl.svelte

@@ -1,10 +1,5 @@
-<script lang="ts">
+<script lang="ts" context="module">
-  import _ from 'lodash';
+  export interface TableControlColumn {
-
-  import { compact } from 'lodash';
-  import { onMount } from 'svelte';
-
-  interface TableColumn {
     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}

packages/web/src/tabs/TableStructureTab.svelte

@@ -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>

packages/web/src/tabs/index.js

@@ -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,