From 1c330d0301d5f3167a49161974eb09ff2324ba16 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sun, 14 Mar 2021 17:20:18 +0100
Subject: [PATCH] Added custom placeholders

ref #91
---
 .../donations/AddDonationModal.svelte         | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
index f8b5f766..234b0f42 100644
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -13,7 +13,9 @@
   export let current_donations;
   const getDonorLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterDonors = (label, filterText, option) => (label.toLowerCase().includes(filterText.toLowerCase()) || option.id.toString().startsWith(filterText.toLowerCase()));
+  const filterDonors = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
@@ -209,15 +211,16 @@
                   <label
                     for="donor"
                     class="block text-sm font-medium text-gray-700">{$_('donor')}</label>
-                    <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) => (getDonorLabel(option))}
-                      getOptionLabel= {(option) => (getDonorLabel(option))}
-                      itemFilter = {(label, filterText, option) => filterDonors(label, filterText, option)}
-                      items={donors}
-                      showChevron={true}
-                      placeholder="Search for donor..."
-                      on:select={(selected) => (donor = selected.detail.id)} />
+                  <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) => getDonorLabel(option)}
+                    getOptionLabel={(option) => getDonorLabel(option)}
+                    itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+                    items={donors}
+                    showChevron={true}
+                    placeholder={$_('search-for-donor-name-or-id')}
+                    noOptionsMessage={$_('no-donors-found')}
+                    on:select={(selectedValue) => (donor = selectedValue.detail.id)} />
                 </div>
                 {#if !is_fixed}
                   <div class="col-span-6">