pagination

client/src/components/LogPager.svelte

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

client/src/components/LogViewer.svelte

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

client/src/routes/Home.svelte

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