table editor - improved UX

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -34,6 +34,9 @@
           editor: {
             columns: [],
           },
+        },
+        {
+          forceNewTab: true,
         }
       );
     };

packages/web/src/commands/stdCommands.ts

@@ -142,6 +142,9 @@ registerCommand({
         editor: {
           columns: [],
         },
+      },
+      {
+        forceNewTab: true,
       }
     );
   },

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={[
     {

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,6 +22,12 @@
         <Link onClick={onAddNew}><FontIcon icon="icon add" /> Add new</Link>
       {/if}
     </div>
+    {#if (collection?.length || 0) == 0 && emptyMessage}
+      <div class="body">
+        {emptyMessage}
+      </div>
+    {/if}
+    {#if collection?.length > 0 || showIfEmpty}
       <div class="body">
         <TableControl
           rows={collection || []}
@@ -64,6 +71,7 @@
           </svelte:fragment>
         </TableControl>
       </div>
+    {/if}
   </div>
 {/if}
 

packages/web/src/tableeditor/TableEditor.svelte

@@ -1,60 +1,60 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('TableEditor');
 
-  registerCommand({
+  // registerCommand({
-    id: 'tableEditor.addColumn',
+  //   id: 'tableEditor.addColumn',
-    category: 'Table editor',
+  //   category: 'Table editor',
-    name: 'Add column',
+  //   name: 'Add column',
-    icon: 'icon add-column',
+  //   icon: 'icon add-column',
-    toolbar: true,
+  //   toolbar: true,
-    isRelatedToTab: true,
+  //   isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
+  //   testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addColumn(),
+  //   onClick: () => getCurrentEditor().addColumn(),
-  });
+  // });
 
-  registerCommand({
+  // registerCommand({
-    id: 'tableEditor.addPrimaryKey',
+  //   id: 'tableEditor.addPrimaryKey',
-    category: 'Table editor',
+  //   category: 'Table editor',
-    name: 'Add primary key',
+  //   name: 'Add primary key',
-    icon: 'icon add-key',
+  //   icon: 'icon add-key',
-    toolbar: true,
+  //   toolbar: true,
-    isRelatedToTab: true,
+  //   isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
+  //   testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
-    onClick: () => getCurrentEditor().addPrimaryKey(),
+  //   onClick: () => getCurrentEditor().addPrimaryKey(),
-  });
+  // });
 
-  registerCommand({
+  // registerCommand({
-    id: 'tableEditor.addForeignKey',
+  //   id: 'tableEditor.addForeignKey',
-    category: 'Table editor',
+  //   category: 'Table editor',
-    name: 'Add foreign key',
+  //   name: 'Add foreign key',
-    icon: 'icon add-key',
+  //   icon: 'icon add-key',
-    toolbar: true,
+  //   toolbar: true,
-    isRelatedToTab: true,
+  //   isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
+  //   testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addForeignKey(),
+  //   onClick: () => getCurrentEditor().addForeignKey(),
-  });
+  // });
 
-  registerCommand({
+  // registerCommand({
-    id: 'tableEditor.addIndex',
+  //   id: 'tableEditor.addIndex',
-    category: 'Table editor',
+  //   category: 'Table editor',
-    name: 'Add index',
+  //   name: 'Add index',
-    icon: 'icon add-key',
+  //   icon: 'icon add-key',
-    toolbar: true,
+  //   toolbar: true,
-    isRelatedToTab: true,
+  //   isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
+  //   testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addIndex(),
+  //   onClick: () => getCurrentEditor().addIndex(),
-  });
+  // });
 
-  registerCommand({
+  // registerCommand({
-    id: 'tableEditor.addUnique',
+  //   id: 'tableEditor.addUnique',
-    category: 'Table editor',
+  //   category: 'Table editor',
-    name: 'Add unique',
+  //   name: 'Add unique',
-    icon: 'icon add-key',
+  //   icon: 'icon add-key',
-    toolbar: true,
+  //   toolbar: true,
-    isRelatedToTab: true,
+  //   isRelatedToTab: true,
-    testEnabled: () => getCurrentEditor()?.writable(),
+  //   testEnabled: () => getCurrentEditor()?.writable(),
-    onClick: () => getCurrentEditor().addUnique(),
+  //   onClick: () => getCurrentEditor().addUnique(),
-  });
+  // });
 </script>
 
 <script lang="ts">
@@ -103,9 +103,9 @@
     });
   }
 
-  export function allowAddPrimaryKey() {
+  // export function allowAddPrimaryKey() {
-    return writable() && !tableInfo?.primaryKey;
+  //   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 })}

packages/web/src/tabs/TableStructureTab.svelte

@@ -165,10 +165,10 @@
     clearEditorData();
   }
 
-  $: {
+  // $: {
-    // if (!$editorState.isLoading && !$editorValue)
+  //   // if (!$editorState.isLoading && !$editorValue)
-    if (domEditor && !pureName) domEditor.addColumn();
+  //   if (domEditor && !pureName) domEditor.addColumn();
-  }
+  // }
 </script>
 
 <TableEditor