fix: make sorting consistent around tables

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

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

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

@@ -13,7 +13,8 @@
 	import UserGroupList from './user-group-list.svelte';
 
 	let { data } = $props();
-	let userGroups: Paginated<UserGroupWithUserCount> = $state(data);
+	let userGroups = $state(data.userGroups);
+	let userGroupsRequestOptions = $state(data.userGroupsRequestOptions);
 	let expandAddUserGroup = $state(false);
 
 	const userGroupService = new UserGroupService();
@@ -68,6 +69,6 @@
 		<Card.Title>Manage User Groups</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<UserGroupList {userGroups} />
+		<UserGroupList {userGroups} requestOptions={userGroupsRequestOptions} />
 	</Card.Content>
 </Card.Root>

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -6,14 +6,13 @@
 	import * as Card from '$lib/components/ui/card';
 	import CustomClaimService from '$lib/services/custom-claim-service';
 	import UserGroupService from '$lib/services/user-group-service';
-	import UserService from '$lib/services/user-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { UserGroupCreate } from '$lib/types/user-group.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideChevronLeft } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import UserGroupForm from '../user-group-form.svelte';
 	import UserSelection from '../user-selection.svelte';
-	import appConfigStore from '$lib/stores/application-configuration-store';
 
 	let { data } = $props();
 	let userGroup = $state({
@@ -22,7 +21,6 @@
 	});
 
 	const userGroupService = new UserGroupService();
-	const userService = new UserService();
 	const customClaimService = new CustomClaimService();
 
 	async function updateUserGroup(updatedUserGroup: UserGroupCreate) {
@@ -86,16 +84,14 @@
 	</Card.Header>
 
 	<Card.Content>
-		{#await userService.list() then users}
-			<UserSelection
-				{users}
-				bind:selectedUserIds={userGroup.userIds}
-				selectionDisabled={!!userGroup.ldapId && $appConfigStore.ldapEnabled}
-			/>
-		{/await}
+		<UserSelection
+			bind:selectedUserIds={userGroup.userIds}
+			selectionDisabled={!!userGroup.ldapId && $appConfigStore.ldapEnabled}
+		/>
 		<div class="mt-5 flex justify-end">
-			<Button disabled={!!userGroup.ldapId && $appConfigStore.ldapEnabled} on:click={() => updateUserGroupUsers(userGroup.userIds)}
-				>Save</Button
+			<Button
+				disabled={!!userGroup.ldapId && $appConfigStore.ldapEnabled}
+				on:click={() => updateUserGroupUsers(userGroup.userIds)}>Save</Button
 			>
 		</div>
 	</Card.Content>

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

@@ -14,17 +14,13 @@
 	import Ellipsis from 'lucide-svelte/icons/ellipsis';
 	import { toast } from 'svelte-sonner';
 
-	let { userGroups: initialUserGroups }: { userGroups: Paginated<UserGroupWithUserCount> } =
-		$props();
-
-	let userGroups = $state<Paginated<UserGroupWithUserCount>>(initialUserGroups);
-	let requestOptions: SearchPaginationSortRequest | undefined = $state({
-		sort: { column: 'friendlyName', direction: 'asc' },
-		pagination: {
-			page: initialUserGroups.pagination.currentPage,
-			limit: initialUserGroups.pagination.itemsPerPage
-		}
-	});
+	let {
+		userGroups,
+		requestOptions
+	}: {
+		userGroups: Paginated<UserGroupWithUserCount>;
+		requestOptions: SearchPaginationSortRequest;
+	} = $props();
 
 	const userGroupService = new UserGroupService();
 
@@ -53,7 +49,6 @@
 	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

@@ -4,39 +4,46 @@
 	import UserService from '$lib/services/user-service';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import type { User } from '$lib/types/user.type';
+	import { onMount } from 'svelte';
 
 	let {
-		users: initialUsers,
 		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
+	}: {
+		selectionDisabled?: boolean;
+		selectedUserIds: string[];
+	} = $props();
+
+	const userService = new UserService();
+
+	let users: Paginated<User> | undefined = $state();
+	let requestOptions: SearchPaginationSortRequest = $state({
+		sort: {
+			column: 'firstName',
+			direction: 'asc'
 		}
 	});
 
-	let users = $state<Paginated<User>>(initialUsers);
-
-	const userService = new UserService();
+	onMount(async () => {
+		users = await userService.list(requestOptions);
+	});
 </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' }
-	]}
-	bind:selectedIds={selectedUserIds}
-	{selectionDisabled}
->
-	{#snippet rows({ item })}
-		<Table.Cell>{item.firstName} {item.lastName}</Table.Cell>
-		<Table.Cell>{item.email}</Table.Cell>
-	{/snippet}
-</AdvancedTable>
+{#if users}
+	<AdvancedTable
+		items={users}
+		onRefresh={async (o) => (users = await userService.list(o))}
+		{requestOptions}
+		columns={[
+			{ label: 'Name', sortColumn: 'firstName' },
+			{ label: 'Email', sortColumn: 'email' }
+		]}
+		bind:selectedIds={selectedUserIds}
+		{selectionDisabled}
+	>
+		{#snippet rows({ item })}
+			<Table.Cell>{item.firstName} {item.lastName}</Table.Cell>
+			<Table.Cell>{item.email}</Table.Cell>
+		{/snippet}
+	</AdvancedTable>
+{/if}