table editor WIP

packages/tools/package.json

@@ -31,6 +31,7 @@
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "uuid": "^8.3.2"
   }
 }

packages/tools/src/diffTools.ts

@@ -0,0 +1,17 @@
+import { TableInfo } from 'dbgate-types';
+import uuidv1 from 'uuid/v1';
+
+export function generateTableGroupId(table: TableInfo): TableInfo {
+  if (!table) return table;
+  if (!table.groupId) {
+    return {
+      ...table,
+      columns: table.columns.map(col => ({
+        ...col,
+        groupid: uuidv1(),
+      })),
+      groupId: uuidv1(),
+    };
+  }
+  return table;
+}

packages/tools/src/index.ts

@@ -11,3 +11,4 @@ export * from './SqlGenerator';
 export * from './structureTools';
 export * from './settingsExtractors';
 export * from './filterName';
+export * from './diffTools';

packages/types/dbinfo.d.ts

@@ -9,6 +9,7 @@ export interface ColumnReference {
 }
 
 export interface ConstraintInfo extends NamedObjectInfo {
+  groupId?: string;
   constraintName: string;
   constraintType: 'primaryKey' | 'foreignKey' | 'index' | 'check' | 'unique';
 }
@@ -38,6 +39,7 @@ export interface CheckInfo extends ConstraintInfo {
 }
 
 export interface ColumnInfo extends NamedObjectInfo {
+  groupId?: string;
   columnName: string;
   notNull: boolean;
   autoIncrement: boolean;
@@ -53,6 +55,7 @@ export interface ColumnInfo extends NamedObjectInfo {
 }
 
 export interface DatabaseObjectInfo extends NamedObjectInfo {
+  groupId?: string;
   objectId?: string;
   createDate?: string;
   modifyDate?: string;

packages/web/src/elements/ObjectListControl.svelte

@@ -2,7 +2,6 @@
   import TableControl from './TableControl.svelte';
 
   export let title;
-  export let nameComponent;
   export let collection;
   export let columns;
   export let showIfEmpty = false;

packages/web/src/tableeditor/TableEditor.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { ColumnInfo, ForeignKeyInfo, PrimaryKeyInfo } from 'dbgate-types';
+
+  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 useEditorData from '../query/useEditorData';
+
+  import { useDbCore } from '../utility/metadataLoaders';
+
+  export let tableInfo;
+
+  $: columns = $tableInfo?.columns as ColumnInfo[];
+  $: primaryKey = $tableInfo?.primaryKey as PrimaryKeyInfo;
+  $: foreignKeys = $tableInfo?.foreignKeys as ForeignKeyInfo[];
+  $: dependencies = $tableInfo?.dependencies as ForeignKeyInfo[];
+
+</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/TableStructureTab.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
+
 </script>
 
 <script lang="ts">
@@ -11,6 +12,8 @@
   import ForeignKeyObjectListControl from '../elements/ForeignKeyObjectListControl.svelte';
 
   import ObjectListControl from '../elements/ObjectListControl.svelte';
+  import useEditorData from '../query/useEditorData';
+  import TableEditor from '../tableeditor/TableEditor.svelte';
 
   import { useDbCore } from '../utility/metadataLoaders';
 
@@ -23,85 +26,8 @@
 
   $: tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
 
-  $: columns = $tableInfo?.columns;
+  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
-  $: primaryKey = $tableInfo?.primaryKey;
+
-  $: foreignKeys = $tableInfo?.foreignKeys;
-  $: dependencies = $tableInfo?.dependencies;
 </script>
 
-<div class="wrapper">
+<TableEditor {tableInfo} />
-  <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>

yarn.lock

@@ -10723,6 +10723,11 @@ uuid@^3.1.0, uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v8-compile-cache@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"