alter table

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))}