MAde detail editable through the more reacctive process

ref #91

src/components/donations/DonationDetail.svelte

@@ -13,14 +13,13 @@
   export let params;
   $: delete_triggered = false;
   $: original_data = {};
-  $: original_comparison_string = "";
   $: editable = {};
   $: current_donors = [];
   $: current_runners = [];
   $: amount_input = 0;
   $: is_amount_valid = amount_input > 0;
   $: changes_performed =
-    !(original_comparison_string === JSON.stringify(editable)) ||
+    !(JSON.stringify(original_data) === JSON.stringify(editable)) ||
     (original_data.responseType == "DISTANCEDONATION" &&
       !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
     (original_data.responseType !== "DISTANCEDONATION" &&
@@ -38,14 +37,11 @@
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
-    editable.donor = data.donor.id;
     if (data.responseType == "DISTANCEDONATION") {
-      editable.runner = data.runner.id;
       amount_input = data.amountPerDistance / 100;
     } else {
       amount_input = data.amount / 100;
     }
-    original_comparison_string = JSON.stringify(editable);
   });
   const getDonorLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
@@ -59,16 +55,19 @@
         text: "Donation is being updated",
         duration: 2500,
       }).showToast();
+      let postdata = {};
       if (original_data.responseType === "DISTANCEDONATION") {
         editable.amountPerDistance = Math.floor(amount_input * 100);
+        postdata = Object.assign(postdata, editable);
+        postdata.runner = postdata.runner.id;
+        postdata.donor = postdata.donor.id;
         DonationService.donationControllerPutDistance(
           original_data.id,
-          editable
+          postdata
         )
           .then((resp) => {
-            Object.assign(original_data, resp);
+            Object.assign(original_data, editable);
             original_data = original_data;
-            original_comparison_string = JSON.stringify(editable);
             Toastify({
               text: "updated donation",
               duration: 2500,
@@ -78,7 +77,10 @@
           .catch((err) => {});
       } else {
         editable.amount = Math.floor(amount_input * 100);
-        DonationService.donationControllerPutFixed(original_data.id, editable)
+        postdata = Object.assign(postdata, editable);
+        postdata.runner = postdata.runner.id;
+        postdata.donor = postdata.donor.id;
+        DonationService.donationControllerPutFixed(original_data.id, postdata)
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
@@ -218,9 +220,8 @@
         showChevron={true}
         placeholder={$_('search-for-donor-name-or-id')}
         noOptionsMessage={$_('no-donors-found')}
-        selectedValue={current_donors.find((d) => (d.id == editable.donor))}
-        on:select={(selectedValue) => (editable.donor = selectedValue.detail.id)}
-        on:clear={()=>(editable.donor = null)}/>
+        bind:selectedValue={editable.donor}
+        on:clear={() => (editable.donor = null)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
       <div class=" w-full">
@@ -236,9 +237,8 @@
           showChevron={true}
           placeholder={$_('search-for-runner-by-name-or-id')}
           noOptionsMessage={$_('no-runners-found')}
-          selectedValue={undefined || current_runners.find((r) => (r.id = original_data.runner.id))}
-          on:select={(selectedValue) => (editable.runner == selectedValue.detail.id)}
-          on:clear={()=>(editable.runner = null)} />
+          bind:selectedValue={editable.runner}
+          on:clear={() => (editable.runner = null)} />
       </div>
     {/if}
     <div class=" w-full">

src/components/teams/AddTeamModal.svelte

@@ -148,18 +148,26 @@
                     class="block text-sm font-medium text-gray-700">{$_('organization')}</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) => {return option.name}}
-                    getOptionLabel={(option) => {return option.name}}
-                    itemFilter={(label, filterText, option) =>
-                      label.toLowerCase().includes(filterText.toLowerCase()) ||
-                      option.id.toString().startsWith(filterText.toLowerCase())}
+                    getSelectionLabel={(option) => {
+                      return option.name;
+                    }}
+                    getOptionLabel={(option) => {
+                      return option.name;
+                    }}
+                    itemFilter={(label, filterText, option) => label
+                        .toLowerCase()
+                        .includes(
+                          filterText.toLowerCase()
+                        ) || option.id
+                        .toString()
+                        .startsWith(filterText.toLowerCase())}
                     items={orgs}
                     showChevron={true}
                     placeholder={$_('search-for-an-organization-by-name-or-id')}
                     noOptionsMessage={$_('no-organizations-found')}
                     on:select={(selectedValue) => (parentGroup = selectedValue.detail.id)}
-                    on:clear={()=>(parentGroup = null)} />
-                    {#if !parentGroup}
+                    on:clear={() => (parentGroup = null)} />
+                  {#if !parentGroup}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       {$_('you-have-to-provide-an-organization')}