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

src/lib/components/Input/Select.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	// eslint-disable-next-line no-undef
+	import { createEventDispatcher } from 'svelte';
+
 	type T = $$Generic;
 
 	export let id: string | null = null;
@@ -10,6 +12,9 @@
 	export let required = false;
 	export let disabled = false;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+	export let pickyWidth = true;
+
+	let dispatch = createEventDispatcher();
 </script>
 
 <div>
@@ -24,7 +29,8 @@
 		</label>
 	{/if}
 	<select
-		class="select select-bordered w-[100%] sm:max-w-[16rem]"
+		class="select select-bordered w-[100%]"
+		class:sm:max-w-[16rem]={pickyWidth}
 		class:select-xs={size === 'xs'}
 		class:select-sm={size === 'sm'}
 		class:select-md={size === 'md'}
@@ -34,6 +40,7 @@
 		{required}
 		{disabled}
 		bind:value
+		on:change={(e) => dispatch('change', { value: value })}
 	>
 		<slot />
 	</select>

src/routes/report/[...url_hash]/+page.server.ts

@@ -23,6 +23,9 @@ export const load: PageServerLoad = async ({ params }) => {
 		},
 		reported: {
 			name: report.reported?.username || null
-		}
+		},
+		users: report.draft
+			? (await User.findAll({ attributes: ['username'] })).map((u) => u.username)
+			: null
 	};
 };

src/routes/report/[...url_hash]/+page.svelte

@@ -19,7 +19,8 @@
 			<ReportDraft
 				reason={data.reason}
 				reporterName={data.reporter.name}
-				reportedName={data.reported.name}
+				reportedName={data.reported.name ?? undefined}
+				users={data.users ?? []}
 				on:submit={() => (data.draft = false)}
 			/>
 		</div>

src/routes/report/[...url_hash]/+server.ts

@@ -1,15 +1,23 @@
 import type { RequestHandler } from '@sveltejs/kit';
-import { Report } from '$lib/server/database';
+import { Report, User } from '$lib/server/database';
 
 export const POST = (async ({ request, params }) => {
 	const report = await Report.findOne({ where: { url_hash: params.url_hash } });
 
 	if (report == null) return new Response(null, { status: 400 });
 
-	const data: { body: string } = await request.json();
+	const data: { reported: string | null; subject: string; body: string } = await request.json();
+
+	const user =
+		data.reported != null ? await User.findOne({ where: { username: data.reported } }) : undefined;
+	if (user === null) {
+		return new Response(null, { status: 400 });
+	}
 
 	report.draft = false;
-	report.body = data.body || '';
+	report.subject = data.subject ?? '';
+	report.body = data.body ?? '';
+	report.reported_id = user?.id;
 	await report.save();
 
 	return new Response(null, { status: 200 });

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>