From 11ed661f86a512f78f66d604a10c1d47d39f2c39 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Wed, 16 Oct 2024 08:49:19 +0200
Subject: [PATCH] feat: use improve table for users and audit logs

---
 .../internal/controller/oidc_controller.go    |   4 +-
 .../src/lib/components/advanced-table.svelte  |   4 +
 .../settings/admin/users/user-list.svelte     | 170 ++++++------------
 .../settings/audit-log/audit-log-list.svelte  | 103 +++--------
 4 files changed, 87 insertions(+), 194 deletions(-)

diff --git a/backend/internal/controller/oidc_controller.go b/backend/internal/controller/oidc_controller.go
index 0bab3fb..8982c8a 100644
--- a/backend/internal/controller/oidc_controller.go
+++ b/backend/internal/controller/oidc_controller.go
@@ -18,7 +18,7 @@ func NewOidcController(group *gin.RouterGroup, jwtAuthMiddleware *middleware.Jwt
 
 	group.POST("/oidc/authorize", jwtAuthMiddleware.Add(false), oc.authorizeHandler)
 	group.POST("/oidc/authorize/new-client", jwtAuthMiddleware.Add(false), oc.authorizeNewClientHandler)
-	group.POST("/oidc/token", oc.createIDTokenHandler)
+	group.POST("/oidc/token", oc.createTokensHandler)
 	group.GET("/oidc/userinfo", oc.userInfoHandler)
 
 	group.GET("/oidc/clients", jwtAuthMiddleware.Add(true), oc.listClientsHandler)
@@ -91,7 +91,7 @@ func (oc *OidcController) authorizeNewClientHandler(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }
 
-func (oc *OidcController) createIDTokenHandler(c *gin.Context) {
+func (oc *OidcController) createTokensHandler(c *gin.Context) {
 	var input dto.OidcIdTokenDto
 
 	if err := c.ShouldBind(&input); err != nil {
diff --git a/frontend/src/lib/components/advanced-table.svelte b/frontend/src/lib/components/advanced-table.svelte
index 5016d44..8e73485 100644
--- a/frontend/src/lib/components/advanced-table.svelte
+++ b/frontend/src/lib/components/advanced-table.svelte
@@ -11,12 +11,14 @@
 	let {
 		items,
 		selectedIds = $bindable(),
+		withoutSearch = false,
 		fetchItems,
 		columns,
 		rows
 	}: {
 		items: Paginated<T>;
 		selectedIds?: string[];
+		withoutSearch?: boolean;
 		fetchItems: (search: string, page: number, limit: number) => Promise<Paginated<T>>;
 		columns: (string | { label: string; hidden?: boolean })[];
 		rows: Snippet<[{ item: T }]>;
@@ -65,12 +67,14 @@
 </script>
 
 <div class="w-full">
+	{#if !withoutSearch}
 	<Input
 		class="mb-4 max-w-sm"
 		placeholder={'Search...'}
 		type="text"
 		oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
 	/>
+	{/if}
 	<Table.Root>
 		<Table.Header>
 			<Table.Row>
diff --git a/frontend/src/routes/settings/admin/users/user-list.svelte b/frontend/src/routes/settings/admin/users/user-list.svelte
index 3bfbeab..b43b8cb 100644
--- a/frontend/src/routes/settings/admin/users/user-list.svelte
+++ b/frontend/src/routes/settings/admin/users/user-list.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Badge } from '$lib/components/ui/badge/index';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { Input } from '$lib/components/ui/input';
-	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Table from '$lib/components/ui/table';
 	import UserService from '$lib/services/user-service';
-	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+	import type { Paginated } from '$lib/types/pagination.type';
 	import type { User } from '$lib/types/user.type';
-	import { debounced } from '$lib/utils/debounce-util';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideLink, LucidePencil, LucideTrash } from 'lucide-svelte';
 	import Ellipsis from 'lucide-svelte/icons/ellipsis';
@@ -19,23 +17,17 @@
 
 	let { users: initialUsers }: { users: Paginated<User> } = $props();
 	let users = $state<Paginated<User>>(initialUsers);
-	let oneTimeLink = $state<string | null>(null);
-
 	$effect(() => {
 		users = initialUsers;
 	});
 
+	let oneTimeLink = $state<string | null>(null);
+
 	const userService = new UserService();
 
-	let pagination = $state<PaginationRequest>({
-		page: 1,
-		limit: 10
-	});
-	let search = $state('');
-
-	const debouncedSearch = debounced(async (searchValue: string) => {
-		users = await userService.list(searchValue, pagination);
-	}, 400);
+	function fetchItems(search: string, page: number, limit: number) {
+		return userService.list(search, { page, limit });
+	}
 
 	async function deleteUser(user: User) {
 		openConfirmDialog({
@@ -47,7 +39,7 @@
 				action: async () => {
 					try {
 						await userService.remove(user.id);
-						users = await userService.list(search, pagination);
+						users = await userService.list();
 					} catch (e) {
 						axiosErrorToast(e);
 					}
@@ -67,105 +59,51 @@
 	}
 </script>
 
-<Input
-	type="search"
-	placeholder="Search users"
-	bind:value={search}
-	on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
-/>
-<Table.Root>
-	<Table.Header>
-		<Table.Row>
-			<Table.Head class="hidden md:table-cell">First name</Table.Head>
-			<Table.Head class="hidden md:table-cell">Last name</Table.Head>
-			<Table.Head>Email</Table.Head>
-			<Table.Head>Username</Table.Head>
-			<Table.Head class="hidden lg:table-cell">Role</Table.Head>
-			<Table.Head>
-				<span class="sr-only">Actions</span>
-			</Table.Head>
-		</Table.Row>
-	</Table.Header>
-	<Table.Body>
-		{#if users.data.length === 0}
-			<Table.Row>
-				<Table.Cell colspan={6} class="text-center">No users found</Table.Cell>
-			</Table.Row>
-		{:else}
-			{#each users.data as user}
-				<Table.Row>
-					<Table.Cell class="hidden md:table-cell">{user.firstName}</Table.Cell>
-					<Table.Cell class="hidden md:table-cell">{user.lastName}</Table.Cell>
-					<Table.Cell>{user.email}</Table.Cell>
-					<Table.Cell>{user.username}</Table.Cell>
-					<Table.Cell class="hidden lg:table-cell">
-						<Badge variant="outline">{user.isAdmin ? 'Admin' : 'User'}</Badge>
-					</Table.Cell>
-					<Table.Cell>
-						<DropdownMenu.Root>
-							<DropdownMenu.Trigger asChild let:builder>
-								<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
-									<Ellipsis class="h-4 w-4" />
-									<span class="sr-only">Toggle menu</span>
-								</Button>
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content align="end">
-								<DropdownMenu.Item on:click={() => createOneTimeAccessToken(user.id)}
-									><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
-								>
-								<DropdownMenu.Item href="/settings/admin/users/{user.id}"
-									><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
-								>
-								<DropdownMenu.Item
-									class="text-red-500 focus:!text-red-700"
-									on:click={() => deleteUser(user)}
-									><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
-								>
-							</DropdownMenu.Content>
-						</DropdownMenu.Root>
-					</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
-
-{#if users?.data?.length ?? 0 > 0}
-	<Pagination.Root
-		class="mt-5"
-		count={users.pagination.totalItems}
-		perPage={pagination.limit}
-		onPageChange={async (p) =>
-			(users = await userService.list(search, {
-				page: p,
-				limit: pagination.limit
-			}))}
-		bind:page={users.pagination.currentPage}
-		let:pages
-		let:currentPage
-	>
-		<Pagination.Content class="flex justify-end">
-			<Pagination.Item>
-				<Pagination.PrevButton />
-			</Pagination.Item>
-			{#each pages as page (page.key)}
-				{#if page.type === 'ellipsis'}
-					<Pagination.Item>
-						<Pagination.Ellipsis />
-					</Pagination.Item>
-				{:else}
-					<Pagination.Item>
-						<Pagination.Link {page} isActive={users.pagination.currentPage === page.value}>
-							{page.value}
-						</Pagination.Link>
-					</Pagination.Item>
-				{/if}
-			{/each}
-			<Pagination.Item>
-				<Pagination.NextButton />
-			</Pagination.Item>
-		</Pagination.Content>
-	</Pagination.Root>
-{/if}
+<AdvancedTable
+	items={users}
+	{fetchItems}
+	columns={[
+		'First name',
+		'Last name',
+		'Email',
+		'Username',
+		'Role',
+		{ label: 'Actions', hidden: true }
+	]}
+	withoutSearch
+>
+	{#snippet rows({ item })}
+		<Table.Cell>{item.firstName}</Table.Cell>
+		<Table.Cell>{item.lastName}</Table.Cell>
+		<Table.Cell>{item.email}</Table.Cell>
+		<Table.Cell>{item.username}</Table.Cell>
+		<Table.Cell class="hidden lg:table-cell">
+			<Badge variant="outline">{item.isAdmin ? 'Admin' : 'User'}</Badge>
+		</Table.Cell>
+		<Table.Cell>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger asChild let:builder>
+					<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
+						<Ellipsis class="h-4 w-4" />
+						<span class="sr-only">Toggle menu</span>
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end">
+					<DropdownMenu.Item on:click={() => createOneTimeAccessToken(item.id)}
+						><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
+					>
+					<DropdownMenu.Item href="/settings/admin/users/{item.id}"
+						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
+					>
+					<DropdownMenu.Item
+						class="text-red-500 focus:!text-red-700"
+						on:click={() => deleteUser(item)}
+						><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
+					>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Table.Cell>
+	{/snippet}
+</AdvancedTable>
 
 <OneTimeLinkModal {oneTimeLink} />
diff --git a/frontend/src/routes/settings/audit-log/audit-log-list.svelte b/frontend/src/routes/settings/audit-log/audit-log-list.svelte
index f12bd8c..603eaaf 100644
--- a/frontend/src/routes/settings/audit-log/audit-log-list.svelte
+++ b/frontend/src/routes/settings/audit-log/audit-log-list.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { Badge } from '$lib/components/ui/badge';
-	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Table from '$lib/components/ui/table';
 	import AuditLogService from '$lib/services/audit-log-service';
 	import type { AuditLog } from '$lib/types/audit-log.type';
-	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+	import type { Paginated } from '$lib/types/pagination.type';
 
 	let { auditLogs: initialAuditLog }: { auditLogs: Paginated<AuditLog> } = $props();
 	let auditLogs = $state<Paginated<AuditLog>>(initialAuditLog);
 
 	const auditLogService = new AuditLogService();
 
-	let pagination = $state<PaginationRequest>({
-		page: 1,
-		limit: 15
-	});
+	async function fetchItems(search: string, page: number, limit: number) {
+		return await auditLogService.list({
+			page,
+			limit
+		});
+	}
 
 	function toFriendlyEventString(event: string) {
 		const words = event.split('_');
@@ -25,73 +27,22 @@
 	}
 </script>
 
-<Table.Root>
-	<Table.Header class="whitespace-nowrap">
-		<Table.Row>
-			<Table.Head>Time</Table.Head>
-			<Table.Head>Event</Table.Head>
-			<Table.Head>Approximate Location</Table.Head>
-			<Table.Head>IP Address</Table.Head>
-			<Table.Head>Device</Table.Head>
-			<Table.Head>Client</Table.Head>
-		</Table.Row>
-	</Table.Header>
-	<Table.Body class="whitespace-nowrap">
-		{#if auditLogs.data.length === 0}
-			<Table.Row>
-				<Table.Cell colspan={6} class="text-center">No logs found</Table.Cell>
-			</Table.Row>
-		{:else}
-			{#each auditLogs.data as auditLog}
-				<Table.Row>
-					<Table.Cell>{new Date(auditLog.createdAt).toLocaleString()}</Table.Cell>
-					<Table.Cell>
-						<Badge variant="outline">{toFriendlyEventString(auditLog.event)}</Badge>
-					</Table.Cell>
-					<Table.Cell>{auditLog.city && auditLog.country ? `${auditLog.city}, ${auditLog.country}` : 'Unknown'}</Table.Cell>
-					<Table.Cell>{auditLog.ipAddress}</Table.Cell>
-					<Table.Cell>{auditLog.device}</Table.Cell>
-					<Table.Cell>{auditLog.data.clientName}</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
-
-{#if auditLogs?.data?.length ?? 0 > 0}
-	<Pagination.Root
-		class="mt-5"
-		count={auditLogs.pagination.totalItems}
-		perPage={pagination.limit}
-		onPageChange={async (p) =>
-			(auditLogs = await auditLogService.list({
-				page: p,
-				limit: pagination.limit
-			}))}
-		bind:page={auditLogs.pagination.currentPage}
-		let:pages
-		let:currentPage
-	>
-		<Pagination.Content class="flex justify-end">
-			<Pagination.Item>
-				<Pagination.PrevButton />
-			</Pagination.Item>
-			{#each pages as page (page.key)}
-				{#if page.type === 'ellipsis'}
-					<Pagination.Item>
-						<Pagination.Ellipsis />
-					</Pagination.Item>
-				{:else}
-					<Pagination.Item>
-						<Pagination.Link {page} isActive={auditLogs.pagination.currentPage === page.value}>
-							{page.value}
-						</Pagination.Link>
-					</Pagination.Item>
-				{/if}
-			{/each}
-			<Pagination.Item>
-				<Pagination.NextButton />
-			</Pagination.Item>
-		</Pagination.Content>
-	</Pagination.Root>
-{/if}
+<AdvancedTable
+	items={auditLogs}
+	{fetchItems}
+	columns={['Time', 'Event', 'Approximate Location', 'IP Address', 'Device', 'Client']}
+	withoutSearch
+>
+	{#snippet rows({ item })}
+		<Table.Cell>{new Date(item.createdAt).toLocaleString()}</Table.Cell>
+		<Table.Cell>
+			<Badge variant="outline">{toFriendlyEventString(item.event)}</Badge>
+		</Table.Cell>
+		<Table.Cell
+			>{item.city && item.country ? `${item.city}, ${item.country}` : 'Unknown'}</Table.Cell
+		>
+		<Table.Cell>{item.ipAddress}</Table.Cell>
+		<Table.Cell>{item.device}</Table.Cell>
+		<Table.Cell>{item.data.clientName}</Table.Cell>
+	{/snippet}
+</AdvancedTable>