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>