feat: display groups on the account page (#296)

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	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 { UserGroup } from '$lib/types/user-group.type';
+
+	let {
+		groups: initialGroups,
+		selectionDisabled = false,
+		selectedGroupIds = $bindable()
+	}: {
+		groups: Paginated<UserGroup>;
+		selectionDisabled?: boolean;
+		selectedGroupIds: string[];
+	} = $props();
+
+	const userGroupService = new UserGroupService();
+
+	let groups = $state(initialGroups);
+</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>

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

@@ -1,4 +1,5 @@
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
+import type { UserGroup } from '$lib/types/user-group.type';
 import type { User, UserCreate } from '$lib/types/user.type';
 import APIService from './api-service';
 
@@ -25,6 +26,11 @@ export default class UserService extends APIService {
 		return res.data as User;
 	}
 
+	async getUserGroups(userId: string) {
+		const res = await this.api.get(`/users/${userId}/groups`);
+		return res.data as UserGroup[];
+	}
+
 	async update(id: string, user: UserCreate) {
 		const res = await this.api.put(`/users/${id}`, user);
 		return res.data as User;
@@ -69,4 +75,9 @@ export default class UserService extends APIService {
 	async requestOneTimeAccessEmail(email: string, redirectPath?: string) {
 		await this.api.post('/one-time-access-email', { email, redirectPath });
 	}
+
+	async updateUserGroups(id: string, userGroupIds: string[]) {
+		const res = await this.api.put(`/users/${id}/user-groups`, { userGroupIds });
+		return res.data as User;
+	}
 }

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

@@ -1,4 +1,5 @@
 import type { CustomClaim } from './custom-claim.type';
+import type { UserGroup } from './user-group.type';
 
 export type User = {
 	id: string;
@@ -7,6 +8,7 @@ export type User = {
 	firstName: string;
 	lastName: string;
 	isAdmin: boolean;
+	userGroups: UserGroup[];
 	customClaims: CustomClaim[];
 	ldapId?: string;
 };