fix: make sorting consistent around tables

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

@@ -18,35 +18,21 @@
 		selectedIds = $bindable(),
 		withoutSearch = false,
 		selectionDisabled = false,
-		defaultSort,
 		onRefresh,
 		columns,
 		rows
 	}: {
 		items: Paginated<T>;
-		requestOptions?: SearchPaginationSortRequest;
+		requestOptions: SearchPaginationSortRequest;
 		selectedIds?: string[];
 		withoutSearch?: boolean;
 		selectionDisabled?: 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();
 
 	let searchValue = $state('');
-
-	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(() => {
@@ -83,20 +69,20 @@
 	}
 
 	async function onPageChange(page: number) {
-		requestOptions!.pagination = { limit: items.pagination.itemsPerPage, page };
-		onRefresh(requestOptions!);
+		requestOptions.pagination = { limit: items.pagination.itemsPerPage, page };
+		onRefresh(requestOptions);
 	}
 
 	async function onPageSizeChange(size: number) {
-		requestOptions!.pagination = { limit: size, page: 1 };
-		onRefresh(requestOptions!);
+		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!);
+		requestOptions.sort = { column, direction };
+		onRefresh(requestOptions);
 	}
 </script>
 

frontend/src/lib/components/user-group-selection.svelte

@@ -2,32 +2,44 @@
 	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import * as Table from '$lib/components/ui/table';
 	import UserGroupService from '$lib/services/user-group-service';
-	import type { Paginated } from '$lib/types/pagination.type';
+	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import type { UserGroup } from '$lib/types/user-group.type';
+	import { onMount } from 'svelte';
 
 	let {
-		groups: initialGroups,
 		selectionDisabled = false,
 		selectedGroupIds = $bindable()
 	}: {
-		groups: Paginated<UserGroup>;
 		selectionDisabled?: boolean;
 		selectedGroupIds: string[];
 	} = $props();
 
 	const userGroupService = new UserGroupService();
 
-	let groups = $state(initialGroups);
+	let groups: Paginated<UserGroup> | undefined = $state();
+	let requestOptions: SearchPaginationSortRequest = $state({
+		sort: {
+			column: 'friendlyName',
+			direction: 'asc'
+		}
+	});
+
+	onMount(async () => {
+		groups = await userGroupService.list(requestOptions);
+	});
 </script>
 
-<AdvancedTable
-	items={groups}
-	onRefresh={async (o) => (groups = await userGroupService.list(o))}
-	columns={[{ label: 'Name', sortColumn: 'name' }]}
-	bind:selectedIds={selectedGroupIds}
-	{selectionDisabled}
->
-	{#snippet rows({ item })}
-		<Table.Cell>{item.name}</Table.Cell>
-	{/snippet}
-</AdvancedTable>
+{#if groups}
+	<AdvancedTable
+		items={groups}
+		{requestOptions}
+		onRefresh={async (o) => (groups = await userGroupService.list(o))}
+		columns={[{ label: 'Name', sortColumn: 'friendlyName' }]}
+		bind:selectedIds={selectedGroupIds}
+		{selectionDisabled}
+	>
+		{#snippet rows({ item })}
+			<Table.Cell>{item.name}</Table.Cell>
+		{/snippet}
+	</AdvancedTable>
+{/if}