318 lines
13 KiB
TypeScript
318 lines
13 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ArrowLeft, Loader2, PlusCircle, Sparkles } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Switch } from '@/components/ui/switch';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
assignTasksToEvent,
|
|
getEvent,
|
|
getEventTasks,
|
|
getTasks,
|
|
updateEvent,
|
|
TenantEvent,
|
|
TenantTask,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { ADMIN_EVENTS_PATH } from '../constants';
|
|
|
|
export default function EventTasksPage() {
|
|
const { t } = useTranslation(['management', 'dashboard']);
|
|
const params = useParams<{ slug?: string }>();
|
|
const [searchParams] = useSearchParams();
|
|
const slug = params.slug ?? searchParams.get('slug') ?? null;
|
|
const navigate = useNavigate();
|
|
|
|
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
|
const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
|
|
const [availableTasks, setAvailableTasks] = React.useState<TenantTask[]>([]);
|
|
const [selected, setSelected] = React.useState<number[]>([]);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [saving, setSaving] = React.useState(false);
|
|
const [modeSaving, setModeSaving] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
|
|
const statusLabels = React.useMemo(
|
|
() => ({
|
|
published: t('management.members.statuses.published', 'Veröffentlicht'),
|
|
draft: t('management.members.statuses.draft', 'Entwurf'),
|
|
}),
|
|
[t]
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) {
|
|
setError(t('management.tasks.errors.missingSlug', 'Kein Event-Slug angegeben.'));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const eventData = await getEvent(slug);
|
|
const [eventTasksResponse, libraryTasks] = await Promise.all([
|
|
getEventTasks(eventData.id, 1),
|
|
getTasks({ per_page: 50 }),
|
|
]);
|
|
if (cancelled) return;
|
|
setEvent(eventData);
|
|
const assignedIds = new Set(eventTasksResponse.data.map((task) => task.id));
|
|
setAssignedTasks(eventTasksResponse.data);
|
|
setAvailableTasks(libraryTasks.data.filter((task) => !assignedIds.has(task.id)));
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('management.tasks.errors.load', 'Event-Tasks konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [slug, t]);
|
|
|
|
async function handleAssign() {
|
|
if (!event || selected.length === 0) return;
|
|
setSaving(true);
|
|
try {
|
|
await assignTasksToEvent(event.id, selected);
|
|
const refreshed = await getEventTasks(event.id, 1);
|
|
const assignedIds = new Set(refreshed.data.map((task) => task.id));
|
|
setAssignedTasks(refreshed.data);
|
|
setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
|
|
setSelected([]);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('management.tasks.errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
const isPhotoOnlyMode = event?.engagement_mode === 'photo_only';
|
|
|
|
async function handleModeChange(checked: boolean) {
|
|
if (!event || !slug) return;
|
|
|
|
setModeSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const nextMode = checked ? 'photo_only' : 'tasks';
|
|
const updated = await updateEvent(slug, {
|
|
settings: {
|
|
engagement_mode: nextMode,
|
|
},
|
|
});
|
|
setEvent(updated);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(
|
|
checked
|
|
? t('management.tasks.errors.photoOnlyEnable', 'Foto-Modus konnte nicht aktiviert werden.')
|
|
: t('management.tasks.errors.photoOnlyDisable', 'Foto-Modus konnte nicht deaktiviert werden.'),
|
|
);
|
|
}
|
|
} finally {
|
|
setModeSaving(false);
|
|
}
|
|
}
|
|
|
|
const actions = (
|
|
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
{t('management.tasks.actions.back', 'Zurück zur Übersicht')}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('management.tasks.title', 'Event-Tasks')}
|
|
subtitle={t('management.tasks.subtitle', 'Verwalte Aufgaben, die diesem Event zugeordnet sind.')}
|
|
actions={actions}
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{loading ? (
|
|
<TaskSkeleton />
|
|
) : !event ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('management.tasks.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
|
|
<AlertDescription>{t('management.tasks.alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
|
|
</Alert>
|
|
) : (
|
|
<>
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('management.tasks.eventStatus', {
|
|
status: statusLabels[event.status as keyof typeof statusLabels] ?? event.status,
|
|
})}
|
|
</CardDescription>
|
|
<div className="mt-4 flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white/70 p-4 text-sm text-slate-700">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">
|
|
{t('management.tasks.modes.title', 'Aufgaben & Foto-Modus')}
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
{isPhotoOnlyMode
|
|
? t(
|
|
'management.tasks.modes.photoOnlyHint',
|
|
'Der Foto-Modus ist aktiv. Gäste können Fotos hochladen, sehen aber keine Aufgaben.',
|
|
)
|
|
: t(
|
|
'management.tasks.modes.tasksHint',
|
|
'Aufgaben werden in der Gäste-App angezeigt. Deaktiviere sie für einen reinen Foto-Modus.',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs uppercase tracking-wide text-slate-500">
|
|
{isPhotoOnlyMode
|
|
? t('management.tasks.modes.photoOnly', 'Foto-Modus')
|
|
: t('management.tasks.modes.tasks', 'Aufgaben aktiv')}
|
|
</span>
|
|
<Switch
|
|
checked={isPhotoOnlyMode}
|
|
onCheckedChange={handleModeChange}
|
|
disabled={modeSaving}
|
|
aria-label={t('management.tasks.modes.switchLabel', 'Foto-Modus aktivieren')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{modeSaving ? (
|
|
<div className="flex items-center gap-2 text-xs text-slate-500">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
{t('management.tasks.modes.updating', 'Einstellung wird gespeichert ...')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 lg:grid-cols-2">
|
|
<section className="space-y-3">
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
|
<Sparkles className="h-4 w-4 text-pink-500" />
|
|
{t('management.tasks.sections.assigned.title', 'Zugeordnete Tasks')}
|
|
</h3>
|
|
{assignedTasks.length === 0 ? (
|
|
<EmptyState message={t('management.tasks.sections.assigned.empty', 'Noch keine Tasks zugewiesen.')} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{assignedTasks.map((task) => (
|
|
<div key={task.id} className="rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium text-slate-900">{task.title}</p>
|
|
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
|
{mapPriority(task.priority, t)}
|
|
</Badge>
|
|
</div>
|
|
{task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
|
<PlusCircle className="h-4 w-4 text-emerald-500" />
|
|
{t('management.tasks.sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
|
|
</h3>
|
|
<div className="space-y-2 rounded-2xl border border-emerald-100 bg-white/90 p-3 shadow-sm max-h-72 overflow-y-auto">
|
|
{availableTasks.length === 0 ? (
|
|
<EmptyState message={t('management.tasks.sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
|
|
) : (
|
|
availableTasks.map((task) => (
|
|
<label key={task.id} className="flex items-start gap-3 rounded-xl border border-transparent p-2 transition hover:border-emerald-200">
|
|
<Checkbox
|
|
checked={selected.includes(task.id)}
|
|
onCheckedChange={(checked) =>
|
|
setSelected((prev) =>
|
|
checked ? [...prev, task.id] : prev.filter((id) => id !== task.id)
|
|
)
|
|
}
|
|
disabled={isPhotoOnlyMode}
|
|
/>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-900">{task.title}</p>
|
|
{task.description && <p className="text-xs text-slate-600">{task.description}</p>}
|
|
</div>
|
|
</label>
|
|
))
|
|
)}
|
|
</div>
|
|
<Button
|
|
onClick={() => void handleAssign()}
|
|
disabled={saving || selected.length === 0 || isPhotoOnlyMode}
|
|
>
|
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.tasks.actions.assign', 'Ausgewählte Tasks zuweisen')}
|
|
</Button>
|
|
</section>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
function EmptyState({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
|
|
<p className="text-xs text-slate-600">{message}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TaskSkeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 2 }).map((_, index) => (
|
|
<div key={index} className="h-48 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function mapPriority(priority: TenantTask['priority'], translate: (key: string, defaultValue: string) => string): string {
|
|
switch (priority) {
|
|
case 'low':
|
|
return translate('management.tasks.priorities.low', 'Niedrig');
|
|
case 'high':
|
|
return translate('management.tasks.priorities.high', 'Hoch');
|
|
case 'urgent':
|
|
return translate('management.tasks.priorities.urgent', 'Dringend');
|
|
default:
|
|
return translate('management.tasks.priorities.medium', 'Mittel');
|
|
}
|
|
}
|
|
|
|
function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
|
|
if (typeof name === 'string') {
|
|
return name;
|
|
}
|
|
return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
|
|
}
|