Merge branch 'dev' of https://git.odit.services/lfk/frontend into dev

2021-04-16 18:09:37 +02:00
parent e54a4807f7 cbec78589d
commit 7a63d4eed1
30 changed files with 502 additions and 62 deletions
--- a/src/components/auth/Login.svelte
+++ b/src/components/auth/Login.svelte
@@ -76,7 +76,7 @@
      // last login was not processed yet
    } else {
      Toastify({
-        text: "chill...",
+        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
        duration: 1500,
        backgroundColor:
          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
--- a/src/components/base/importfixes.svelte
+++ b/src/components/base/importfixes.svelte
@@ -0,0 +1,6 @@
+<!--
+    Temporary tailwind import fixes for classes that wouldn't be directly used otherwise. 
+    Or as others may call it: Real big bullshit time.
+    Issue: https://git.odit.services/lfk/frontend/issues/136
+ -->
+<div class="opacity-50"></div>
--- a/src/components/contacts/AddContactModal.svelte
+++ b/src/components/contacts/AddContactModal.svelte
@@ -86,7 +86,7 @@
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
-        text: "Contact is being added...",
+        text: $_('contact-is-being-added'),
        duration: -1,
      }).showToast();
      let address = {};
@@ -123,7 +123,7 @@
          modal_open = false;
          //
          Toastify({
-            text: "Contact added",
+            text: $_('contact-added'),
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -9,6 +9,7 @@
  } from "@odit/lfk-client-js";
  import Select from "svelte-select";
  import Toastify from "toastify-js";
+import { is_promise } from "svelte/internal";
  export let modal_open;
  export let current_donations;
  const getDonorLabel = (option) =>
@@ -24,6 +25,7 @@
  $: donors = [];
  $: runners = [];
  $: is_fixed = false;
+  $: is_paid = false;
  DonorService.donorControllerGetAll().then((val) => {
    donors = val.map((r) => {
      return { label: getDonorLabel(r), value: r };
@@ -57,14 +59,18 @@
      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
        };
+        if(is_paid){
+          postdata.paidAmount = amount_cent;
+        }
        DonationService.donationControllerPostFixed(postdata)
          .then((result) => {
            donor = donors[0].id || 0;
@@ -73,7 +79,7 @@
            modal_open = false;
            //
            Toastify({
-              text: "donation_added",
+              text: $_('donation_added'),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -102,7 +108,7 @@
            modal_open = false;
            //
            Toastify({
-              text: "donation_added",
+              text: $_('donation_added'),
              duration: 500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -123,7 +129,7 @@
 </script>

 <style>
-  input:before {
+  .toggle:before {
    content: "";
    position: absolute;
    width: 1.25rem;
@@ -137,12 +143,12 @@
    transition: 0.2s ease-in-out;
  }

-  input:checked {
+  .toggle:checked {
    /* @apply: bg-indigo-400; */
    background-color: #7f9cf5;
  }

-  input:checked:before {
+  .toggle:checked:before {
    left: 1.25rem;
  }
 </style>
@@ -195,7 +201,7 @@
                  class="ml-2 text-base"
                  class:text-gray-300={is_fixed}>{$_('distance-donation')}</span>
                <input
-                  class="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"
+                  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
@@ -267,6 +273,29 @@
                    </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>
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -0,0 +1,202 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { DonationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  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;
+  function focus(el) {
+    el.focus();
+  }
+  $: createbtnenabled = is_paid_amount_valid && !(paid_amount_input*100 == original_data.paidAmount)
+  $: is_paid_amount_valid = paid_amount_input > 0;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        payment_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_('updating-donation'),
+        duration: -1,
+      }).showToast();
+      editable.donor = editable.donor.id;
+      editable.paidAmount = paid_amount_input*100;
+      if(editable.responseType == "DISTANCEDONATION" || editable.runner){
+        editable.runner = editable.runner.id;
+        DonationService.donationControllerPutDistance(original_data.id, editable)
+        .then((result) => {
+          let id = original_data.id;
+          editable = {};
+          original_data = {};
+          payment_modal_open = false;
+          //
+          Toastify({
+            text: $_('donation-updated'),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
+          current_donations = current_donations;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+      }
+      else{
+          DonationService.donationControllerPutFixed(original_data.id, editable)
+        .then((result) => {
+          let id = original_data.id;
+          editable = {};
+          original_data = {};
+          payment_modal_open = false;
+          //
+          Toastify({
+            text: $_('donation-updated'),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
+          current_donations = current_donations;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+      }
+    }
+  }
+</script>
+
+{#if payment_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    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">
+      <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
+                  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>
+            </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')}
+              </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')}
+                </p>
+              </div>
+              <div class="grid grid-cols gap-6">
+                <div class="w-full">
+                  <label
+                  for="token"
+                  class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
+                <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}
+                      class:focus:ring-red-500={!is_paid_amount_valid}
+                      bind:value={paid_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 p-2"
+                      placeholder="2.00" />
+                    <button
+                      on:click={
+                        ()=>{
+                          paid_amount_input=paid_amount_input = (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>
+                    <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">
+                      {$_('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">
+            <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">
+              {$_('save-changes')}
+            </button>
+            <button
+              on:click={() => {
+                payment_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}
--- a/src/components/donations/DonationDetail.svelte
+++ b/src/components/donations/DonationDetail.svelte
@@ -20,6 +20,8 @@
  $: current_runners = [];
  $: amount_input = 0;
  $: is_amount_valid = amount_input > 0;
+  $: paid_amount_input = 0;
+  $: is_paid_amount_valid = paid_amount_input > 0;
  $: is_everything_set =
    editable.donor != null &&
    ((original_data.responseType == "DISTANCEDONATION" &&
@@ -30,15 +32,17 @@
    (original_data.responseType == "DISTANCEDONATION" &&
      !(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
    (original_data.responseType !== "DISTANCEDONATION" &&
-      !(Math.floor(amount_input * 100) === original_data.amount));
+      !(Math.floor(amount_input * 100) === original_data.amount)) ||
+      !(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
  $: save_enabled = changes_performed && is_amount_valid && is_everything_set;

  const promise = DonationService.donationControllerGetOne(
    params.donationid
  ).then((data) => {
    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
+    original_data = Object.assign({}, data);
+    editable = Object.assign({}, original_data);
+    paid_amount_input = data.paidAmount / 100;
    if (data.responseType == "DISTANCEDONATION") {
      amount_input = data.amountPerDistance / 100;
      RunnerService.runnerControllerGetAll().then((val) => {
@@ -66,10 +70,11 @@
  function submit() {
    if (data_loaded === true && save_enabled) {
      Toastify({
-        text: "Donation is being updated",
+        text: $_('updating-donation'),
        duration: 2500,
      }).showToast();
      let postdata = {};
+      editable.paidAmount = paid_amount_input*100;
      if (original_data.responseType === "DISTANCEDONATION") {
        editable.amountPerDistance = Math.floor(amount_input * 100);
        postdata = Object.assign(postdata, editable);
@@ -83,7 +88,7 @@
            Object.assign(original_data, editable);
            original_data = original_data;
            Toastify({
-              text: "updated donation",
+              text: $_('donation-updated'),
              duration: 2500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -98,7 +103,7 @@
            Object.assign(original_data, editable);
            original_data = original_data;
            Toastify({
-              text: "updated donation",
+              text: $_('donation-updated'),
              duration: 2500,
              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            }).showToast();
@@ -112,7 +117,7 @@
    DonationService.donationControllerRemove(original_data.id, false)
      .then((resp) => {
        Toastify({
-          text: "Donation delete",
+          text: $_('donation-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -219,7 +224,24 @@
      <span>{(editable.amount / 100)
          .toFixed(2)
          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+      |
+      <span
+        class="font-medium text-gray-700">{$_('paid-amount')}:</span>
+      <span>{(editable.paidAmount / 100)
+          .toFixed(2)
+          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+      |
+      <span
+        class="font-medium text-gray-700">{$_('status')}:</span>
+        {#if editable.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}
    </div>
+    <br>
    <div class=" w-full">
      <label
        for="donor"
@@ -232,7 +254,7 @@
        placeholder={$_('search-for-donor-name-or-id')}
        noOptionsMessage={$_('no-donors-found')}
        bind:selectedValue={donor}
-        on:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
+        on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
        on:clear={() => (editable.donor = null)} />
    </div>
    {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -280,6 +302,39 @@
        </span>
      {/if}
    </div>
+    <div class="w-full">
+      <label
+        for="token"
+        class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
+      <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_amount_valid}
+            class:focus:border-red-500={!is_amount_valid}
+            class:focus:ring-red-500={!is_amount_valid}
+            bind:value={paid_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 p-2"
+            placeholder="2.00" />
+          <button
+            on:click={
+              ()=>{
+                paid_amount_input=paid_amount_input = (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>
+          <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">
+            {$_('payment-amount-must-be-greater-than-0-00eur')}
+          </span>
+        {/if}
+    </div>
  </section>
 {:catch error}
  <PromiseError {error} />
--- a/src/components/donations/DonationsOverview.svelte
+++ b/src/components/donations/DonationsOverview.svelte
@@ -4,9 +4,14 @@
  import store from "../../store";
  import Toastify from "toastify-js";
  import DonationsEmptyState from "./DonationsEmptyState.svelte";
+  import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
  $: searchvalue = "";
  $: active_deletes = [];
  export let current_donations = [];
+  export let payment_modal_open = false;
+  export let editable = {};
+  export let original_data = {};
+  export let paid_amount_input = 0;
  const donations_promise = DonationService.donationControllerGetAll().then(
    (val) => {
      current_donations = val;
@@ -18,8 +23,15 @@
    }
    return id.toString() === searchvalue;
  }
+  function open_payment_modal(donation) {
+    editable = Object.assign({}, donation);
+    original_data = Object.assign({}, donation);
+    paid_amount_input = (donation.paidAmount/100).toFixed(2);
+    payment_modal_open = true;
+  }
 </script>

+<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open />
 {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
  {#await donations_promise}
    <div
@@ -63,6 +75,16 @@
                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>
@@ -132,6 +154,22 @@
                        .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">
@@ -149,7 +187,7 @@
                                (obj) => obj.id !== donation.id
                              );
                              Toastify({
-                                text: 'Donation deleted',
+                                text: $_('donation-deleted'),
                                duration: 500,
                                backgroundColor:
                                  'linear-gradient(to right, #00b09b, #96c93d)',
@@ -163,6 +201,9 @@
                  {: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>
--- a/src/components/donors/ConfirmDonorDeletion.svelte
+++ b/src/components/donors/ConfirmDonorDeletion.svelte
@@ -19,7 +19,7 @@
    )
      .then((resp) => {
        Toastify({
-          text: "Donor deleted",
+          text: $_('donor-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
--- a/src/components/donors/DonorDetail.svelte
+++ b/src/components/donors/DonorDetail.svelte
@@ -193,6 +193,12 @@
      <span>{(editable.donationAmount / 100)
          .toFixed(2)
          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+      |
+      <span
+        class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
+      <span>{(editable.paidDonationAmount / 100)
+          .toFixed(2)
+          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
      <br />
      <span class="font-medium text-gray-700">{$_('donations')}:</span>
      {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
--- a/src/components/donors/DonorsOverview.svelte
+++ b/src/components/donors/DonorsOverview.svelte
@@ -77,6 +77,11 @@
                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>
@@ -145,6 +150,11 @@
                      .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">
--- a/src/components/orgs/ConfirmOrgDeletion.svelte
+++ b/src/components/orgs/ConfirmOrgDeletion.svelte
@@ -19,7 +19,7 @@
    )
      .then((resp) => {
        Toastify({
-          text: "Organization deleted",
+          text: $_('organization-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/src/components/runners/ImportRunnerModal.svelte
@@ -202,7 +202,7 @@
              toast.hideToast();
              recent_processed = true;
              Toastify({
-                text: "Import finished",
+                text: $_('import-finished'),
                duration: 500,
                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
              }).showToast();
--- a/src/components/settings/ConfirmProfileDeletion.svelte
+++ b/src/components/settings/ConfirmProfileDeletion.svelte
@@ -17,7 +17,7 @@
    MeService.meControllerRemove(true)
      .then((resp) => {
        Toastify({
-          text: "Profile deleted!",
+          text: $_('profile-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
--- a/src/components/teams/AddTeamModal.svelte
+++ b/src/components/teams/AddTeamModal.svelte
@@ -43,7 +43,7 @@
    if (processed_last_submit === true) {
      processed_last_submit = false;
      const toast = Toastify({
-        text: "Team is being added...",
+        text: $_('team-is-being-added'),
        duration: -1,
      }).showToast();
      RunnerTeamService.runnerTeamControllerPost({
@@ -55,7 +55,7 @@
          modal_open = false;
          //
          Toastify({
-            text: "Team added",
+            text: $_('team-added'),
            duration: 500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
--- a/src/components/teams/ConfirmTeamDeletion.svelte
+++ b/src/components/teams/ConfirmTeamDeletion.svelte
@@ -16,7 +16,7 @@
    RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
      .then((resp) => {
        Toastify({
-          text: "Team deleted",
+          text: $_('team-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
--- a/src/components/teams/TeamDetail.svelte
+++ b/src/components/teams/TeamDetail.svelte
@@ -26,9 +26,9 @@
  export let params;
  export let import_modal_open = false;
  $: delete_triggered = false;
-  $: save_enabled = !data_changed && teamdata.parentGroup != null;
+  $: save_enabled = data_changed && teamdata.parentGroup != null;
  $: data_loaded = false;
-  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
+  $: data_changed = !(JSON.stringify(teamdata) === JSON.stringify(original));
  $: sponsoring_contracts_show = true;
  $: cards_show = true;
  $: certificates_show = true;
@@ -47,6 +47,8 @@
    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
      (val) => {
        orgs = val.map((r) => {
+          delete r.contact;
+          r.teams = [];
          return { label: r.name, value: r };
        });
        group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
@@ -67,7 +69,7 @@
    RunnerTeamService.runnerTeamControllerRemove(original.id, false)
      .then((resp) => {
        Toastify({
-          text: "Organization deleted",
+          text: $_('team-deleted'),
          duration: 500,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
        }).showToast();
@@ -81,7 +83,7 @@
  function submit() {
    if (data_loaded === true && save_enabled) {
      Toastify({
-        text: "updating team",
+        text: $_('updating-team'),
        duration: 2500,
      }).showToast();
      let postdata = teamdata;
@@ -92,7 +94,7 @@
          Object.assign(original, teamdata);
          original = original;
          Toastify({
-            text: "updated team",
+            text: $_('updated-team'),
            duration: 2500,
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
--- a/src/components/tracks/Tracks.svelte
+++ b/src/components/tracks/Tracks.svelte
@@ -34,7 +34,7 @@
        `[data-id="triggered_table_actions_${trackid}"]`
      ).parentNode.parentNode.parentNode;
      Toastify({
-        text: "Track is being updated...",
+        text: $_('track-is-being-updated'),
        duration: 500,
      }).showToast();
      TrackService.trackControllerPut(trackid, {
@@ -45,7 +45,7 @@
      })
        .then((r) => {
          Toastify({
-            text: "Track was updated!",
+            text: $_('track-was-updated'),
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
            duration: 1000,
          }).showToast();
--- a/src/components/users/UserPermissions.svelte
+++ b/src/components/users/UserPermissions.svelte
@@ -27,7 +27,7 @@
  });
  function submit() {
    Toastify({
-      text: "updating permissions...",
+      text: $_('updating-permissions'),
      duration: 2500,
    }).showToast();
    to_delete.forEach((d) => {