You can now open a modal to add a payment to a donation from the donation overview

ref #133

src/components/donations/AddDonationPaymentModal.svelte

@@ -2,38 +2,24 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
+  import { DonationService, RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
-  export let edit_modal_open;
+  export let payment_modal_open = false;
-  export let current_cards;
+  export let current_donations = [];
-  export let runner = {};
   export let editable = {};
   export let original_data = {};
-  const getRunnerLabel = (option) =>
+  export let amount_input = 0;
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
-  const filterRunners = (label, filterText, option) =>
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
-  $: runners = [];
+  $: createbtnenabled = is_amount_valid && !(amount_input*100 == original_data.paidAmount)
-  $: enabled = true;
+  $: is_amount_valid = amount_input > 0;
-  $: processed_last_submit = true;
-  RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val.map((r) => {
-      return { label: getRunnerLabel(r), value: r };
-    });
-  });
-  $: createbtnenabled = !(
-    JSON.stringify(editable) === JSON.stringify(original_data)
-  );
   (() => {
     document.onkeydown = (e) => {
       e = e || window.event;
       if (e.key === "Escape") {
-        edit_modal_open = false;
+        payment_modal_open = false;
       }
       if (e.keyCode === 13) {
         if (createbtnenabled === true) {
@@ -47,24 +33,24 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_("updating-card"),
+        text: "Updating Donation",
         duration: -1,
       }).showToast();
-      RunnerCardService.runnerCardControllerPut(original_data.id, editable)
+      if(editable.responseType == "DISTANCEDONATION" ){
+        DonationService.donationControllerPutDistance(original_data.id, editable)
         .then((result) => {
           let id = original_data.id;
-          runner = {};
           editable = {};
           original_data = {};
-          edit_modal_open = false;
+          payment_modal_open = false;
           //
           Toastify({
-            text: $_("card-updated"),
+            text: "Donation updated",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
+          current_donations[current_donations.findIndex((c) => c.id === id)] = result;
-          current_cards = current_cards;
+          current_donations = current_donations;
         })
         .catch((err) => {
           //
@@ -75,16 +61,42 @@
           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 edit_modal_open}
+{#if payment_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
     use:focusTrap
     use:clickOutside
     on:click_outside={() => {
-      edit_modal_open = false;
+      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">
@@ -118,45 +130,51 @@
             </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">
-                {$_('edit-a-card')}
+                Add or Update a payment
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
+                  You can update the donation's paid amount manually or use the TODO button to use the donation's exact amount.
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
-                    for="runner"
+                  for="token"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                  class="block text-sm font-medium text-gray-700">Paid amount</label>
-                  <Select
+                <div class="inline-flex">
-                    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"
+                  <input
-                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+                      autocomplete="off"
-                    items={runners}
+                      class:border-red-500={!is_amount_valid}
-                    showChevron={true}
+                      class:focus:border-red-500={!is_amount_valid}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
+                      class:focus:ring-red-500={!is_amount_valid}
-                    noOptionsMessage={$_('no-runners-found')}
+                      bind:value={amount_input}
-                    bind:selectedValue={runner}
+                      type="number"
-                    on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
+                      step="0.01"
-                    on:clear={() => (editable.runner = null)} />
+                      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">
+                      Payment amount must be greater than 0.00€
+                    </span>
+                  {/if}
+                  <div
+                    class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
+                    <svg
+                      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="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
+                  </div>
                 </div>
-                <div class="col-span-6">
-                  <p class="text-gray-500">
-                    <input
-                      id="enabled"
-                      on:change={() => {
-                        editable.enabled = !editable.enabled;
-                      }}
-                      name="enabled"
-                      type="checkbox"
-                      checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    {$_('this-card-is')}
-                    {#if editable.enabled}
-                      {$_('enabled')}
-                    {:else}{$_('disabled')}{/if}
-                  </p>
                 </div>
               </div>
             </div>
@@ -173,7 +191,7 @@
           </button>
           <button
             on:click={() => {
-              edit_modal_open = false;
+              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">
@@ -182,5 +200,4 @@
         </div>
       </div>
     </div>
-  </div>
 {/if}

src/components/donations/DonationsOverview.svelte

@@ -4,12 +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 amount_input = 0;
   const donations_promise = DonationService.donationControllerGetAll().then(
     (val) => {
       current_donations = val;
@@ -24,10 +26,12 @@
   function open_payment_modal(donation) {
     editable = Object.assign({}, donation);
     original_data = Object.assign({}, donation);
+    amount_input = (donation.paidAmount/100).toFixed(2);
     payment_modal_open = true;
   }
 </script>
 
+<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:amount_input bind:payment_modal_open />
 {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
   {#await donations_promise}
     <div
@@ -198,7 +202,7 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
-                        on:click={() => {payment_modal_open(donation);}}
+                        on:click={() => {open_payment_modal(donation);}}
                         class="text-green-600 hover:text-green-900">Add payment</button>
                       <a
                         href="./{donation.id}"