selectfield using svelte select

packages/web/src/forms/FormSelectFieldRaw.svelte

@@ -3,8 +3,15 @@
   import SelectField from './SelectField.svelte';
 
   export let name;
+  export let isClearable = false;
 
   const { values, setFieldValue } = getFormContext();
 </script>
 
-<SelectField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['value'])} />
+<SelectField
+  {...$$restProps}
+  value={$values[name]}
+  on:change={e => setFieldValue(name, e.detail)}
+  {isClearable}
+  
+/>

packages/web/src/forms/SelectField.svelte

@@ -1,14 +1,57 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { map } from 'lodash';
+  import SvelteSelect from 'svelte-select';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
 
   export let options = [];
   export let value;
+  export let isNative = false;
+  export let isMulti = false;
+
+  let listOpen = false;
+  let isFocused = false;
+
+  $: {
+    if (!listOpen && isFocused && isMulti) listOpen = true;
+  }
 </script>
 
-<select {...$$restProps} on:change>
-  {#each _.compact(options) as x (x.value)}
-    <option value={x.value} selected={value == x.value}>
-      {x.label}
-    </option>
-  {/each}
-</select>
+{#if isNative}
+  <select
+    {...$$restProps}
+    on:change={e => {
+      dispatch('change', e.target['value']);
+    }}
+  >
+    {#each _.compact(options) as x (x.value)}
+      <option value={x.value} selected={value == x.value}>
+        {x.label}
+      </option>
+    {/each}
+  </select>
+{:else}
+  <SvelteSelect
+    {...$$restProps}
+    items={options}
+    selectedValue={isMulti
+      ? value?.map(item => options.find(x => x.value == item))
+      : options.find(x => x.value == value)}
+    on:select={e => {
+      if (isMulti) {
+        dispatch(
+          'change',
+          e.detail?.map(x => x.value)
+        );
+      } else {
+        dispatch('change', e.detail.value);
+      }
+    }}
+    showIndicator={!isMulti}
+    isClearable={isMulti}
+    {isMulti}
+    bind:listOpen
+    bind:isFocused
+  />
+{/if}

packages/web/src/impexp/FormConnectionSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
 
   import { useConnectionList } from '../utility/metadataLoaders';
 
@@ -10,8 +10,4 @@ import FormSelectField from '../forms/FormSelectField.svelte';
   }));
 </script>
 
-{#if connectionOptions.length == 0}
-  <div>Not available</div>
-{:else}
-  <FormSelectField {...$$restProps} options={connectionOptions} />
-{/if}
+<FormSelectField {...$$restProps} options={connectionOptions} />

packages/web/src/impexp/FormDatabaseSelect.svelte

@@ -14,8 +14,4 @@
   }));
 </script>
 
