From 2a644d70704cd3ffc5f0d7dd7894b2389ab90b1f Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Mon, 15 Mar 2021 16:05:06 +0100
Subject: [PATCH] Now using svelte-select

ref #91
---
 src/components/teams/TeamDetail.svelte | 35 +++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/teams/TeamDetail.svelte b/src/components/teams/TeamDetail.svelte
index 0b56abb0..e592db48 100644
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -7,6 +7,7 @@
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../../store";
+  import Select from "svelte-select"
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
@@ -170,7 +171,17 @@
               aria-haspopup="true"
               aria-expanded="true">
               {$_('generate-sponsoring-contracts')}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                class="-mr-1 ml-2 h-5 w-5"><path
+                  fill="none"
+                  d="M0 0h24v24H0z" />
+                <path
+                  fill="currentColor"
+                  d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
             </button>
           </div>
           {#if sponsoring_contracts_download_open}
@@ -351,14 +362,20 @@
       <label
         for="org"
         class="font-medium text-gray-700">{$_('organization')}</label>
-      <select
-        name="org"
-        bind:value={teamdata.parentGroup}
-        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 orgs as o}
-          <option value={o.id}>{o.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"
+        getSelectionLabel={(option) => {return option.name}}
+        getOptionLabel={(option) => {return option.name}}
+        itemFilter={(label, filterText, option) =>
+          label.toLowerCase().includes(filterText.toLowerCase()) ||
+          option.id.toString().startsWith(filterText.toLowerCase())}
+        items={orgs}
+        showChevron={true}
+        placeholder={$_('search-for-runner-by-name-or-id')}
+        noOptionsMessage={$_('no-runners-found')}
+        selectedValue={undefined || orgs.find((r) => (r.id = original.parentGroup.id))}
+        on:select={(selectedValue) => (teamdata.parentGroup == selectedValue.detail)}
+        on:clear={()=>(teamdata.parentGroup = null)} />
     </div>
   </section>
 {:else}