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;

src/routes/admin/reports/+server.ts

@@ -92,6 +92,7 @@ export const PATCH = (async ({ request, cookies }) => {
 
 	const data: {
 		id: number;
+		reported: string | null;
 		auditor: number;
 		notice: string | null;
 		statement: string | null;
@@ -102,9 +103,13 @@ export const PATCH = (async ({ request, cookies }) => {
 
 	const report = await Report.findOne({ where: { id: data.id } });
 	const admin = await Admin.findOne({ where: { id: data.auditor } });
-	if (report === null || (admin === null && data.auditor != -1))
+	const reported = data.reported
+		? await User.findOne({ where: { uuid: data.reported } })
+		: undefined;
+	if (report === null || (admin === null && data.auditor != -1) || reported === null)
 		return new Response(null, { status: 400 });
 
+	report.reported_id = reported?.id || null;
 	if (data.notice != null) report.notice = data.notice;
 	if (data.statement != null) report.statement = data.statement;
 	if (data.status != null) report.status = data.status;
@@ -115,7 +120,7 @@ export const PATCH = (async ({ request, cookies }) => {
 	return new Response();
 }) satisfies RequestHandler;
 
-export const PUT = (async ({ request, cookies, url }) => {
+export const PUT = (async ({ request, cookies }) => {
 	if (getSession(cookies, { permissions: [Permissions.ReportWrite] }) == null) {
 		return new Response(null, {
 			status: 401
@@ -124,23 +129,18 @@ export const PUT = (async ({ request, cookies, url }) => {
 
 	const data: {
 		reporter: string;
-		reported: string;
+		reported: string | null;
 		reason: string;
 		body: string | null;
 	} = await request.json();
 
-	if (
-		data.reporter == null ||
-		data.reported == null ||
-		data.reason == null ||
-		data.body === undefined
-	)
+	if (data.reporter == null || data.reason == null || data.body === undefined)
 		return new Response(null, { status: 400 });
 
 	const reporter = await User.findOne({ where: { uuid: data.reporter } });
-	const reported = await User.findOne({ where: { uuid: data.reported } });
+	const reported = data.reported ? await User.findOne({ where: { uuid: data.reported } }) : null;
 
-	if (reporter == null || reported == null) return new Response(null, { status: 400 });
+	if (reporter == null) return new Response(null, { status: 400 });
 
 	const report = await Report.create({
 		subject: data.reason,
@@ -150,10 +150,12 @@ export const PUT = (async ({ request, cookies, url }) => {
 		url_hash: crypto.randomBytes(18).toString('hex'),
 		completed: false,
 		reporter_id: reporter.id,
-		reported_id: reported.id
+		reported_id: reported?.id || null
 	});
 	report.dataValues.reporter = await User.findOne({ where: { id: report.reporter_id } });
-	report.dataValues.reported = await User.findOne({ where: { id: report.reported_id } });
+	report.dataValues.reported = report.reported_id
+		? await User.findOne({ where: { id: report.reported_id } })
+		: null;
 	report.dataValues.auditor = null;
 
 	return new Response(JSON.stringify(report), {

src/routes/admin/reports/NewReportModal.svelte

@@ -4,6 +4,7 @@
 	import Textarea from '$lib/components/Input/Textarea.svelte';
 	import Search from '$lib/components/Input/Search.svelte';
 	import { createEventDispatcher } from 'svelte';
+	import { usernameSuggestions } from '$lib/utils';
 
 	const dispatch = createEventDispatcher();
 
@@ -12,27 +13,12 @@
 	let reason = '';
 	let body = '';
 
-	async function usernameSuggestions(username: string): Promise<{ name: string; value: string }[]> {
-		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
-			method: 'POST',
-			body: JSON.stringify({
-				limit: 6,
-				search: username,
-				slim: true
-			})
-		});
-		const json: { username: string; uuid: string }[] = await response.json();
-		return json.map((v) => {
-			return { name: v.username, value: v.uuid };
-		});
-	}
-
 	async function newReport() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
 			method: 'PUT',
 			body: JSON.stringify({
 				reporter: reporter,
-				reported: reported,
+				reported: reported || null,
 				reason: reason,
 				body: body || null
 			})
@@ -66,10 +52,10 @@
 			<Search
 				size="sm"
 				suggestionRequired={true}
+				emptyAllowed={true}
 				searchSuggestionFunc={usernameSuggestions}
 				invalidMessage="Es können nur registrierte Spieler reportet werden"
 				label="Reporteter User"
-				required={true}
 				bind:value={reported}
 			/>
 		</div>