rewrite website
This commit is contained in:
170
src/app/admin/reports/BottomBar.svelte
Normal file
170
src/app/admin/reports/BottomBar.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script lang="ts">
|
||||
import { editReport, getReportAttachments, type Report, type ReportStatus, type StrikeReasons } from './reports.ts';
|
||||
import Input from '@components/input/Input.svelte';
|
||||
import Textarea from '@components/input/Textarea.svelte';
|
||||
import Select from '@components/input/Select.svelte';
|
||||
import { editReportStatus, getReportStatus } from '@app/admin/reports/reports.ts';
|
||||
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
|
||||
import Icon from '@iconify/svelte';
|
||||
import UserSearch from '@components/admin/search/UserSearch.svelte';
|
||||
|
||||
// html bindings
|
||||
let previewDialogElem: HTMLDialogElement;
|
||||
|
||||
// types
|
||||
interface Props {
|
||||
strikeReasons: StrikeReasons;
|
||||
report: Report | null;
|
||||
}
|
||||
|
||||
// inputs
|
||||
let { strikeReasons, report }: Props = $props();
|
||||
|
||||
// states
|
||||
let reportedUser = $state<{ id: number; username: string } | null>(report?.reported ?? null);
|
||||
|
||||
let status = $state<'open' | 'closed' | null>(null);
|
||||
let notice = $state<string | null>(null);
|
||||
let statement = $state<string | null>(null);
|
||||
let strikeReason = $state<string | null>(String(report?.strike?.strikeReasonId ?? null));
|
||||
|
||||
let reportAttachments = $state<{ type: 'image' | 'video'; hash: string }[]>([]);
|
||||
let previewReportAttachment = $state<{ type: 'image' | 'video'; hash: string } | null>(null);
|
||||
|
||||
// consts
|
||||
const strikeReasonValues = strikeReasons.reduce(
|
||||
(prev, curr) => Object.assign(prev, { [curr.id]: `${curr.name} (${curr.weight})` }),
|
||||
{ [null]: 'Kein Vergehen' }
|
||||
);
|
||||
|
||||
// lifetime
|
||||
$effect(() => {
|
||||
if (!report) return;
|
||||
|
||||
getReportStatus(report).then((reportStatus) => {
|
||||
if (!reportStatus) return;
|
||||
|
||||
status = reportStatus.status;
|
||||
notice = reportStatus.notice;
|
||||
statement = reportStatus.statement;
|
||||
});
|
||||
|
||||
getReportAttachments(report).then((value) => {
|
||||
if (value) reportAttachments = value;
|
||||
});
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (previewReportAttachment) previewDialogElem.show();
|
||||
});
|
||||
|
||||
// callbacks
|
||||
async function onSaveButtonClick() {
|
||||
$confirmPopupState = {
|
||||
title: 'Änderungen speichern?',
|
||||
message: 'Sollen die Änderungen am Report gespeichert werden?',
|
||||
onConfirm: async () => {
|
||||
if (reportedUser?.id != report?.reported?.id) {
|
||||
report!.reported = reportedUser;
|
||||
await editReport(report!);
|
||||
}
|
||||
await editReportStatus(report!, {
|
||||
status: status,
|
||||
notice: notice,
|
||||
statement: statement,
|
||||
strikeReasonId: Number(strikeReason)
|
||||
} as ReportStatus);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function onCopyPublicLink(urlHash: string) {
|
||||
navigator.clipboard.writeText(`${document.baseURI}report/${urlHash}`);
|
||||
document.activeElement?.blur();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="absolute bottom-2 bg-base-200 rounded-lg w-[calc(100%-1rem)] mx-2 flex px-6 py-4 gap-2"
|
||||
hidden={report === null}
|
||||
>
|
||||
<div class="absolute right-2 top-2">
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-sm btn-circle btn-ghost"><Icon icon="heroicons:share" /></div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-1 p-2 shadow-sm w-max">
|
||||
<li><button onclick={() => onCopyPublicLink(report?.urlHash)}>Öffentlichen Report Link kopieren</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-circle btn-ghost" onclick={() => (report = null)}>✕</button>
|
||||
</div>
|
||||
<div class="w-[34rem]">
|
||||
<UserSearch value={report?.reporter.username} label="Report Ersteller" readonly mustMatch />
|
||||
<UserSearch
|
||||
value={report?.reported?.username}
|
||||
label="Reporteter Spieler"
|
||||
onSubmit={(user) => (reportedUser = user)}
|
||||
/>
|
||||
<Textarea bind:value={notice} label="Interne Notizen" rows={10} />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<Input value={report?.reason} label="Grund" readonly dynamicWidth />
|
||||
<Textarea value={report?.body} label="Inhalt" readonly dynamicWidth rows={9} />
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">Anhänge</legend>
|
||||
<div class="h-16.5 rounded border border-dashed flex">
|
||||
{#each reportAttachments as reportAttachment (reportAttachment.hash)}
|
||||
<div>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="cursor-zoom-in" onclick={() => (previewReportAttachment = reportAttachment)}>
|
||||
{#if reportAttachment.type === 'image'}
|
||||
<img
|
||||
src={location.pathname + '/attachment/' + reportAttachment.hash}
|
||||
alt={reportAttachment.hash}
|
||||
class="w-16 h-16"
|
||||
/>
|
||||
{:else if reportAttachment.type === 'video'}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video src={location.pathname + '/attachment/' + reportAttachment.hash} class="w-16 h-16"></video>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="divider divider-horizontal"></div>
|
||||
<div class="flex flex-col w-[42rem]">
|
||||
<Textarea bind:value={statement} label="Öffentliche Report Antwort" dynamicWidth rows={7} />
|
||||
<Select
|
||||
bind:value={status}
|
||||
values={{ open: 'In Bearbeitung', closed: 'Bearbeitet' }}
|
||||
defaultValue="Unbearbeitet"
|
||||
label="Bearbeitungsstatus"
|
||||
dynamicWidth
|
||||
/>
|
||||
<Select bind:value={strikeReason} values={strikeReasonValues} label="Vergehen" dynamicWidth></Select>
|
||||
<div class="divider mt-0 mb-2"></div>
|
||||
<button class="btn mt-auto" onclick={onSaveButtonClick}>Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog
|
||||
class="modal"
|
||||
bind:this={previewDialogElem}
|
||||
onclose={() => setTimeout(() => (previewReportAttachment = null), 300)}
|
||||
>
|
||||
<div class="modal-box">
|
||||
{#if previewReportAttachment?.type === 'image'}
|
||||
<img src={location.pathname + '/attachment/' + previewReportAttachment.hash} alt={previewReportAttachment.hash} />
|
||||
{:else if previewReportAttachment?.type === 'video'}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video src={location.pathname + '/attachment/' + previewReportAttachment.hash} controls></video>
|
||||
{/if}
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
|
||||
<button class="absolute top-3 right-3 btn btn-circle">✕</button>
|
||||
<button class="!cursor-default">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
55
src/app/admin/reports/Reports.svelte
Normal file
55
src/app/admin/reports/Reports.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import BottomBar from '@app/admin/reports/BottomBar.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import DataTable from '@components/admin/table/DataTable.svelte';
|
||||
import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';
|
||||
|
||||
// consts
|
||||
const dateFormat = new Intl.DateTimeFormat('de-DE', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// states
|
||||
let strikeReasons = $state<StrikeReasons>([]);
|
||||
let activeReport = $state<Report | null>(null);
|
||||
|
||||
// lifecycle
|
||||
onMount(() => {
|
||||
getStrikeReasons().then((data) => (strikeReasons = data ?? []));
|
||||
});
|
||||
</script>
|
||||
|
||||
{#snippet date(value: string)}
|
||||
{value ? dateFormat.format(new Date(value)) : ''}
|
||||
{/snippet}
|
||||
|
||||
{#snippet status(value: null | 'open' | 'closed')}
|
||||
{#if value === 'open'}
|
||||
<p>In Bearbeitung</p>
|
||||
{:else if value === 'closed'}
|
||||
<p>Bearbeitet</p>
|
||||
{:else if value === null}
|
||||
<p>Unbearbeitet</p>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<DataTable
|
||||
data={reports}
|
||||
count={true}
|
||||
keys={[
|
||||
{ key: 'reason', label: 'Grund' },
|
||||
{ key: 'reporter.username', label: 'Report Ersteller' },
|
||||
{ key: 'reported.username', label: 'Reporteter Spieler' },
|
||||
{ key: 'createdAt', label: 'Datum', transform: date },
|
||||
{ key: 'status.status', label: 'Bearbeitungsstatus', transform: status }
|
||||
]}
|
||||
onClick={(report) => (activeReport = report)}
|
||||
/>
|
||||
|
||||
{#key activeReport}
|
||||
<BottomBar {strikeReasons} report={activeReport} />
|
||||
{/key}
|
||||
80
src/app/admin/reports/SidebarActions.svelte
Normal file
80
src/app/admin/reports/SidebarActions.svelte
Normal file
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import Input from '@components/input/Input.svelte';
|
||||
import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
|
||||
import { addReport, fetchReports } from '@app/admin/reports/reports.ts';
|
||||
import Checkbox from '@components/input/Checkbox.svelte';
|
||||
|
||||
// states
|
||||
let showDrafts = $state(false);
|
||||
let reporterUsernameFilter = $state<string | null>(null);
|
||||
let reportedUsernameFilter = $state<string | null>(null);
|
||||
|
||||
let createPopupOpen = $state(false);
|
||||
|
||||
// lifecycle
|
||||
$effect(() => {
|
||||
fetchReports(reporterUsernameFilter, reportedUsernameFilter, showDrafts);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<fieldset class="fieldset border border-base-content/50 rounded-box p-2">
|
||||
<legend class="fieldset-legend">Filter</legend>
|
||||
<Checkbox bind:checked={showDrafts} label="Entwürfe zeigen" />
|
||||
<Input bind:value={reporterUsernameFilter} label="Reporter Ersteller" />
|
||||
<Input bind:value={reportedUsernameFilter} label="Reporteter Spieler" />
|
||||
</fieldset>
|
||||
<div class="divider my-1"></div>
|
||||
<button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
|
||||
<Icon icon="heroicons:plus-16-solid" />
|
||||
<span>Neuer Report</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CrudPopup
|
||||
texts={{
|
||||
title: 'Report erstellen',
|
||||
submitButtonTitle: 'Erstellen',
|
||||
confirmPopupTitle: 'Report erstellen?',
|
||||
confirmPopupMessage: 'Soll der Report erstellt werden?'
|
||||
}}
|
||||
target={null}
|
||||
keys={[
|
||||
[
|
||||
{
|
||||
key: 'reporter',
|
||||
type: 'user-search',
|
||||
label: 'Report Ersteller',
|
||||
default: { id: null, username: null },
|
||||
options: { required: true, mustMatch: true, validate: (user) => user?.id != null }
|
||||
},
|
||||
{
|
||||
key: 'reported',
|
||||
type: 'user-search',
|
||||
label: 'Reporteter Spieler',
|
||||
options: { mustMatch: true, validate: (user) => user?.id != null }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
key: 'reason',
|
||||
type: 'text',
|
||||
label: 'Grund',
|
||||
options: { required: true, dynamicWidth: true, validate: (reason) => reason }
|
||||
}
|
||||
],
|
||||
[{ key: 'body', type: 'textarea', label: 'Inhalt', default: null, options: { rows: 5, dynamicWidth: true } }],
|
||||
[
|
||||
{
|
||||
key: 'createdAt',
|
||||
type: 'checkbox',
|
||||
label: 'Report kann bearbeitet werden',
|
||||
default: true,
|
||||
options: { convert: (v) => (v ? null : new Date().toISOString()) }
|
||||
}
|
||||
]
|
||||
]}
|
||||
onSubmit={addReport}
|
||||
bind:open={createPopupOpen}
|
||||
/>
|
||||
115
src/app/admin/reports/reports.ts
Normal file
115
src/app/admin/reports/reports.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
import { type ActionReturnType, actions } from 'astro:actions';
|
||||
import { writable } from 'svelte/store';
|
||||
import { actionErrorPopup } from '@util/action.ts';
|
||||
|
||||
// types
|
||||
export type Reports = Exclude<ActionReturnType<typeof actions.report.reports>['data'], undefined>['reports'];
|
||||
export type Report = Reports[0];
|
||||
|
||||
export type ReportStatus = Exclude<
|
||||
Exclude<ActionReturnType<typeof actions.report.reportStatus>['data'], undefined>['reportStatus'],
|
||||
null
|
||||
> & { strikeReasonId: number | null };
|
||||
|
||||
export type StrikeReasons = Exclude<
|
||||
ActionReturnType<typeof actions.report.strikeReasons>['data'],
|
||||
undefined
|
||||
>['strikeReasons'];
|
||||
|
||||
// state
|
||||
export const reports = writable<Reports>([]);
|
||||
|
||||
// actions
|
||||
export async function fetchReports(
|
||||
reporterUsername: string | null,
|
||||
reportedUsername: string | null,
|
||||
includeDrafts: boolean
|
||||
) {
|
||||
const { data, error } = await actions.report.reports({
|
||||
reporter: reporterUsername,
|
||||
reported: reportedUsername,
|
||||
includeDrafts: includeDrafts
|
||||
});
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
return;
|
||||
}
|
||||
|
||||
reports.set(data.reports);
|
||||
}
|
||||
|
||||
export async function addReport(report: Report) {
|
||||
const { data, error } = await actions.report.addReport({
|
||||
reason: report.reason,
|
||||
body: report.body,
|
||||
createdAt: report.createdAt as unknown as string,
|
||||
reporter: report.reporter.id,
|
||||
reported: report.reported?.id ?? null
|
||||
});
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
return;
|
||||
}
|
||||
|
||||
reports.update((old) => {
|
||||
old.push(Object.assign(report, { id: data.id, status: null }));
|
||||
return old;
|
||||
});
|
||||
}
|
||||
|
||||
export async function getReportStatus(report: Report) {
|
||||
const { data, error } = await actions.report.reportStatus({ reportId: report.id });
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
return;
|
||||
}
|
||||
|
||||
return data.reportStatus;
|
||||
}
|
||||
|
||||
export async function editReport(report: Report) {
|
||||
const { error } = await actions.report.editReport({
|
||||
reportId: report.id,
|
||||
reported: report.reported?.id ?? null
|
||||
});
|
||||
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function editReportStatus(report: Report, reportStatus: ReportStatus) {
|
||||
const { error } = await actions.report.editReportStatus({
|
||||
reportId: report.id,
|
||||
status: reportStatus.status,
|
||||
notice: reportStatus.notice,
|
||||
statement: reportStatus.statement,
|
||||
strikeReasonId: reportStatus.strikeReasonId
|
||||
});
|
||||
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getReportAttachments(report: Report) {
|
||||
const { data, error } = await actions.report.reportAttachments({
|
||||
reportId: report.id
|
||||
});
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
return;
|
||||
}
|
||||
|
||||
return data.reportAttachments;
|
||||
}
|
||||
|
||||
export async function getStrikeReasons() {
|
||||
const { data, error } = await actions.report.strikeReasons();
|
||||
if (error) {
|
||||
actionErrorPopup(error);
|
||||
return;
|
||||
}
|
||||
|
||||
return data.strikeReasons;
|
||||
}
|
||||
Reference in New Issue
Block a user