From 48e9e77be55145d760b0980b425b20cbb70a45b4 Mon Sep 17 00:00:00 2001
From: "SPRINX0\\prochazka" <jan.prochazka@sprinx.com>
Date: Thu, 26 Sep 2024 12:29:24 +0200
Subject: [PATCH] column drop down in column map modal

---
 .../elements/ColumnMapColumnDropdown.svelte   | 30 +++++++++++++++++++
 packages/web/src/modals/ColumnMapModal.svelte | 15 ++++++----
 2 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 packages/web/src/elements/ColumnMapColumnDropdown.svelte

diff --git a/packages/web/src/elements/ColumnMapColumnDropdown.svelte b/packages/web/src/elements/ColumnMapColumnDropdown.svelte
new file mode 100644
index 000000000..e78098954
--- /dev/null
+++ b/packages/web/src/elements/ColumnMapColumnDropdown.svelte
@@ -0,0 +1,30 @@
+<script alng="ts">
+  import DropDownButton from '../buttons/DropDownButton.svelte';
+  import TextField from '../forms/TextField.svelte';
+
+  export let tableInfo;
+  export let onChange;
+  export let value;
+</script>
+
+{#if tableInfo}
+  <div class="wrapper">
+    <TextField {...$$restProps} {value} on:input={e => onChange(e.target.value)} />
+    <DropDownButton
+      menu={() => {
+        return tableInfo.columns.map(opt => ({
+          text: opt.columnName,
+          onClick: () => onChange(opt.columnName),
+        }));
+      }}
+    />
+  </div>
+{:else}
+  <TextField {value} on:input={e => onChange(e.target.value)} />
+{/if}
+
+<style>
+  .wrapper {
+    display: flex;
+  }
+</style>
diff --git a/packages/web/src/modals/ColumnMapModal.svelte b/packages/web/src/modals/ColumnMapModal.svelte
index 7bad63af4..67178fe0c 100644
--- a/packages/web/src/modals/ColumnMapModal.svelte
+++ b/packages/web/src/modals/ColumnMapModal.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+  import DropDownButton from '../buttons/DropDownButton.svelte';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import ColumnMapColumnDropdown from '../elements/ColumnMapColumnDropdown.svelte';
   import Link from '../elements/Link.svelte';
   import TableControl from '../elements/TableControl.svelte';
   import CheckboxField from '../forms/CheckboxField.svelte';
 
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
-  import TextField from '../forms/TextField.svelte';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
@@ -73,17 +74,19 @@
         />
       </svelte:fragment>
       <svelte:fragment slot="1" let:row let:index>
-        <TextField
+        <ColumnMapColumnDropdown
           value={row['src']}
-          on:change={e =>
-            (value = (value || []).map((x, i) => (i == index ? { ...x, src: e.target.value, ignore: false } : x)))}
+          onChange={column =>
+            (value = (value || []).map((x, i) => (i == index ? { ...x, src: column, ignore: false } : x)))}
+          tableInfo={sourceTableInfo}
         />
       </svelte:fragment>
       <svelte:fragment slot="2" let:row let:index>
-        <TextField
+        <ColumnMapColumnDropdown
           value={row['dst']}
-          on:change={e =>
+          onChange={e =>
             (value = (value || []).map((x, i) => (i == index ? { ...x, dst: e.target.value, ignore: false } : x)))}
+          tableInfo={targetTableInfo}
         />
       </svelte:fragment>
       <svelte:fragment slot="3" let:index>