feat: add sorting for tables

frontend/src/lib/components/advanced-table.svelte

@@ -5,26 +5,44 @@
 	import * as Select from '$lib/components/ui/select';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import Empty from '$lib/icons/empty.svelte';
-	import type { Paginated } from '$lib/types/pagination.type';
+	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import { debounced } from '$lib/utils/debounce-util';
+	import { cn } from '$lib/utils/style';
+	import { ChevronDown } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
+	import Button from './ui/button/button.svelte';
 
 	let {
 		items,
+		requestOptions = $bindable(),
 		selectedIds = $bindable(),
 		withoutSearch = false,
-		fetchItems,
+		defaultSort,
+		onRefresh,
 		columns,
 		rows
 	}: {
 		items: Paginated<T>;
+		requestOptions?: SearchPaginationSortRequest;
 		selectedIds?: string[];
 		withoutSearch?: boolean;
-		fetchItems: (search: string, page: number, limit: number) => Promise<Paginated<T>>;
-		columns: (string | { label: string; hidden?: boolean })[];
+		defaultSort?: { column: string; direction: 'asc' | 'desc' };
+		onRefresh: (requestOptions: SearchPaginationSortRequest) => Promise<Paginated<T>>;
+		columns: { label: string; hidden?: boolean; sortColumn?: string }[];
 		rows: Snippet<[{ item: T }]>;
 	} = $props();
 
+	if (!requestOptions) {
+		requestOptions = {
+			search: '',
+			sort: defaultSort,
+			pagination: {
+				page: items.pagination.currentPage,
+				limit: items.pagination.itemsPerPage
+			}
+		};
+	}
+
 	let availablePageSizes: number[] = [10, 20, 50, 100];
 
 	let allChecked = $derived.by(() => {
@@ -38,7 +56,8 @@
 	});
 
 	const onSearch = debounced(async (searchValue: string) => {
-		items = await fetchItems(searchValue, 1, items.pagination.itemsPerPage);
+		requestOptions.search = searchValue;
+		onRefresh(requestOptions);
 	}, 300);
 
 	async function onAllCheck(checked: boolean) {
@@ -59,11 +78,20 @@
 	}
 
 	async function onPageChange(page: number) {
-		items = await fetchItems('', page, items.pagination.itemsPerPage);
+		requestOptions!.pagination = { limit: items.pagination.itemsPerPage, page };
+		onRefresh(requestOptions!);
 	}
 
 	async function onPageSizeChange(size: number) {
-		items = await fetchItems('', 1, size);
+		requestOptions!.pagination = { limit: size, page: 1 };
+		onRefresh(requestOptions!);
+	}
+
+	async function onSort(column?: string, direction: 'asc' | 'desc' = 'asc') {
+		if (!column) return;
+
+		requestOptions!.sort = { column, direction };
+		onRefresh(requestOptions!);
 	}
 </script>
 
