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 {
-    DonorService
-  } from "@odit/lfk-client-js";
+  import { DonorService, DonationService } 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)
   );
@@ -29,24 +28,29 @@
     isPhoneValidOrEmpty &&
     ((isAddress1Valid && iszipcodevalid && iscityvalid) ||
       editable.address_checked === false);
-  const promise = DonorService.donorControllerGetOne(
-    params.donorid
-  ).then((data) => {
+  const donation_promise = DonationService.donationControllerGetAll().then(
+    (val) => {
+      current_donations = val;
+    }
+  );
+  const promise = DonorService.donorControllerGetOne(params.donorid).then(
+    (data) => {
       data_loaded = true;
       original_data = Object.assign(original_data, data);
       editable = Object.assign(editable, original_data);
       editable.address_checked = editable.address.address1 !== null;
       original_data.address_checked = editable.address.address1 !== null;
-    if(editable.address_checked===false){
+      if (editable.address_checked === false) {
         editable.address = {
           address1: "",
           address2: "",
           city: "",
           postalcode: "",
-        country: ""
+          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(
-      original_data.id,
-      false
-    )
+    DonorService.donorControllerRemove(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">
@@ -187,8 +188,28 @@
     </div>
     <!--  -->
     <div style="displ">
-      <span class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
-      <span>{(editable.donationAmount/100).toFixed(2).toLocaleString("de-DE", {valute: "EUR"})}€</span>
+      <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