data type editor

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -11,6 +11,8 @@
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
   import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
+  import DropDownButton from '../elements/DropDownButton.svelte';
+  import DataTypeEditor from './DataTypeEditor.svelte';
 
   export let columnInfo;
   export let setTableInfo;
@@ -26,8 +28,10 @@
     >
 
     <FormTextField name="columnName" label="Column name" focused />
-    <FormTextField name="dataType" label="Data type" />
-    <!-- <FormSelectField name="dataType" label="Data type" /> -->
+    <!-- <FormTextField name="dataType" label="Data type" /> -->
+    <DataTypeEditor />
+
+    <!-- <FormSelectField name="dataType" label="Data type" options={dataTypes} /> -->
     <FormCheckboxField name="notNull" label="NOT NULL" />
     <!-- <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" />  -->
     <FormCheckboxField name="autoIncrement" label="Is Autoincrement" />

packages/web/src/tableeditor/DataTypeEditor.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import FormDropDownTextField from '../forms/FormDropDownTextField.svelte';
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+
+  const { values, setFieldValue } = getFormContext();
+
+  $: dataTypes = ['int', 'nvarchar(250)', 'datetime', 'numeric(10,2)', 'float'];
+
+  function createDataTypesMenu() {
+    return dataTypes.map(type => ({
+      text: type,
+      onClick: () => setFieldValue('dataType', type),
+    }));
+  }
+
+</script>
+
+<FormDropDownTextField name="dataType" label="Data type" menu={createDataTypesMenu} />