-{#if databaseOptions.length == 0}
-  <div>Not available</div>
-{:else}
-  <FormSelectField {...$$restProps} options={databaseOptions} />
-{/if}
+<FormSelectField {...$$restProps} options={databaseOptions} />

packages/web/src/impexp/FormSchemaSelect.svelte

@@ -1,23 +1,20 @@
 <script lang="ts">
-    import { getFormContext } from '../forms/FormProviderCore.svelte';
-    import FormSelectField from '../forms/FormSelectField.svelte';
-    import { useDatabaseInfo, useDatabaseList } from '../utility/metadataLoaders';
-  
-    export let conidName;
-    export let databaseName;
-  
-    const { values } = getFormContext();
-    $: dbinfo = useDatabaseInfo({ conid: $values[conidName], database: values[databaseName] });
-  
-    $: schemaOptions = (($dbinfo && $dbinfo.schemas) || []).map(schema => ({
-      value: schema.schemaName,
-      label: schema.schemaName,
-    }));
-  
-</script>
-  
-  {#if schemaOptions.length == 0}
-    <div>Not available</div>
-  {:else}
-    <FormSelectField {...$$restProps} options={schemaOptions} />
-  {/if}
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import { useDatabaseInfo, useDatabaseList } from '../utility/metadataLoaders';
+
+  export let conidName;
+  export let databaseName;
+
+  const { values } = getFormContext();
+  $: dbinfo = useDatabaseInfo({ conid: $values[conidName], database: values[databaseName] });
+
+  $: schemaOptions = (($dbinfo && $dbinfo.schemas) || []).map(schema => ({
+    value: schema.schemaName,
+    label: schema.schemaName,
+  }));
+</script>
+
+{#if schemaOptions.length > 0}
+  <FormSelectField {...$$restProps} options={schemaOptions} />
+{/if}

packages/web/src/impexp/FormTablesSelect.svelte

@@ -2,14 +2,13 @@
   import { getFormContext } from '../forms/FormProviderCore.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
   import { useDatabaseInfo, useDatabaseList } from '../utility/metadataLoaders';
-  import SvelteSelect from 'svelte-select';
 
   export let conidName;
   export let databaseName;
   export let schemaName;
 
   const { values } = getFormContext();
-  $: dbinfo = useDatabaseInfo({ conid: $values[conidName], database: values[databaseName] });
+  $: dbinfo = useDatabaseInfo({ conid: $values[conidName], database: $values[databaseName] });
 
   $: tablesOptions = [...(($dbinfo && $dbinfo.tables) || []), ...(($dbinfo && $dbinfo.views) || [])]
     .filter(x => !$values[schemaName] || x.schemaName == $values[schemaName])
@@ -19,8 +18,4 @@
     }));
 </script>
 
-{#if tablesOptions.length == 0}
-  <div>Not available</div>
-{:else}
-  <SvelteSelect {...$$restProps} items={tablesOptions} isMulti listOpen />
-{/if}
+<FormSelectField {...$$restProps} options={tablesOptions} isMulti />

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -78,6 +78,7 @@
         schemaName={schemaNameField}
         databaseName={databaseNameField}
         name={tablesField}
+        label="Tables / views"
       />
     {/if}
   {/if}

packages/web/src/modals/ImportExportModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import moment from 'moment';
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
   import LargeButton from '../elements/LargeButton.svelte';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
@@ -8,8 +9,10 @@
   import LargeFormButton from '../forms/LargeFormButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import ImportExportConfigurator from '../impexp/ImportExportConfigurator.svelte';
+  import { getDefaultFileFormat } from '../plugins/fileformats';
   import RunnerOutputFiles from '../query/RunnerOutputFiles';
   import SocketMessageView from '../query/SocketMessageView.svelte';
+  import { currentArchive, extensions } from '../stores';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import ModalBase from './ModalBase.svelte';
@@ -25,6 +28,8 @@
   export let openedFile = undefined;
   export let importToArchive = false;
 
+  $: targetArchiveFolder = importToArchive ? `import-${moment().format('YYYY-MM-DD-hh-mm-ss')}` : $currentArchive;
+
   const handleGenerateScript = async () => {
     // const code = await createImpExpScript(extensions, values);
     // openNewTab(
@@ -61,7 +66,15 @@
   };
 </script>
 
-<FormProvider>
+<FormProvider
+  initialValues={{
+    sourceStorageType: 'database',
+    targetStorageType: importToArchive ? 'archive' : getDefaultFileFormat($extensions).storageType,
+    sourceArchiveFolder: $currentArchive,
+    targetArchiveFolder,
+    ...initialValues,
+  }}
+>
   <ModalBase {...$$restProps} fullScreen skipBody skipFooter>
     <svelte:fragment slot="header">
       Import/Export

packages/web/src/stores.ts

@@ -39,6 +39,7 @@ export const leftPanelWidth = writable(300);
 export const currentDropDownMenu = writable(null);
 export const openedModals = writable([]);
 export const nullStore = readable(null, () => {});
+export const currentArchive = writable('default');
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');