From 7d5f7791dbfbe2662836b6e65e2ed17858cbaf12 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 9 Dec 2021 12:30:11 +0100
Subject: [PATCH] table editor - improved UX

---
 .../web/src/appobj/DatabaseAppObject.svelte   |   3 +
 packages/web/src/commands/stdCommands.ts      |   3 +
 .../ForeignKeyObjectListControl.svelte        |   2 +
 .../web/src/elements/ObjectListControl.svelte |  96 +++++++-------
 .../web/src/tableeditor/TableEditor.svelte    | 122 +++++++++---------
 .../web/src/tabs/TableStructureTab.svelte     |   8 +-
 6 files changed, 127 insertions(+), 107 deletions(-)

diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte
index 79463833d..39f74dfa0 100644
--- a/packages/web/src/appobj/DatabaseAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseAppObject.svelte
@@ -34,6 +34,9 @@
           editor: {
             columns: [],
           },
+        },
+        {
+          forceNewTab: true,
         }
       );
     };
diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index c3464707a..b8e66a2cd 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -142,6 +142,9 @@ registerCommand({
         editor: {
           columns: [],
         },
+      },
+      {
+        forceNewTab: true,
       }
     );
   },
diff --git a/packages/web/src/elements/ForeignKeyObjectListControl.svelte b/packages/web/src/elements/ForeignKeyObjectListControl.svelte
index e934c6450..b56fb3eea 100644
--- a/packages/web/src/elements/ForeignKeyObjectListControl.svelte
+++ b/packages/web/src/elements/ForeignKeyObjectListControl.svelte
@@ -11,6 +11,7 @@
   export let clickable;
   export let onRemove = null;
   export let onAddNew = null;
+  export let emptyMessage = null;
 </script>
 
 <ObjectListControl
@@ -18,6 +19,7 @@
   {title}
   {onAddNew}
   {clickable}
