From 0e682bf6302aea388ecfe6c92ad571db04d1c496 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 17 Mar 2021 10:50:13 +0100
Subject: [PATCH] Add runner now uses svelte-select

---
 src/components/runners/AddRunnerModal.svelte | 48 +++++++++++++-------
 src/locales/en.json                          |  4 +-
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/runners/AddRunnerModal.svelte b/src/components/runners/AddRunnerModal.svelte
index 5264527f..3f726333 100644
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/src/components/runners/AddRunnerModal.svelte
@@ -10,6 +10,8 @@
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
+  import Select from "svelte-select";
+import AddDonationModal from "../donations/AddDonationModal.svelte";
   export let modal_open;
   export let current_runners;
   $: selected_team = undefined;
@@ -206,7 +208,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="{$_('last-name')}"
+                    placeholder={$_('last-name')}
                     class:border-red-500={!isLastnameValid}
                     class:focus:border-red-500={!isLastnameValid}
                     class:focus:ring-red-500={!isLastnameValid}
@@ -226,21 +228,33 @@
                   <label
                     for="team"
                     class="block text-sm font-medium text-gray-700">{$_('team')}</label>
-                  <select
-                    name="team"
-                    bind:value={selected_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.id}>
-                        {team.parentGroup.name}
-                        &gt;
-                        {team.name}
-                      </option>
-                    {/each}
-                    {#each orgs as org}
-                      <option value={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"
+                    getSelectionLabel={(option) => {
+                      if(option.responseType == "RUNNERORGANIZATION"){
+                        return option.name;
+                      }
+                      return `${option.parentGroup.name} &gt; ${option.name}`
+                    }}
+                    getOptionLabel={(option) => {
+                      if(option.responseType == "RUNNERORGANIZATION"){
+                        return option.name;
+                      }
+                      return `${option.parentGroup.name} &gt; ${option.name}`
+                    }}
+                    itemFilter={(label, filterText, option) => label
+                        .toLowerCase()
+                        .includes(
+                          filterText.toLowerCase()
+                        ) || option.id
+                        .toString()
+                        .startsWith(filterText.toLowerCase())}
+                    items={orgs.concat(orgs, teams)}
+                    showChevron={true}
+                    placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+                    noOptionsMessage={$_('no-organization-or-team-found')}
+                    on:select={(selectedValue) => (selected_team = selectedValue.detail.id)}
+                    on:clear={() => (selected_team = null)} />
                 </div>
                 <div class="col-span-6">
                   <label
@@ -248,7 +262,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="{$_('phone')}"
+                    placeholder={$_('phone')}
                     class:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:ring-red-500={!isPhoneValidOrEmpty}
diff --git a/src/locales/en.json b/src/locales/en.json
index 455f52f0..28235827 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -316,5 +316,7 @@
   "no-organizations-found": "No organizations found",
   "you-have-to-provide-an-organization": "You have to provide an organization",
   "no-contact-found": "No contact found",
-  "no-contact-selected": "No contact selected"
+  "no-contact-selected": "No contact selected",
+  "search-for-an-organization-or-team-by-name-or-id": "Search for an organization or team (by name or id)",
+  "no-organization-or-team-found": "No organization or team found"
 }