👀 basic ui interaction for ImportRunnerModal

ref #13

src/components/ImportRunnerModal.svelte

@@ -7,6 +7,8 @@
   import Toastify from "toastify-js";
   import { ImportService } from "@odit/lfk-client-js";
   import { createEventDispatcher } from "svelte";
+  export let opened_from;
+  export let passed_orgs;
   export let import_modal_open;
   $: searchvalue = "";
   const dispatch = createEventDispatcher();
@@ -25,6 +27,7 @@
       }
     };
   })();
+  let selected_org;
   let files;
   let recent_processed = true;
   $: json_output = [];
@@ -74,18 +77,28 @@
         };
       });
       console.log(mapped);
-      ImportService.importControllerPostOrgsJson(1, mapped)
+      ImportService.importControllerPostOrgsJson(parseInt(selected_org), mapped)
         .then((resp) => {
-          console.log("demo passed");
-          console.log(resp);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+          // console.log("demo passed");
+          // console.log(resp);
           setTimeout(() => {
             toast.hideToast();
             recent_processed = true;
           }, 500);
+          Toastify({
+            text: "Import finished",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          cancelModal();
+        })
+        .catch((err) => {
+          console.log(err);
+          setTimeout(() => {
+            toast.hideToast();
+            recent_processed = true;
+          }, 500);
+        });
     }
   }
 </script>
@@ -145,6 +158,17 @@
                 </div>
               {/if}
               {#if json_output.length > 0}
+                {#if opened_from === 'OrgOverview'}
+                  <p>{$_('import__target-organization')}</p>
+                  <select
+                    name="team"
+                    bind:value={selected_org}
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    {#each passed_orgs as o}
+                      <option value={o.id}>{o.name}</option>
+                    {/each}
+                  </select>
+                {/if}
                 <p>Bitte bestätige diese Läufer für den Import</p>
                 <input
                   type="search"

src/components/Orgs.svelte

@@ -29,7 +29,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Läufer importieren
+        {$_('import-runners')}
       </button>
     {/if}
   </span>
@@ -43,5 +43,7 @@
     on:cancelDelete={(event) => {
       import_modal_open = false;
     }}
+    passed_orgs={current_organizations}
+    opened_from="OrgOverview"
     bind:import_modal_open />
 {/if}

src/locales/en.json

@@ -85,6 +85,7 @@
     "hallo": "hello",
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
     "import-runners": "Import runners",
+    "import__target-organization": "Target Organization",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
     "last-name": "Last name",