@@ -92,11 +120,31 @@
 						</Table.Head>
 					{/if}
 					{#each columns as column}
-						{#if typeof column === 'string'}
-							<Table.Head>{column}</Table.Head>
-						{:else}
-							<Table.Head class={column.hidden ? 'sr-only' : ''}>{column.label}</Table.Head>
-						{/if}
+						<Table.Head class={cn(column.hidden && 'sr-only', column.sortColumn && 'px-0')}>
+							{#if column.sortColumn}
+								<Button
+									variant="ghost"
+									class="flex items-center"
+									on:click={() =>
+										onSort(
+											column.sortColumn,
+											requestOptions.sort?.direction === 'desc' ? 'asc' : 'desc'
+										)}
+								>
+									{column.label}
+									{#if requestOptions.sort?.column === column.sortColumn}
+										<ChevronDown
+											class={cn(
+												'ml-2 h-4 w-4',
+												requestOptions.sort?.direction === 'asc' ? 'rotate-180' : ''
+											)}
+										/>
+									{/if}
+								</Button>
+							{:else}
+								{column.label}
+							{/if}
+						</Table.Head>
 					{/each}
 				</Table.Row>
 			</Table.Header>

frontend/src/lib/services/audit-log-service.ts

@@ -1,11 +1,11 @@
 import type { AuditLog } from '$lib/types/audit-log.type';
-import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
 class AuditLogService extends APIService {
-	async list(pagination?: PaginationRequest) {
+	async list(options?: SearchPaginationSortRequest) {
 		const res = await this.api.get('/audit-logs', {
-			params: pagination
+			params: options
 		});
 		return res.data as Paginated<AuditLog>;
 	}

frontend/src/lib/services/oidc-service.ts

@@ -1,9 +1,16 @@
 import type { AuthorizeResponse, OidcClient, OidcClientCreate } from '$lib/types/oidc.type';
-import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
 class OidcService extends APIService {
-	async authorize(clientId: string, scope: string, callbackURL: string, nonce?: string, codeChallenge?: string, codeChallengeMethod?: string) {
+	async authorize(
+		clientId: string,
+		scope: string,
+		callbackURL: string,
+		nonce?: string,
+		codeChallenge?: string,
+		codeChallengeMethod?: string
+	) {
 		const res = await this.api.post('/oidc/authorize', {
 			scope,
 			nonce,
@@ -16,7 +23,14 @@ class OidcService extends APIService {
 		return res.data as AuthorizeResponse;
 	}
 
-	async authorizeNewClient(clientId: string, scope: string, callbackURL: string, nonce?: string, codeChallenge?: string, codeChallengeMethod?: string) {
+	async authorizeNewClient(
+		clientId: string,
+		scope: string,
+		callbackURL: string,
+		nonce?: string,
+		codeChallenge?: string,
+		codeChallengeMethod?: string
+	) {
 		const res = await this.api.post('/oidc/authorize/new-client', {
 			scope,
 			nonce,
@@ -29,12 +43,9 @@ class OidcService extends APIService {
 		return res.data as AuthorizeResponse;
 	}
 
-	async listClients(search?: string, pagination?: PaginationRequest) {
+	async listClients(options?: SearchPaginationSortRequest) {
 		const res = await this.api.get('/oidc/clients', {
-			params: {
-				search,
-				...pagination
-			}
+			params: options
 		});
 		return res.data as Paginated<OidcClient>;
 	}

frontend/src/lib/services/user-group-service.ts

@@ -1,4 +1,4 @@
-import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type {
 	UserGroupCreate,
 	UserGroupWithUserCount,
@@ -7,12 +7,9 @@ import type {
 import APIService from './api-service';
 
 export default class UserGroupService extends APIService {
-	async list(search?: string, pagination?: PaginationRequest) {
+	async list(options?: SearchPaginationSortRequest) {
 		const res = await this.api.get('/user-groups', {
-			params: {
-				search,
-				...pagination
-			}
+			params: options
 		});
 		return res.data as Paginated<UserGroupWithUserCount>;
 	}

frontend/src/lib/services/user-service.ts

@@ -1,14 +1,11 @@
-import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type { User, UserCreate } from '$lib/types/user.type';
 import APIService from './api-service';
 
 export default class UserService extends APIService {
-	async list(search?: string, pagination?: PaginationRequest) {
+	async list(options?: SearchPaginationSortRequest) {
 		const res = await this.api.get('/users', {
-			params: {
-				search,
-				...pagination
-			}
+			params: options
 		});
 		return res.data as Paginated<User>;
 	}

frontend/src/lib/types/pagination.type.ts

@@ -3,6 +3,17 @@ export type PaginationRequest = {
 	limit: number;
 };
 
+export type SortRequest = {
+	column: string;
+	direction: "asc" | "desc";
+};
+
+export type SearchPaginationSortRequest = {
+	search?: string,
+	pagination?: PaginationRequest;
+	sort?: SortRequest;
+}
+
 export type PaginationResponse = {
 	totalPages: number;
 	totalItems: number;