✨ ImportRunnerModal usage in TeamDetail

ref #13

src/components/ImportRunnerModal.svelte

@@ -9,7 +9,7 @@
   import { createEventDispatcher } from "svelte";
   export let opened_from;
   export let passed_orgs;
-  export let passed_org;
+  export let passed_team;
   export let import_modal_open;
   $: searchvalue = "";
   const dispatch = createEventDispatcher();
@@ -83,25 +83,40 @@
       if (opened_from === "OrgOverview") {
         org = parseInt(selected_org);
       }
-      ImportService.importControllerPostOrgsJson(org, mapped)
-        .then((resp) => {
-          setTimeout(() => {
+      if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
+        ImportService.importControllerPostOrgsJson(org, mapped)
+          .then((resp) => {
             toast.hideToast();
             recent_processed = true;
-          }, 500);
-          Toastify({
-            text: "Import finished",
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          cancelModal();
-        })
-        .catch((err) => {
-          setTimeout(() => {
+            Toastify({
+              text: "Import finished",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            cancelModal();
+          })
+          .catch((err) => {
             toast.hideToast();
             recent_processed = true;
-          }, 500);
-        });
+          });
+      }
+      if (opened_from === "TeamDetail") {
+        ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
+          .then((resp) => {
+            toast.hideToast();
+            recent_processed = true;
+            Toastify({
+              text: "Import finished",
+              duration: 500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            cancelModal();
+          })
+          .catch((err) => {
+            toast.hideToast();
+            recent_processed = true;
+          });
+      }
     }
   }
 </script>

src/components/TeamDetail.svelte

@@ -6,6 +6,7 @@
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../store";
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import PromiseError from "./PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   export let params;
@@ -16,6 +17,7 @@
     [],
     false,
   ];
+  export let import_modal_open = false;
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
   $: data_loaded = false;
@@ -71,12 +73,31 @@
   }
 </script>
 
+<ImportRunnerModal
+  on:cancelDelete={(event) => {
+    import_modal_open = false;
+  }}
+  passed_team={teamdata}
+  passed_orgs={[]}
+  passed_org={{}}
+  opened_from="TeamDetail"
+  bind:import_modal_open />
 <ConfirmTeamDeletion bind:modal_open bind:delete_team />
 {#if data_loaded}
   <section class="container p-5">
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+          <button
+            on:click={() => {
+              import_modal_open = true;
+            }}
+            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">
+            {$_('import-runners')}
+          </button>
+        {/if}
         {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
           {#if delete_triggered}
             <button