Donors now get their donations linked in the donor detail

ref #79

src/components/donors/DonorDetail.svelte

@@ -1,18 +1,17 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../../store";
-  import {
+  import { DonorService, DonationService } from "@odit/lfk-client-js";
-    DonorService
-  } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
-  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte"
+  import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
   let data_loaded = false;
   export let params;
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
+  $: current_donations = [];
   $: changes_performed = !(
     JSON.stringify(original_data) === JSON.stringify(editable)
   );
@@ -28,25 +27,30 @@
     isEmailValid &&
     isPhoneValidOrEmpty &&
     ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
-    editable.address_checked === false);
+      editable.address_checked === false);
-  const promise = DonorService.donorControllerGetOne(
+  const donation_promise = DonationService.donationControllerGetAll().then(
-    params.donorid
+    (val) => {
-  ).then((data) => {
+      current_donations = val;
-    data_loaded = true;
+    }
-    original_data = Object.assign(original_data, data);
+  );
-    editable = Object.assign(editable, original_data);
+  const promise = DonorService.donorControllerGetOne(params.donorid).then(
-    editable.address_checked = editable.address.address1 !== null;
+    (data) => {
-    original_data.address_checked = editable.address.address1 !== null;
+      data_loaded = true;
-    if(editable.address_checked===false){
+      original_data = Object.assign(original_data, data);
-      editable.address = {
+      editable = Object.assign(editable, original_data);
-        address1: "",
+      editable.address_checked = editable.address.address1 !== null;
-        address2: "",
+      original_data.address_checked = editable.address.address1 !== null;
-        city: "",
+      if (editable.address_checked === false) {
-        postalcode: "",
+        editable.address = {
-        country: ""
+          address1: "",
+          address2: "",
+          city: "",
+          postalcode: "",
+          country: "",
+        };
       }
     }
-  });
+  );
   $: isPhoneValidOrEmpty =
     editable.phone?.includes("+") ||
     editable.phone === "" ||
@@ -59,7 +63,7 @@
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: $_('donor-is-being-updated'),
+        text: $_("donor-is-being-updated"),
         duration: 2500,
       }).showToast();
       editable.address.country = "DE";
@@ -73,9 +77,9 @@
       DonorService.donorControllerPut(original_data.id, editable)
         .then((resp) => {
           Object.assign(original_data, editable);
-          original_data=original_data;
+          original_data = original_data;
           Toastify({
-            text: $_('updated-donor'),
+            text: $_("updated-donor"),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -85,13 +89,10 @@
     }
   }
   function deleteDonor() {
-    DonorService.donorControllerRemove(
+    DonorService.donorControllerRemove(original_data.id, false)
-      original_data.id,
-      false
-    )
       .then((resp) => {
         Toastify({
-          text: $_('donor-deleted'),
+          text: $_("donor-deleted"),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -105,7 +106,7 @@
 </script>
 
 <ConfirmDonorDeletion bind:modal_open bind:delete_donor />
-{#await promise}
+{#await promise && donation_promise}
   {$_('loading-donor-details')}
 {:then}
   <section class="container p-5 select-none">
@@ -120,8 +121,8 @@
                 viewBox="0 0 24 24"
                 width="24"
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path 
+                <path
-        d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
             </li>
             <li class="flex items-center ml-2">
               <a class="mr-2" href="./">{$_('donors')}</a><svg
@@ -187,8 +188,28 @@
     </div>
     <!--  -->
     <div style="displ">
-      <span class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+      <span
-      <span>{(editable.donationAmount/100).toFixed(2).toLocaleString("de-DE", {valute: "EUR"})}€</span>
+        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+      <span>{(editable.donationAmount / 100)
+          .toFixed(2)
+          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          <br>
+      {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
+        {#each current_donations.filter((o) => o.donor.id == editable.id) as d}
+          {#if d.responseType === 'DISTANCEDONATION'}
+            <a
+              href="../donations/{d.id}"
+              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{d.runner.firstname}
+              {d.runner.middlename}
+              {d.runner.lastname}</a>
+          {:else}
+            <a
+              href="../donations/{d.id}"
+              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Fixed:
+              {d.id}</a>
+          {/if}
+        {/each}
+      {:else}Donor has no associated donations.{/if}
     </div>
     <div class="text-sm w-full">
       <label