🚀RELEASE v1.3.3

CHANGELOG.md

@@ -2,8 +2,69 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [1.0.0](https://git.odit.services/lfk/frontend/compare/0.19.0...1.0.0)
+#### [1.3.3](https://git.odit.services/lfk/frontend/compare/1.3.2...1.3.3)
 
+- bumped lfk-client-js [`2c208c4`](https://git.odit.services/lfk/frontend/commit/2c208c438185892270a0ebd37deb6a7c9ac08fc0)
+
+#### [1.3.2](https://git.odit.services/lfk/frontend/compare/1.3.1...1.3.2)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.3.2 [`39bc6c4`](https://git.odit.services/lfk/frontend/commit/39bc6c49450964510f996369d014f92c569188ae)
+- fix(donors): Shortened texts [`b94e3b7`](https://git.odit.services/lfk/frontend/commit/b94e3b745f2febbe91e16a7a26f96b47d347ab92)
+- feat(donations): Resolve donations via donor [`6f337ae`](https://git.odit.services/lfk/frontend/commit/6f337aeee16267d1e67e3d3855b63b6f2e57979f)
+- fix(donors): Removed debug infos [`5d48060`](https://git.odit.services/lfk/frontend/commit/5d48060834717b2244172a0914e2690f8fe634d9)
+
+#### [1.3.1](https://git.odit.services/lfk/frontend/compare/1.3.0...1.3.1)
+
+> 19 April 2023
+
+- feat(donations): Donation table filtering [`91ab199`](https://git.odit.services/lfk/frontend/commit/91ab199769c9f4f8051c74ad43a701db321f3995)
+- feat(donors): Added name and address filtering [`27b4dde`](https://git.odit.services/lfk/frontend/commit/27b4dde7551995c9d7e8ca33a9bd97d429a35801)
+- 🚀RELEASE v1.3.1 [`c842c20`](https://git.odit.services/lfk/frontend/commit/c842c203e2fbf0a201297d475db9047c0691bd52)
+- More filtering [`5bcfc8d`](https://git.odit.services/lfk/frontend/commit/5bcfc8db752fce96e9f523d14cefff1a4f675661)
+
+#### [1.3.0](https://git.odit.services/lfk/frontend/compare/1.2.0...1.3.0)
+
+> 19 April 2023
+
+- feat(donations): Implemented donation deletion via confirm modal [`505fb8c`](https://git.odit.services/lfk/frontend/commit/505fb8cb08b81a7dcb08561bdda0f6464f140d3e)
+- 🚀RELEASE v1.3.0 [`e75be49`](https://git.odit.services/lfk/frontend/commit/e75be49be42c3d5581e2204bfa064bfa3778c1b6)
+- feat(donationsoverview): Switched donations overview to datatable [`133470b`](https://git.odit.services/lfk/frontend/commit/133470b6f2a63ec087f27c98ef260648a8672e5f)
+- feat(donations): Implemented add donation payment via datatable refresh [`e5c9265`](https://git.odit.services/lfk/frontend/commit/e5c92655886ad9a6fcd7565fadd7955c477c3595)
+- feat(donations): Donations reactive create and load into datatable [`02003ec`](https://git.odit.services/lfk/frontend/commit/02003ec80efc16aabd126710a6eeac18df43f841)
+- feat(DonationsOverview): i18n loading text [`8f8858f`](https://git.odit.services/lfk/frontend/commit/8f8858f10071ddf9988d0ec0e3c4a891db24a102)
+- new license file version [CI SKIP] [`4289034`](https://git.odit.services/lfk/frontend/commit/4289034436869750205a946247e7ab5f9892fe98)
+
+#### [1.2.0](https://git.odit.services/lfk/frontend/compare/1.1.0...1.2.0)
+
+> 19 April 2023
+
+- feat(donoroverview): Added datatable formatters [`d98fb0d`](https://git.odit.services/lfk/frontend/commit/d98fb0d5b288c987a45ccbf2bb026ccaab539a71)
+- 🚀RELEASE v1.2.0 [`fdc7d80`](https://git.odit.services/lfk/frontend/commit/fdc7d80bbf9bd698128e9ec4f91fa813499777a9)
+- feat(donors): Load donors paginated [`5014bf5`](https://git.odit.services/lfk/frontend/commit/5014bf5bc5873cfe4ae04d71b4aff12b257dd2e3)
+- feat(donorsoverview): Dynamicly add newly generated donors [`352551e`](https://git.odit.services/lfk/frontend/commit/352551e168b5dced5e7353e82655908d82d28af0)
+- feat(donorsoverview): Implemented delete confirmation with datatable [`7aec050`](https://git.odit.services/lfk/frontend/commit/7aec050419f6f1bf853c3e1bc655b01725ed3b65)
+
+#### [1.1.0](https://git.odit.services/lfk/frontend/compare/1.0.0...1.1.0)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.1.0 [`0708cab`](https://git.odit.services/lfk/frontend/commit/0708cabc75e63a876e54a0b343318f8d934ae319)
+- feat(dashboar): Added total donors to overview [`e0b6148`](https://git.odit.services/lfk/frontend/commit/e0b61486b089aa1e611ef3569b1521fc331ec0e4)
+- feat(dashboard): Updated stats icons [`4fcb26c`](https://git.odit.services/lfk/frontend/commit/4fcb26cf9371e27e5d7e474b3558ef354e9114c0)
+- feat(dashboard): Added average sponsoring [`269def2`](https://git.odit.services/lfk/frontend/commit/269def20d114ededaba3153bbd50ec2ddd70e1c6)
+- feat(dashboard): Added total donations [`7b2b598`](https://git.odit.services/lfk/frontend/commit/7b2b59858839b98370af6fb1e6028ba0a1639186)
+- feat(dashboard): Added average distance [`b8de9e0`](https://git.odit.services/lfk/frontend/commit/b8de9e0e427b3a8b56e6354ad7168ae12c7cce85)
+- Lockfile [`3f86f74`](https://git.odit.services/lfk/frontend/commit/3f86f7412ffc4bc27328ad1f7d3c3118546e7e29)
+- Bumped client [`6454d96`](https://git.odit.services/lfk/frontend/commit/6454d960de3f9f5ea86679f157b3b7e7cffde74d)
+- new license file version [CI SKIP] [`2a64094`](https://git.odit.services/lfk/frontend/commit/2a640940062765a470387103a72ed14a2411d97b)
+
+### [1.0.0](https://git.odit.services/lfk/frontend/compare/0.19.0...1.0.0)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.0.0 [`8da7578`](https://git.odit.services/lfk/frontend/commit/8da7578a0a46a3e97d8c870e29399f6e8821c9fa)
 - Merge pull request 'feature/175-request_pagination' (#176) from feature/175-request_pagination into dev [`e9ce964`](https://git.odit.services/lfk/frontend/commit/e9ce9644ff03f981cec6e9ad56aa5fdf0ff71ef4)
 - Donation paginated loading [`ccf8656`](https://git.odit.services/lfk/frontend/commit/ccf865687b34016931a702c0a9b98a0a18e2b03a)
 - Paginated scan loading [`cac34db`](https://git.odit.services/lfk/frontend/commit/cac34db1fd3bf5dc7c7be64b3a76ca4c8c77938d)

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.0.0-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.3-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "1.0.0",
+	"version": "1.3.3",
 	"type": "module",
 	"scripts": {
 		"i18n-order": "node order.js",
@@ -39,7 +39,7 @@
 		}
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "1.0.1",
+		"@odit/lfk-client-js": "1.1.1",
 		"@paralleldrive/cuid2": "^2.2.0",
 		"@tanstack/svelte-table": "^8.8.5",
 		"bwip-js": "^3.4.0",

pnpm-lock.yaml

@@ -2,8 +2,8 @@ lockfileVersion: '6.0'
 
 dependencies:
   '@odit/lfk-client-js':
-    specifier: 1.0.1
+    specifier: 1.1.0
-    version: 1.0.1
+    version: 1.1.0
   '@paralleldrive/cuid2':
     specifier: ^2.2.0
     version: 2.2.0
@@ -510,8 +510,8 @@ packages:
       '@octokit/openapi-types': 16.0.0
     dev: true
 
-  /@odit/lfk-client-js@1.0.1:
+  /@odit/lfk-client-js@1.1.0:
-    resolution: {integrity: sha512-eGwUW1MIh7sCzlLNRBLuBvLGGCHoOzmHovHnPqpMDn+fziIIX+fcmt40mdISucZwJDJqnOff4+eHimsHfSQO8A==}
+    resolution: {integrity: sha512-yhjsi7YMzL9/fJ7o06yszzw15iZhao3VmX0G9oqZWFwYJd1M2td3Lvm76mXNzTVlbdG6W0W3+eEjcalBdo51Pg==}
     dev: false
 
   /@odit/license-exporter@0.0.12:

src/components/dashboard/MainDashContent.svelte

@@ -35,7 +35,9 @@
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then stats}
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+    >
       <StatCard
         title={$_("runners")}
         value={stats.total_runners}
@@ -59,18 +61,67 @@
         href="/scans/"
       >
         <svg
-          stroke="currentColor"
           fill="currentColor"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
-          height="24"
           width="24"
+          height="24"
           xmlns="http://www.w3.org/2000/svg"
-          ><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            fill="currentColor"
+            d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donors")}
+        value={stats.total_donors}
+        href="/donors/"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <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
+        >
+      </StatCard>
+      <StatCard
+        title={$_("total-donation-count")}
+        value={stats.total_donations}
+        href="/donations/"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+          /></svg
+        >
+      </StatCard>
+      <StatCard
+        title={$_("average-donation")}
+        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+        href="/donations/"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+          /></svg
         >
       </StatCard>
       <StatCard
@@ -105,6 +156,22 @@
           /></svg
         >
       </StatCard>
+      <StatCard
+        title={$_("average-distance")}
+        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
+        href="#"
+      >
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          width="24"
+          ><path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z"
+          /></svg
+        >
+      </StatCard>
       <StatCard
         title={$_("count_teams")}
         value={stats.total_teams}

src/components/donations/AddDonationModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+
   import {
     DonationService,
     DonorService,
@@ -9,9 +9,10 @@
   } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
-import { is_promise } from "svelte/internal";
+  import { is_promise } from "svelte/internal";
+  import { createEventDispatcher } from "svelte";
   export let modal_open;
-  export let current_donations;
+  const dispatch = createEventDispatcher();
   const getDonorLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterDonors = (label, filterText, option) =>
@@ -59,16 +60,16 @@ import { is_promise } from "svelte/internal";
       let amount_cent = Math.floor(amount_input * 100);
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('adding-donation'),
+        text: $_("adding-donation"),
         duration: -1,
       }).showToast();
       if (is_fixed) {
         let postdata = {
           donor,
           amount: amount_cent,
-          paidAmount: 0
+          paidAmount: 0,
         };
-        if(is_paid){
+        if (is_paid) {
           postdata.paidAmount = amount_cent;
         }
         DonationService.donationControllerPostFixed(postdata)
@@ -79,12 +80,11 @@ import { is_promise } from "svelte/internal";
             modal_open = false;
             //
             Toastify({
-              text: $_('donation_added'),
+              text: $_("donation_added"),
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
-            current_donations.push(result);
+            dispatch("created", { donations: [result] });
-            current_donations = current_donations;
           })
           .catch((err) => {
             //
@@ -108,12 +108,11 @@ import { is_promise } from "svelte/internal";
             modal_open = false;
             //
             Toastify({
-              text: $_('donation_added'),
+              text: $_("donation_added"),
               duration: 500,
               backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
             }).showToast();
-            current_donations.push(result);
+            dispatch("created", { donations: [result] });
-            current_donations = current_donations;
           })
           .catch((err) => {
             //
@@ -128,6 +127,207 @@ import { is_promise } from "svelte/internal";
   }
 </script>
 
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    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"
+    >
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop"
+        />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        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"
+      >
+        <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"
+            >
+              <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" />
+                <path
+                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 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">
+                {#if is_fixed}
+                  {$_("create-a-new-fixed-donation")}
+                {:else}{$_("create-a-new-distance-donation")}{/if}
+              </h3>
+              <label class="content-center align-middle object-center">
+                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
+                  >{$_("distance-donation")}</span
+                >
+                <input
+                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
+                  type="checkbox"
+                  bind:checked={is_fixed}
+                />
+                <span class="ml-2 text-base" class:text-gray-300={!is_fixed}
+                  >{$_("fixed-donation")}</span
+                >
+              </label>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_(
+                    "please-provide-the-nessecary-information-to-create-a-new-donation"
+                  )}
+                </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"
+                    >{$_("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"
+                    itemFilter={(label, filterText, option) =>
+                      filterDonors(label, filterText, option)}
+                    items={donors}
+                    showChevron={true}
+                    placeholder={$_("search-for-donor-name-or-id")}
+                    noOptionsMessage={$_("no-donors-found")}
+                    on:select={(selectedValue) =>
+                      (donor = selectedValue.detail.value.id)}
+                    on:clear={() => (donors = null)}
+                  />
+                </div>
+                {#if !is_fixed}
+                  <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) =>
+                        filterDonors(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)}
+                    />
+                  </div>
+                {/if}
+                <div class="col-span-6">
+                  <label
+                    for="donation_amount_eur"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    {#if !is_fixed}
+                      {$_("amount-per-kilometer")}
+                    {:else}{$_("donation-amount")}{/if}</label
+                  >
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!is_amount_valid}
+                      class:focus:border-red-500={!is_amount_valid}
+                      class:focus:ring-red-500={!is_amount_valid}
+                      bind:value={amount_input}
+                      type="number"
+                      step="0.01"
+                      name="donation_amount_eur"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="2.00"
+                    />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+                      >€</span
+                    >
+                  </div>
+                  {#if !is_amount_valid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("donation-amount-must-be-greater-that-0-00eur")}
+                    </span>
+                  {/if}
+                </div>
+                {#if is_fixed}
+                  <div class="col-span-6">
+                    <label
+                      for="paid"
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("already-paid")}</label
+                    >
+                    <p class="text-gray-500">
+                      <input
+                        id="paid"
+                        bind:checked={is_paid}
+                        name="paid"
+                        type="checkbox"
+                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      />
+                      <span class="align-text-bottom">
+                        {#if is_paid}
+                          {$_("paid")}
+                        {:else}
+                          {$_("open")}
+                        {/if}
+                      </span>
+                    </p>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            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")}
+          </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")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
 <style>
   .toggle:before {
     content: "";
@@ -152,173 +352,3 @@ import { is_promise } from "svelte/internal";
     left: 1.25rem;
   }
 </style>
-
-{#if modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    
-    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">
-      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div
-          class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
-      </div>
-      <span
-        class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        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">
-        <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">
-              <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" />
-                <path
-                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 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">
-                {#if is_fixed}
-                  {$_('create-a-new-fixed-donation')}
-                {:else}{$_('create-a-new-distance-donation')}{/if}
-              </h3>
-              <label class="content-center align-middle object-center">
-                <span
-                  class="ml-2 text-base"
-                  class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
-                <input
-                  class="toggle relative w-10 h-5 transition-all duration-200 ease-in-out bg-gray-400 rounded-full shadow-inner outline-none appearance-none align-middle"
-                  type="checkbox"
-                  bind:checked={is_fixed} />
-                <span
-                  class="ml-2 text-base	"
-                  class:text-gray-300={!is_fixed}>{$_('fixed-donation')}</span>
-              </label>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-nessecary-information-to-create-a-new-donation')}
-                </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">{$_('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"
-                    itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
-                    items={donors}
-                    showChevron={true}
-                    placeholder={$_('search-for-donor-name-or-id')}
-                    noOptionsMessage={$_('no-donors-found')}
-                    on:select={(selectedValue) => (donor = selectedValue.detail.value.id)}
-                    on:clear={() => (donors = null)} />
-                </div>
-                {#if !is_fixed}
-                  <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) => filterDonors(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)} />
-                  </div>
-                {/if}
-                <div class="col-span-6">
-                  <label
-                    for="donation_amount_eur"
-                    class="block text-sm font-medium text-gray-700">
-                    {#if !is_fixed}
-                      {$_('amount-per-kilometer')}
-                    {:else}{$_('donation-amount')}{/if}</label>
-                  <div class="mt-1 flex rounded-md shadow-sm">
-                    <input
-                      autocomplete="off"
-                      class:border-red-500={!is_amount_valid}
-                      class:focus:border-red-500={!is_amount_valid}
-                      class:focus:ring-red-500={!is_amount_valid}
-                      bind:value={amount_input}
-                      type="number"
-                      step="0.01"
-                      name="donation_amount_eur"
-                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-                      placeholder="2.00" />
-                    <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
-                  </div>
-                  {#if !is_amount_valid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('donation-amount-must-be-greater-that-0-00eur')}
-                    </span>
-                  {/if}
-                </div>
-                {#if is_fixed}
-                <div class="col-span-6">
-                  <label
-                    for="paid"
-                    class="block text-sm font-medium text-gray-700">{$_('already-paid')}</label>
-                    <p class="text-gray-500">
-                      <input
-                        id="paid"
-                        bind:checked={is_paid}
-                        name="paid"
-                        type="checkbox"
-                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" >
-                        <span class="align-text-bottom">
-
-                      {#if is_paid}
-                      {$_('paid')}
-                      {:else}
-                      {$_('open')}
-                      {/if}
-                        </span>
-                    </p>
-                </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-          <button
-            disabled={!createbtnenabled}
-            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')}
-          </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')}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/donations/AddDonationPaymentModal.svelte

@@ -1,19 +1,21 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+
   import { DonationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
   export let payment_modal_open = false;
-  export let current_donations = [];
-  export let editable = {};
   export let original_data = {};
   export let paid_amount_input = 0;
-  $:processed_last_submit=true;
+  const dispatch = createEventDispatcher();
+  $: processed_last_submit = true;
   function focus(el) {
     el.focus();
   }
-  $: createbtnenabled = is_paid_amount_valid && !(paid_amount_input*100 == original_data.paidAmount)
+  $: createbtnenabled =
+    is_paid_amount_valid &&
+    !(paid_amount_input * 100 == original_data.paidAmount);
   $: is_paid_amount_valid = paid_amount_input > 0;
   (() => {
     document.onkeydown = (e) => {
@@ -33,61 +35,56 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('updating-donation'),
+        text: $_("updating-donation"),
         duration: -1,
       }).showToast();
+      const editable = Object.assign({}, original_data);
       editable.donor = editable.donor.id;
-      editable.paidAmount = paid_amount_input*100;
+      editable.paidAmount = paid_amount_input * 100;
-      if(editable.responseType == "DISTANCEDONATION" || editable.runner){
+      if (editable.responseType == "DISTANCEDONATION" || editable.runner) {
         editable.runner = editable.runner.id;
-        DonationService.donationControllerPutDistance(original_data.id, editable)
+        DonationService.donationControllerPutDistance(
-        .then((result) => {
+          original_data.id,
-          let id = original_data.id;
+          editable
-          editable = {};
+        )
-          original_data = {};
+          .then((result) => {
-          payment_modal_open = false;
+            payment_modal_open = false;
-          //
+            //
-          Toastify({
+            Toastify({
-            text: $_('donation-updated'),
+              text: $_("donation-updated"),
-            duration: 500,
+              duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+            }).showToast();
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
+            dispatch("created", { donation: response });
-          current_donations = current_donations;
+          })
-        })
+          .catch((err) => {
-        .catch((err) => {
+            //
-          //
+          })
-        })
+          .finally(() => {
-        .finally(() => {
+            processed_last_submit = true;
-          processed_last_submit = true;
+            //
-          //
+            toast.hideToast();
-          toast.hideToast();
+          });
-        });
+      } else {
-      }
+        DonationService.donationControllerPutFixed(original_data.id, editable)
-      else{
+          .then((result) => {
-          DonationService.donationControllerPutFixed(original_data.id, editable)
+            payment_modal_open = false;
-        .then((result) => {
+            //
-          let id = original_data.id;
+            Toastify({
-          editable = {};
+              text: $_("donation-updated"),
-          original_data = {};
+              duration: 500,
-          payment_modal_open = false;
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          //
+            }).showToast();
-          Toastify({
+            dispatch("created", { donation: response });
-            text: $_('donation-updated'),
+          })
-            duration: 500,
+          .catch((err) => {
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            //
-          }).showToast();
+          })
-          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
+          .finally(() => {
-          current_donations = current_donations;
+            processed_last_submit = true;
-        })
+            //
-        .catch((err) => {
+            toast.hideToast();
-          //
+          });
-        })
-        .finally(() => {
-          processed_last_submit = true;
-          //
-          toast.hideToast();
-        });
       }
     }
   }
@@ -96,57 +93,71 @@
 {#if payment_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       payment_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">
-                {$_('enter-payment')}
+                {$_("enter-payment")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount')}
+                  {$_(
+                    "you-can-enter-the-donations-paid-amount-manually-or-use-the-max-button-to-use-the-donations-exact-amount"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols gap-6">
                 <div class="w-full">
                   <label
-                  for="token"
+                    for="token"
-                  class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
+                    class="block text-sm font-medium text-gray-700"
-                <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
+                    >{$_("paid-amount")}</label
-                  <input
+                  >
+                  <div
+                    class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
+                  >
+                    <input
                       autocomplete="off"
                       class:border-red-500={!is_paid_amount_valid}
                       class:focus:border-red-500={!is_paid_amount_valid}
@@ -156,47 +167,55 @@
                       step="0.01"
                       name="donation_amount_eur"
                       class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
-                      placeholder="2.00" />
+                      placeholder="2.00"
+                    />
                     <button
-                      on:click={
+                      on:click={() => {
-                        ()=>{
+                        paid_amount_input = paid_amount_input = (
-                          paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
+                          original_data.amount / 100
-                        }
+                        ).toFixed(2);
-                      }
+                      }}
-                      class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
+                      class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
+                      >MAX</button
+                    >
                     <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+                      >€</span
+                    >
                   </div>
                   {#if !is_paid_amount_valid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('payment-amount-must-be-greater-than-0-00eur')}
+                    >
+                      {$_("payment-amount-must-be-greater-than-0-00eur")}
                     </span>
                   {/if}
                 </div>
-                </div>
               </div>
             </div>
           </div>
-          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+        </div>
-            <button
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-              disabled={!createbtnenabled}
+          <button
-              class:opacity-50={!createbtnenabled}
+            disabled={!createbtnenabled}
-              on:click={submit}
+            class:opacity-50={!createbtnenabled}
-              type="button"
+            on:click={submit}
-              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">
+            type="button"
-              {$_('save-changes')}
+            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"
-            </button>
+          >
-            <button
+            {$_("save-changes")}
-              on:click={() => {
+          </button>
-                payment_modal_open = false;
+          <button
-              }}
+            on:click={() => {
-              type="button"
+              payment_modal_open = false;
-              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')}
+            type="button"
-            </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"
-          </div>
+          >
+            {$_("cancel")}
+          </button>
         </div>
       </div>
     </div>
+  </div>
 {/if}

src/components/donations/DeleteDonationModal.svelte

@@ -0,0 +1,122 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { createEventDispatcher, onMount } from "svelte";
+  export let modal_open;
+  export let delete_donation = {
+    id: 0,
+    runner: {
+      firstname: "",
+      lastname: "",
+    },
+    donor: {
+      firstname: "",
+      lastname: "",
+    },
+  };
+  const dispatch = createEventDispatcher();
+  onMount(() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  });
+  async function submit() {
+    dispatch("delete", { id: delete_donation.id });
+    modal_open = false;
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    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"
+    >
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop"
+        />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        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"
+      >
+        <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"
+            >
+              <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" />
+                <path
+                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 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">
+                {$_("confirm-delete")}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_("please-confirm-the-deletion-of-donation")}
+                </p>
+              </div>
+              <div class="w-full">
+                <span class="inline-block"
+                  ><b>{$_("donor")}</b>: {delete_donation.donor.firstname}
+                  {delete_donation.donor.lastname}</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            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"
+          >
+            {$_("delete")}
+          </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")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/donations/DonationDonor.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let donor;
+</script>
+
+{#if !donor || donor.firstname == 0}
+  {$_("donor-has-no-associated-donations")}
+{:else}
+  <div class="flex items-center">
+    <a
+      href="../donors/{donor.id}"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      >{donor.firstname}
+      {#if donor.middlename}{donor.middlename}{/if}
+      {donor.lastname}</a
+    >
+  </div>
+{/if}

src/components/donations/DonationRunner.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let runner;
+</script>
+
+{#if !runner || runner.firstname == 0}
+  {$_("fixed-donation")}
+{:else}
+  <div class="text-sm font-medium text-gray-900">
+    <a
+      href="../runners/{runner.id}"
+      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+      >{runner.firstname}
+      {#if runner.middlename}{runner.middlename}{/if}
+      {runner.lastname}</a
+    >
+  </div>
+{/if}

src/components/donations/DonationStatus.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let status;
+</script>
+
+{#if status == "PAID"}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    >{$_("paid")}</span
+  >
+{:else}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    >{$_("open")}</span
+  >
+{/if}

src/components/donations/DonationTableAction.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import TableActions from "../shared/TableActions.svelte";
+
+  export let detailsLink;
+  export let detailsAction;
+  export let deleteEnabled;
+  export let deleteAction;
+  export let paymentAction;
+</script>
+
+<button
+  on:click={paymentAction}
+  class="text-[#025a21] hover:text-green-900 mr-4">{$_("enter-payment")}</button
+>
+<TableActions
+  bind:detailsAction
+  bind:detailsLink
+  bind:deleteAction
+  bind:deleteEnabled
+/>

src/components/donations/Donations.svelte

@@ -5,25 +5,33 @@
   import DonationsOverview from "./DonationsOverview.svelte";
   $: current_donations = [];
   export let modal_open = false;
+  let addDonations;
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('donations')}
+    {$_("donations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         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">
+        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"
-        {$_('add-donation')}
+      >
+        {$_("add-donation")}
       </button>
     {/if}
   </span>
-  <DonationsOverview bind:current_donations />
+  <DonationsOverview bind:current_donations bind:addDonations />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
-  <AddDonationModal bind:current_donations bind:modal_open />
+  <AddDonationModal
+    on:created={(event) => {
+      console.log(event)
+      addDonations(event.detail.donations);
+    }}
+    bind:modal_open
+  />
 {/if}

src/components/donations/DonationsOverview.svelte

@@ -1,31 +1,171 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { DonationService } from "@odit/lfk-client-js";
   import store from "../../store";
-  import Toastify from "toastify-js";
   import DonationsEmptyState from "./DonationsEmptyState.svelte";
   import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
   import { onMount } from "svelte";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from "@tanstack/svelte-table";
+  import { writable } from "svelte/store";
+  import TableBottom from "../shared/TableBottom.svelte";
+  import InputElement from "../shared/InputElement.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
+  import DonationDonor from "./DonationDonor.svelte";
+  import DonationRunner from "./DonationRunner.svelte";
+  import DonationStatus from "./DonationStatus.svelte";
+  import DonationTableAction from "./DonationTableAction.svelte";
+  import DeleteDonationModal from "./DeleteDonationModal.svelte";
+  import { donationDonorFilter, donationRunnerFilter } from "../shared/tablefilters";
   $: searchvalue = "";
   $: active_deletes = [];
+  $: active_edits = [];
+  $: selectedDonations =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
   $: dataLoaded = false;
-  export let current_donations = [];
-  export let payment_modal_open = false;
-  export let editable = {};
-  export let original_data = {};
-  export let paid_amount_input = 0;
 
-  function should_display_based_on_id(id) {
+  export let current_donations = [];
-    if (searchvalue.toString().slice(-1) === "*") {
+  export const addDonations = (donations) => {
-      return id.toString().startsWith(searchvalue.replace("*", ""));
+    current_donations = current_donations.concat(...donations);
-    }
+    options.update((options) => ({
-    return id.toString() === searchvalue;
+      ...options,
-  }
+      data: current_donations,
-  function open_payment_modal(donation) {
+    }));
-    editable = Object.assign({}, donation);
+  };
-    original_data = Object.assign({}, donation);
+
-    paid_amount_input = (donation.paidAmount / 100).toFixed(2);
+  //Section table
-    payment_modal_open = true;
+  const columns = [
+    {
+      accessorKey: "id",
+      header: () => "id",
+      filterFn: `equalsString`,
+    },
+    {
+      accessorKey: "donor",
+      header: () => $_("donor"),
+      cell: (info) => {
+        return renderComponent(DonationDonor, { donor: info.getValue() });
+      },
+      filterFn: `donor`,
+    },
+    {
+      accessorKey: "runner",
+      header: () => $_("runner"),
+      cell: (info) => {
+        return renderComponent(DonationRunner, { runner: info.getValue() });
+      },
+      filterFn: `runner`,
+    },
+    {
+      accessorKey: "amountPerDistance",
+      header: () => $_("amount-per-kilometer"),
+      cell: (info) => {
+        if (!info.getValue()) {
+          return $_("fixed-donation");
+        }
+        return `${(info.getValue() / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })} €`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "amount",
+      header: () => $_("donation-amount"),
+      cell: (info) => {
+        return `${(info.getValue() / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })} €`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "paidAmount",
+      header: () => $_("total-paid-amount"),
+      cell: (info) => {
+        return `${(info.getValue() / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })} €`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "status",
+      header: () => $_("status"),
+      cell: (info) => {
+        return renderComponent(DonationStatus, { status: info.getValue() });
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "actions",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(DonationTableAction, {
+          detailsLink: `./${info.row.original.id}`,
+          deleteAction: () => {
+            active_deletes = current_donations.filter(
+              (r) => r.id == info.row.original.id
+            );
+          },
+          paymentAction: () => {
+            active_edits = current_donations.filter(
+              (r) => r.id == info.row.original.id
+            );
+          },
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes(
+              "DONATION:DELETE"
+            ),
+        });
+      },
+      enableColumnFilter: false,
+      enableSorting: false,
+    },
+  ];
+  const options = writable({
+    data: [],
+    columns: columns,
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+    filterFns: {
+      donor: donationDonorFilter,
+      runner: donationRunnerFilter,
+    },
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+  const table = createSvelteTable(options);
+
+  async function deleteDonation(delete_donation_id) {
+    await DonationService.donationControllerRemove(delete_donation_id, true);
+    current_donations = current_donations.filter(
+      (r) => r.id !== delete_donation_id
+    );
+    options.update((options) => ({
+      ...options,
+      data: current_donations,
+    }));
+    Toastify({
+      text: $_("donation-deleted"),
+      duration: 3500,
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
   }
 
   onMount(async () => {
@@ -40,6 +180,10 @@
       }
 
       current_donations = current_donations.concat(...donations);
+      options.update((options) => ({
+        ...options,
+        data: current_donations,
+      }));
 
       dataLoaded = true;
       page++;
@@ -49,11 +193,25 @@
 </script>
 
 <AddDonationPaymentModal
-  bind:current_donations
+  original_data={active_edits[0]}
-  bind:original_data
+  payment_modal_open={active_edits.length > 0}
-  bind:editable
+  paid_amount_input={(active_edits[0]?.paidAmount || 0) / 100}
-  bind:paid_amount_input
+  on:created={(event) => {
-  bind:payment_modal_open
+    current_donations[
+      current_donations.findIndex((d) => d.id === event.detail.donation.id)
+    ].paidAmount = event.detail.donation.paidAmount;
+    options.update((options) => ({
+      ...options,
+      data: current_donations,
+    }));
+  }}
+/>
+<DeleteDonationModal
+  delete_donation={active_deletes[0]}
+  modal_open={active_deletes.length > 0}
+  on:delete={(event) => {
+    deleteDonation(event.detail.id);
+  }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
   {#if !dataLoaded}
@@ -61,7 +219,7 @@
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert"
     >
-      <p class="font-bold">donations are being loaded</p>
+      <p class="font-bold">{$_("donations-are-being-loaded")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:else if current_donations.length === 0}
@@ -77,197 +235,50 @@
     <div
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
     >
-      <table class="divide-y divide-gray-200 w-full">
+      <table class="w-full">
-        <thead class="bg-gray-50">
+        <thead>
-          <tr>
+          {#each $table.getHeaderGroups() as headerGroup}
-            <th
+            <tr class="select-none">
-              scope="col"
+              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                <InputElement
-            >
+                  type="checkbox"
-              {$_("donor")}
+                  checked={$table.getIsAllRowsSelected()}
-            </th>
+                  indeterminate={$table.getIsSomeRowsSelected()}
-            <th
+                  on:change={() => $table.toggleAllRowsSelected()}
-              scope="col"
+                />
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              </th>
-            >
+              {#each headerGroup.headers as header}
-              {$_("runner")}
+                <TableHeader {header} />
-            </th>
+              {/each}
-            <th
+            </tr>
-              scope="col"
+          {/each}
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-            >
-              {$_("amount-per-kilometer")}
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-            >
-              {$_("donation-amount")}
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-            >
-              {$_("paid-amount")}
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-            >
-              {$_("status")}
-            </th>
-            <th scope="col" class="relative px-6 py-3">
-              <span class="sr-only">{$_("action")}</span>
-            </th>
-          </tr>
         </thead>
-        <tbody class="divide-y divide-gray-200">
+        <tbody>
-          {#each current_donations as donation}
+          {#each $table.getRowModel().rows as row}
-            {#if donation.donor.firstname
+            <tr>
-              .toLowerCase()
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-              .includes(searchvalue.toLowerCase()) || donation.donor.lastname
+                <InputElement
-                .toLowerCase()
+                  type="checkbox"
-                .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
+                  checked={row.getIsSelected()}
-                .toLowerCase()
+                  on:change={() => row.toggleSelected()}
-                .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
+                />
-                .toLowerCase()
+              </td>
-                .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
+              {#each row.getVisibleCells() as cell}
-              <tr data-rowid="donation_{donation.id}">
+                <td>
-                <td class="px-6 py-4 whitespace-nowrap">
+                  <svelte:component
-                  <div class="flex items-center">
+                    this={flexRender(
-                    <a
+                      cell.column.columnDef.cell,
-                      href="../donors/{donation.donor.id}"
+                      cell.getContext()
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                    )}
-                      >{donation.donor.firstname}
+                  />
-                      {donation.donor.middlename || ""}
-                      {donation.donor.lastname}</a
-                    >
-                  </div>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
+              {/each}
-                  {#if donation.runner}
+            </tr>
-                    <div class="text-sm font-medium text-gray-900">
-                      <a
-                        href="../runners/{donation.runner.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                        >{donation.runner.firstname}
-                        {donation.runner.middlename || ""}
-                        {donation.runner.lastname}</a
-                      >
-                    </div>
-                  {:else}
-                    <div class="text-sm font-medium text-gray-900">
-                      {$_("fixed-donation")}
-                    </div>
-                  {/if}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  {#if donation.amountPerDistance}
-                    <div class="text-sm font-medium text-gray-900">
-                      {(donation.amountPerDistance / 100)
-                        .toFixed(2)
-                        .toLocaleString("de-DE", { valute: "EUR" })}€
-                    </div>
-                  {:else}
-                    <div class="text-sm font-medium text-gray-900">
-                      {$_("fixed-donation")}
-                    </div>
-                  {/if}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">
-                    {(donation.amount / 100)
-                      .toFixed(2)
-                      .toLocaleString("de-DE", { valute: "EUR" })}€
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">
-                    {(donation.paidAmount / 100)
-                      .toFixed(2)
-                      .toLocaleString("de-DE", { valute: "EUR" })}€
-                  </div>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  {#if donation.status == "PAID"}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                      >{$_("paid")}</span
-                    >
-                  {:else}
-                    <span
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                      >{$_("open")}</span
-                    >
-                  {/if}
-                </td>
-                {#if active_deletes[donation.id] === true}
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                  >
-                    <button
-                      on:click={() => {
-                        active_deletes[donation.id] = false;
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-                      >{$_("cancel-delete")}</button
-                    >
-                    <button
-                      on:click={() => {
-                        DonationService.donationControllerRemove(
-                          donation.id,
-                          false
-                        ).then((resp) => {
-                          current_donations = current_donations.filter(
-                            (obj) => obj.id !== donation.id
-                          );
-                          Toastify({
-                            text: $_("donation-deleted"),
-                            duration: 500,
-                            backgroundColor:
-                              "linear-gradient(to right, #00b09b, #96c93d)",
-                          }).showToast();
-                        });
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      >{$_("confirm-delete")}</button
-                    >
-                  </td>
-                {:else}
-                  <td
-                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                  >
-                    <button
-                      on:click={() => {
-                        open_payment_modal(donation);
-                      }}
-                      class="text-[#025a21] hover:text-green-900 mr-4"
-                      >{$_("enter-payment")}</button
-                    >
-                    <a
-                      href="./{donation.id}"
-                      class="text-indigo-600 hover:text-indigo-900"
-                      >{$_("details")}</a
-                    >
-                    {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
-                      <button
-                        on:click={() => {
-                          active_deletes[donation.id] = true;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                        >{$_("delete")}</button
-                      >
-                    {/if}
-                  </td>
-                {/if}
-              </tr>
-            {/if}
           {/each}
         </tbody>
       </table>
     </div>
+    <div class="h-2" />
+    <TableBottom {table} {selected} />
   {/if}
 {/if}

src/components/donors/AddDonorModal.svelte

@@ -1,15 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+
-  import {
+  import { DonorService } from "@odit/lfk-client-js";
-    DonorService
-  } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
   export let modal_open;
-  export let current_donors;
   let firstname_input;
   let lastname_input;
   let middlename_input;
@@ -19,6 +17,7 @@
   let address_input2;
   let address_zipcode;
   let address_city;
+  const dispatch = createEventDispatcher();
   function focus(el) {
     el.focus();
   }
@@ -75,7 +74,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('donor-is-being-added'),
+        text: $_("donor-is-being-added"),
         duration: -1,
       }).showToast();
       let address = {};
@@ -92,7 +91,7 @@
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         address,
-        receiptNeeded: address_checked
+        receiptNeeded: address_checked,
       };
       if (middlename_input_value) {
         postdata.middlename = middlename_input_value;
@@ -112,12 +111,11 @@
           modal_open = false;
           //
           Toastify({
-            text: $_('donor-added'),
+            text: $_("donor-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          current_donors.push(result);
+          dispatch("created", { donors: [result] });
-          current_donors = current_donors;
         })
         .catch((err) => {
           //
@@ -134,58 +132,70 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     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 overflow-hidden 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
-        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
+              >
             </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-donor')}
+                {$_("create-a-new-donor")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-nessecary-information-to-add-a-new-donor')}
+                  {$_(
+                    "please-provide-the-nessecary-information-to-add-a-new-donor"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("first-name")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('first-name')}
+                    placeholder={$_("first-name")}
                     class:border-red-500={!isFirstnameValid}
                     class:focus:border-red-500={!isFirstnameValid}
                     class:focus:ring-red-500={!isFirstnameValid}
@@ -193,34 +203,41 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="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" />
+                    class="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"
+                  />
                   {#if !isFirstnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('first-name-is-required')}
+                    >
+                      {$_("first-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("middle-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('middle-name')}
+                    placeholder={$_("middle-name")}
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="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" />
+                    class="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"
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="lastname"
-                    class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("last-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder="{$_('last-name')}"
+                    placeholder={$_("last-name")}
                     class:border-red-500={!isLastnameValid}
                     class:focus:border-red-500={!isLastnameValid}
                     class:focus:ring-red-500={!isLastnameValid}
@@ -228,21 +245,25 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="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" />
+                    class="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"
+                  />
                   {#if !isLastnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('last-name-is-required')}
+                    >
+                      {$_("last-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("phone")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('phone')}
+                    placeholder={$_("phone")}
                     class:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -250,21 +271,27 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="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" />
+                    class="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"
+                  />
                   {#if !isPhoneValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    >
+                      {@html $_(
+                        "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
+                      )}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("e-mail-adress")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
+                    placeholder={$_("e-mail-adress")}
                     class:border-red-500={!isEmailValidOrEmpty}
                     class:focus:border-red-500={!isEmailValidOrEmpty}
                     class:focus:ring-red-500={!isEmailValidOrEmpty}
@@ -272,11 +299,13 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="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" />
+                    class="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"
+                  />
                   {#if !isEmailValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-email-is-required')}
+                    >
+                      {$_("valid-email-is-required")}
                     </span>
                   {/if}
                 </div>
@@ -287,19 +316,22 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label
+                    <label for="comments" class="font-medium text-gray-700"
-                      for="comments"
+                      >{$_("receipt-needed")}</label
-                      class="font-medium text-gray-700">{$_('receipt-needed')}</label>
+                    >
                   </div>
                 </div>
                 {#if address_checked === true}
                   <div class="col-span-6">
                     <label
                       for="address1"
-                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                     <input
                       autocomplete="off"
                       placeholder="Address"
@@ -310,34 +342,41 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="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" />
+                      class="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"
+                    />
                     {#if !isAddress1Valid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('address-is-required')}
+                      >
+                        {$_("address-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="address2"
-                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("apartment-suite-etc")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder={$_('apartment-suite-etc')}
+                      placeholder={$_("apartment-suite-etc")}
                       bind:value={address_input2_value}
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="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" />
+                      class="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"
+                    />
                   </div>
                   <div class="col-span-6">
                     <label
                       for="zipcode"
-                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("zip-postal-code")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder={$_('zip-postal-code')}
+                      placeholder={$_("zip-postal-code")}
                       class:border-red-500={!iszipcodevalid}
                       class:focus:border-red-500={!iszipcodevalid}
                       class:focus:ring-red-500={!iszipcodevalid}
@@ -345,18 +384,22 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="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" />
+                      class="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"
+                    />
                     {#if !iszipcodevalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-zipcode-postal-code-is-required')}
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="city"
-                      class="block text-sm font-medium text-gray-700">City</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >City</label
+                    >
                     <input
                       autocomplete="off"
                       placeholder="City"
@@ -367,11 +410,13 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="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" />
+                      class="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"
+                    />
                     {#if !iscityvalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-city-is-required')}
+                      >
+                        {$_("valid-city-is-required")}
                       </span>
                     {/if}
                   </div>
@@ -386,16 +431,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">
+            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')}
+          >
+            {$_("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">
+            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')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/donors/ConfirmDonorDeletion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
+
   import { DonorService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
@@ -13,60 +13,61 @@
     dispatch("cancelDelete", { id: delete_donor.id });
   }
   function deleteDonor() {
-    DonorService.donorControllerRemove(
+    dispatch("delete", { id: delete_donor.id });
-      delete_donor.id,
-      true
-    )
-      .then((resp) => {
-        Toastify({
-          text: $_('donor-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-        location.replace("./");
-      })
-      .catch((err) => {});
   }
 </script>
 
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
-    on:click_outside={cancelDelete}>
+    on:click_outside={cancelDelete}
+  >
     <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 overflow-hidden 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"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"/></svg>
+            >
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" /><path
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
+                /></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">
-                {$_('attention')}
+                {$_("attention")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
-                    'do-you-want-to-delete-this-donor-with-all-related-donations'
+                    "do-you-want-to-delete-this-donor-with-all-related-donations"
                   )}
-                  <br /> 
+                  <br />
-                  {$_('all-associated-donations-will-get-deleted-as-well')}
+                  {$_("all-associated-donations-will-get-deleted-as-well")}
                 </p>
               </div>
             </div>
@@ -76,14 +77,16 @@
           <button
             on:click={deleteDonor}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('confirm-delete-donor-with-all-donations')}
+          >
+            {$_("confirm-delete-donor-with-all-donations")}
           </button>
           <button
             on:click={cancelDelete}
             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">
+            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-keep-donor')}
+          >
+            {$_("cancel-keep-donor")}
           </button>
         </div>
       </div>

src/components/donors/DonorAddress.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let address;
+</script>
+
+{#if !address || !address.address1}
+  {$_("no-address")}
+{:else}
+  {address.address1}<br />
+  <!-- {address.address2 || ''}<br /> -->
+  {address.postalcode}
+  {address.city}
+  {address.country}
+{/if}

src/components/donors/DonorDonations.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let donations;
+</script>
+
+{#if !donations || donations.length == 0}
+  {$_('donor-has-no-associated-donations')}
+{:else}
+  {#each donations as donation}
+    {#if donation.responseType === "DISTANCEDONATION"}
+      <a
+        href="../donations/{donation.id}"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
+        >{donation.runner.firstname}
+        {donation.runner.middlename || ""}
+        {donation.runner.lastname}</a
+      >
+    {:else}
+      <a
+        href="../donations/{donation.id}"
+        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+        >{$_("fixed-donation")}:
+        {(donation.amount / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })}€</a
+      >
+    {/if}
+  {/each}
+{/if}

src/components/donors/Donors.svelte

@@ -5,50 +5,73 @@
   import DonorsOverview from "./DonorsOverview.svelte";
   $: current_donors = [];
   export let modal_open = false;
+  let addDonors;
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('donors')}
+    {$_("donors")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         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">
+        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"
-        {$_('add-donor')}
+      >
+        {$_("add-donor")}
       </button>
     {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
       <button
         on:click={() => {
-          const data = (current_donors.filter(d=>d.receiptNeeded===true)).map(function (d) {
+          const data = current_donors
-            d.address.address2=d.address.address2===""?"":" "+d.address.address2;
+            .filter((d) => d.receiptNeeded === true)
-            const address=`${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
+            .map(function (d) {
-            return [d.firstname,d.middlename,d.lastname,d.paidDonationAmount,address];
+              d.address.address2 =
-          })
+                d.address.address2 === "" ? "" : " " + d.address.address2;
-          let csv = `${$_('csv_import__firstname')};${$_('csv_import__middlename')};${$_('csv_import__lastname')};${$_('total_donation_amount_in_eur')};${$_('address')}\n`;
+              const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
-    data.forEach(function(row) {
+              return [
-            csv += row.join(';');
+                d.firstname,
+                d.middlename,
+                d.lastname,
+                d.paidDonationAmount,
+                address,
+              ];
+            });
+          let csv = `${$_("csv_import__firstname")};${$_(
+            "csv_import__middlename"
+          )};${$_("csv_import__lastname")};${$_(
+            "total_donation_amount_in_eur"
+          )};${$_("address")}\n`;
+          data.forEach(function (row) {
+            csv += row.join(";");
             csv += "\n";
-    });
+          });
-    let hiddenElement = document.createElement('a');
+          let hiddenElement = document.createElement("a");
-    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+          hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
-    hiddenElement.target = '_blank';
+          hiddenElement.target = "_blank";
-    hiddenElement.download = `${$_('filename_sponsoringquittungsliste')}.csv`;
+          hiddenElement.download = `${$_(
-    hiddenElement.click();
+            "filename_sponsoringquittungsliste"
-    hiddenElement.remove();
+          )}.csv`;
+          hiddenElement.click();
+          hiddenElement.remove();
         }}
         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">
+        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"
-        {$_('sponsoring-quittungs-liste_herunterladen')}
+      >
+        {$_("sponsoring-quittungs-liste_herunterladen")}
       </button>
     {/if}
   </span>
-  <DonorsOverview bind:current_donors />
+  <DonorsOverview bind:current_donors bind:addDonors />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
-  <AddDonorModal bind:current_donors bind:modal_open />
+  <AddDonorModal
+    on:created={(event) => {
+      addDonors(event.detail.donors);
+    }}
+    bind:modal_open
+  />
 {/if}

src/components/donors/DonorsOverview.svelte

@@ -5,214 +5,255 @@
   import DonorsEmptyState from "./DonorsEmptyState.svelte";
   import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
   import Toastify from "toastify-js";
+  import TableBottom from "../shared/TableBottom.svelte";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from "@tanstack/svelte-table";
+  import { writable } from "svelte/store";
+  import { onMount } from "svelte";
+  import InputElement from "../shared/InputElement.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
+  import TableActions from "../shared/TableActions.svelte";
+  import DonorAddress from "./DonorAddress.svelte";
+  import DonorDonations from "./DonorDonations.svelte";
+  import { filterAddress, filterName } from "../shared/tablefilters";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: current_donations = [];
+  $: selectedDonors =
-  let modal_open = false;
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
-  let delete_donor = {};
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
+  $: dataLoaded = false;
+
   export let current_donors = [];
-  const donors_promise = DonorService.donorControllerGetAll().then((val) => {
+  export const addDonors = (donors) => {
-    current_donors = val;
+    current_donors = current_donors.concat(...donors);
+    options.update((options) => ({
+      ...options,
+      data: current_donors,
+    }));
+  };
+
+  //Section table
+  const columns = [
+    {
+      accessorKey: "id",
+      header: () => "id",
+      filterFn: `equalsString`,
+    },
+    {
+      accessorKey: "name",
+      header: () => $_("name"),
+      cell: (info) => {
+        const d = info.row.original;
+        if (d.middlename) {
+          return `${d.firstname} ${d.middlename} ${d.lastname}`;
+        } else {
+          return `${d.firstname} ${d.lastname}`;
+        }
+      },
+      filterFn: `name`,
+    },
+    {
+      accessorKey: "address",
+      header: () => $_("contact-information"),
+      cell: (info) => {
+        return renderComponent(DonorAddress, { address: info.getValue() });
+      },
+      filterFn: `address`,
+    },
+    {
+      accessorKey: "donations",
+      header: () => $_("sponsorings"),
+      cell: (info) => {
+        return renderComponent(DonorDonations, { donations: info.getValue() });
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "donationAmount",
+      header: () => $_("total-donation-amount"),
+      cell: (info) => {
+        return `${(info.getValue() / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })}€`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "paidDonationAmount",
+      header: () => $_("total-paid-amount"),
+      cell: (info) => {
+        return `${(info.getValue() / 100)
+          .toFixed(2)
+          .toLocaleString("de-DE", { valute: "EUR" })}€`;
+      },
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "actions",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(TableActions, {
+          detailsLink: `./${info.row.original.id}`,
+          deleteAction: () => {
+            active_deletes = current_donors.filter(
+              (r) => r.id == info.row.original.id
+            );
+          },
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes(
+              "DONOR:DELETE"
+            ),
+        });
+      },
+      enableColumnFilter: false,
+      enableSorting: false,
+    },
+  ];
+  const options = writable({
+    data: [],
+    columns: columns,
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+    filterFns: {
+      name: filterName,
+      address: filterAddress,
+    },
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
   });
-  const donation_promise = DonationService.donationControllerGetAll().then(
+  const table = createSvelteTable(options);
-    (val) => {
+
-      current_donations = val;
-    }
-  );
   function should_display_based_on_id(id) {
     if (searchvalue.toString().slice(-1) === "*") {
       return id.toString().startsWith(searchvalue.replace("*", ""));
     }
     return id.toString() === searchvalue;
   }
+
+  onMount(async () => {
+    let page = 0;
+    while (page >= 0) {
+      const donors = await DonorService.donorControllerGetAll(page, 500);
+      if (donors.length == 0) {
+        page = -2;
+      }
+
+      current_donors = current_donors.concat(...donors);
+      options.update((options) => ({
+        ...options,
+        data: current_donors,
+      }));
+
+      dataLoaded = true;
+      page++;
+    }
+
+    console.log("All donors loaded");
+  });
 </script>
 
 <ConfirmDonorDeletion
   on:cancelDelete={(event) => {
-    modal_open = false;
+    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
-    active_deletes[event.detail.id] = false;
   }}
-  bind:modal_open
+  on:delete={async (event) => {
-  bind:delete_donor />
+    await DonorService.donorControllerRemove(event.detail.id, true);
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
+    Toastify({
-  {#await donors_promise && donation_promise}
+      text: $_("donor-deleted"),
+      duration: 500,
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
+    current_donors = current_donors.filter((d) => d.id !== event.detail.id);
+    active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
+    options.update((options) => ({
+      ...options,
+      data: current_donors,
+    }));
+  }}
+  modal_open={active_deletes.length > 0}
+  delete_donor={active_deletes[0]}
+/>
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+  {#if !dataLoaded}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
+      role="alert"
-      <p class="font-bold">{$_('donors-are-being-loaded')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("donors-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
-  {:then}
+  {:else if current_donors.length === 0}
-    {#if current_donors.length === 0}
+    <DonorsEmptyState />
-      <DonorsEmptyState />
+  {:else}
-    {:else}
+    <input
-      <input
+      type="search"
-        type="search"
+      bind:value={searchvalue}
-        bind:value={searchvalue}
+      placeholder={$_("datatable.search")}
-        placeholder={$_('datatable.search')}
+      aria-label={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+      class="mb-4"
-        class="mb-4" />
+    />
-      <div
+    <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
-        <table class="divide-y divide-gray-200 w-full">
+    >
-          <thead class="bg-gray-50">
+      <table class="w-full">
-            <tr>
+        <thead>
-              <th
+          {#each $table.getHeaderGroups() as headerGroup}
-                scope="col"
+            <tr class="select-none">
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-                {$_('name')}
+                <InputElement
-              </th>
+                  type="checkbox"
-              <th
+                  checked={$table.getIsAllRowsSelected()}
-                scope="col"
+                  indeterminate={$table.getIsSomeRowsSelected()}
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  on:change={() => $table.toggleAllRowsSelected()}
-                {$_('contact-information')}
+                />
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donations')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('total-donation-amount')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('total-paid-amount')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
               </th>
+              {#each headerGroup.headers as header}
+                <TableHeader {header} />
+              {/each}
             </tr>
-          </thead>
+          {/each}
-          <tbody class="divide-y divide-gray-200">
+        </thead>
-            {#each current_donors as donor}
+        <tbody>
-              {#if donor.firstname
+          {#each $table.getRowModel().rows as row}
-                .toLowerCase()
+            <tr>
-                .includes(
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                  searchvalue.toLowerCase()
+                <InputElement
-                ) ||  donor.lastname
+                  type="checkbox"
-                  .toLowerCase()
+                  checked={row.getIsSelected()}
-                  .includes(
+                  on:change={() => row.toggleSelected()}
-                    searchvalue.toLowerCase()
+                />
-                  ) || should_display_based_on_id(donor.id)}
+              </td>
-                <tr data-rowid="donor_{donor.id}">
+              {#each row.getVisibleCells() as cell}
-                  <td class="px-6 py-4 whitespace-nowrap">
+                <td>
-                    <div class="flex items-center">
+                  <svelte:component
-                      <div class="ml-4">
+                    this={flexRender(
-                        <div class="text-sm font-medium text-gray-900">
+                      cell.column.columnDef.cell,
-                          {donor.firstname}
+                      cell.getContext()
-                          {donor.middlename || ''}
+                    )}
-                          {donor.lastname}
+                  />
-                        </div>
+                </td>
-                      </div>
+              {/each}
-                    </div>
+            </tr>
-                  </td>
+          {/each}
-                  <td class="px-6 py-4 whitespace-nowrap">
+        </tbody>
-                    {#if donor.email}
+      </table>
-                      <div class="text-sm text-gray-500">{donor.email}</div>
-                    {/if}
-                    {#if donor.phone}
-                      <div class="text-sm text-gray-500">{donor.phone}</div>
-                    {/if}
-                    {#if donor.address.address1 !== null}
-                      {donor.address.address1}<br />
-                      <!-- {donor.address.address2 || ''}<br /> -->
-                      {donor.address.postalcode}
-                      {donor.address.city}
-                      {donor.address.country}
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if current_donations.filter((d) => d.donor.id == donor.id).length > 0}
-                      {#each current_donations.filter((o) => o.donor.id == donor.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-blue-600 text-white mr-1">{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-green-700 text-white mr-1">{$_('fixed-donation')}:
-                            {(d.amount / 100)
-                              .toFixed(2)
-                              .toLocaleString('de-DE', { valute: 'EUR' })}€</a>
-                        {/if}
-                      {/each}
-                    {:else}{$_('donor-has-no-associated-donations')}{/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {(donor.donationAmount / 100)
-                      .toFixed(2)
-                      .toLocaleString('de-DE', { valute: 'EUR' })}€
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {(donor.paidDonationAmount / 100)
-                      .toFixed(2)
-                      .toLocaleString('de-DE', { valute: 'EUR' })}€
-                  </td>
-                  {#if active_deletes[donor.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[donor.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          DonorService.donorControllerRemove(donor.id, false)
-                            .then((resp) => {
-                              current_donors = current_donors.filter((obj) => obj.id !== donor.id);
-                              Toastify({
-                                text: 'Donor deleted',
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            })
-                            .catch((err) => {
-                              modal_open = true;
-                              delete_donor = donor;
-                            });
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <a
-                        href="./{donor.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[donor.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  {:catch error}
-    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-      <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
-        {error}
-      </span>
     </div>
-  {/await}
+    <div class="h-2" />
+    <TableBottom {table} {selected} />
+  {/if}
 {/if}

src/components/shared/tablefilters.js

@@ -15,17 +15,48 @@ export const groupFilter = (row, columnId, value) => {
 };
 export const runnerFilter = (row, columnId, value) => {
     const runner = row.getValue(columnId);
-    if(!runner && value == "blanko"){return true}
+    return filterRunner(runner, value)
-    if(!runner){return false}
+};
 
-    if(value.startsWith("#")){
+export const donationRunnerFilter = (row, columnId, value) => {
-        return runner.id == value.replace("#","")
+    const runner = row.getValue(columnId);
+    if (!runner) { return false; }
+    return filterRunner(runner, value)
+};
+
+export const donationDonorFilter = (row, columnId, value) => {
+    const runner = row.getValue(columnId);
+    return filterRunner(runner, value)
+};
+
+function filterRunner(runner, value) {
+    if (!runner && value == "blanko") { return true }
+    if (!runner) { return false }
+
+    if (value.startsWith("#")) {
+        return runner.id == value.replace("#", "")
     }
 
-    if(runner.middlename){
+    if (runner.middlename) {
         return `${runner.firstname} ${runner.middlename} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
     }
     return `${runner.firstname} ${runner.lastname}`.toLowerCase().includes(value.toLowerCase())
+}
+
+export const filterName = (row, columnId, value) => {
+    const obj = row.original;
+    if (obj.middlename) {
+        return `${obj.firstname} ${obj.middlename} ${obj.lastname}`.toLowerCase().includes(value.toLowerCase())
+    }
+    return `${obj.firstname} ${obj.lastname}`.toLowerCase().includes(value.toLowerCase())
+};
+
+export const filterAddress = (row, columnId, value) => {
+    const obj = row.original.address;
+    if (obj.address2) {s
+        return `${obj.address1} ${obj.address2} ${obj.postalcode} ${obj.city} ${obj.country}`.toLowerCase().includes(value.toLowerCase())
+    }
+    return `${obj.address1} ${obj.postalcode} ${obj.city} ${obj.country}`.toLowerCase().includes(value.toLowerCase())
 };
 
 export const statusFilter = (row, columnId, value) => {

src/locales/de.json

@@ -44,6 +44,8 @@
     "applying-changes": "Änderungen anwenden",
     "attention": "Achtung!",
     "author": "Autor:in",
+    "average-distance": "Durchschnittliche Strecke/Läufer:in",
+    "average-donation": "Durchschnittliches Sponsoring",
     "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer:innen für den Import bestätigen.",
     "by": "von",
     "cancel": "Abbrechen",
@@ -181,10 +183,11 @@
     "donation-updated": "Sponsoring wurde aktualisiert",
     "donation_added": "Sponsoring hinzugefügt",
     "donations": "Sponsorings",
+    "donations-are-being-loaded": "Sponsorings werden geladen...",
     "donor": "Sponsor:in",
     "donor-added": "Sponsor:in hinzugefügt",
     "donor-deleted": "Sponsor:in gelöscht",
-    "donor-has-no-associated-donations": "Zur Sponsor:in gibt es noch keine Sponsorings",
+    "donor-has-no-associated-donations": "Keine Sponsorings",
     "donor-is-being-added": "Sponsor:in wird hinzugefügt...",
     "donor-is-being-updated": "Sponsor:in wird aktualisiert",
     "donors": "Sponsor:innen",
@@ -283,6 +286,7 @@
     "name": "Name",
     "name-is-required": "Der Gruppenname muss angegeben werden",
     "new-password": "Neues Passwort",
+    "no-address": "Keine Adresse hinterlegt",
     "no-contact-found": "Keine Kontakte gefunden",
     "no-contact-selected": "Kein Kontakt ausgewählt",
     "no-contact-specified": "Kein Kontakt angegeben",
@@ -324,6 +328,7 @@
     "permissions-updated": "Berechtigungen aktualisiert!",
     "phone": "Telefon",
     "please-confirm-the-deletion-of-card": "Bitte bestätige die Löschung der Karte",
+    "please-confirm-the-deletion-of-donation": "Bitte bestätige die Löschung des Sponsorings",
     "please-confirm-the-deletion-of-runner": "Bitte bestätige die Löschung der Läufer:in",
     "please-confirm-the-deletion-of-scan": "Bitte bestätige die Löschung des Scans",
     "please-copy-the-token-and-store-it-somewhere-save": "Bitte kopiere dir den Token und bewahre ihn gut auf.",
@@ -434,8 +439,10 @@
     "token": "Token",
     "total-distance": "gelaufene Strecke",
     "total-donation-amount": "Gesamtbetrag",
+    "total-donation-count": "Gesamte Sponsorings",
     "total-donations": "Spendensumme",
-    "total-paid-amount": "Gezahlter Gesamtbetrag",
+    "total-donors": "gesamte Sponsor:innen",
+    "total-paid-amount": "Gezahlt",
     "total-scans": "gesamte Scans",
     "total_donation_amount_in_eur": "Gesamtbetrag in €",
     "track": "Track",

src/locales/en.json

@@ -44,6 +44,8 @@
     "applying-changes": "Applying Changes",
     "attention": "Attention!",
     "author": "Author",
+    "average-distance": "average distance",
+    "average-donation": "average donation",
     "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import.",
     "by": "by",
     "cancel": "Cancel",
@@ -181,10 +183,11 @@
     "donation-updated": "Donation updated",
     "donation_added": "Donation_added",
     "donations": "Donations",
+    "donations-are-being-loaded": "donations are being loaded",
     "donor": "Donor",
     "donor-added": "Donor added",
     "donor-deleted": "donor deleted",
-    "donor-has-no-associated-donations": "Donor has no associated donations.",
+    "donor-has-no-associated-donations": "No donations",
     "donor-is-being-added": "Donor is being added...",
     "donor-is-being-updated": "Donor is being updated",
     "donors": "Donors",
@@ -283,6 +286,7 @@
     "name": "Name",
     "name-is-required": "Name is required",
     "new-password": "New password",
+    "no-address": "no address",
     "no-contact-found": "No contacts found",
     "no-contact-selected": "No contact selected",
     "no-contact-specified": "no contact specified",
@@ -324,6 +328,7 @@
     "permissions-updated": "Permissions updated!",
     "phone": "Phone",
     "please-confirm-the-deletion-of-card": "Please confirm the deletion of this card",
+    "please-confirm-the-deletion-of-donation": "Please confirm the deletion of this donation",
     "please-confirm-the-deletion-of-runner": "Please confirm the deletion of this runner",
     "please-confirm-the-deletion-of-scan": "Please confirm the deletion of scan",
     "please-copy-the-token-and-store-it-somewhere-save": "Please copy the token and store it somewhere safe.",
@@ -434,8 +439,10 @@
     "token": "Token",
     "total-distance": "total distance",
     "total-donation-amount": "total donation amount",
+    "total-donation-count": "total donations (count)",
     "total-donations": "total donations",
-    "total-paid-amount": "Total paid amount",
+    "total-donors": "total donors",
+    "total-paid-amount": "Paid",
     "total-scans": "total scans",
     "total_donation_amount_in_eur": "Total donation amount in €",
     "track": "Track",