+  {emptyMessage}
   on:clickrow
   columns={[
     {
diff --git a/packages/web/src/elements/ObjectListControl.svelte b/packages/web/src/elements/ObjectListControl.svelte
index e0ba258a3..f3b1770b8 100644
--- a/packages/web/src/elements/ObjectListControl.svelte
+++ b/packages/web/src/elements/ObjectListControl.svelte
@@ -9,11 +9,12 @@
   export let collection;
   export let columns;
   export let showIfEmpty = false;
+  export let emptyMessage = null;
   export let clickable;
   export let onAddNew;
 </script>
 
-{#if collection?.length > 0 || showIfEmpty}
+{#if collection?.length > 0 || showIfEmpty || emptyMessage}
   <div class="wrapper">
     <div class="header">
       <span class="title mr-1">{title}</span>
@@ -21,49 +22,56 @@
         <Link onClick={onAddNew}><FontIcon icon="icon add" /> Add new</Link>
       {/if}
     </div>
-    <div class="body">
-      <TableControl
-        rows={collection || []}
-        columns={[
-          {
-            fieldName: 'displayName',
-            header: 'Name',
-            slot: -1,
-          },
-          ...columns,
-        ]}
-        {clickable}
-        on:clickrow
-      >
-        <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>
+    {#if (collection?.length || 0) == 0 && emptyMessage}
+      <div class="body">
+        {emptyMessage}
+      </div>
+    {/if}
+    {#if collection?.length > 0 || showIfEmpty}
+      <div class="body">
+        <TableControl
+          rows={collection || []}
+          columns={[
+            {
+              fieldName: 'displayName',
+              header: 'Name',
+              slot: -1,
+            },
+            ...columns,
+          ]}
+          {clickable}
+          on:clickrow
+        >
+          <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>
+    {/if}
   </div>
 {/if}
 
diff --git a/packages/web/src/tableeditor/TableEditor.svelte b/packages/web/src/tableeditor/TableEditor.svelte
index eace206e6..052ec4dec 100644
--- a/packages/web/src/tableeditor/TableEditor.svelte
+++ b/packages/web/src/tableeditor/TableEditor.svelte
@@ -1,60 +1,60 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('TableEditor');
 
-  registerCommand({
-    id: 'tableEditor.addColumn',
-    category: 'Table editor',
-    name: 'Add column',
-    icon: 'icon add-column',
-    toolbar: true,
-    isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addColumn(),
-  });
+  // registerCommand({
+  //   id: 'tableEditor.addColumn',
+  //   category: 'Table editor',
+  //   name: 'Add column',
+  //   icon: 'icon add-column',
+  //   toolbar: true,
+  //   isRelatedToTab: true,
+  //   testEnabled: () => getCurrentEditor()?.writable(),
+  //   onClick: () => getCurrentEditor().addColumn(),
+  // });
 
-  registerCommand({
-    id: 'tableEditor.addPrimaryKey',
-    category: 'Table editor',
-    name: 'Add primary key',
-    icon: 'icon add-key',
-    toolbar: true,
-    isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
-    onClick: () => getCurrentEditor().addPrimaryKey(),
-  });
+  // registerCommand({
+  //   id: 'tableEditor.addPrimaryKey',
+  //   category: 'Table editor',
+  //   name: 'Add primary key',
+  //   icon: 'icon add-key',
+  //   toolbar: true,
+  //   isRelatedToTab: true,
+  //   testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
+  //   onClick: () => getCurrentEditor().addPrimaryKey(),
+  // });
 
-  registerCommand({
-    id: 'tableEditor.addForeignKey',
-    category: 'Table editor',
-    name: 'Add foreign key',
-    icon: 'icon add-key',
-    toolbar: true,
-    isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addForeignKey(),
-  });
+  // registerCommand({
+  //   id: 'tableEditor.addForeignKey',
+  //   category: 'Table editor',
+  //   name: 'Add foreign key',
+  //   icon: 'icon add-key',
+  //   toolbar: true,
+  //   isRelatedToTab: true,
+  //   testEnabled: () => getCurrentEditor()?.writable(),
+  //   onClick: () => getCurrentEditor().addForeignKey(),
+  // });
 
-  registerCommand({
-    id: 'tableEditor.addIndex',
-    category: 'Table editor',
-    name: 'Add index',
-    icon: 'icon add-key',
-    toolbar: true,
-    isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addIndex(),
-  });
+  // registerCommand({
+  //   id: 'tableEditor.addIndex',
+  //   category: 'Table editor',
+  //   name: 'Add index',
+  //   icon: 'icon add-key',
+  //   toolbar: true,
+  //   isRelatedToTab: true,
+  //   testEnabled: () => getCurrentEditor()?.writable(),
+  //   onClick: () => getCurrentEditor().addIndex(),
+  // });
 
-  registerCommand({
-    id: 'tableEditor.addUnique',
-    category: 'Table editor',
-    name: 'Add unique',
-    icon: 'icon add-key',
-    toolbar: true,
-    isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addUnique(),
-  });
+  // registerCommand({
+  //   id: 'tableEditor.addUnique',
+  //   category: 'Table editor',
+  //   name: 'Add unique',
+  //   icon: 'icon add-key',
+  //   toolbar: true,
+  //   isRelatedToTab: true,
+  //   testEnabled: () => getCurrentEditor()?.writable(),
+  //   onClick: () => getCurrentEditor().addUnique(),
+  // });
 </script>
 
 <script lang="ts">
@@ -103,9 +103,9 @@
     });
   }
 
-  export function allowAddPrimaryKey() {
-    return writable() && !tableInfo?.primaryKey;
-  }
+  // export function allowAddPrimaryKey() {
+  //   return writable() && !tableInfo?.primaryKey;
+  // }
 
   export function addPrimaryKey() {
     showModal(PrimaryKeyEditorModal, {
@@ -155,10 +155,10 @@
   <ObjectListControl
     collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
     title={`Columns (${columns?.length || 0})`}
-    showIfEmpty
+    emptyMessage="No columns defined"
     clickable={writable()}
     on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo })}
-    onAddNew={addColumn}
+    onAddNew={writable() ? addColumn : null}
     columns={[
       {
         fieldName: 'notNull',
@@ -219,7 +219,8 @@
   <ObjectListControl
     collection={_.compact([primaryKey])}
     title="Primary key"
-    onAddNew={primaryKey ? null : addPrimaryKey}
+    emptyMessage={writable() ? 'No primary key defined' : null}
+    onAddNew={writable() && !primaryKey && columns?.length > 0 ? addPrimaryKey : null}
     clickable={writable()}
     on:clickrow={e => showModal(PrimaryKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
@@ -251,8 +252,9 @@
 
   <ObjectListControl
     collection={indexes}
-    onAddNew={addIndex}
+    onAddNew={writable() && columns?.length > 0 ? addIndex : null}
     title={`Indexes (${indexes?.length || 0})`}
+    emptyMessage={writable() ? 'No index defined' : null}
     clickable={writable()}
     on:clickrow={e => showModal(UniqueEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
@@ -284,8 +286,9 @@
 
   <ObjectListControl
     collection={uniques}
-    onAddNew={addUnique}
+    onAddNew={writable() && columns?.length > 0 ? addUnique : null}
     title={`Unique constraints (${uniques?.length || 0})`}
+    emptyMessage={writable() ? 'No unique defined' : null}
     clickable={writable()}
     on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
@@ -317,8 +320,9 @@
 
   <ForeignKeyObjectListControl
     collection={foreignKeys}
-    onAddNew={addForeignKey}
+    onAddNew={writable() && columns?.length > 0 ? addForeignKey : null}
     title={`Foreign keys (${foreignKeys?.length || 0})`}
+    emptyMessage={writable() ? 'No foreign key defined' : null}
     clickable={writable()}
     onRemove={row => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}
     on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}
diff --git a/packages/web/src/tabs/TableStructureTab.svelte b/packages/web/src/tabs/TableStructureTab.svelte
index 82d2996eb..d30c99938 100644
--- a/packages/web/src/tabs/TableStructureTab.svelte
+++ b/packages/web/src/tabs/TableStructureTab.svelte
@@ -165,10 +165,10 @@
     clearEditorData();
   }
 
-  $: {
-    // if (!$editorState.isLoading && !$editorValue)
-    if (domEditor && !pureName) domEditor.addColumn();
-  }
+  // $: {
+  //   // if (!$editorState.isLoading && !$editorValue)
+  //   if (domEditor && !pureName) domEditor.addColumn();
+  // }
 </script>
 
 <TableEditor