export working

packages/web/src/impexp/ImportExportConfigurator.svelte

@@ -1,7 +1,24 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import TableControl from '../elements/TableControl.svelte';
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+
   import FontIcon from '../icons/FontIcon.svelte';
+  import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
+  import PreviewCheckBox from './PreviewCheckBox.svelte';
+  import SourceAction from './SourceAction.svelte';
+  import SourceName from './SourceName.svelte';
 
   import SourceTargetConfig from './SourceTargetConfig.svelte';
+  import TargetName from './TargetName.svelte';
+
+  const { values } = getFormContext();
+
+  $: targetDbinfo = useDatabaseInfo({ conid: $values.targetConnectionId, database: $values.targetDatabaseName });
+  $: sourceConnectionInfo = useConnectionInfo({ conid: $values.sourceConnectionId });
+
+  const previewSource = writable(null);
 
   //   engine={sourceEngine}
   //       {setPreviewSource}
@@ -30,6 +47,40 @@
       schemaNameField="targetSchemaName"
     />
   </div>
+
+  <div class="m-2">
+    <div class="title"><FontIcon icon="icon tables" /> Map source tables/files</div>
+
+    <TableControl
+      rows={$values.sourceList || []}
+      columns={[
+        {
+          fieldName: 'source',
+          header: 'Source',
+          component: SourceName,
+          getProps: row => ({ name: row }),
+        },
+        {
+          fieldName: 'action',
+          header: 'Action',
+          component: SourceAction,
+          getProps: row => ({ name: row, targetDbinfo }),
+        },
+        {
+          fieldName: 'target',
+          header: 'Target',
+          component: TargetName,
+          getProps: row => ({ name: row }),
+        },
+        {
+          fieldName: 'preview',
+          header: 'Preview',
+          component: PreviewCheckBox,
+          getProps: row => ({ name: row, previewSource }),
+        },
+      ]}
+    />
+  </div>
 </div>
 
 <style>
@@ -38,4 +89,10 @@
     color: var(--theme-icon-blue);
     align-self: center;
   }
+
+  .title {
+    font-size: 20px;
+    text-align: center;
+    margin: 10px 0px;
+  }
 </style>

packages/web/src/impexp/PreviewCheckBox.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import CheckboxField from '../forms/CheckboxField.svelte';
+
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+
+  import { findFileFormat } from '../plugins/fileformats';
+  import { extensions } from '../stores';
+
+  const { values } = getFormContext();
+
+  export let name;
+  export let previewSource;
+
+  $: supportsPreview =
+    !!findFileFormat($extensions, $values.sourceStorageType) || $values.sourceStorageType == 'archive';
+</script>
+
+{#if supportsPreview}
+  <CheckboxField
+    checked={$previewSource == name}
+    onChange={e => {
+      if (e.target.checked) $previewSource = name;
+      else $previewSource = null;
+    }}
+  />
+{/if}

packages/web/src/impexp/SourceAction.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import { extensions } from '../stores';
+  import { getActionOptions } from './createImpExpScript';
+
+  export let name;
+  export let targetDbinfo;
+
+  const { values, setFieldValue } = getFormContext();
+
+  $: options = getActionOptions($extensions, name, $values, targetDbinfo);
+</script>
+
+<SelectField
+  {options}
+  isNative
+  value={values[`actionType_${name}`] || options[0].value}
+  on:change={e => setFieldValue(`actionType_${name}`, e.detail)}
+/>

packages/web/src/impexp/SourceName.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ChangeDownloadUrlModal from '../modals/ChangeDownloadUrlModal.svelte';
+  import { showModal } from '../modals/modalTools';
+
+  export let name;
+  const { values, setFieldValue } = getFormContext();
+
+  const handleDelete = () => {
+    setFieldValue(
+      'sourceList',
+      $values.sourceList.filter(x => x != name)
+    );
+  };
+  const doChangeUrl = url => {
+    setFieldValue(`sourceFile_${name}`, { fileName: url, isDownload: true });
+  };
+  const handleChangeUrl = () => {
+    showModal(ChangeDownloadUrlModal, { url: obj.fileName, onConfirm: doChangeUrl });
+  };
+
+  $: obj = $values[`sourceFile_${name}`];
+</script>
+
+<div class="flex space-between">
+  <div>{name}</div>
+  <div class="flex">
+    {#if obj && !!obj.isDownload}
+      <div class="icon" on:click={handleChangeUrl} title={obj && obj.fileName}>
+        <FontIcon icon="icon web" />
+      </div>
+    {/if}
+    <div class="icon" on:click={handleDelete}>
+      <FontIcon icon="icon delete" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .icon {
+    cursor: pointer;
+    color: var(--theme-font-link);
+    margin-left: 5px;
+  }
+  .icon:hover {
+    background-color: var(--theme-bg-2);
+  }
+</style>

packages/web/src/impexp/TargetName.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+
+  import TextField from '../forms/TextField.svelte';
+  import { extensions } from '../stores';
+  import { getTargetName } from './createImpExpScript';
+
+  const { values, setFieldValue } = getFormContext();
+
+  export let name;
+</script>
+
+<TextField
+  value={getTargetName($extensions, name, $values)}
+  onChange={e => setFieldValue(`targetName_${name}`, e.target.value)}
+/>