Fixed select bug for sponsoring detail 🛠

ref #98

src/components/donations/DonationDetail.svelte

@@ -14,6 +14,8 @@
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
+  $: donor = {};
+  $: runner = {};
   $: current_donors = [];
   $: current_runners = [];
   $: amount_input = 0;
@@ -30,12 +32,7 @@
     (original_data.responseType !== "DISTANCEDONATION" &&
       !(Math.floor(amount_input * 100) === original_data.amount));
   $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
-  const donor_promise = DonorService.donorControllerGetAll().then((val) => {
+
-    current_donors = val;
-  });
-  const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
-    current_runners = val;
-  });
   const promise = DonationService.donationControllerGetOne(
     params.donationid
   ).then((data) => {
@@ -44,15 +41,27 @@
     editable = Object.assign(editable, original_data);
     if (data.responseType == "DISTANCEDONATION") {
       amount_input = data.amountPerDistance / 100;
+      RunnerService.runnerControllerGetAll().then((val) => {
+        current_runners = val.map((r) => {
+          return { label: getDonorLabel(r), value: r };
+        });
+        runner = current_runners.find((g) => g.value.id == editable.runner.id);
+      });
     } else {
       amount_input = data.amount / 100;
     }
+    DonorService.donorControllerGetAll().then((val) => {
+      current_donors = val.map((r) => {
+        return { label: getDonorLabel(r), value: r };
+      });
+      donor = current_donors.find((g) => g.value.id == editable.donor.id);
+    });
   });
   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());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
 
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -116,7 +125,7 @@
   }
 </script>
 
-{#await donor_promise && runner_promise && promise}
+{#await promise}
   {$_('loading-donation-details')}
 {:then}
   <section class="container p-5 select-none">
@@ -217,14 +226,13 @@
         class="block  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={current_donors}
         showChevron={true}
         placeholder={$_('search-for-donor-name-or-id')}
         noOptionsMessage={$_('no-donors-found')}
-        bind:selectedValue={editable.donor}
+        bind:selectedValue={donor}
+        on:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
         on:clear={() => (editable.donor = null)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -234,14 +242,13 @@
           class="block  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"
-          getSelectionLabel={(option) => getDonorLabel(option)}
-          getOptionLabel={(option) => getDonorLabel(option)}
           itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
           items={current_runners}
           showChevron={true}
           placeholder={$_('search-for-runner-by-name-or-id')}
           noOptionsMessage={$_('no-runners-found')}
-          bind:selectedValue={editable.runner}
+          bind:selectedValue={runner}
+          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
           on:clear={() => (editable.runner = null)} />
       </div>
     {/if}