table editor WIP

2024-11-07 20:26:23 +00:00 · 2021-06-10 10:51:30 +02:00 · 2021-06-10 10:51:30 +02:00 · 7847eaa64d
commit 7847eaa64d
parent 9959e61b35
8 changed files with 135 additions and 83 deletions
--- a/packages/tools/package.json
+++ b/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"
  }
-}
+}
--- a/packages/tools/src/diffTools.ts
+++ b/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;
+}
--- a/packages/tools/src/index.ts
+++ b/packages/tools/src/index.ts
@ -11,3 +11,4 @@ export * from './SqlGenerator';
 export * from './structureTools';
 export * from './settingsExtractors';
 export * from './filterName';
+export * from './diffTools';
--- a/packages/types/dbinfo.d.ts
+++ b/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;
--- a/packages/web/src/elements/ObjectListControl.svelte
+++ b/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;
--- a/packages/web/src/tableeditor/TableEditor.svelte
+++ b/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>
--- a/packages/web/src/tabs/TableStructureTab.svelte
+++ b/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;
-  $: primaryKey = $tableInfo?.primaryKey;
-  $: foreignKeys = $tableInfo?.foreignKeys;
-  $: dependencies = $tableInfo?.dependencies;
+  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
+
 </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>
+<TableEditor {tableInfo} />
--- a/yarn.lock
+++ b/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"