column editor

packages/web/src/elements/ObjectListControl.svelte

@@ -5,6 +5,7 @@
   export let collection;
   export let columns;
   export let showIfEmpty = false;
+  export let clickable;
 
 </script>
 
@@ -24,6 +25,8 @@
           },
           ...columns,
         ]}
+        {clickable}
+        on:clickrow
       >
         <svelte:fragment slot="-1" let:row>
           <slot name="name" {row} />
@@ -75,4 +78,5 @@
   .body {
     margin: 20px;
   }
+
 </style>

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import uuidv1 from 'uuid/v1';
   import FormStyledButton from '../elements/FormStyledButton.svelte';
 
   import FormSelectField from '../forms/FormSelectField.svelte';
@@ -9,13 +10,17 @@
   import FormSubmit from '../forms/FormSubmit.svelte';
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
+  import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
 
   export let columnInfo;
+  export let setTableInfo;
 
 </script>
 
-<FormProvider>
+<FormProvider initialValues={columnInfo}>
   <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">{columnInfo ? 'Edit column' : 'Add new column'}</svelte:fragment>
+
     <FormTextField name="columnName" label="Column name" />
     <FormTextField name="dataType" label="Data type" />
     <FormCheckboxField name="notNull" label="NOT NULL" />
@@ -27,12 +32,36 @@
     <svelte:fragment slot="footer">
       <FormSubmit
         value="OK"
-        on:click={() => {
+        on:click={e => {
           closeCurrentModal();
+          if (columnInfo) {
+            setTableInfo(tbl => ({
+              ...tbl,
+              columns: tbl.columns.map(col => (col.groupId == columnInfo.groupId ? e.detail : col)),
+            }));
+          } else {
+            setTableInfo(tbl => ({
+              ...tbl,
+              columns: [...tbl.columns, { ...e.detail, groupId: uuidv1() }],
+            }));
+          }
           // onConfirm();
         }}
       />
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      {#if columnInfo}
+        <FormStyledButton
+          type="button"
+          value="Remove"
+          on:click={() => {
+            closeCurrentModal();
+            setTableInfo(tbl => ({
+              ...tbl,
+              columns: tbl.columns.filter(col => col.groupId != columnInfo.groupId),
+            }));
+          }}
+        />
+      {/if}
     </svelte:fragment>
   </ModalBase>
 </FormProvider>

packages/web/src/tableeditor/TableEditor.svelte

@@ -40,7 +40,7 @@
   }
 
   export function addColumn() {
-    showModal(ColumnEditorModal, {});
+    showModal(ColumnEditorModal, { setTableInfo });
   }
 
   $: columns = tableInfo?.columns;
@@ -54,6 +54,8 @@
   <ObjectListControl
     collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
     title="Columns"
+    clickable={writable()}
+    on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, setTableInfo })}
     columns={[
       {
         fieldName: 'notNull',

packages/web/src/tabs/TableStructureTab.svelte

@@ -35,4 +35,13 @@
 
 </script>
 
-<TableEditor tableInfo={showTable} setTableInfo={objectTypeField == 'tables' ? setEditorData : null} />
+<TableEditor
+  tableInfo={showTable}
+  setTableInfo={objectTypeField == 'tables'
+    ? tableInfoUpdater =>
+        setEditorData(tbl => {
+          if (tbl) return tableInfoUpdater(tbl);
+          return tableInfoUpdater(tableInfoWithGroupId);
+        })
+    : null}
+/>