thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Create pagination component and paginate manage page as well

Browse Source
This commit is contained in:
thiloho
2024-10-19 21:01:45 +02:00
parent b1a59e38c1
commit 4e98df5790
6 changed files with 121 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web-app/src/lib/components/Pagination.svelte Normal file
View File

@@ -0,0 +1,82 @@
<script lang="ts">
import { page } from "$app/stores";
import { PAGINATION_MAX_ITEMS } from "$lib/utils";
const { commonFilters = [], resultCount }: { commonFilters?: string[]; resultCount: number } =
$props();
</script>
<div class="pagination">
{#snippet commonFilterInputs()}
{#each commonFilters as filter}
<input type="hidden" name={filter} value={$page.url.searchParams.get(filter)} />
{/each}
{/snippet}
<p>
{$page.url.searchParams.get("page") ?? 1} / {Math.max(
Math.ceil(resultCount / PAGINATION_MAX_ITEMS),
1
)}
</p>
<form method="GET">
<input type="hidden" name="page" value={1} />
{@render commonFilterInputs()}
<button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
>First</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.max(1, Number.parseInt($page.url.searchParams.get("page") ?? "1") - 1)}
/>
{@render commonFilterInputs()}
<button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
>Previous</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.min(
Math.max(Math.ceil(resultCount / PAGINATION_MAX_ITEMS), 1),
Number.parseInt($page.url.searchParams.get("page") ?? "1") + 1
)}
/>
{@render commonFilterInputs()}
<button
type="submit"
disabled={($page.url.searchParams.get("page") ?? "1") ===
Math.max(Math.ceil(resultCount / PAGINATION_MAX_ITEMS), 1).toString()}>Next</button
>
</form>
<form method="GET">
<input
type="hidden"
name="page"
value={Math.max(Math.ceil(resultCount / PAGINATION_MAX_ITEMS), 1)}
/>
{@render commonFilterInputs()}
<button
type="submit"
disabled={($page.url.searchParams.get("page") ?? "1") ===
Math.max(Math.ceil(resultCount / PAGINATION_MAX_ITEMS), 1).toString()}>Last</button
>
</form>
</div>
<style>
.pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: end;
}
.pagination > form:first-of-type {
margin-inline-start: auto;
}
</style>