From 1dbab03fe73b5e0fc011f9b0af7199bd71bc79c5 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Thu, 15 Apr 2021 15:24:31 +0200
Subject: [PATCH] You can now add payments from the donation overview

ref #133
---
 .../donations/AddDonationPaymentModal.svelte  | 71 +++++++++----------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/components/donations/AddDonationPaymentModal.svelte b/src/components/donations/AddDonationPaymentModal.svelte
index dd018fd4..8867cbbb 100644
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -10,6 +10,7 @@
   export let editable = {};
   export let original_data = {};
   export let amount_input = 0;
+  $:processed_last_submit=true;
   function focus(el) {
     el.focus();
   }
@@ -36,7 +37,9 @@
         text: "Updating Donation",
         duration: -1,
       }).showToast();
-      if(editable.responseType == "DISTANCEDONATION" ){
+      editable.donor = editable.donor.id;
+      editable.paidAmount = amount_input*100;
+      if(editable.responseType == "DISTANCEDONATION" || editable.runner){
         DonationService.donationControllerPutDistance(original_data.id, editable)
         .then((result) => {
           let id = original_data.id;
@@ -60,10 +63,9 @@
           //
           toast.hideToast();
         });
-    }
       }
       else{
-        DonationService.donationControllerPutFixed(original_data.id, editable)
+          DonationService.donationControllerPutFixed(original_data.id, editable)
         .then((result) => {
           let id = original_data.id;
           editable = {};
@@ -87,6 +89,7 @@
           toast.hideToast();
         });
       }
+    }
   }
 </script>
 
@@ -137,12 +140,12 @@
                   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">
+              <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">
+                <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}
@@ -152,8 +155,15 @@
                       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"
+                      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={
+                        ()=>{
+                          amount_input=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>
@@ -163,40 +173,29 @@
                       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>
               </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 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>