feature/175-request_pagination #176
@ -32,7 +32,7 @@
|
||||
export let original_data = {};
|
||||
export let current_cards = [];
|
||||
export const addCards = (cards) => {
|
||||
console.log(cards)
|
||||
console.log(cards);
|
||||
current_cards = current_cards.concat(...cards);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
@ -155,15 +155,27 @@
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
RunnerCardService.runnerCardControllerGetAll().then((val) => {
|
||||
current_cards = val;
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const cards = await RunnerCardService.runnerCardControllerGetAll(
|
||||
page,
|
||||
500
|
||||
);
|
||||
if (cards.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_cards = current_cards.concat(...cards);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_cards,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
});
|
||||
page++;
|
||||
}
|
||||
console.log("All cards loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -229,7 +241,7 @@
|
||||
...options,
|
||||
data: current_cards,
|
||||
}));
|
||||
$table.resetRowSelection()
|
||||
$table.resetRowSelection();
|
||||
}}
|
||||
>
|
||||
{$_("delete-cards")}
|
||||
@ -249,7 +261,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} />
|
||||
<GenerateRunnerCards
|
||||
cards_show={selected.length > 0}
|
||||
bind:generate_cards={selectedCards}
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
|
||||
@ -5,18 +5,16 @@
|
||||
import Toastify from "toastify-js";
|
||||
import DonationsEmptyState from "./DonationsEmptyState.svelte";
|
||||
import AddDonationPaymentModal from "./AddDonationPaymentModal.svelte";
|
||||
import { onMount } from "svelte";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: dataLoaded = false;
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
function should_display_based_on_id(id) {
|
||||
if (searchvalue.toString().slice(-1) === "*") {
|
||||
return id.toString().startsWith(searchvalue.replace("*", ""));
|
||||
@ -26,67 +24,100 @@
|
||||
function open_payment_modal(donation) {
|
||||
editable = Object.assign({}, donation);
|
||||
original_data = Object.assign({}, donation);
|
||||
paid_amount_input = (donation.paidAmount/100).toFixed(2);
|
||||
paid_amount_input = (donation.paidAmount / 100).toFixed(2);
|
||||
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);
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All donations loaded");
|
||||
});
|
||||
</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}
|
||||
<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")}
|
||||
{#if !dataLoaded}
|
||||
<div
|
||||
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="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_donations.length === 0}
|
||||
{:else if current_donations.length === 0}
|
||||
<DonationsEmptyState />
|
||||
{:else}
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('donor')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("donor")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('runner')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("runner")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('amount-per-kilometer')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("amount-per-kilometer")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('donation-amount')}
|
||||
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')}
|
||||
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')}
|
||||
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>
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -94,29 +125,23 @@
|
||||
{#each current_donations as donation}
|
||||
{#if donation.donor.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.donor.lastname
|
||||
.includes(searchvalue.toLowerCase()) || donation.donor.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.firstname
|
||||
.includes(searchvalue.toLowerCase()) || donation.runner?.firstname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || donation.runner?.lastname
|
||||
.includes(searchvalue.toLowerCase()) || donation.runner?.lastname
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
searchvalue.toLowerCase()
|
||||
) || should_display_based_on_id(donation.id)}
|
||||
.includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
|
||||
<tr data-rowid="donation_{donation.id}">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
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}
|
||||
{donation.donor.middlename || ''}
|
||||
{donation.donor.lastname}</a>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{donation.donor.firstname}
|
||||
{donation.donor.middlename || ""}
|
||||
{donation.donor.lastname}</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@ -124,13 +149,15 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<a
|
||||
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}
|
||||
{donation.runner.middlename || ''}
|
||||
{donation.runner.lastname}</a>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{donation.runner.firstname}
|
||||
{donation.runner.middlename || ""}
|
||||
{donation.runner.lastname}</a
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{$_('fixed-donation')}
|
||||
{$_("fixed-donation")}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
@ -139,11 +166,11 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{(donation.amountPerDistance / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{$_('fixed-donation')}
|
||||
{$_("fixed-donation")}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
@ -151,69 +178,88 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{(donation.amount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
.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' })}€
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{#if donation.status =="PAID"}
|
||||
{#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>
|
||||
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>
|
||||
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">
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = false;
|
||||
}}
|
||||
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
|
||||
on:click={() => {
|
||||
DonationService.donationControllerRemove(donation.id, false).then(
|
||||
(resp) => {
|
||||
DonationService.donationControllerRemove(
|
||||
donation.id,
|
||||
false
|
||||
).then((resp) => {
|
||||
current_donations = current_donations.filter(
|
||||
(obj) => obj.id !== donation.id
|
||||
);
|
||||
Toastify({
|
||||
text: $_('donation-deleted'),
|
||||
text: $_("donation-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
);
|
||||
});
|
||||
}}
|
||||
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>
|
||||
{:else}
|
||||
<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
|
||||
on:click={() => {open_payment_modal(donation);}}
|
||||
class="text-[#025a21] hover:text-green-900 mr-4">{$_('enter-payment')}</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>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[donation.id] = true;
|
||||
}}
|
||||
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}
|
||||
</td>
|
||||
{/if}
|
||||
@ -224,12 +270,4 @@
|
||||
</table>
|
||||
</div>
|
||||
{/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}
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
//Section table
|
||||
const columns = [
|
||||
{
|
||||
@ -157,16 +156,7 @@
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
current_runners = val;
|
||||
dataLoaded = true;
|
||||
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_runners,
|
||||
}));
|
||||
});
|
||||
onMount(async () => {
|
||||
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
|
||||
teams = val;
|
||||
});
|
||||
@ -175,6 +165,24 @@
|
||||
orgs = val;
|
||||
}
|
||||
);
|
||||
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const runners = await RunnerService.runnerControllerGetAll(page, 1000);
|
||||
if (runners.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_runners = current_runners.concat(...runners);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_runners,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All runners loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
|
||||
$: active_delete = undefined;
|
||||
$: dataLoaded = false;
|
||||
export let current_scans = [];
|
||||
export const addScans = (scans) => {
|
||||
current_scans = current_scans.concat(...scans);
|
||||
@ -39,15 +40,6 @@
|
||||
}));
|
||||
};
|
||||
|
||||
const scans_promise = ScanService.scanControllerGetAll().then((val) => {
|
||||
current_scans = val;
|
||||
// handler.setRows(val);
|
||||
current_scans = val;
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
});
|
||||
let allTracks = [];
|
||||
TrackService.trackControllerGetAll().then((val) => {
|
||||
allTracks = val;
|
||||
@ -99,7 +91,7 @@
|
||||
accessorKey: "timestamp",
|
||||
header: () => $_("timestamp"),
|
||||
cell: (info) => {
|
||||
return (new Date(parseInt(info.getValue())*1000)).toLocaleString()
|
||||
return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
@ -183,6 +175,26 @@
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
let page = 0;
|
||||
while (page >= 0) {
|
||||
const scans = await ScanService.scanControllerGetAll(page, 500);
|
||||
if (scans.length == 0) {
|
||||
page = -2;
|
||||
}
|
||||
|
||||
current_scans = current_scans.concat(...scans);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All scans loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
<DeleteScanModal
|
||||
@ -193,7 +205,7 @@
|
||||
}}
|
||||
/>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
||||
{#await scans_promise}
|
||||
{#if !dataLoaded}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert"
|
||||
@ -201,8 +213,7 @@
|
||||
<p class="font-bold">{$_("scans-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_scans.length === 0}
|
||||
{:else if current_scans.length === 0}
|
||||
<ScansEmptyState />
|
||||
{:else}
|
||||
{#if selected.length > 0}
|
||||
@ -294,12 +305,4 @@
|
||||
</div>
|
||||
<TableBottom {table} {selected} />
|
||||
{/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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user