make reported user nullable

src/routes/admin/reports/+page.svelte

@@ -13,6 +13,8 @@
 	import NewReportModal from './NewReportModal.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { goto } from '$app/navigation';
+	import Search from '$lib/components/Input/Search.svelte';
+	import { usernameSuggestions } from '$lib/utils';
 
 	export let data: PageData;
 
@@ -83,7 +85,8 @@
 				auditor: data.self?.id || -1,
 				notice: activeReport.notice || '',
 				statement: activeReport.statement || '',
-				status: activeReport.status
+				status: activeReport.status,
+				reported: activeReport.reported?.uuid || null
 			})
 		});
 	}
@@ -93,7 +96,7 @@
 </script>
 
 <div class="h-screen flex flex-row">
-	<div class="w-full flex flex-col">
+	<div class="w-full flex flex-col overflow-scroll">
 		<HeaderBar bind:reportFilter />
 		<hr class="divider my-1 mx-8 border-none" />
 		<table class="table table-fixed h-fit">
@@ -140,14 +143,17 @@
 							</button>
 						</td>
 						<td>
-							{report.reported.username}
-							<button
-								class="pl-1"
-								title="Nach Reportetem Spieler filtern"
-								on:click|stopPropagation={() => (reportFilter.reported = report.reported.username)}
-							>
-								<IconOutline name="magnifying-glass-outline" width="14" height="14" />
-							</button>
+							{report.reported?.username || ''}
+							{#if report.reported?.id}
+								<button
+									class="pl-1"
+									title="Nach Reportetem Spieler filtern"
+									on:click|stopPropagation={() =>
+										(reportFilter.reported = report.reported.username)}
+								>
+									<IconOutline name="magnifying-glass-outline" width="14" height="14" />
+								</button>
+							{/if}
 						</td>
 						<td
 							>{new Intl.DateTimeFormat('de-DE', {
@@ -185,7 +191,7 @@
 	</div>
 	{#if activeReport}
 		<div
-			class="relative flex flex-col w-2/5 bg-base-200/50 px-4 py-6 overflow-scroll"
+			class="relative flex flex-col w-2/5 h-screen bg-base-200/50 px-4 py-6 overflow-scroll"
 			transition:fly={{ x: 200, duration: 200 }}
 		>
 			<div class="absolute right-2 top-2 flex justify-center">
@@ -226,19 +232,26 @@
 					}}>✕</button
 				>
 			</div>
-			<h3 class="font-roboto font-semibold text-2xl">Report</h3>
-			<div class="break-words my-2">
-				<i class="font-medium">{activeReport.reporter.username}</i> hat
-				<i class="font-medium">{activeReport.reported.username}</i>
-				am {new Intl.DateTimeFormat('de-DE', {
-					year: 'numeric',
-					month: 'long',
-					day: '2-digit',
-					hour: '2-digit',
-					minute: '2-digit'
-				}).format(new Date(activeReport.createdAt))} Uhr reportet.
-			</div>
+			<h3 class="font-roboto font-semibold text-2xl mb-2">Report</h3>
 			<div class="w-full">
+				<Input readonly={true} size="sm" value={activeReport.reporter.username} pickyWidth={false}>
+					<span slot="label">Reporter</span>
+				</Input>
+				<Search
+					size="sm"
+					suggestionRequired={true}
+					emptyAllowed={true}
+					searchSuggestionFunc={usernameSuggestions}
+					invalidMessage="Es können nur registrierte Spieler reportet werden"
+					label="Reporteter User"
+					inputValue={activeReport.reported?.username || ''}
+					on:submit={(e) =>
+						(activeReport.reported = {
+							...activeReport.reported,
+							username: e.detail.input,
+							uuid: e.detail.value
+						})}
+				/>
 				<Textarea readonly={true} rows={1} label="Report Grund" value={activeReport.subject} />
 				<Textarea readonly={true} rows={4} label="Report Details" value={activeReport.body} />
 			</div>
@@ -301,6 +314,11 @@
 				value="Speichern"
 				on:click={async () => {
 					await updateActiveReport();
+					if (activeReport.reported?.username && activeReport.reported?.id === undefined) {
+						activeReport.reported.id = -1;
+					} else {
+						activeReport.reported = undefined;
+					}
 					currentPageReports = [...currentPageReports];
 					if (activeReport.originalStatus !== 'reviewed' && activeReport.status === 'reviewed') {
 						$reportCount -= 1;