From 1da15783d56ff4a998f872ce6842e83707b274ff Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sun, 14 Mar 2021 20:25:58 +0100
Subject: [PATCH] Add Team now uses the new select

ref #91
---
 src/components/teams/AddTeamModal.svelte | 29 +++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/teams/AddTeamModal.svelte b/src/components/teams/AddTeamModal.svelte
index db1e8106..8eccdccf 100644
--- a/src/components/teams/AddTeamModal.svelte
+++ b/src/components/teams/AddTeamModal.svelte
@@ -6,6 +6,7 @@
     RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_teams;
@@ -90,7 +91,7 @@
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
         aria-hidden="true">&#8203;</span>
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline">
@@ -145,13 +146,25 @@
                   <label
                     for="firstname"
                     class="block text-sm font-medium text-gray-700">{$_('organization')}</label>
-                  <select
-                    bind:value={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 t}
-                      <option value={t.id}>{t.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-an-organization-by-name-or-id')}
+                    noOptionsMessage={$_('no-organizations-found')}
+                    on:select={(selectedValue) => (parentGroup = selectedValue.detail.id)}
+                    on:clear={()=>(parentGroup = null)} />
+                    {#if !parentGroup}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      {$_('you-have-to-provide-an-organization')}
+                    </span>
+                  {/if}
                 </div>
               </div>
             </div>