From 0524b4c5b6bf92132a1af882f954232e9eadb8c9 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 18 Mar 2021 11:51:19 +0100
Subject: [PATCH] table structure tab

---
 .../web/src/appobj/ColumnAppObject.svelte     |   2 +-
 packages/web/src/commands/registerCommand.ts  |   3 +-
 .../src/datagrid/ColumnHeaderControl.svelte   |   2 +-
 .../web/src/datagrid/ColumnManagerRow.svelte  |   2 +-
 .../{datagrid => elements}/ColumnLabel.svelte |   0
 .../web/src/elements/ConstraintLabel.svelte   |  17 +++
 .../ForeignKeyObjectListControl.svelte        |  43 +++++++
 .../web/src/elements/ObjectListControl.svelte |  78 +++++++++++++
 packages/web/src/elements/TableControl.svelte |  23 ++--
 .../web/src/tabs/TableStructureTab.svelte     | 107 ++++++++++++++++++
 packages/web/src/tabs/index.js                |   4 +-
 11 files changed, 265 insertions(+), 16 deletions(-)
 rename packages/web/src/{datagrid => elements}/ColumnLabel.svelte (100%)
 create mode 100644 packages/web/src/elements/ConstraintLabel.svelte
 create mode 100644 packages/web/src/elements/ForeignKeyObjectListControl.svelte
 create mode 100644 packages/web/src/elements/ObjectListControl.svelte
 create mode 100644 packages/web/src/tabs/TableStructureTab.svelte

diff --git a/packages/web/src/appobj/ColumnAppObject.svelte b/packages/web/src/appobj/ColumnAppObject.svelte
index 4ee66bc29..8598414e0 100644
--- a/packages/web/src/appobj/ColumnAppObject.svelte
+++ b/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';
 
diff --git a/packages/web/src/commands/registerCommand.ts b/packages/web/src/commands/registerCommand.ts
index 5a5ae9ecb..49ed8026a 100644
--- a/packages/web/src/commands/registerCommand.ts
+++ b/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) {
   //   });
   // }
 }
-
diff --git a/packages/web/src/datagrid/ColumnHeaderControl.svelte b/packages/web/src/datagrid/ColumnHeaderControl.svelte
index 23f1c51a2..e6f0a2a1d 100644
--- a/packages/web/src/datagrid/ColumnHeaderControl.svelte
+++ b/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';
 
diff --git a/packages/web/src/datagrid/ColumnManagerRow.svelte b/packages/web/src/datagrid/ColumnManagerRow.svelte
index af6735493..46b4f1586 100644
--- a/packages/web/src/datagrid/ColumnManagerRow.svelte
+++ b/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;
diff --git a/packages/web/src/datagrid/ColumnLabel.svelte b/packages/web/src/elements/ColumnLabel.svelte
similarity index 100%
rename from packages/web/src/datagrid/ColumnLabel.svelte
rename to packages/web/src/elements/ColumnLabel.svelte
diff --git a/packages/web/src/elements/ConstraintLabel.svelte b/packages/web/src/elements/ConstraintLabel.svelte
new file mode 100644
index 000000000..cedec2ce9
--- /dev/null
+++ b/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>
diff --git a/packages/web/src/elements/ForeignKeyObjectListControl.svelte b/packages/web/src/elements/ForeignKeyObjectListControl.svelte
new file mode 100644
index 000000000..4ca6a70ce
--- /dev/null
+++ b/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>
diff --git a/packages/web/src/elements/ObjectListControl.svelte b/packages/web/src/elements/ObjectListControl.svelte
new file mode 100644
index 000000000..f6fbe692e
--- /dev/null
+++ b/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}
diff --git a/packages/web/src/elements/TableControl.svelte b/packages/web/src/elements/TableControl.svelte
index 658c8134b..f46e3f919 100644
--- a/packages/web/src/elements/TableControl.svelte
+++ b/packages/web/src/elements/TableControl.svelte
@@ -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}
diff --git a/packages/web/src/tabs/TableStructureTab.svelte b/packages/web/src/tabs/TableStructureTab.svelte
new file mode 100644
index 000000000..ccd336040
--- /dev/null
+++ b/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>
diff --git a/packages/web/src/tabs/index.js b/packages/web/src/tabs/index.js
index 1b85db00e..46cc527b0 100644
--- a/packages/web/src/tabs/index.js
+++ b/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,