column editor dialog

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import ModalBase from '../modals/ModalBase.svelte';
+  import { closeCurrentModal } from '../modals/modalTools';
+
+  export let columnInfo;
+
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <FormTextField name="columnName" label="Column name" />
+    <FormTextField name="dataType" label="Data type" />
+    <FormCheckboxField name="notNull" label="NOT NULL" />
+    <!-- <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" />  -->
+    <FormCheckboxField name="autoIncrement" label="Is Autoincrement" />
+    <FormTextField name="defaultValue" label="Default value" />
+    <FormTextField name="computedExpression" label="Computed expression" />
+
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value="OK"
+        on:click={() => {
+          closeCurrentModal();
+          // onConfirm();
+        }}
+      />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/tableeditor/TableEditor.svelte

@@ -1,21 +1,52 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('TableEditor');
+
+  registerCommand({
+    id: 'tableEditor.addColumn',
+    category: 'Table editor',
+    name: 'Add column',
+    icon: 'icon add-column',
+    toolbar: true,
+    isRelatedToTab: true,
+    testEnabled: () => getCurrentEditor()?.writable(),
+    onClick: () => getCurrentEditor().addColumn(),
+  });
+
+</script>
+
 <script lang="ts">
   import _ from 'lodash';
+  import registerCommand from '../commands/registerCommand';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import ConstraintLabel from '../elements/ConstraintLabel.svelte';
   import ForeignKeyObjectListControl from '../elements/ForeignKeyObjectListControl.svelte';
 
   import ObjectListControl from '../elements/ObjectListControl.svelte';
+  import { showModal } from '../modals/modalTools';
   import useEditorData from '../query/useEditorData';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   import { useDbCore } from '../utility/metadataLoaders';
+  import ColumnEditorModal from './ColumnEditorModal.svelte';
+
+  export const activator = createActivator('TableEditor', true);
 
   export let tableInfo;
+  export let setTableInfo;
 
-  $: columns = $tableInfo?.columns;
-  $: primaryKey = $tableInfo?.primaryKey;
-  $: foreignKeys = $tableInfo?.foreignKeys;
-  $: dependencies = $tableInfo?.dependencies;
+  export function writable() {
+    return !!setTableInfo;
+  }
+
+  export function addColumn() {
+    showModal(ColumnEditorModal, {});
+  }
+
+  $: columns = tableInfo?.columns;
+  $: primaryKey = tableInfo?.primaryKey;
+  $: foreignKeys = tableInfo?.foreignKeys;
+  $: dependencies = tableInfo?.dependencies;
 
 </script>