summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/pagination/Pagination.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib/pagination/Pagination.svelte')
-rw-r--r--frontend/src/lib/pagination/Pagination.svelte45
1 files changed, 45 insertions, 0 deletions
diff --git a/frontend/src/lib/pagination/Pagination.svelte b/frontend/src/lib/pagination/Pagination.svelte
new file mode 100644
index 0000000..51612f4
--- /dev/null
+++ b/frontend/src/lib/pagination/Pagination.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+ import { getPaginationContext } from '$lib/Pagination';
+ import Target from './Target.svelte';
+
+ const pagination = getPaginationContext();
+ export let context = 2;
+
+ $: totalPages = Math.ceil($pagination.total / $pagination.items);
+ $: rightBoundary = $pagination.page - context;
+ $: leftBoundary = $pagination.page + context;
+
+ $: shiftRight = leftBoundary - totalPages;
+ $: shiftLeft = 1 - rightBoundary;
+
+ $: containedLeft = leftBoundary <= totalPages;
+ $: containedRight = rightBoundary > 0;
+
+ $: start = Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight);
+ $: end = Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft);
+
+ $: leftmost = $pagination.page <= 1;
+ $: rightmost = $pagination.page >= totalPages;
+</script>
+
+{#if totalPages > 1}
+ <div class="flex justify-center gap-2">
+ <Target disabled={leftmost} page={1}>
+ <span class="icon-base icon-[material-symbols--keyboard-double-arrow-left]" />
+ </Target>
+ <Target disabled={leftmost} page={$pagination.page - 1}>
+ <span class="icon-base icon-[material-symbols--keyboard-arrow-left]" />
+ </Target>
+ {#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as page}
+ <Target active={$pagination.page === page} {page}>
+ <p>{page.toString()}</p>
+ </Target>
+ {/each}
+ <Target disabled={rightmost} page={$pagination.page + 1}>
+ <span class="icon-base icon-[material-symbols--keyboard-arrow-right]" />
+ </Target>
+ <Target disabled={rightmost} page={totalPages}>
+ <span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]" />
+ </Target>
+ </div>
+{/if}