column editor

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -14,15 +14,20 @@
 
   export let columnInfo;
   export let setTableInfo;
+  export let tableInfo;
+  export let onAddNext;
 
 </script>
 
 <FormProvider initialValues={columnInfo}>
   <ModalBase {...$$restProps}>
-    <svelte:fragment slot="header">{columnInfo ? 'Edit column' : 'Add new column'}</svelte:fragment>
+    <svelte:fragment slot="header"
+      >{columnInfo ? 'Edit column' : `Add column ${(tableInfo?.columns || []).length + 1}`}</svelte:fragment
+    >
 
-    <FormTextField name="columnName" label="Column name" />
+    <FormTextField name="columnName" label="Column name" focused />
     <FormTextField name="dataType" label="Data type" />
+    <!-- <FormSelectField name="dataType" label="Data type" /> -->
     <FormCheckboxField name="notNull" label="NOT NULL" />
     <!-- <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" />  -->
     <FormCheckboxField name="autoIncrement" label="Is Autoincrement" />
@@ -31,7 +36,7 @@
 
     <svelte:fragment slot="footer">
       <FormSubmit
-        value="OK"
+        value={columnInfo ? 'Save' : 'Save and next'}
         on:click={e => {
           closeCurrentModal();
           if (columnInfo) {
@@ -44,10 +49,24 @@
               ...tbl,
               columns: [...tbl.columns, { ...e.detail, pairingId: uuidv1() }],
             }));
+            if (onAddNext) onAddNext();
           }
-          // onConfirm();
         }}
       />
+      {#if !columnInfo}
+        <FormStyledButton
+          type="button"
+          value="Save"
+          on:click={e => {
+            closeCurrentModal();
+            setTableInfo(tbl => ({
+              ...tbl,
+              columns: [...tbl.columns, { ...e.detail, pairingId: uuidv1() }],
+            }));
+          }}
+        />
+      {/if}
+
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
       {#if columnInfo}
         <FormStyledButton

packages/web/src/tableeditor/TableEditor.svelte

@@ -16,6 +16,7 @@
 
 <script lang="ts">
   import _ from 'lodash';
+  import { tick } from 'svelte';
   import registerCommand from '../commands/registerCommand';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
@@ -40,7 +41,14 @@
   }
 
   export function addColumn() {
-    showModal(ColumnEditorModal, { setTableInfo });
+    showModal(ColumnEditorModal, {
+      setTableInfo,
+      tableInfo,
+      onAddNext: async () => {
+        await tick();
+        addColumn();
+      },
+    });
   }
 
   $: columns = tableInfo?.columns;
@@ -48,6 +56,8 @@
   $: foreignKeys = tableInfo?.foreignKeys;
   $: dependencies = tableInfo?.dependencies;
 
+  $: console.log('tableInfo', tableInfo);
+
 </script>
 
 <div class="wrapper">
@@ -55,7 +65,7 @@
     collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
     title="Columns"
     clickable={writable()}
-    on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, setTableInfo })}
+    on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
       {
         fieldName: 'notNull',