87 lines
2.2 KiB
Svelte
87 lines
2.2 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from "svelte";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
import NavItem from "./NavItem.svelte";
|
|
export let inModal;
|
|
export let modalUrl;
|
|
export let limit;
|
|
export let skip;
|
|
export let total;
|
|
|
|
$: totalPages = Math.ceil(total / limit);
|
|
$: currentPage = Math.ceil((skip - 1) / limit) + 1;
|
|
const range = (start, end, step = 1) =>
|
|
Array.from(
|
|
{ length: Math.ceil((end - start) / step) },
|
|
(_, i) => start + i * step,
|
|
);
|
|
$: pageRange = range(currentPage - 3, currentPage + 4).filter((i) => {
|
|
return i > 0 && i <= totalPages;
|
|
});
|
|
|
|
function last(e) {
|
|
e.preventDefault();
|
|
goto(totalPages);
|
|
}
|
|
function first(e) {
|
|
e.preventDefault();
|
|
goto(1);
|
|
}
|
|
function page(e, page) {
|
|
e.preventDefault();
|
|
goto(page);
|
|
}
|
|
|
|
function goto(page) {
|
|
const url = new URL(modalUrl ?? window.location.href);
|
|
let skip = page * limit - limit;
|
|
url.searchParams.set("skip", skip);
|
|
|
|
if (inModal) {
|
|
dispatch("refresh", url);
|
|
} else {
|
|
window.location = url;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<nav>
|
|
<ul class="pagination">
|
|
{#if totalPages > 1}
|
|
<li class="page-item disabled" class:disabled={currentPage === 1}>
|
|
<a on:click={first} href="/" class="page-link"> First </a>
|
|
</li>
|
|
|
|
<NavItem
|
|
pages={pageRange}
|
|
{currentPage}
|
|
{limit}
|
|
{inModal}
|
|
{modalUrl}
|
|
on:refresh
|
|
/>
|
|
|
|
<li class="page-item">
|
|
<a
|
|
on:click={last}
|
|
class="page-link"
|
|
href="/"
|
|
class:disabled={currentPage === totalPages}>Last</a
|
|
>
|
|
</li>
|
|
{/if}
|
|
</ul>
|
|
</nav>
|
|
<p style="display: flex;justify-content: center; gap: 4px">
|
|
Showing
|
|
<span class="font-medium">{+skip + 1}</span>
|
|
to
|
|
<span class="font-medium"
|
|
>{+skip + limit > total ? total : +skip + limit}</span
|
|
>
|
|
of
|
|
<span class="font-medium">{total}</span>
|
|
total
|
|
</p>
|