From 75bc89ca3020c48f490c7602374616bd9461e78f Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 15 Mar 2023 13:06:56 +0100
Subject: [PATCH 1/4] Fixed runners not showing up ref #162

---
 src/components/cards/AddCardModal.svelte | 77 ++++++++++++++++--------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/src/components/cards/AddCardModal.svelte b/src/components/cards/AddCardModal.svelte
index f72dd529..c2351f06 100644
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -11,6 +11,7 @@
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_cards;
+
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
@@ -20,13 +21,18 @@
     el.focus();
   }
   $: runner = 0;
-  $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
+
+  let loading = true;
+  let runners = [];
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
     });
+    runners = runners;
+    loading = false;
+    console.log({ loaded: !loading, l: runners.length });
   });
   $: createbtnenabled = true;
   (() => {
@@ -86,61 +92,78 @@
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         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">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+                /></svg
+              >
             </div>
             <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">
-                {$_('create-a-new-card')}
+                {$_("create-a-new-card")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
-                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
+                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
+                  {$_(
+                    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="donor"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</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"
-                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
-                    items={runners}
-                    showChevron={true}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
-                    noOptionsMessage={$_('no-runners-found')}
-                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
-                    on:clear={() => (runner = null)} />
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("runner")}</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"
+                      itemFilter={(label, filterText, option) =>
+                        filterRunners(label, filterText, option)}
+                      items={runners}
+                      bind:loading
+                      showChevron={!loading}
+                      placeholder={$_("search-for-runner-by-name-or-id")}
+                      noOptionsMessage={$_("no-runners-found")}
+                      on:select={(selectedValue) =>
+                        (runner = selectedValue.detail.value.id)}
+                      on:clear={() => (runner = null)}
+                    />
                 </div>
               </div>
             </div>
@@ -152,16 +175,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('create')}
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('cancel')}
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

From 268b1b1d9830de196d1d95345d7a2467bbf19eb6 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 15 Mar 2023 13:07:49 +0100
Subject: [PATCH 2/4] Removed unused log ref #162

---
 src/components/cards/AddCardModal.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/cards/AddCardModal.svelte b/src/components/cards/AddCardModal.svelte
index c2351f06..5745c309 100644
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -30,9 +30,7 @@
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
     });
-    runners = runners;
     loading = false;
-    console.log({ loaded: !loading, l: runners.length });
   });
   $: createbtnenabled = true;
   (() => {

From 92b89cc4d88c9d5625c2ddf7c81c98494f7f5271 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 15 Mar 2023 13:09:07 +0100
Subject: [PATCH 3/4] Fixed double space in label ref #162

---
 src/components/cards/AddCardModal.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/AddCardModal.svelte b/src/components/cards/AddCardModal.svelte
index 5745c309..685129a8 100644
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -12,8 +12,14 @@
   export let modal_open;
   export let current_cards;
 
-  const getRunnerLabel = (option) =>
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const getRunnerLabel = (option) => 
+  {
+    if(option.middlename){
+      return option.firstname + " " + option.middlename + " " + option.lastname;
+    }
+    return option.firstname + " " + option.lastname;
+  }
+    
   const filterRunners = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
     option.value.toString().startsWith(filterText.toLowerCase());

From e8a0ad6647ab39252865f62b755f27c34ac2d243 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 15 Mar 2023 13:12:42 +0100
Subject: [PATCH 4/4] You can now create cards from runners by searching via
 #runnerid ref #162

---
 src/components/cards/AddCardModal.svelte | 47 +++++++++++++-----------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/cards/AddCardModal.svelte b/src/components/cards/AddCardModal.svelte
index 685129a8..fce139c5 100644
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -12,17 +12,22 @@
   export let modal_open;
   export let current_cards;
 
-  const getRunnerLabel = (option) => 
-  {
-    if(option.middlename){
+  const getRunnerLabel = (option) => {
+    if (option.middlename) {
       return option.firstname + " " + option.middlename + " " + option.lastname;
     }
     return option.firstname + " " + option.lastname;
-  }
-    
-  const filterRunners = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
+  };
+
+  const filterRunners = (label, filterText, option) => {
+    if (filterText.startsWith("#")) {
+      return option.value.id == parseInt(filterText.replace("#",""))
+    }
+    return (
+      label.toLowerCase().includes(filterText.toLowerCase()) ||
+      option.value.toString().startsWith(filterText.toLowerCase())
+    );
+  };
   function focus(el) {
     el.focus();
   }
@@ -155,19 +160,19 @@
                     class="block text-sm font-medium text-gray-700"
                     >{$_("runner")}</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"
-                      itemFilter={(label, filterText, option) =>
-                        filterRunners(label, filterText, option)}
-                      items={runners}
-                      bind:loading
-                      showChevron={!loading}
-                      placeholder={$_("search-for-runner-by-name-or-id")}
-                      noOptionsMessage={$_("no-runners-found")}
-                      on:select={(selectedValue) =>
-                        (runner = selectedValue.detail.value.id)}
-                      on:clear={() => (runner = null)}
-                    />
+                  <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"
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
+                    items={runners}
+                    bind:loading
+                    showChevron={!loading}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
+                    noOptionsMessage={$_("no-runners-found")}
+                    on:select={(selectedValue) =>
+                      (runner = selectedValue.detail.value.id)}
+                    on:clear={() => (runner = null)}
+                  />
                 </div>
               </div>
             </div>