54 lines
1.4 KiB
Svelte
54 lines
1.4 KiB
Svelte
<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)}
|
|
{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>
|
|
{/if}
|
|
{/snippet}
|
|
|
|
<DataTable
|
|
data={reports}
|
|
count={true}
|
|
keys={[
|
|
{ key: 'reason', label: 'Grund' },
|
|
{ key: 'reporter.name', label: 'Report Team' },
|
|
{ key: 'reported.name', label: 'Reportetes Team' },
|
|
{ key: 'createdAt', label: 'Datum', transform: date },
|
|
{ key: 'status.status', label: 'Bearbeitungsstatus', transform: status }
|
|
]}
|
|
onClick={(report) => (activeReport = report)}
|
|
/>
|
|
|
|
{#key activeReport}
|
|
<BottomBar {strikeReasons} report={activeReport} />
|
|
{/key}
|