use svelte select

packages/web/src/impexp/FormSchemaSelect.svelte

@@ -0,0 +1,23 @@
+<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}

packages/web/src/impexp/FormTablesSelect.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  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] });
+
+  $: tablesOptions = [...(($dbinfo && $dbinfo.tables) || []), ...(($dbinfo && $dbinfo.views) || [])]
+    .filter(x => !$values[schemaName] || x.schemaName == $values[schemaName])
+    .map(x => ({
+      value: x.pureName,
+      label: x.pureName,
+    }));
+</script>
+
+{#if tablesOptions.length == 0}
+  <div>Not available</div>
+{:else}
+  <SvelteSelect {...$$restProps} items={tablesOptions} isMulti listOpen />
+{/if}

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -8,6 +8,8 @@
   import { useArchiveFiles, useDatabaseInfo } from '../utility/metadataLoaders';
   import FormConnectionSelect from './FormConnectionSelect.svelte';
   import FormDatabaseSelect from './FormDatabaseSelect.svelte';
+  import FormSchemaSelect from './FormSchemaSelect.svelte';
+  import FormTablesSelect from './FormTablesSelect.svelte';
 
   export let direction;
   export let storageTypeField;
@@ -63,6 +65,22 @@
     <FormConnectionSelect name={connectionIdField} label="Server" />
     <FormDatabaseSelect conidName={connectionIdField} name={databaseNameField} label="Database" />
   {/if}
+  {#if storageType == 'database'}
+    <FormSchemaSelect
+      conidName={connectionIdField}
+      databaseName={databaseNameField}
+      name={schemaNameField}
+      label="Schema"
+    />
+    {#if tablesField}
+      <FormTablesSelect
+        conidName={connectionIdField}
+        schemaName={schemaNameField}
+        databaseName={databaseNameField}
+        name={tablesField}
+      />
+    {/if}
+  {/if}
 </div>
 
 <style>