From e7bba2278403610fe209ea5d39e6d066f0464424 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Fri, 6 Dec 2024 14:59:46 +0100
Subject: [PATCH] update report submitted window (#42)
---
src/lib/components/Input/Textarea.svelte | 41 +++++++------
src/routes/admin/reports/+page.svelte | 12 +++-
.../report/[...url_hash]/+page.server.ts | 2 +
src/routes/report/[...url_hash]/+page.svelte | 12 ++--
.../[...url_hash]/ReportCompleted.svelte | 3 -
.../[...url_hash]/ReportSubmitted.svelte | 60 +++++++++++++++++--
6 files changed, 99 insertions(+), 31 deletions(-)
delete mode 100644 src/routes/report/[...url_hash]/ReportCompleted.svelte
diff --git a/src/lib/components/Input/Textarea.svelte b/src/lib/components/Input/Textarea.svelte
index f737d21..5e83fc4 100644
--- a/src/lib/components/Input/Textarea.svelte
+++ b/src/lib/components/Input/Textarea.svelte
@@ -1,18 +1,27 @@
<script lang="ts">
- import { createEventDispatcher } from 'svelte';
-
- export let id: string | null = null;
- export let name: string | null = null;
- export let value: string | null = null;
- export let label: string | null = null;
- export let notice: string | null = null;
- export let required = false;
- export let disabled = false;
- export let readonly = false;
- export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
- export let rows = 2;
-
- const dispatch = createEventDispatcher();
+ let {
+ id,
+ name,
+ value = $bindable(),
+ label,
+ notice,
+ required,
+ disabled,
+ readonly,
+ size = 'md',
+ rows = 2
+ }: {
+ id?: string;
+ name?: string;
+ value?: string;
+ label?: string;
+ notice?: string;
+ required?: boolean;
+ disabled?: boolean;
+ readonly?: boolean;
+ size?: 'xs' | 'sm' | 'md' | 'lg';
+ rows?: number;
+ } = $props();
</script>
<div>
@@ -27,12 +36,11 @@
</label>
{/if}
<textarea
- class="textarea w-full"
+ class="textarea textarea-bordered w-full"
class:textarea-xs={size === 'xs'}
class:textarea-sm={size === 'sm'}
class:textarea-md={size === 'md'}
class:textarea-lg={size === 'lg'}
- class:textarea-bordered={!readonly}
{id}
{name}
{required}
@@ -40,7 +48,6 @@
{readonly}
{rows}
bind:value
- on:click={(e) => dispatch('click', e)}
></textarea>
{#if notice}
<label class="label" for={id}>
diff --git a/src/routes/admin/reports/+page.svelte b/src/routes/admin/reports/+page.svelte
index 537e7ae..e04e953 100644
--- a/src/routes/admin/reports/+page.svelte
+++ b/src/routes/admin/reports/+page.svelte
@@ -146,7 +146,7 @@
goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
replaceState: true
});
- activeReport = report;
+ activeReport = $state.snapshot(report);
activeReport.originalStatus = report.status;
}}
>
@@ -344,7 +344,13 @@
} else {
activeReport.reported = undefined;
}
- reports = [...reports];
+ const activeReportIndex = reports.findIndex((r) => r.id === activeReport.id);
+ if (activeReportIndex === -1) {
+ return;
+ }
+
+ reports[activeReportIndex] = activeReport;
+
if (
activeReport.originalStatus !== 'reviewed' &&
activeReport.status === 'reviewed'
@@ -373,7 +379,7 @@
onSubmit={(e) => {
if (!e.draft) $reportCount += 1;
reports = [e, ...reports];
- activeReport = reports[0];
+ activeReport = $state.snapshot(reports[0]);
newReportModal.close();
}}
/>
diff --git a/src/routes/report/[...url_hash]/+page.server.ts b/src/routes/report/[...url_hash]/+page.server.ts
index 6ad33c4..309ab20 100644
--- a/src/routes/report/[...url_hash]/+page.server.ts
+++ b/src/routes/report/[...url_hash]/+page.server.ts
@@ -18,6 +18,8 @@ export const load: PageServerLoad = async ({ params }) => {
draft: report.draft,
status: report.status,
reason: report.subject,
+ body: report.body,
+ statement: report.statement,
reporter: {
name: report.reporter.username
},
diff --git a/src/routes/report/[...url_hash]/+page.svelte b/src/routes/report/[...url_hash]/+page.svelte
index 962554d..be71df6 100644
--- a/src/routes/report/[...url_hash]/+page.svelte
+++ b/src/routes/report/[...url_hash]/+page.svelte
@@ -1,7 +1,6 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import ReportDraft from './ReportDraft.svelte';
- import ReportCompleted from './ReportCompleted.svelte';
import ReportSubmitted from './ReportSubmitted.svelte';
let { data } = $props();
@@ -26,11 +25,16 @@
onsubmit={() => (completed = true)}
/>
</div>
- {:else if data.status === 'reviewed'}
- <ReportCompleted />
{:else}
<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
- <ReportSubmitted />
+ <ReportSubmitted
+ reporterName={data.reporter.name}
+ reportedName={data.reported.name ?? undefined}
+ status={data.status}
+ reason={data.reason}
+ body={data.body}
+ statement={data.statement}
+ />
</div>
{/if}
</div>
diff --git a/src/routes/report/[...url_hash]/ReportCompleted.svelte b/src/routes/report/[...url_hash]/ReportCompleted.svelte
deleted file mode 100644
index b3ee96d..0000000
--- a/src/routes/report/[...url_hash]/ReportCompleted.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<div>
- <h2 class="text-xl text-center">Dieser Report wurde von einem Admin bearbeitet</h2>
-</div>
diff --git a/src/routes/report/[...url_hash]/ReportSubmitted.svelte b/src/routes/report/[...url_hash]/ReportSubmitted.svelte
index 0dbf693..8047766 100644
--- a/src/routes/report/[...url_hash]/ReportSubmitted.svelte
+++ b/src/routes/report/[...url_hash]/ReportSubmitted.svelte
@@ -1,6 +1,58 @@
+<script lang="ts">
+ import Input from '$lib/components/Input/Input.svelte';
+ import Textarea from '$lib/components/Input/Textarea.svelte';
+
+ let {
+ reporterName,
+ reportedName,
+ status,
+ reason,
+ body,
+ statement
+ }: {
+ reporterName: string;
+ reportedName?: string;
+ status: 'none' | 'review' | 'reviewed';
+ reason: string;
+ body: string;
+ statement?: string;
+ } = $props();
+</script>
+
<div>
- <h2 class="text-2xl text-center">Report abgeschickt</h2>
- <p class="mt-4">
- Dein Report wurde abgeschickt und wird so schnell wie möglich von einem Admin bearbeitet.
- </p>
+ <h2 class="text-3xl text-center">
+ Report von <span class="underline">{reporterName}</span> gegen
+ <span class="underline">{reportedName ?? 'unbekannt'}</span>
+ </h2>
+ <h4 class="text-xl text-center mt-1 mb-0">
+ {#if status === 'none'}
+ <span>Unbearbeitet</span>
+ {:else if status === 'review'}
+ <span>In Bearbeitung</span>
+ {:else if status === 'reviewed'}
+ <span>Bearbeitet</span>
+ {/if}
+ <span class="relative inline-flex h-3 w-3 ml-[1px]">
+ {#if status === 'review'}
+ <span
+ class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-500 opacity-75"
+ ></span>
+ {/if}
+ <span
+ class="relative inline-flex rounded-full h-3 w-3"
+ class:bg-yellow-500={status === 'none' || status === 'review'}
+ class:bg-green-500={status === 'reviewed'}
+ ></span>
+ </span>
+ </h4>
+ <div class="my-4">
+ <Input type="text" size="sm" value={reason} readonly={true} pickyWidth={false}>
+ {#snippet label()}
+ <span>Report Grund</span>
+ {/snippet}
+ </Input>
+ <Textarea readonly={true} rows={4} value={body} label="Report Details" />
+ </div>
+ <div class="divider divider-vertical mb-1"></div>
+ <Textarea readonly={true} rows={4} label="Admin Kommentar" value={statement} />
</div>