add option to create a report via the admin panel

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

@@ -8,6 +8,9 @@
 	import Input from '$lib/components/Input/Input.svelte';
 	import Textarea from '$lib/components/Input/Textarea.svelte';
 	import { reportCount } from '$lib/stores';
+	import HeaderBar from './HeaderBar.svelte';
+	import { IconOutline } from 'svelte-heros-v2';
+	import NewReportModal from './NewReportModal.svelte';
 
 	export let data: PageData;
 
@@ -47,29 +50,12 @@
 	}
 
 	let saveActiveReportChangesModal: HTMLDialogElement;
+	let newReportModal: HTMLDialogElement;
 </script>
 
 <div class="h-screen flex flex-row">
 	<div class="w-full flex flex-col">
-		<form class="flex flex-row justify-center space-x-4 mx-4 my-2">
-			<Input size="sm" placeholder="Alle" bind:value={reportFilter.reporter}>
-				<span slot="label">Report Ersteller</span>
-			</Input>
-			<Input size="sm" placeholder="Alle" bind:value={reportFilter.reported}>
-				<span slot="label">Reportete Spieler</span>
-			</Input>
-			<Select label="Bearbeitungsstatus" size="sm" bind:value={reportFilter.status}>
-				<option value="none">Unbearbeitet</option>
-				<option value="review">In Bearbeitung</option>
-				<option value={null}>Unbearbeitet & In Bearbeitung</option>
-				<option value="reviewed">Bearbeitet</option>
-			</Select>
-			<Select label="Reportstatus" size="sm" bind:value={reportFilter.draft}>
-				<option value={false}>Erstellt</option>
-				<option value={true}>Entwurf</option>
-				<option value={null}>Erstellt & Entwurf</option>
-			</Select>
-		</form>
+		<HeaderBar bind:reportFilter />
 		<hr class="divider my-1 mx-8 border-none" />
 		<table class="table table-fixed h-fit">
 			<colgroup>
@@ -124,6 +110,16 @@
 						<td>{report.draft ? 'Entwurf' : 'Erstellt'}</td>
 					</tr>
 				{/each}
+				<tr>
+					<td colspan="100">
+						<div class="flex justify-center items-center">
+							<button class="btn btn-sm" on:click={() => newReportModal.show()}>
+								<IconOutline name="plus-outline" />
+								<span>Neuer Report</span>
+							</button>
+						</div>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	</div>
@@ -162,7 +158,7 @@
 				>
 					<Textarea
 						label="Interne Notizen"
-						readonly={activeReport.auditor === null && activeReport.notice === null}
+						readonly={activeReport.status === 'none'}
 						rows={1}
 						bind:value={activeReport.notice}
 					/>
@@ -175,13 +171,15 @@
 				>
 					<Textarea
 						label="(Öffentliche) Report Antwort"
-						readonly={activeReport.auditor === null && activeReport.notice === null}
+						readonly={activeReport.status === 'none'}
 						rows={3}
 						bind:value={activeReport.statement}
 					/>
 				</div>
 				<Select label="Bearbeitungsstatus" size="sm" bind:value={activeReport.status}>
-					<option value="none" disabled={activeReport.auditor != null || activeReport.notice}
+					<option
+						value="none"
+						disabled={activeReport.auditor != null || activeReport.notice || activeReport.statement}
 						>Unbearbeitet</option
 					>
 					<option value="review">In Bearbeitung</option>
@@ -227,3 +225,13 @@
 		<button>close</button>
 	</form>
 </dialog>
+
+<dialog class="modal" bind:this={newReportModal}>
+	<NewReportModal
+		on:submit={(e) => {
+			if (!e.detail.draft) $reportCount += 1;
+			currentPageReports = [e.detail, ...currentPageReports];
+			activeReport = currentPageReports[0];
+		}}
+	/>
+</dialog>