parent
8b76101107
commit
39b0b866d0
@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Input,
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
} from "sveltestrap";
|
||||
|
||||
export let page: number = 0;
|
||||
export let pages: number = 0;
|
||||
export let total: number = 0;
|
||||
export let pageSize: number = 50;
|
||||
|
||||
$: pageIndex = page + 1;
|
||||
$: pageCount = pages === 0 ? 1 : pages;
|
||||
$: pageSizeLabel = pageSize + "";
|
||||
|
||||
let pagesList = [];
|
||||
$: {
|
||||
pagesList = [];
|
||||
for (
|
||||
let i = Math.max(page - 5, 0);
|
||||
i < Math.min(pages, page + 5);
|
||||
i++
|
||||
) {
|
||||
pagesList.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageSizeChange = ({ target: { value } }) => {
|
||||
pageSize = Number(value);
|
||||
};
|
||||
|
||||
const pageSizes = [25, 50, 100, 250];
|
||||
</script>
|
||||
|
||||
<section class="flex flex-row my-2 justify-between items-center">
|
||||
<p>Page {pageIndex}/{pageCount}</p>
|
||||
<div>
|
||||
<Pagination size="sm">
|
||||
<PaginationItem>
|
||||
<PaginationLink first href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
</PaginationItem>
|
||||
{#each pagesList as p}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">{p + 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/each}
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink last href="#" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</div>
|
||||
<div class="mx-2 flex flex-row items-center">
|
||||
Showing
|
||||
<Input
|
||||
type="select"
|
||||
name="page-size"
|
||||
bsSize="sm"
|
||||
id="page-size-selector"
|
||||
value={pageSizeLabel}
|
||||
on:change={handlePageSizeChange}
|
||||
>
|
||||
{#each pageSizes as pg}
|
||||
<option selected={pageSize === Number(pg)}>{pg}</option>
|
||||
{/each}
|
||||
</Input>
|
||||
<p class="m-0"> of {total}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
p {
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
</style>
|
@ -1,8 +1,11 @@
|
||||
<script lang="ts">
|
||||
import PageContainer from "./PageContainer.svelte";
|
||||
|
||||
export let location: Location;
|
||||
</script>
|
||||
|
||||
<PageContainer
|
||||
{location}
|
||||
header="Rule Lists"
|
||||
description="Import rule lists for maintenance free Ad blocking"
|
||||
/>
|
||||
|
Loading…
Reference in new issue