fix: default sorting on tables (#299)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/admin/oidc-clients/+page.server.ts

@@ -1,9 +1,24 @@
 import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import OIDCService from '$lib/services/oidc-service';
+import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ cookies }) => {
 	const oidcService = new OIDCService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const clients = await oidcService.listClients();
+
+	// Create request options with default sorting
+	const requestOptions: SearchPaginationSortRequest = {
+		sort: {
+			column: 'name',
+			direction: 'asc'
+		},
+		pagination: {
+			page: 1,
+			limit: 10
+		}
+	};
+
+	const clients = await oidcService.listClients(requestOptions);
+
 	return clients;
 };

frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte

@@ -11,10 +11,20 @@
 	import { toast } from 'svelte-sonner';
 	import OneTimeLinkModal from './client-secret.svelte';
 
-	let { clients: initialClients }: { clients: Paginated<OidcClient> } = $props();
+	let {
+		clients: initialClients
+	}: {
+		clients: Paginated<OidcClient>;
+	} = $props();
 	let clients = $state<Paginated<OidcClient>>(initialClients);
 	let oneTimeLink = $state<string | null>(null);
-	let requestOptions: SearchPaginationSortRequest | undefined = $state();
+	let requestOptions: SearchPaginationSortRequest | undefined = $state({
+		sort: { column: 'name', direction: 'asc' },
+		pagination: {
+			page: initialClients.pagination.currentPage,
+			limit: initialClients.pagination.itemsPerPage
+		}
+	});
 
 	$effect(() => {
 		clients = initialClients;
@@ -46,6 +56,7 @@
 <AdvancedTable
 	items={clients}
 	{requestOptions}
+	defaultSort={{ column: 'name', direction: 'asc' }}
 	onRefresh={async (o) => (clients = await oidcService.listClients(o))}
 	columns={[
 		{ label: 'Logo' },

frontend/src/routes/settings/admin/user-groups/+page.server.ts

@@ -1,9 +1,23 @@
 import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import UserGroupService from '$lib/services/user-group-service';
+import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ cookies }) => {
 	const userGroupService = new UserGroupService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const userGroups = await userGroupService.list();
+
+	// Create request options with default sorting
+	const requestOptions: SearchPaginationSortRequest = {
+		sort: {
+			column: 'friendlyName',
+			direction: 'asc'
+		},
+		pagination: {
+			page: 1,
+			limit: 10
+		}
+	};
+
+	const userGroups = await userGroupService.list(requestOptions);
 	return userGroups;
 };

frontend/src/routes/settings/admin/user-groups/user-group-list.svelte

@@ -18,7 +18,13 @@
 		$props();
 
 	let userGroups = $state<Paginated<UserGroupWithUserCount>>(initialUserGroups);
-	let requestOptions: SearchPaginationSortRequest | undefined = $state();
+	let requestOptions: SearchPaginationSortRequest | undefined = $state({
+		sort: { column: 'friendlyName', direction: 'asc' },
+		pagination: {
+			page: initialUserGroups.pagination.currentPage,
+			limit: initialUserGroups.pagination.itemsPerPage
+		}
+	});
 
 	const userGroupService = new UserGroupService();
 
@@ -47,6 +53,7 @@
 	items={userGroups}
 	onRefresh={async (o) => (userGroups = await userGroupService.list(o))}
 	{requestOptions}
+	defaultSort={{ column: 'friendlyName', direction: 'asc' }}
 	columns={[
 		{ label: 'Friendly Name', sortColumn: 'friendlyName' },
 		{ label: 'Name', sortColumn: 'name' },

frontend/src/routes/settings/admin/user-groups/user-selection.svelte

@@ -2,7 +2,7 @@
 	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import * as Table from '$lib/components/ui/table';
 	import UserService from '$lib/services/user-service';
-	import type { Paginated } from '$lib/types/pagination.type';
+	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import type { User } from '$lib/types/user.type';
 
 	let {
@@ -10,15 +10,24 @@
 		selectionDisabled = false,
 		selectedUserIds = $bindable()
 	}: { users: Paginated<User>; selectionDisabled?: boolean; selectedUserIds: string[] } = $props();
+	let requestOptions: SearchPaginationSortRequest | undefined = $state({
+		sort: { column: 'friendlyName', direction: 'asc' },
+		pagination: {
+			page: initialUsers.pagination.currentPage,
+			limit: initialUsers.pagination.itemsPerPage
+		}
+	});
+
+	let users = $state<Paginated<User>>(initialUsers);
 
 	const userService = new UserService();
-
-	let users = $state(initialUsers);
 </script>
 
 <AdvancedTable
 	items={users}
 	onRefresh={async (o) => (users = await userService.list(o))}
+	{requestOptions}
+	defaultSort={{ column: 'name', direction: 'asc' }}
 	columns={[
 		{ label: 'Name', sortColumn: 'name' },
 		{ label: 'Email', sortColumn: 'email' }

frontend/src/routes/settings/admin/users/+page.server.ts

@@ -1,9 +1,23 @@
 import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import UserService from '$lib/services/user-service';
+import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ cookies }) => {
 	const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const users = await userService.list();
+
+	// Create request options with default sorting
+	const requestOptions: SearchPaginationSortRequest = {
+		sort: {
+			column: 'firstName',
+			direction: 'asc'
+		},
+		pagination: {
+			page: 1,
+			limit: 10
+		}
+	};
+
+	const users = await userService.list(requestOptions);
 	return users;
 };

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -17,10 +17,17 @@
 	import OneTimeLinkModal from './one-time-link-modal.svelte';
 
 	let { users = $bindable() }: { users: Paginated<User> } = $props();
-	let requestOptions: SearchPaginationSortRequest | undefined = $state();
 
 	let userIdToCreateOneTimeLink: string | null = $state(null);
 
+	let requestOptions: SearchPaginationSortRequest | undefined = $state({
+		sort: { column: 'firstName', direction: 'asc' },
+		pagination: {
+			page: users.pagination.currentPage,
+			limit: users.pagination.itemsPerPage
+		}
+	});
+
 	const userService = new UserService();
 
 	async function deleteUser(user: User) {
@@ -47,6 +54,7 @@
 <AdvancedTable
 	items={users}
 	{requestOptions}
+	defaultSort={{ column: 'firstName', direction: 'asc' }}
 	onRefresh={async (options) => (users = await userService.list(options))}
 	columns={[
 		{ label: 'First name', sortColumn: 'firstName' },