meta/yukiotoko-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: allow passing page url param

Browse Source
This commit is contained in:
metamethods 2025-01-03 01:49:14 -08:00
parent fc34acda82
commit be03ebb311
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/Pagination.svelte
View File

@ -2,10 +2,15 @@
let {
items,
itemsPerPage,
pageItems = $bindable()
}: { items: Array<T>; itemsPerPage: number; pageItems: Array<T> } = $props();
pageItems = $bindable(),
currentPage = 0
}: {
items: Array<T>;
itemsPerPage: number;
pageItems: Array<T>;
currentPage?: number;
} = $props();
let currentPage = $state(0);
let pageIndexStart = $derived(currentPage * itemsPerPage);
let pageIndexEnd = $derived(Math.min(itemsPerPage * (currentPage + 1), items.length));
@ -20,21 +25,23 @@
showing <span class="font-bold text-light">{pageIndexStart + 1}</span> to
<span class="font-bold text-light">{pageIndexEnd}</span>
of <span class="font-bold text-light">{items.length}</span>
entires
entires (<button
class="font-bold text-light"
onclick={() => {
navigator.clipboard.writeText(`${window.location.href}?page=${currentPage + 1}`);
alert(`Copied to clipboard!`);
}}>page {currentPage + 1}</button
>)
</p>
<div class="flex divide-x divide-border">
<button class="rounded-bl-lg rounded-tl-lg text-light" onclick={() => currentPage--}
>prev</button
<button
class="rounded-bl-lg rounded-tl-lg bg-medium px-4 py-2 text-light transition hover:brightness-150"
onclick={() => currentPage--}>prev</button
>
<button class="rounded-br-lg rounded-tr-lg text-light" onclick={() => currentPage++}
>next</button
<button
class="rounded-br-lg rounded-tr-lg bg-medium px-4 py-2 text-light transition hover:brightness-150"
onclick={() => currentPage++}>next</button
>
</div>
</div>
<style>
button {
@apply bg-medium px-4 py-2 transition hover:brightness-150;
}
</style>

8
src/routes/+page.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts">
import { page } from '$app/state';
import Pagination from '$lib/Pagination.svelte';
import Room from '$lib/Room.svelte';
import type { PageData } from './$types';
@ -43,7 +44,12 @@
<p class="text-sub">rooms that were created from the last 24 hours</p>
</div>
<Pagination items={archivedRooms} itemsPerPage={20} bind:pageItems={paginationArchivedRooms} />
<Pagination
items={archivedRooms}
itemsPerPage={20}
bind:pageItems={paginationArchivedRooms}
currentPage={(Number(page.url.searchParams.get('page')) ?? 1) - 1}
/>
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
{#each paginationArchivedRooms as archivedRoom}