add ability to set reported user after report creation (#17)

src/routes/report/[...url_hash]/ReportDraft.svelte

@@ -4,34 +4,78 @@
 	import { env } from '$env/dynamic/public';
 	import { page } from '$app/stores';
 	import { createEventDispatcher } from 'svelte';
+	import Search from '$lib/components/Input/Search.svelte';
+	import Select from '$lib/components/Input/Select.svelte';
 
 	export let reporterName: string;
 	export let reportedName: string | null;
 	export let reason: string;
+	export let users: string[];
+
+	let oldReported = reportedName;
+	$: reportedName = oldReported;
 
 	let body: string;
+	let userErrorModal: HTMLDialogElement;
+	let submitModal: HTMLDialogElement;
+
+	let dispatch = createEventDispatcher();
 
 	async function submitReport() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
 			method: 'POST',
 			body: JSON.stringify({
+				reported: reportedName || null,
+				subject: reason,
 				body: body
 			})
 		});
 	}
 
-	let dispatch = createEventDispatcher();
-
-	let submitModal: HTMLDialogElement;
+	async function suggestNames(input: string): Promise<{ name: string; value: string }[]> {
+		let i = 0;
+		return users
+			.filter((v) => v.includes(input) && v != reporterName && i++ < 6)
+			.map((v) => {
+				return { name: v, value: v };
+			});
+	}
 </script>
 
 <div>
 	<h2 class="text-3xl text-center">
 		Report von <span class="underline">{reporterName}</span> gegen
-		<span class="underline">{reportedName || 'unbekannt'}</span>
+		<span class="underline">{(reportedName ?? 'unbekannt') || oldReported}</span>
 	</h2>
-	<form on:submit|preventDefault={() => submitModal.show()}>
+	<form
+		on:submit|preventDefault={() => {
+			if (reportedName != null && users.findIndex((u) => u === reportedName) === -1) {
+				userErrorModal.show();
+			} else {
+				submitModal.show();
+			}
+		}}
+	>
 		<div class="space-y-4 my-4">
+			<div class="flex justify-center gap-4">
+				<Select
+					value={+(reportedName === null)}
+					size="sm"
+					pickyWidth={false}
+					on:change={(e) => (reportedName = e.detail.value === 0 ? '' : null)}
+				>
+					<option value={0}>Ich möchte einen bestimmten Spieler reporten</option>
+					<option value={1}>Ich möchte einen unbekannten Spieler reporten</option>
+				</Select>
+				{#if reportedName !== null}
+					<Search
+						size="sm"
+						bind:inputValue={oldReported}
+						suggestionRequired={true}
+						searchSuggestionFunc={suggestNames}
+					/>
+				{/if}
+			</div>
 			<div>
 				<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
 					<span slot="label">Report Grund</span>
@@ -52,6 +96,24 @@
 	</form>
 </div>
 
+<dialog class="modal" bind:this={userErrorModal}>
+	<form method="dialog" class="modal-box">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<div>
+			<h3 class="font-roboto font-medium text-xl">Fehler</h3>
+			<div class="my-4">
+				<p>Der zu reportende Spieler existiert nicht</p>
+			</div>
+			<div class="flex flex-row space-x-1">
+				<Input type="submit" value="Schließen" />
+			</div>
+		</div>
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>
+
 <dialog class="modal" bind:this={submitModal}>
 	<form method="dialog" class="modal-box">
 		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>