98 lines
3.1 KiB
Svelte
98 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import Input from '@components/input/Input.svelte';
|
|
import TeamSearch from '@components/admin/search/TeamSearch.svelte';
|
|
import Textarea from '@components/input/Textarea.svelte';
|
|
import Checkbox from '@components/input/Checkbox.svelte';
|
|
import type { Report } from './types.ts';
|
|
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
|
|
|
|
// html bindings
|
|
let modal: HTMLDialogElement;
|
|
let modalForm: HTMLFormElement;
|
|
|
|
// types
|
|
interface Props {
|
|
open: boolean;
|
|
|
|
onSubmit: (report: Report) => void;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
// input
|
|
let { open, onSubmit, onClose }: Props = $props();
|
|
|
|
// form
|
|
let reason = $state<string | null>(null);
|
|
let body = $state<string | null>(null);
|
|
let editable = $state<boolean>(true);
|
|
let reporter = $state<Report['reporter'] | null>(null);
|
|
let reported = $state<Report['reported'] | null>(null);
|
|
|
|
let submitEnabled = $derived(!!(reason && reporter));
|
|
|
|
// lifecycle
|
|
$effect(() => {
|
|
if (open) modal.show();
|
|
});
|
|
|
|
// callbacks
|
|
async function onSaveButtonClick(e: Event) {
|
|
e.preventDefault();
|
|
$confirmPopupState = {
|
|
title: 'Report erstellen',
|
|
message: 'Bist du sicher, dass du den Report erstellen möchtest?',
|
|
onConfirm: () => {
|
|
modalForm.submit();
|
|
onSubmit({
|
|
id: -1,
|
|
reason: reason!,
|
|
body: body!,
|
|
reporter: reporter!,
|
|
reported: reported!,
|
|
createdAt: editable ? null : new Date().toISOString(),
|
|
status: null
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
function onCancelButtonClick(e: Event) {
|
|
e.preventDefault();
|
|
modalForm.submit();
|
|
}
|
|
</script>
|
|
|
|
<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
|
|
<form method="dialog" class="modal-box" bind:this={modalForm}>
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
|
|
<div class="space-y-5">
|
|
<h3 class="text-xt font-geist font-bold">Neuer Report</h3>
|
|
<div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<TeamSearch label="Report Team" required mustMatch onSubmit={(team) => (reporter = team)} />
|
|
<TeamSearch label="Reportetes Team" mustMatch onSubmit={(team) => (reported = team)} />
|
|
</div>
|
|
<div class="grid grid-cols-1">
|
|
<Input label="Grund" bind:value={reason} required dynamicWidth />
|
|
<Textarea label="Inhalt" bind:value={body} rows={5} dynamicWidth />
|
|
</div>
|
|
<div class="grid grid-cols-1 mt-2">
|
|
<Checkbox label="Report kann bearbeitet werden" bind:checked={editable} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="btn btn-success"
|
|
class:disabled={!submitEnabled}
|
|
disabled={!submitEnabled}
|
|
onclick={onSaveButtonClick}>Erstellen</button
|
|
>
|
|
<button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
|
|
<button class="!cursor-default">close</button>
|
|
</form>
|
|
</dialog>
|