diff options
Diffstat (limited to 'frontend/src/lib/pagination/Pagination.svelte')
| -rw-r--r-- | frontend/src/lib/pagination/Pagination.svelte | 45 |
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} |