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 +387 -323
4 changed files with 387 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/cards/CardsOverview.svelte
View File

@ -32,7 +32,7 @@
export let original_data = {}; export let original_data = {};
export let current_cards = []; export let current_cards = [];
export const addCards = (cards) => { export const addCards = (cards) => {
console.log(cards) console.log(cards);
current_cards = current_cards.concat(...cards); current_cards = current_cards.concat(...cards);
options.update((options) => ({ options.update((options) => ({
...options, ...options,
@ -155,15 +155,27 @@
}).showToast(); }).showToast();
} }
onMount(() => { onMount(async () => {
RunnerCardService.runnerCardControllerGetAll().then((val) => { let page = 0;
current_cards = val; 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.update((options) => ({
...options, ...options,
data: current_cards, data: current_cards,
})); }));
dataLoaded = true; dataLoaded = true;
}); page++;
}
console.log("All cards loaded");
}); });
</script> </script>
@ -229,7 +241,7 @@
...options, ...options,
data: current_cards, data: current_cards,
})); }));
$table.resetRowSelection() $table.resetRowSelection();
}} }}
> >
{$_("delete-cards")} {$_("delete-cards")}
@ -249,7 +261,10 @@
</svg> </svg>
</button> </button>
{/if} {/if}
<GenerateRunnerCards cards_show={selected.length>0} bind:generate_cards={selectedCards} /> <GenerateRunnerCards
cards_show={selected.length > 0}
bind:generate_cards={selectedCards}
/>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full"> <table class="w-full">

