varo-website/src/app/admin/reports/BottomBar.svelte
bytedream e47268111a
All checks were successful
deploy / build-and-deploy (push) Successful in 23s
refactor admin crud popups
2025-05-21 17:22:40 +02:00

88 lines
3.0 KiB
Svelte

<script lang="ts">
import type { Report, ReportStatus, 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 TeamSearch from '@components/admin/search/TeamSearch.svelte';
import { editReportStatus, getReportStatus } from '@app/admin/reports/reports.ts';
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
// types
interface Props {
strikeReasons: StrikeReasons;
report: Report | null;
}
// inputs
let { strikeReasons, report }: Props = $props();
// states
let status = $state<'open' | 'closed' | null>(null);
let notice = $state<string | null>(null);
let statement = $state<string | null>(null);
// consts
const strikeReasonValues = strikeReasons.reduce(
(prev, curr) => Object.assign(prev, { [curr.id]: `${curr.name} (${curr.weight})` }),
{}
);
// lifetime
$effect(() => {
if (!report) return;
getReportStatus(report).then((reportStatus) => {
if (!reportStatus) return;
status = reportStatus.status;
notice = reportStatus.notice;
statement = reportStatus.statement;
});
});
// callbacks
async function onSaveButtonClick() {
$confirmPopupState = {
title: 'Änderungen speichern?',
message: 'Sollen die Änderungen am Report gespeichert werden?',
onConfirm: async () =>
editReportStatus(report!, {
status: status,
notice: notice,
statement: statement,
strikeId: null
} as ReportStatus)
};
}
</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}
>
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => (report = null)}>✕</button>
<div class="w-[34rem]">
<TeamSearch value={report?.reporter.name} label="Report Team" readonly mustMatch />
<TeamSearch value={report?.reported?.name} label="Reportetes Team" />
<Textarea bind:value={notice} label="Interne Notizen" rows={8} />
</div>
<div class="divider divider-horizontal"></div>
<div class="w-full">
<Input value={report?.reason} label="Grund" readonly dynamicWidth />
<Textarea value={report?.body} label="Inhalt" readonly dynamicWidth rows={12} />
</div>
<div class="divider divider-horizontal"></div>
<div class="flex flex-col w-[42rem]">
<Textarea bind:value={statement} label="Öffentliche Report Antwort" dynamicWidth rows={5} />
<Select
values={{ open: 'In Bearbeitung', closed: 'Bearbeitet' }}
defaultValue="Unbearbeitet"
label="Bearbeitungsstatus"
dynamicWidth
/>
<Select bind:value={status} values={strikeReasonValues} defaultValue="" label="Vergehen" dynamicWidth></Select>
<div class="divider mt-0 mb-2"></div>
<button class="btn mt-auto" onclick={onSaveButtonClick}>Speichern</button>
</div>
</div>