use svelte select

packages/web/package.json

@@ -13,30 +13,31 @@
     "@rollup/plugin-typescript": "^6.0.0",
     "@tsconfig/svelte": "^1.0.0",
     "ace-builds": "^1.4.8",
+    "dbgate-datalib": "^3.9.5",
+    "dbgate-sqltree": "^3.9.5",
+    "dbgate-tools": "^3.9.5",
+    "dbgate-types": "^3.9.5",
+    "json-stable-stringify": "^1.0.1",
+    "localforage": "^1.9.0",
+    "lodash": "^4.17.15",
     "rollup": "^2.3.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "socket.io-client": "^2.3.0",
+    "sql-formatter": "^2.3.3",
     "svelte": "^3.35.0",
     "svelte-check": "^1.0.0",
     "svelte-preprocess": "^4.0.0",
     "tslib": "^2.0.0",
     "typescript": "^3.9.3",
-    "socket.io-client": "^2.3.0",
+    "uuid": "^3.4.0"
-    "sql-formatter": "^2.3.3",
-    "uuid": "^3.4.0",
-    "json-stable-stringify": "^1.0.1",
-    "localforage": "^1.9.0",
-    "dbgate-types": "^3.9.5",
-    "dbgate-datalib": "^3.9.5",
-    "dbgate-sqltree": "^3.9.5",
-    "dbgate-tools": "^3.9.5",
-    "lodash": "^4.17.15"
   },
   "dependencies": {
     "@mdi/font": "^5.9.55",
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "svelte-select": "^3.17.0"
   }
 }

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>

yarn.lock

@@ -6946,6 +6946,11 @@ svelte-preprocess@^4.0.0:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
+svelte-select@^3.17.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/svelte-select/-/svelte-select-3.17.0.tgz#6bea0cb8d0c9465d28a2bac562f2de8a61f48a9f"
+  integrity sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA==
+
 svelte@^3.35.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.35.0.tgz#e0d0ba60c4852181c2b4fd851194be6fda493e65"