432
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("*", ""));
@ -26,210 +24,250 @@
function open_payment_modal(donation) { function open_payment_modal(donation) {
editable = Object.assign({}, donation); editable = Object.assign({}, donation);
original_data = 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; 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> </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"> >
<thead class="bg-gray-50"> <table class="divide-y divide-gray-200 w-full">
<tr> <thead class="bg-gray-50">
<th <tr>
scope="col" <th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> scope="col"
{$_('donor')} class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
</th> >
<th {$_("donor")}
scope="col" </th>
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th
{$_('runner')} scope="col"
</th> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
<th >
scope="col" {$_("runner")}
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> </th>
{$_('amount-per-kilometer')} <th
</th> scope="col"
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
scope="col" >
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> {$_("amount-per-kilometer")}
{$_('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')} {$_("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"
{$_('status')} >
</th> {$_("paid-amount")}
<th scope="col" class="relative px-6 py-3"> </th>
<span class="sr-only">{$_('action')}</span> <th
</th> scope="col"
</tr> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
</thead> >
<tbody class="divide-y divide-gray-200"> {$_("status")}
{#each current_donations as donation} </th>
{#if donation.donor.firstname <th scope="col" class="relative px-6 py-3">
<span class="sr-only">{$_("action")}</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
{#each current_donations as donation}
{#if donation.donor.firstname
.toLowerCase()
.includes(searchvalue.toLowerCase()) || donation.donor.lastname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || donation.runner?.firstname
searchvalue.toLowerCase() .toLowerCase()
) || donation.donor.lastname .includes(searchvalue.toLowerCase()) || donation.runner?.lastname
.toLowerCase() .toLowerCase()
.includes( .includes(searchvalue.toLowerCase()) || should_display_based_on_id(donation.id)}
searchvalue.toLowerCase() <tr data-rowid="donation_{donation.id}">
) || donation.runner?.firstname <td class="px-6 py-4 whitespace-nowrap">
.toLowerCase() <div class="flex items-center">
.includes( <a
searchvalue.toLowerCase() href="../donors/{donation.donor.id}"
) || donation.runner?.lastname class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
.toLowerCase() >{donation.donor.firstname}
.includes( {donation.donor.middlename || ""}
searchvalue.toLowerCase() {donation.donor.lastname}</a
) || should_display_based_on_id(donation.id)} >
<tr data-rowid="donation_{donation.id}"> </div>
<td class="px-6 py-4 whitespace-nowrap"> </td>
<div class="flex items-center"> <td class="px-6 py-4 whitespace-nowrap">
{#if donation.runner}
<div class="text-sm font-medium text-gray-900">
<a <a
href="../donors/{donation.donor.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.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.runner.firstname}
{donation.donor.lastname}</a> {donation.runner.middlename || ""}
{donation.runner.lastname}</a
>
</div> </div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
{#if donation.runner}
<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>
</div>
{:else}
<div class="text-sm font-medium text-gray-900">
{$_('fixed-donation')}
</div>
{/if}
</td>
<td class="px-6 py-4 whitespace-nowrap">
{#if donation.amountPerDistance}
<div class="text-sm font-medium text-gray-900">
{(donation.amountPerDistance / 100)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€
</div>
{:else}
<div class="text-sm font-medium text-gray-900">
{$_('fixed-donation')}
</div>
{/if}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">
{(donation.amount / 100)
.toFixed(2)
.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">
<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>
<button
on:click={() => {
DonationService.donationControllerRemove(donation.id, false).then(
(resp) => {
current_donations = current_donations.filter(
(obj) => obj.id !== donation.id
);
Toastify({
text: $_('donation-deleted'),
duration: 500,
backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)',
}).showToast();
}
);
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
</td>
{:else} {:else}
<td <div class="text-sm font-medium text-gray-900">
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> {$_("fixed-donation")}
<button </div>
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')}
<button
on:click={() => {
active_deletes[donation.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
{/if}
</td>
{/if} {/if}
</tr> </td>
{/if} <td class="px-6 py-4 whitespace-nowrap">
{/each} {#if donation.amountPerDistance}
</tbody> <div class="text-sm font-medium text-gray-900">
</table> {(donation.amountPerDistance / 100)
</div> .toFixed(2)
{/if} .toLocaleString("de-DE", { valute: "EUR" })}€
{:catch error} </div>
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"> {:else}
<span class="inline-block align-middle mr-8"> <div class="text-sm font-medium text-gray-900">
<b class="capitalize">{$_('general_promise_error')}</b> {$_("fixed-donation")}
{error} </div>
</span> {/if}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">
{(donation.amount / 100)
.toFixed(2)
.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"
>
<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
>
<button
on:click={() => {
DonationService.donationControllerRemove(
donation.id,
false
).then((resp) => {
current_donations = current_donations.filter(
(obj) => obj.id !== donation.id
);
Toastify({
text: $_("donation-deleted"),
duration: 500,
backgroundColor:
"linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
});
}}
tabindex="0"
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"
>
<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")}
<button
on:click={() => {
active_deletes[donation.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("delete")}</button
>
{/if}
</td>
{/if}
</tr>
{/if}
{/each}
</tbody>
</table>
</div> </div>
{/await} {/if}
{/if} {/if}

30
src/components/runners/RunnersOverview.svelte
View File

@ -50,7 +50,6 @@
})); }));
}; };
//Section table //Section table
const columns = [ const columns = [
{ {
@ -157,16 +156,7 @@
}).showToast(); }).showToast();
} }
onMount(() => { onMount(async () => {
RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val;
dataLoaded = true;
options.update((options) => ({
...options,
data: current_runners,
}));
});
RunnerTeamService.runnerTeamControllerGetAll().then((val) => { RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val; teams = val;
}); });
@ -175,6 +165,24 @@
orgs = val; 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> </script>

219
src/components/scans/ScansOverview.svelte
View File

@ -30,6 +30,7 @@
$table?.getSelectedRowModel().rows.map((row) => row.index) || []; $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
$: active_delete = undefined; $: active_delete = undefined;
$: dataLoaded = false;
export let current_scans = []; export let current_scans = [];
export const addScans = (scans) => { export const addScans = (scans) => {
current_scans = current_scans.concat(...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 = []; let allTracks = [];
TrackService.trackControllerGetAll().then((val) => { TrackService.trackControllerGetAll().then((val) => {
allTracks = val; allTracks = val;
@ -99,7 +91,7 @@
accessorKey: "timestamp", accessorKey: "timestamp",
header: () => $_("timestamp"), header: () => $_("timestamp"),
cell: (info) => { cell: (info) => {
return (new Date(parseInt(info.getValue())*1000)).toLocaleString() return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
}, },
enableColumnFilter: false, enableColumnFilter: false,
}, },
@ -183,6 +175,26 @@
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast(); }).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> </script>
<DeleteScanModal <DeleteScanModal
@ -193,7 +205,7 @@
}} }}
/> />
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
{#await scans_promise} {#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"
@ -201,105 +213,96 @@
<p class="font-bold">{$_("scans-are-being-loaded")}</p> <p class="font-bold">{$_("scans-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_scans.length === 0}
{#if current_scans.length === 0} <ScansEmptyState />
<ScansEmptyState /> {:else}
{:else} {#if selected.length > 0}
{#if selected.length > 0} <button
<button type="button"
type="button" class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex" id="options-menu"
id="options-menu" on:click={async () => {
on:click={async () => { const prom = [];
const prom = []; for (const scan of selectedScans) {
for (const scan of selectedScans) { prom.push(ScanService.scanControllerRemove(scan.id, true));
prom.push(ScanService.scanControllerRemove(scan.id, true)); }
} await Promise.all(prom);
await Promise.all(prom); for (const scan of selectedScans) {
for (const scan of selectedScans) { current_scans = current_scans.filter((r) => r.id !== scan.id);
current_scans = current_scans.filter((r) => r.id !== scan.id); }
} options.update((options) => ({
options.update((options) => ({ ...options,
...options, data: current_scans,
data: current_scans, }));
})); $table.resetRowSelection();
$table.resetRowSelection(); Toastify({
Toastify({ text: $_("scan-deleted"),
text: $_("scan-deleted"), duration: 3500,
duration: 3500, backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", }).showToast();
}).showToast(); }}
}} >
{$_("delete-scans")}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
> >
{$_("delete-scans")} <path
<svg stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round"
fill="none" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
viewBox="0 0 24 24" />
stroke-width="1.5" </svg>
stroke="currentColor" </button>
class="w-5 h-5" {/if}
> <div class="overflow-x-auto">
<path <table class="w-full">
stroke-linecap="round" <thead>
stroke-linejoin="round" {#each $table.getHeaderGroups() as headerGroup}
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" <tr class="select-none">
/> <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
</svg> <InputElement
</button> type="checkbox"
{/if} checked={$table.getIsAllRowsSelected()}
<div class="overflow-x-auto"> indeterminate={$table.getIsSomeRowsSelected()}
<table class="w-full"> on:change={() => $table.toggleAllRowsSelected()}
<thead> />
{#each $table.getHeaderGroups() as headerGroup} </th>
<tr class="select-none"> {#each headerGroup.headers as header}
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px"> <TableHeader {header} />
<InputElement {/each}
type="checkbox" </tr>
checked={$table.getIsAllRowsSelected()} {/each}
indeterminate={$table.getIsSomeRowsSelected()} </thead>
on:change={() => $table.toggleAllRowsSelected()} <tbody>
/> {#each $table.getRowModel().rows as row}
</th> <tr>
{#each headerGroup.headers as header} <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
<TableHeader {header} /> <InputElement
{/each} type="checkbox"
</tr> checked={row.getIsSelected()}
{/each} on:change={() => row.toggleSelected()}
</thead> />
<tbody> </td>
{#each $table.getRowModel().rows as row} {#each row.getVisibleCells() as cell}
<tr> <td>
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px"> <svelte:component
<InputElement this={flexRender(
type="checkbox" cell.column.columnDef.cell,
checked={row.getIsSelected()} cell.getContext()
on:change={() => row.toggleSelected()} )}
/> />
</td> </td>
{#each row.getVisibleCells() as cell} {/each}
<td> </tr>
<svelte:component {/each}
this={flexRender( </tbody>
cell.column.columnDef.cell, </table>
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
</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> </div>
{/await} <TableBottom {table} {selected} />
{/if}
{/if} {/if}