initial commit

src/app/admin/reports/CreatePopup.svelte

@@ -0,0 +1,97 @@
+<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>