remove links in table editor

packages/tools/src/diffTools.ts

@@ -21,19 +21,19 @@ export function generateTablePairingId(table: TableInfo): TableInfo {
   if (!table.pairingId) {
     return {
       ...table,
-      columns: table.columns.map(col => ({
+      columns: table.columns?.map(col => ({
         ...col,
         pairingId: col.pairingId || uuidv1(),
       })),
-      foreignKeys: table.foreignKeys.map(cnt => ({
+      foreignKeys: table.foreignKeys?.map(cnt => ({
         ...cnt,
         pairingId: cnt.pairingId || uuidv1(),
       })),
-      checks: table.checks.map(cnt => ({
+      checks: table.checks?.map(cnt => ({
         ...cnt,
         pairingId: cnt.pairingId || uuidv1(),
       })),
-      indexes: table.indexes.map(cnt => ({
+      indexes: table.indexes?.map(cnt => ({
         ...cnt,
         pairingId: cnt.pairingId || uuidv1(),
       })),

packages/tools/src/schemaEditorTools.ts

@@ -155,5 +155,13 @@ export function editorDeleteConstraint(table: TableInfo, constraint: ConstraintI
     res.foreignKeys = table.foreignKeys.filter(x => x.pairingId != constraint.pairingId);
   }
 
+  if (constraint.constraintType == 'index') {
+    res.indexes = table.indexes.filter(x => x.pairingId != constraint.pairingId);
+  }
+
+  if (constraint.constraintType == 'unique') {
+    res.uniques = table.uniques.filter(x => x.pairingId != constraint.pairingId);
+  }
+
   return res;
 }

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -4,10 +4,12 @@
   import ConstraintLabel from '../elements/ConstraintLabel.svelte';
 
   import ObjectListControl from '../elements/ObjectListControl.svelte';
+  import Link from './Link.svelte';
 
   export let collection;
   export let title;
   export let clickable;
+  export let onRemove = null;
 </script>
 
 <ObjectListControl
@@ -38,9 +40,17 @@
       fieldName: 'deleteAction',
       header: 'ON DELETE',
     },
+    onRemove
+      ? {
+          fieldName: 'actions',
+          sortable: true,
+          slot: 2,
+        }
+      : null,
   ]}
 >
   <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>
+  <svelte:fragment slot="2" let:row><Link onClick={() => onRemove(row)}>Remove</Link></svelte:fragment>
 </ObjectListControl>

packages/web/src/elements/TableControl.svelte

@@ -54,7 +54,7 @@
   <thead>
     <tr>
       {#each columnList as col}
-        <td>{col.header}</td>
+        <td>{col.header || ''}</td>
       {/each}
     </tr>
   </thead>

packages/web/src/tableeditor/IndexEditorModal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
+
+  export let constraintInfo;
+  export let setTableInfo;
+  export let tableInfo;
+
+</script>
+
+<ColumnsConstraintEditorModal
+  {...$$restProps}
+  constraintLabel="index"
+  constraintType="index"
+  {constraintInfo}
+  {setTableInfo}
+  {tableInfo}
+/>

packages/web/src/tableeditor/TableEditor.svelte

@@ -36,6 +36,8 @@
 </script>
 
 <script lang="ts">
+  import { editorDeleteColumn, editorDeleteConstraint } from 'dbgate-tools';
+
   import _ from 'lodash';
   import { onMount, tick } from 'svelte';
   import invalidateCommands from '../commands/invalidateCommands';
@@ -44,6 +46,7 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import ConstraintLabel from '../elements/ConstraintLabel.svelte';
   import ForeignKeyObjectListControl from '../elements/ForeignKeyObjectListControl.svelte';
+  import Link from '../elements/Link.svelte';
 
   import ObjectListControl from '../elements/ObjectListControl.svelte';
   import { showModal } from '../modals/modalTools';
@@ -53,6 +56,7 @@
   import { useDbCore } from '../utility/metadataLoaders';
   import ColumnEditorModal from './ColumnEditorModal.svelte';
   import ForeignKeyEditorModal from './ForeignKeyEditorModal.svelte';
+  import IndexEditorModal from './IndexEditorModal.svelte';
   import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
 
   export const activator = createActivator('TableEditor', true);
@@ -99,6 +103,7 @@
   $: primaryKey = tableInfo?.primaryKey;
   $: foreignKeys = tableInfo?.foreignKeys;
   $: dependencies = tableInfo?.dependencies;
+  $: indexes = tableInfo?.indexes;
 
   $: {
     tableInfo;
@@ -147,11 +152,21 @@
         sortable: true,
         slot: 2,
       },
+      writable()
+        ? {
+            fieldName: 'actions',
+            sortable: true,
+            slot: 3,
+          }
+        : null,
     ]}
   >
     <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="3" let:row
+      ><Link onClick={() => setTableInfo(tbl => editorDeleteColumn(tbl, row))}>Remove</Link></svelte:fragment
+    >
     <svelte:fragment slot="name" let:row><ColumnLabel {...row} forceIcon /></svelte:fragment>
   </ObjectListControl>
 
@@ -166,16 +181,54 @@
         header: 'Columns',
         slot: 0,
       },
+      writable()
+        ? {
+            fieldName: 'actions',
+            sortable: true,
+            slot: 1,
+          }
+        : null,
     ]}
   >
     <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
+      ><Link onClick={() => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}>Remove</Link></svelte:fragment
+    >
+  </ObjectListControl>
+
+  <ObjectListControl
+    collection={indexes}
+    title={`Indexes (${indexes?.length || 0})`}
+    clickable={writable()}
+    on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
+    columns={[
+      {
+        fieldName: 'columns',
+        header: 'Columns',
+        slot: 0,
+      },
+      writable()
+        ? {
+            fieldName: 'actions',
+            sortable: true,
+            slot: 1,
+          }
+        : null,
+    ]}
+  >
+    <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
+      ><Link onClick={() => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}>Remove</Link></svelte:fragment
+    >
   </ObjectListControl>
 
   <ForeignKeyObjectListControl
     collection={foreignKeys}
-    title="Foreign keys"
+    title={`Foreign keys (${foreignKeys?.length || 0})`}
     clickable={writable()}
+    onRemove={row => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}
     on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}
   />
   <ForeignKeyObjectListControl collection={dependencies} title="Dependencies" />