adam
/
gopherhole
1
0
Fork 0
Code Pull Requests Releases Activity

pagination

pull/1/head
Adam Veldhousen 2021-06-07 20:33:11 -05:00
parent 39b0b866d0
commit f00be3686d
Signed by: adam
GPG Key ID: 6DB29003C6DD1E4B
3 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/components/LogPager.svelte
View File

@ -10,17 +10,20 @@
export let pages: number = 0; export let pages: number = 0;
export let total: number = 0; export let total: number = 0;
export let pageSize: number = 50; export let pageSize: number = 50;
export let onPageChange = (newPage: number, prevPage: number) =>
console.log(`${newPage} - ${prevPage}`);
$: pageIndex = page + 1; $: pageIndex = page + 1;
$: pageCount = pages === 0 ? 1 : pages; $: pageCount = pages === 0 ? 1 : pages;
$: pageSizeLabel = pageSize + ""; $: pageSizeLabel = pageSize + "";
const pagerElementsCount = 10;
let pagesList = []; let pagesList = [];
$: { $: {
pagesList = []; pagesList = [];
for ( for (
let i = Math.max(page - 5, 0); let i = Math.max(page - pagerElementsCount, 0);
i < Math.min(pages, page + 5); i < Math.min(pages, page + pagerElementsCount);
i++ i++
) { ) {
pagesList.push(i); pagesList.push(i);
@ -38,21 +41,21 @@
<p>Page {pageIndex}/{pageCount}</p> <p>Page {pageIndex}/{pageCount}</p>
<div> <div>
<Pagination size="sm"> <Pagination size="sm">
<PaginationItem> <PaginationItem disabled={pageIndex === 1}>
<PaginationLink first href="#" /> <PaginationLink first href="#" />
</PaginationItem> </PaginationItem>
<PaginationItem> <PaginationItem disabled={pageIndex === 1}>
<PaginationLink previous href="#" /> <PaginationLink previous href="#" />
</PaginationItem> </PaginationItem>
{#each pagesList as p} {#each pagesList as p}
<PaginationItem> <PaginationItem active={pageIndex - 1 === p}>
<PaginationLink href="#">{p + 1}</PaginationLink> <PaginationLink href="#">{p + 1}</PaginationLink>
</PaginationItem> </PaginationItem>
{/each} {/each}
<PaginationItem> <PaginationItem disabled={pageIndex === pageCount}>
<PaginationLink next href="#" /> <PaginationLink next href="#" />
</PaginationItem> </PaginationItem>
<PaginationItem> <PaginationItem disabled={pageIndex === pageCount}>
<PaginationLink last href="#" /> <PaginationLink last href="#" />
</PaginationItem> </PaginationItem>
</Pagination> </Pagination>

7
client/src/components/LogViewer.svelte
View File

@ -6,7 +6,10 @@
export let logs: Log[] = []; export let logs: Log[] = [];
export let page: number = 0; export let page: number = 0;
export let pages: number = 0; export let pages: number = 0;
export let pageSize: number = 0;
export let total: number = 0; export let total: number = 0;
export let onPageChange = (newPage: number, prevPage: number) =>
console.log(`${newPage} - ${prevPage}`);
$: pageSize = logs.length; $: pageSize = logs.length;
$: hasData = !!(logs && logs.length > 0); $: hasData = !!(logs && logs.length > 0);
@ -14,7 +17,7 @@
<section class="flex flex-column text-sm"> <section class="flex flex-column text-sm">
{#if hasData} {#if hasData}
<LogPager {page} {pages} pageLimit{pageSize} {total} /> <LogPager {onPageChange} {page} {pages} {pageSize} {total} />
<Table rows={logs} let:row hover bordered> <Table rows={logs} let:row hover bordered>
<Column header="Started"> <Column header="Started">
{row.Started} {row.Started}
@ -46,7 +49,7 @@
{row.TotalTimeMs} {row.TotalTimeMs}
</Column> </Column>
</Table> </Table>
<LogPager {page} {pages} pageLimit{pageSize} {total} /> <LogPager {onPageChange} {page} {pages} {pageSize} {total} />
{:else} {:else}
<p>No Logs yet!</p> <p>No Logs yet!</p>
<p> <p>

3
client/src/routes/Home.svelte
View File

@ -150,7 +150,8 @@
pages={pageCount} pages={pageCount}
page={logPage} page={logPage}
total={logCount} total={logCount}
bind:pageSize {pageSize}
onPageChange={console.log}
{logs} {logs}
/> />
{/if} {/if}