From fe16c66cf2d9ee2a950b0865b43fe7797b9540b2 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 13 Mar 2021 14:45:27 +0100
Subject: [PATCH] New select

ref #91
---
 .../donations/AddDonationModal.svelte         | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
index f6858e6d..39b38fd3 100644
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -7,9 +7,13 @@
     DonorService,
     RunnerService,
   } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_donations;
+  const getOptionLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const getSelectionLabel = getOptionLabel;
   function focus(el) {
     el.focus();
   }
@@ -179,7 +183,9 @@
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 <!-- TODO: -->
-                {#if is_fixed}{$_('create-a-new-fixed-donation')}{:else}{$_('create-a-new-distance-donation')}{/if}
+                {#if is_fixed}
+                  {$_('create-a-new-fixed-donation')}
+                {:else}{$_('create-a-new-distance-donation')}{/if}
               </h3>
               <label class="content-center align-middle object-center">
                 <span
@@ -203,7 +209,16 @@
                   <label
                     for="donor"
                     class="block text-sm font-medium text-gray-700">{$_('donor')}</label>
-                  <select
+                  <Select
+                    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"
+                    {getSelectionLabel}
+                    {getOptionLabel}
+                    items={donors}
+                    showChevron={true}
+                    placeholder="Search for donor..."
+                    on:select={(selected) => (donor = selected.detail.id)} />
+
+                  <!-- <select
                     bind:value={donor}
                     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 donors as d}
@@ -213,7 +228,7 @@
                         {d.lastname}
                       </option>
                     {/each}
-                  </select>
+                  </select> -->
                 </div>
                 {#if !is_fixed}
                   <div class="col-span-6">
@@ -237,7 +252,9 @@
                   <label
                     for="donation_amount_eur"
                     class="block text-sm font-medium text-gray-700">
-                    {#if !is_fixed}{$_('amount-per-kilometer')}{:else}{$_('donation-amount')}{/if}</label>
+                    {#if !is_fixed}
+                      {$_('amount-per-kilometer')}
+                    {:else}{$_('donation-amount')}{/if}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       autocomplete="off"