Switched import modal over to svelte select

ref #98

src/components/runners/ImportRunnerModal.svelte

@@ -11,6 +11,7 @@
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import { createEventDispatcher } from "svelte";
+  import Select from "svelte-select";
   export let opened_from;
   export let passed_org;
   export let passed_orgs;
@@ -35,22 +36,18 @@
       }
     };
   })();
-  let orgs = [];
+  let groups = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
-    if(opened_from === 'OrgOverview'){
-    selected_org = orgs[0].id
-  }
-  });
-  let teams = [];
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-    if (opened_from === "RunnerOverview" && teams.length>0) {
-      selected_org_or_team = "TEAM_" + teams[0].id;
-    }
-    if(teams.length==0 && orgs.length>0){
-      selected_org_or_team = "ORG_" + orgs[0].id
-    }
+    const orgs = val.map((r) => {
+      return { label: r.name, value: `ORG_${r.id}` };
+    });
+    groups = groups.concat(orgs);
+    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+      const teams = val.map((r) => {
+        return { label: `${r.parentGroup.name} > ${r.name}`, value: `TEAM_${r.id}` };
+      });
+      groups = groups.concat(teams);
+    });
   });
   let selected_org;
   $: selected_org_or_team = "";
@@ -264,21 +261,23 @@
               {/if}
               {#if opened_from === 'RunnerOverview'}
                 <p>{$_('group')}</p>
-                <select
-                  name="team"
-                  bind:value={selected_org_or_team}
-                  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 teams as team}
-                    <option value="TEAM_{team.id}">
-                      {team.parentGroup.name}
-                      &gt;
-                      {team.name}
-                    </option>
-                  {/each}
-                  {#each orgs as org}
-                    <option value="ORG_{org.id}">{org.name}</option>
-                  {/each}
-                </select>
+                <Select
+                  containerClasses="rounded-l-md 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"
+                  itemFilter={(label, filterText, option) => label
+                      .toLowerCase()
+                      .includes(
+                        filterText.toLowerCase()
+                      ) || option.id.value
+                      .toString()
+                      .startsWith(filterText.toLowerCase())}
+                  items={groups}
+                  showChevron={true}
+                  placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+                  noOptionsMessage={$_('no-organization-or-team-found')}
+                  on:select={(selectedValue) => {
+                    selected_org_or_team = selectedValue.detail.value;
+                  }}
+                  on:clear={() => (selected_org_or_team = null)} />
               {/if}
               {#if opened_from === 'OrgDetail'}
                 <p>