From 352551e168b5dced5e7353e82655908d82d28af0 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 19 Apr 2023 16:55:14 +0200
Subject: [PATCH] feat(donorsoverview): Dynamicly add newly generated donors

---
 src/components/donors/AddDonorModal.svelte  | 183 ++++++++++++--------
 src/components/donors/Donors.svelte         |  73 +++++---
 src/components/donors/DonorsOverview.svelte |   7 +
 3 files changed, 170 insertions(+), 93 deletions(-)

diff --git a/src/components/donors/AddDonorModal.svelte b/src/components/donors/AddDonorModal.svelte
index 2791c1c2..7c5db98a 100644
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -1,15 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
-  import {
-    DonorService
-  } from "@odit/lfk-client-js";
+
+  import { 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);
-          current_donors = current_donors;
+          dispatch("created", { donors: [result] });
         })
         .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">
-                      {$_('first-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("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">
-                      {$_('last-name-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("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">
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                      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"
+                      )}
                     </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">
-                      {$_('valid-email-is-required')}
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                    >
+                      {$_("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
-                      for="comments"
-                      class="font-medium text-gray-700">{$_('receipt-needed')}</label>
+                    <label for="comments" 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">
-                        {$_('address-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("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">
-                        {$_('valid-zipcode-postal-code-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("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">
-                        {$_('valid-city-is-required')}
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+                      >
+                        {$_("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">
-            {$_('create')}
+            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')}
+            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>
diff --git a/src/components/donors/Donors.svelte b/src/components/donors/Donors.svelte
index a43c3ea6..38be560a 100644
--- a/src/components/donors/Donors.svelte
+++ b/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')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
+    {$_("donors")}
+    {#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">
-        {$_('add-donor')}
+        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")}
       </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) {
-            d.address.address2=d.address.address2===""?"":" "+d.address.address2;
-            const address=`${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
-            return [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(';');
+          const data = current_donors
+            .filter((d) => d.receiptNeeded === true)
+            .map(function (d) {
+              d.address.address2 =
+                d.address.address2 === "" ? "" : " " + d.address.address2;
+              const address = `${d.address.address1}${d.address.address2}, ${d.address.postalcode} ${d.address.city}, ${d.address.country}`;
+              return [
+                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');
-    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
-    hiddenElement.target = '_blank';
-    hiddenElement.download = `${$_('filename_sponsoringquittungsliste')}.csv`;
-    hiddenElement.click();
-    hiddenElement.remove();
+          });
+          let hiddenElement = document.createElement("a");
+          hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
+          hiddenElement.target = "_blank";
+          hiddenElement.download = `${$_(
+            "filename_sponsoringquittungsliste"
+          )}.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">
-        {$_('sponsoring-quittungs-liste_herunterladen')}
+        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")}
       </button>
     {/if}
   </span>
-  <DonorsOverview bind:current_donors />
+  <DonorsOverview bind:current_donors bind:addDonors />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:CREATE')}
-  <AddDonorModal bind:current_donors bind:modal_open />
+{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}
+  <AddDonorModal
+    on:created={(event) => {
+      addDonors(event.detail.donors);
+    }}
+    bind:modal_open
+  />
 {/if}
diff --git a/src/components/donors/DonorsOverview.svelte b/src/components/donors/DonorsOverview.svelte
index 099da4c1..6c80a19d 100644
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -35,6 +35,13 @@
   let modal_open = false;
   let delete_donor = {};
   export let current_donors = [];
+  export const addDonors = (donors) => {
+    current_donors = current_donors.concat(...donors);
+    options.update((options) => ({
+      ...options,
+      data: current_donors,
+    }));
+  };
 
   //Section table
   const columns = [