data type editor

packages/web/src/forms/FormDropDownTextField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import FormDropDownTextFieldRaw from './FormDropDownTextFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  <FormDropDownTextFieldRaw {name} {...$$restProps} />
+</svelte:component>

packages/web/src/forms/FormDropDownTextFieldRaw.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+  import DropDownButton from '../elements/DropDownButton.svelte';
+
+  export let name;
+  export let disabled = false;
+  export let defaultValue;
+  export let menu;
+
+  const { values, setFieldValue } = getFormContext();
+
+  let showPassword = false;
+
+  $: value = $values[name];
+  $: isCrypted = value && value.startsWith('crypt:');
+
+</script>
+
+<div class="flex">
+  <TextField
+    {...$$restProps}
+    value={$values[name] ?? defaultValue}
+    on:input={e => setFieldValue(name, e.target['value'])}
+  />
+  <DropDownButton {menu} {disabled} />
+</div>

packages/web/src/modals/ModalBase.svelte

@@ -4,6 +4,7 @@
   import clickOutside from '../utility/clickOutside';
   import keycodes from '../utility/keycodes';
   import { onMount } from 'svelte';
+  import { currentDropDownMenu } from '../stores';
 
   export let fullScreen = false;
   export let noPadding = false;
@@ -16,6 +17,11 @@
     }
   }
 
+  function handleClickOutside() {
+    if ($currentDropDownMenu) return;
+    handleCloseModal();
+  }
+
   function handleEscape(e) {
     if (e.keyCode == keycodes.escape) {
       handleCloseModal();
@@ -28,12 +34,13 @@
       if (oldFocus) oldFocus.focus();
     };
   });
+
 </script>
 
 <!-- The Modal -->
 <div id="myModal" class="bglayer">
   <!-- Modal content -->
-  <div class="window" class:fullScreen class:simple use:clickOutside on:clickOutside={handleCloseModal}>
+  <div class="window" class:fullScreen class:simple use:clickOutside on:clickOutside={handleClickOutside}>
     {#if $$slots.header}
       <div class="header" class:fullScreen>
         <div><slot name="header" /></div>
@@ -153,4 +160,5 @@
     border-top: 1px solid var(--theme-border);
     background-color: var(--theme-bg-modalheader);
   }
+
 </style>

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} />