clickhouse: edit table options

packages/web/src/elements/ObjectFieldsEditor.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import FormArgumentList from '../forms/FormArgumentList.svelte';
+  import { writable } from 'svelte/store';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+
+  export let title;
+  export let fieldDefinitions;
+  export let values;
+  export let onChangeValues;
+
+  let collapsed = false;
+
+  const valuesStore = writable(values || {});
+
+  $: onChangeValues($valuesStore);
+</script>
+
+<div class="wrapper">
+  <div class="header">
+    <span
+      class="collapse"
+      on:click={() => {
+        collapsed = !collapsed;
+      }}
+    >
+      <FontIcon icon={collapsed ? 'icon chevron-down' : 'icon chevron-up'} />
+    </span>
+    <span class="title mr-1">{title}</span>
+  </div>
+  {#if !collapsed}
+    <FormProviderCore values={valuesStore}>
+      <FormArgumentList args={fieldDefinitions} />
+    </FormProviderCore>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    margin-bottom: 20px;
+    user-select: none;
+  }
+
+  .header {
+    background-color: var(--theme-bg-1);
+    padding: 5px;
+  }
+
+  .title {
+    font-weight: bold;
+    margin-left: 5px;
+  }
+
+  .body {
+    margin: 20px;
+  }
+
+  .collapse {
+    cursor: pointer;
+  }
+
+  .collapse:hover {
+    color: var(--theme-font-hover);
+    background: var(--theme-bg-3);
+  }
+</style>

packages/web/src/forms/FormArgument.svelte

@@ -5,11 +5,15 @@
   import FormSelectField from './FormSelectField.svelte';
   import FormTextField from './FormTextField.svelte';
   import FormStringList from './FormStringList.svelte';
+  import FormDropDownTextField from './FormDropDownTextField.svelte';
+  import { getFormContext } from './FormProviderCore.svelte';
 
   export let arg;
   export let namePrefix;
 
   $: name = `${namePrefix}${arg.name}`;
+
+  const { setFieldValue } = getFormContext();
 </script>
 
 {#if arg.type == 'text'}
@@ -19,14 +23,10 @@
     defaultValue={arg.default}
     focused={arg.focused}
     placeholder={arg.placeholder}
+    disabled={arg.disabled}
   />
 {:else if arg.type == 'stringlist'}
-  <FormStringList
-    label={arg.label}
-    addButtonLabel={arg.addButtonLabel}
-    {name}
-    placeholder={arg.placeholder}
-  />
+  <FormStringList label={arg.label} addButtonLabel={arg.addButtonLabel} {name} placeholder={arg.placeholder} />
 {:else if arg.type == 'number'}
   <FormTextField
     label={arg.label}
@@ -48,4 +48,16 @@
       _.isString(opt) ? { label: opt, value: opt } : { label: opt.name, value: opt.value }
     )}
   />
+{:else if arg.type == 'dropdowntext'}
+  <FormDropDownTextField
+    label={arg.label}
+    {name}
+    defaultValue={arg.default}
+    menu={() => {
+      return arg.options.map(opt => ({
+        text: _.isString(opt) ? opt : opt.name,
+        onClick: () => setFieldValue(name, _.isString(opt) ? opt : opt.value),
+      }));
+    }}
+  />
 {/if}

packages/web/src/tableeditor/TableEditor.svelte

@@ -81,6 +81,7 @@
   import IndexEditorModal from './IndexEditorModal.svelte';
   import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
   import UniqueEditorModal from './UniqueEditorModal.svelte';
+  import ObjectFieldsEditor from '../elements/ObjectFieldsEditor.svelte';
 
   export const activator = createActivator('TableEditor', true);
 
@@ -154,9 +155,24 @@
     tableInfo;
     invalidateCommands();
   }
+
+  $: tableFormOptions = driver?.getTableFormOptions(tableInfo?.objectId ? 'editTableForm' : 'newTableForm');
 </script>
 
 <div class="wrapper">
+  {#if tableFormOptions}
+    <ObjectFieldsEditor
+      title="Table properties"
+      fieldDefinitions={tableFormOptions}
+      values={tableInfo}
+      onChangeValues={vals => {
+        if (!_.isEmpty(vals)) {
+          setTableInfo(tbl => ({ ...tbl, ...vals }));
+        }
+      }}
+    />
+  {/if}
+
   <ObjectListControl
     collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
     title={`Columns (${columns?.length || 0})`}