column editor dialog

packages/web/src/forms/FormCheckboxField.svelte

@@ -4,10 +4,11 @@
 
   export let label;
   export let name;
-  export let disabled;
+  export let disabled = false;
   export let templateProps = {};
 
   const { template, setFieldValue, values } = getFormContext();
+
 </script>
 
 <svelte:component

packages/web/src/icons/FontIcon.svelte

@@ -70,6 +70,7 @@
     'icon menu-right': 'mdi mdi-menu-right',
     'icon plugin': 'mdi mdi-toy-brick',
     'icon menu': 'mdi mdi-menu',
+    'icon add-column': 'mdi mdi-table-column-plus-after',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',

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>
 

packages/web/src/tabs/TableStructureTab.svelte

@@ -5,6 +5,8 @@
 </script>
 
 <script lang="ts">
+  import { generateTableGroupId } from 'dbgate-tools';
+
   import _ from 'lodash';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
@@ -25,9 +27,12 @@
   export let objectTypeField = 'tables';
 
   $: tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
+  $: tableInfoWithGroupId = $tableInfo ? generateTableGroupId($tableInfo) : null;
 
   const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
 
+  $: showTable = $editorValue || tableInfoWithGroupId;
+
 </script>
 
-<TableEditor {tableInfo} />
+<TableEditor tableInfo={showTable} setTableInfo={objectTypeField == 'tables' ? setEditorData : null} />