lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

feature/175-request_pagination #176

Merged
niggl merged 5 commits from feature/175-request_pagination into dev 2023-04-19 13:37:17 +00:00
Conversation 0 Commits 5 Files Changed 4 +237 -197
1 changed files with 237 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ccf865687b - Show all commits

194
src/components/donations/DonationsOverview.svelte
View File

@ -5,18 +5,16 @@
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import DonationsEmptyState from "./DonationsEmptyState.svelte"; import DonationsEmptyState from "./DonationsEmptyState.svelte";
import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte"; import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
import { onMount } from "svelte";
$: searchvalue = ""; $: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
$: dataLoaded = false;
export let current_donations = []; export let current_donations = [];
export let payment_modal_open = false; export let payment_modal_open = false;
export let editable = {}; export let editable = {};
export let original_data = {}; export let original_data = {};
export let paid_amount_input = 0; export let paid_amount_input = 0;
const donations_promise = DonationService.donationControllerGetAll().then(
(val) => {
current_donations = val;
}
);
function should_display_based_on_id(id) { function should_display_based_on_id(id) {
if (searchvalue.toString().slice(-1) === "*") { if (searchvalue.toString().slice(-1) === "*") {
return id.toString().startsWith(searchvalue.replace("*", "")); return id.toString().startsWith(searchvalue.replace("*", ""));
@ -29,64 +27,99 @@
paid_amount_input = (donation.paidAmount / 100).toFixed(2); paid_amount_input = (donation.paidAmount / 100).toFixed(2);
payment_modal_open = true; payment_modal_open = true;
} }
onMount(async () => {
let page = 0;
while (page >= 0) {
const donations = await DonationService.donationControllerGetAll(
page,
500
);
if (donations.length == 0) {
page = -2;
}
current_donations = current_donations.concat(...donations);
if (page == 0) {
dataLoaded = true;
}
page++;
}
console.log("All donations loaded");
});
</script> </script>
<AddDonationPaymentModal bind:current_donations bind:original_data bind:editable bind:paid_amount_input bind:payment_modal_open /> <AddDonationPaymentModal
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')} bind:current_donations
{#await donations_promise} bind:original_data
bind:editable
bind:paid_amount_input
bind:payment_modal_open
/>
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
{#if !dataLoaded}
<div <div
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2" 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">donations are being loaded</p> <p class="font-bold">donations are being loaded</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_("this-might-take-a-moment")}</p>
</div> </div>
{:then} {:else if current_donations.length === 0}
{#if current_donations.length === 0}
<DonationsEmptyState /> <DonationsEmptyState />
{: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"> <table class="divide-y divide-gray-200 w-full">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('donor')} >
{$_("donor")}
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('runner')} >
{$_("runner")}
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('amount-per-kilometer')} >
{$_("amount-per-kilometer")}
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('donation-amount')} >
{$_("donation-amount")}
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('paid-amount')} >
{$_("paid-amount")}
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
{$_('status')} >
{$_("status")}
</th> </th>
<th scope="col" class="relative px-6 py-3"> <th scope="col" class="relative px-6 py-3">
<span class="sr-only">{$_('action')}</span> <span class="sr-only">{$_("action")}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -94,29 +127,23 @@
{#each current_donations as donation} {#each current_donations as donation}
{#if donation.donor.firstname {#if donation.donor.firstname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || donation.donor.lastname
searchvalue.toLowerCase()
) || donation.donor.lastname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
searchvalue.toLowerCase()
) || donation.runner?.firstname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
searchvalue.toLowerCase()
) || donation.runner?.lastname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
searchvalue.toLowerCase()
) || should_display_based_on_id(donation.id)}
<tr data-rowid="donation_{donation.id}"> <tr data-rowid="donation_{donation.id}">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<a <a
href="../donors/{donation.donor.id}" href="../donors/{donation.donor.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname} class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
{donation.donor.middlename || ''} >{donation.donor.firstname}
{donation.donor.lastname}</a> {donation.donor.middlename || ""}
{donation.donor.lastname}</a
>
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
@ -124,13 +151,15 @@
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
<a <a
href="../runners/{donation.runner.id}" 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} class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
{donation.runner.middlename || ''} >{donation.runner.firstname}
{donation.runner.lastname}</a> {donation.runner.middlename || ""}
{donation.runner.lastname}</a
>
</div> </div>
{:else} {:else}
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{$_('fixed-donation')} {$_("fixed-donation")}
</div> </div>
{/if} {/if}
</td> </td>
@ -139,11 +168,11 @@
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{(donation.amountPerDistance / 100) {(donation.amountPerDistance / 100)
.toFixed(2) .toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€ .toLocaleString("de-DE", { valute: "EUR" })}€
</div> </div>
{:else} {:else}
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{$_('fixed-donation')} {$_("fixed-donation")}
</div> </div>
{/if} {/if}
</td> </td>
@ -151,69 +180,88 @@
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{(donation.amount / 100) {(donation.amount / 100)
.toFixed(2) .toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€ .toLocaleString("de-DE", { valute: "EUR" })}€
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{(donation.paidAmount / 100) {(donation.paidAmount / 100)
.toFixed(2) .toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€ .toLocaleString("de-DE", { valute: "EUR" })}€
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
{#if donation.status == "PAID"} {#if donation.status == "PAID"}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
>{$_("paid")}</span
>
{:else} {:else}
<span <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
>{$_("open")}</span
>
{/if} {/if}
</td> </td>
{#if active_deletes[donation.id] === true} {#if active_deletes[donation.id] === true}
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
>
<button <button
on:click={() => { on:click={() => {
active_deletes[donation.id] = false; active_deletes[donation.id] = false;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button> class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
>{$_("cancel-delete")}</button
>
<button <button
on:click={() => { on:click={() => {
DonationService.donationControllerRemove(donation.id, false).then( DonationService.donationControllerRemove(
(resp) => { donation.id,
false
).then((resp) => {
current_donations = current_donations.filter( current_donations = current_donations.filter(
(obj) => obj.id !== donation.id (obj) => obj.id !== donation.id
); );
Toastify({ Toastify({
text: $_('donation-deleted'), text: $_("donation-deleted"),
duration: 500, duration: 500,
backgroundColor: backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)', "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast(); }).showToast();
} });
);
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("confirm-delete")}</button
>
</td> </td>
{:else} {:else}
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
>
<button <button
on:click={() => {open_payment_modal(donation);}} on:click={() => {
class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</button> open_payment_modal(donation);
}}
class="text-[#025a21] hover:text-green-900 mr-4"
>{$_("enter-payment")}</button
>
<a <a
href="./{donation.id}" href="./{donation.id}"
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a> class="text-indigo-600 hover:text-indigo-900"
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')} >{$_("details")}</a
>
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
<button <button
on:click={() => { on:click={() => {
active_deletes[donation.id] = true; active_deletes[donation.id] = true;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("delete")}</button
>
{/if} {/if}
</td> </td>
{/if} {/if}
@ -224,12 +272,4 @@
</table> </table>
</div> </div>
{/if} {/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}
{/if} {/if}