alter table

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -10,11 +10,13 @@
   export let title;
   export let clickable;
   export let onRemove = null;
+  export let onAddNew = null;
 </script>
 
 <ObjectListControl
   {collection}
   {title}
+  {onAddNew}
   {clickable}
   on:clickrow
   columns={[

packages/web/src/elements/ObjectListControl.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import Link from './Link.svelte';
+
   import TableControl from './TableControl.svelte';
 
   export let title;
@@ -6,13 +10,16 @@
   export let columns;
   export let showIfEmpty = false;
   export let clickable;
-
+  export let onAddNew;
 </script>
 
 {#if collection?.length > 0 || showIfEmpty}
   <div class="wrapper">
     <div class="header">
-      <span class="title">{title}</span>
+      <span class="title mr-1">{title}</span>
+      {#if onAddNew}
+        <Link onClick={onAddNew}><FontIcon icon="icon add" /> Add new</Link>
+      {/if}
     </div>
     <div class="body">
       <TableControl
@@ -78,5 +85,4 @@
   .body {
     margin: 20px;
   }
-
 </style>

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -22,7 +22,7 @@
   export let onAddNext;
 </script>
 
-<FormProvider initialValues={fillEditorColumnInfo(columnInfo, tableInfo)}>
+<FormProvider initialValues={fillEditorColumnInfo(columnInfo || {}, tableInfo)}>
   <ModalBase {...$$restProps}>
     <svelte:fragment slot="header"
       >{columnInfo ? 'Edit column' : `Add column ${(tableInfo?.columns || []).length + 1}`}</svelte:fragment

packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte

@@ -56,7 +56,7 @@
       {#each columns as column, index}
         <div class="row">
           <div class="label col-3">Column {index + 1}</div>
-          <div class="col-6">
+          <div class={$$slots.column ? 'col-3' : 'col-6'}>
             {#key column.columnName}
               <SelectField
                 value={column.columnName}
@@ -73,6 +73,11 @@
               />
             {/key}
           </div>
+          {#if $$slots.column}
+            <div class="col-3">
+              <slot name="column" {column} setColumns={changeFunc => (columns = changeFunc(columns))} {index} />
+            </div>
+          {/if}
           <div class="col-3 button">
             <FormStyledButton
               value="Delete"

packages/web/src/tableeditor/IndexEditorModal.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import SelectField from '../forms/SelectField.svelte';
+
   import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
 
   export let constraintInfo;
   export let setTableInfo;
   export let tableInfo;
-
 </script>
 
 <ColumnsConstraintEditorModal
@@ -14,4 +15,27 @@
   {constraintInfo}
   {setTableInfo}
   {tableInfo}
-/>
+>
+  <svelte:fragment slot="column" let:column let:setColumns let:index>
+    <SelectField
+      value={column.isDescending ? 'desc' : 'asc'}
+      isNative
+      options={[
+        { label: 'ASC', value: 'asc' },
+        { label: 'DESC', value: 'desc' },
+      ]}
+      on:change={e => {
+        setColumns(columns =>
+          columns.map((col, i) =>
+            i == index
+              ? {
+                  ...col,
+                  isDescending: e.detail == 'desc',
+                }
+              : col
+          )
+        );
+      }}
+    />
+  </svelte:fragment>
+</ColumnsConstraintEditorModal>

packages/web/src/tableeditor/TableEditor.svelte

@@ -33,6 +33,17 @@
     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(),
+  });
 </script>
 
 <script lang="ts">
@@ -99,6 +110,14 @@
     });
   }
 
+  export function addIndex() {
+    showModal(IndexEditorModal, {
+      setTableInfo,
+      tableInfo,
+      dbInfo,
+    });
+  }
+
   $: columns = tableInfo?.columns;
   $: primaryKey = tableInfo?.primaryKey;
   $: foreignKeys = tableInfo?.foreignKeys;
@@ -118,6 +137,7 @@
     showIfEmpty
     clickable={writable()}
     on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo })}
+    onAddNew={addColumn}
     columns={[
       {
         fieldName: 'notNull',
@@ -173,6 +193,7 @@
   <ObjectListControl
     collection={_.compact([primaryKey])}
     title="Primary key"
+    onAddNew={primaryKey ? null : addPrimaryKey}
     clickable={writable()}
     on:clickrow={e => showModal(PrimaryKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
@@ -199,6 +220,7 @@
 
   <ObjectListControl
     collection={indexes}
+    onAddNew={addIndex}
     title={`Indexes (${indexes?.length || 0})`}
     clickable={writable()}
     on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
@@ -226,6 +248,7 @@
 
   <ForeignKeyObjectListControl
     collection={foreignKeys}
+    onAddNew={addForeignKey}
     title={`Foreign keys (${foreignKeys?.length || 0})`}
     clickable={writable()}
     onRemove={row => setTableInfo(tbl => editorDeleteConstraint(tbl, row))}

packages/web/src/tabs/TableStructureTab.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <script lang="ts">
-  import { findEngineDriver, generateTablePairingId, getAlterTableScript } from 'dbgate-tools';
+  import { fillConstraintNames, findEngineDriver, generateTablePairingId, getAlterTableScript } from 'dbgate-tools';
 
   import _ from 'lodash';
   import registerCommand from '../commands/registerCommand';
@@ -102,7 +102,7 @@
 
   function doSave(createTableName) {
     const driver = findEngineDriver($connection, $extensions);
-    const sql = getAlterTableScript($editorValue.base, $editorValue.current, {}, $dbInfo, driver);
+    const sql = getAlterTableScript($editorValue.base, fillConstraintNames($editorValue.current), {}, $dbInfo, driver);
 
     showModal(ConfirmSqlModal, {
       sql,