Merge pull request #46 from aleksasiriski/as/fix/search-pagination

fix(search): pagination
studentinovisad · Dec 14, 2024 · 4c3661e · 4c3661e
2 parents 68e81ba + 1a2c108
commit 4c3661e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/src/routes/(dashboard)/+page.server.ts b/src/routes/(dashboard)/+page.server.ts
@@ -8,8 +8,7 @@ import { deleteSessionTokenCookie } from '$lib/server/session';
 
 export const load: PageServerLoad = async ({ url }) => {
 	try {
-		// TODO: Implement pagination
-		const limit = 10;
+		const limit = 1000;
 		const offset = 0;
 
 		const studentLimit = Math.round(limit / 2);

diff --git a/src/routes/(dashboard)/+page.svelte b/src/routes/(dashboard)/+page.svelte
@@ -20,7 +20,6 @@
 		searchBox?.submit();
 	}}
 >
-	<!--reset needs to be changed !!!!!-->
 	<div class="flex gap-2 px-4 py-2">
 		<Input id="search" class="max-w-xs" placeholder="Search..." name="q" value={searchQuery} />
 		<Button type="submit" size="icon" class="flex-shrink-0">

diff --git a/src/routes/(dashboard)/data-table-actions.svelte b/src/routes/(dashboard)/data-table-actions.svelte
@@ -7,7 +7,7 @@
 	let { id, type }: { id: number; type: string } = $props();
 </script>
 
-<form action="?/togglestate" method="POST" use:enhance class="w-full">
+<form method="POST" action="?/togglestate" class="w-full" use:enhance>
 	<Input type="hidden" name="type" value={type} />
 	<Button variant="outline" type="submit" name="id" value={id} class="w-full">
 		<ArrowLeftRight /> <span class="hidden sm:block">Toggle State</span>

diff --git a/src/routes/(dashboard)/data-table.svelte b/src/routes/(dashboard)/data-table.svelte
@@ -1,7 +1,13 @@
 <script lang="ts" generics="TData, TValue">
-	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import {
+		type ColumnDef,
+		getCoreRowModel,
+		getPaginationRowModel,
+		type PaginationState
+	} from '@tanstack/table-core';
 	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
 	import * as Table from '$lib/components/ui/table/index.js';
+	import Button from '$lib/components/ui/button/button.svelte';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -10,12 +16,27 @@
 
 	let { data, columns }: DataTableProps<TData, TValue> = $props();
 
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+
 	const table = createSvelteTable({
 		get data() {
 			return data;
 		},
 		columns,
-		getCoreRowModel: getCoreRowModel()
+		state: {
+			get pagination() {
+				return pagination;
+			}
+		},
+		onPaginationChange: (updater) => {
+			if (typeof updater === 'function') {
+				pagination = updater(pagination);
+			} else {
+				pagination = updater;
+			}
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel()
 	});
 </script>
 
@@ -58,3 +79,21 @@
 		</Table.Body>
 	</Table.Root>
 </div>
+<div class="flex items-center justify-center space-x-2 py-4">
+	<Button
+		variant="outline"
+		size="sm"
+		onclick={() => table.previousPage()}
+		disabled={!table.getCanPreviousPage()}
+	>
+		Previous
+	</Button>
+	<Button
+		variant="outline"
+		size="sm"
+		onclick={() => table.nextPage()}
+		disabled={!table.getCanNextPage()}
+	>
+		Next
+	</Button>
+</div>