1555 lines
65 KiB
TypeScript
1555 lines
65 KiB
TypeScript
// @ts-nocheck
|
|
import React from 'react';
|
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ArrowLeft, Layers, Loader2, PlusCircle, Search, Sparkles, Pencil, Check, X } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import toast from 'react-hot-toast';
|
|
|
|
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 { Switch } from '@/components/ui/switch';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import {
|
|
DndContext,
|
|
closestCenter,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
DragEndEvent,
|
|
DragOverlay,
|
|
useDraggable,
|
|
useDroppable,
|
|
} from '@dnd-kit/core';
|
|
import {
|
|
CSS,
|
|
} from '@dnd-kit/utilities';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
assignTasksToEvent,
|
|
detachTasksFromEvent,
|
|
getEvent,
|
|
getEventTasks,
|
|
createTask,
|
|
getTasks,
|
|
getTaskCollections,
|
|
importTaskCollection,
|
|
getEmotions,
|
|
updateEvent,
|
|
updateTask,
|
|
TenantEvent,
|
|
TenantTask,
|
|
TenantTaskCollection,
|
|
TenantEmotion,
|
|
} from '../api';
|
|
import { EmotionsSection } from './EmotionsPage';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { ADMIN_EVENTS_PATH, buildEngagementTabPath } from '../constants';
|
|
import { filterEmotionsByEventType } from '../lib/emotions';
|
|
import { buildEventTabs } from '../lib/eventTabs';
|
|
import { Trash2 } from 'lucide-react';
|
|
|
|
export default function EventTasksPage() {
|
|
const { t } = useTranslation('management', { keyPrefix: 'eventTasks' });
|
|
const { t: tDashboard } = useTranslation('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 [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 [tab, setTab] = React.useState<'tasks' | 'packs'>('tasks');
|
|
const [taskSearch, setTaskSearch] = React.useState('');
|
|
const [debouncedTaskSearch, setDebouncedTaskSearch] = React.useState('');
|
|
const [difficultyFilter, setDifficultyFilter] = React.useState<TenantTask['difficulty'] | ''>('');
|
|
const [collections, setCollections] = React.useState<TenantTaskCollection[]>([]);
|
|
const [collectionsLoading, setCollectionsLoading] = React.useState(false);
|
|
const [collectionsError, setCollectionsError] = React.useState<string | null>(null);
|
|
const [importingCollectionId, setImportingCollectionId] = React.useState<number | null>(null);
|
|
const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
|
|
const [emotionsLoading, setEmotionsLoading] = React.useState(false);
|
|
const [emotionsError, setEmotionsError] = React.useState<string | null>(null);
|
|
const [emotionFilter, setEmotionFilter] = React.useState<number[]>([]);
|
|
const [emotionsModalOpen, setEmotionsModalOpen] = React.useState(false);
|
|
const [newTaskTitle, setNewTaskTitle] = React.useState('');
|
|
const [newTaskDescription, setNewTaskDescription] = React.useState('');
|
|
const [newTaskEmotionId, setNewTaskEmotionId] = React.useState<number | null>(null);
|
|
const [newTaskDifficulty, setNewTaskDifficulty] = React.useState<TenantTask['difficulty'] | ''>('');
|
|
const [creatingTask, setCreatingTask] = React.useState(false);
|
|
const [draggingId, setDraggingId] = React.useState<number | null>(null);
|
|
const [selectedAssignedIds, setSelectedAssignedIds] = React.useState<number[]>([]);
|
|
const [selectedAvailableIds, setSelectedAvailableIds] = React.useState<number[]>([]);
|
|
const [batchSaving, setBatchSaving] = React.useState(false);
|
|
const [inlineSavingId, setInlineSavingId] = React.useState<number | null>(null);
|
|
const [emotionFilterOpen, setEmotionFilterOpen] = React.useState(false);
|
|
React.useEffect(() => {
|
|
const handle = window.setTimeout(() => setDebouncedTaskSearch(taskSearch.trim().toLowerCase()), 180);
|
|
return () => window.clearTimeout(handle);
|
|
}, [taskSearch]);
|
|
const hydrateTasks = React.useCallback(async (targetEvent: TenantEvent) => {
|
|
try {
|
|
const [refreshed, libraryTasks] = await Promise.all([
|
|
getEventTasks(targetEvent.id, 1),
|
|
getTasks({ per_page: 200 }),
|
|
]);
|
|
const assignedIds = new Set(refreshed.data.map((task) => task.id));
|
|
setAssignedTasks(refreshed.data);
|
|
const eventTypeId = targetEvent.event_type_id ?? null;
|
|
const filteredLibraryTasks = libraryTasks.data.filter((task) => {
|
|
if (assignedIds.has(task.id)) {
|
|
return false;
|
|
}
|
|
if (eventTypeId && task.event_type_id && task.event_type_id !== eventTypeId) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
setAvailableTasks(filteredLibraryTasks);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('errors.assign', 'Tasks konnten nicht geladen werden.'));
|
|
}
|
|
}
|
|
}, [t]);
|
|
|
|
const relevantEmotions = React.useMemo(() => {
|
|
const filtered = filterEmotionsByEventType(emotions, event?.event_type_id ?? event?.event_type?.id ?? null);
|
|
return filtered.length > 0 ? filtered : emotions;
|
|
}, [emotions, event?.event_type_id, event?.event_type?.id]);
|
|
const emotionChips = React.useMemo(() => {
|
|
const map: Record<number, TenantEmotion> = {};
|
|
assignedTasks.forEach((task) => {
|
|
if (task.emotion) {
|
|
map[task.emotion.id] = {
|
|
...task.emotion,
|
|
name_translations: task.emotion.name_translations ?? {},
|
|
description: null,
|
|
description_translations: {},
|
|
sort_order: 0,
|
|
is_active: true,
|
|
tenant_id: null,
|
|
is_global: false,
|
|
event_types: [],
|
|
created_at: null,
|
|
updated_at: null,
|
|
} as TenantEmotion;
|
|
}
|
|
});
|
|
return Object.values(map);
|
|
}, [assignedTasks]);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) {
|
|
setError(t('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: 200 }),
|
|
]);
|
|
if (cancelled) return;
|
|
setEvent(eventData);
|
|
const assignedIds = new Set(eventTasksResponse.data.map((task) => task.id));
|
|
setAssignedTasks(eventTasksResponse.data);
|
|
const eventTypeId = eventData.event_type_id ?? null;
|
|
const filteredLibraryTasks = libraryTasks.data.filter((task) => {
|
|
if (assignedIds.has(task.id)) {
|
|
return false;
|
|
}
|
|
if (eventTypeId && task.event_type_id && task.event_type_id !== eventTypeId) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
setAvailableTasks(filteredLibraryTasks);
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('errors.load', 'Event-Tasks konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [slug, t]);
|
|
|
|
const filteredAssignedTasks = React.useMemo(() => {
|
|
let list = assignedTasks;
|
|
if (emotionFilter.length > 0) {
|
|
const set = new Set(emotionFilter);
|
|
list = list.filter((task) => (task.emotion_id ? set.has(task.emotion_id) : false));
|
|
}
|
|
if (difficultyFilter) {
|
|
list = list.filter((task) => task.difficulty === difficultyFilter);
|
|
}
|
|
if (!debouncedTaskSearch) {
|
|
return list;
|
|
}
|
|
return list.filter((task) => `${task.title ?? ''} ${task.description ?? ''}`.toLowerCase().includes(debouncedTaskSearch));
|
|
}, [assignedTasks, debouncedTaskSearch, emotionFilter, difficultyFilter]);
|
|
|
|
React.useEffect(() => {
|
|
setSelectedAssignedIds((prev) => prev.filter((id) => assignedTasks.some((task) => task.id === id)));
|
|
}, [assignedTasks]);
|
|
|
|
React.useEffect(() => {
|
|
setSelectedAvailableIds((prev) => prev.filter((id) => availableTasks.some((task) => task.id === id)));
|
|
}, [availableTasks]);
|
|
|
|
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
|
|
|
|
const handleAssignSingle = React.useCallback(
|
|
async (taskId: number) => {
|
|
if (!event) return;
|
|
const task = availableTasks.find((t) => t.id === taskId);
|
|
if (task) {
|
|
setAvailableTasks((prev) => prev.filter((t) => t.id !== taskId));
|
|
setAssignedTasks((prev) => [...prev, task]);
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await assignTasksToEvent(event.id, [taskId]);
|
|
toast.success(t('actions.assignedToast', 'Tasks wurden zugewiesen.'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
|
|
}
|
|
// revert optimistic change
|
|
if (task) {
|
|
setAssignedTasks((prev) => prev.filter((t) => t.id !== taskId));
|
|
setAvailableTasks((prev) => [...prev, task]);
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
},
|
|
[availableTasks, event, t],
|
|
);
|
|
|
|
const handleDetachSingle = React.useCallback(
|
|
async (taskId: number) => {
|
|
if (!event) return;
|
|
const task = assignedTasks.find((t) => t.id === taskId);
|
|
if (task) {
|
|
setAssignedTasks((prev) => prev.filter((t) => t.id !== taskId));
|
|
setAvailableTasks((prev) => [...prev, task]);
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await detachTasksFromEvent(event.id, [taskId]);
|
|
toast.success(t('actions.removedToast', 'Tasks wurden entfernt.'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.remove', 'Tasks konnten nicht entfernt werden.'));
|
|
}
|
|
// revert optimistic change
|
|
if (task) {
|
|
setAvailableTasks((prev) => prev.filter((t) => t.id !== taskId));
|
|
setAssignedTasks((prev) => [...prev, task]);
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
},
|
|
[assignedTasks, event, t],
|
|
);
|
|
|
|
const handleDragEnd = (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (!over || !active?.data?.current) {
|
|
setDraggingId(null);
|
|
return;
|
|
}
|
|
|
|
const originList = active.data.current.list as 'assigned' | 'library';
|
|
const overList = (over.data?.current?.list as 'assigned' | 'library' | undefined) ?? null;
|
|
const targetList =
|
|
overList ??
|
|
(over.id === 'assigned-dropzone'
|
|
? 'assigned'
|
|
: over.id === 'library-dropzone'
|
|
? 'library'
|
|
: null);
|
|
|
|
setDraggingId(null);
|
|
if (!targetList || targetList === originList) {
|
|
return;
|
|
}
|
|
|
|
const taskId = Number(active.id);
|
|
if (Number.isNaN(taskId)) {
|
|
return;
|
|
}
|
|
|
|
if (targetList === 'assigned') {
|
|
void handleAssignSingle(taskId);
|
|
} else {
|
|
void handleDetachSingle(taskId);
|
|
}
|
|
};
|
|
|
|
const handleCreateQuickTask = React.useCallback(async () => {
|
|
if (!event || !newTaskTitle.trim()) return;
|
|
setCreatingTask(true);
|
|
const emotion = emotions.find((e) => e.id === newTaskEmotionId) ?? null;
|
|
try {
|
|
const created = await createTask({
|
|
title: newTaskTitle.trim(),
|
|
description: newTaskDescription.trim() || null,
|
|
emotion_id: newTaskEmotionId ?? undefined,
|
|
event_type_id: event.event_type_id ?? undefined,
|
|
difficulty: newTaskDifficulty || undefined,
|
|
});
|
|
setAssignedTasks((prev) => [...prev, { ...created, emotion: emotion ?? created.emotion ?? null }]);
|
|
setAvailableTasks((prev) => prev.filter((task) => task.id !== created.id));
|
|
await assignTasksToEvent(event.id, [created.id]);
|
|
toast.success(t('actions.created', 'Aufgabe erstellt und zugewiesen.'));
|
|
setNewTaskTitle('');
|
|
setNewTaskDescription('');
|
|
setNewTaskEmotionId(null);
|
|
setNewTaskDifficulty('');
|
|
await hydrateTasks(event);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.create', 'Aufgabe konnte nicht erstellt werden.'));
|
|
}
|
|
} finally {
|
|
setCreatingTask(false);
|
|
}
|
|
}, [event, newTaskDescription, newTaskEmotionId, newTaskTitle, newTaskDifficulty, emotions, hydrateTasks, t]);
|
|
|
|
const eventTabs = React.useMemo(() => {
|
|
if (!event) {
|
|
return [];
|
|
}
|
|
const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
|
const taskBadge = loading ? undefined : assignedTasks.length;
|
|
return buildEventTabs(event, translateMenu, {
|
|
photos: event.photo_count ?? undefined,
|
|
tasks: taskBadge,
|
|
});
|
|
}, [event, assignedTasks.length, t, loading]);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
setCollectionsLoading(true);
|
|
setCollectionsError(null);
|
|
const eventTypeSlug = event?.event_type?.slug ?? null;
|
|
const query = eventTypeSlug
|
|
? { top_picks: true, limit: 6, event_type: eventTypeSlug }
|
|
: { top_picks: true, limit: 6 };
|
|
|
|
getTaskCollections(query)
|
|
.then((result) => {
|
|
if (cancelled) return;
|
|
setCollections(result.data);
|
|
})
|
|
.catch((err) => {
|
|
if (cancelled) return;
|
|
if (!isAuthError(err)) {
|
|
setCollectionsError(t('collections.error', 'Kollektionen konnten nicht geladen werden.'));
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
setCollectionsLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [event?.event_type?.slug, t]);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
setEmotionsLoading(true);
|
|
setEmotionsError(null);
|
|
getEmotions()
|
|
.then((list) => {
|
|
if (!cancelled) {
|
|
setEmotions(list);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
if (cancelled) {
|
|
return;
|
|
}
|
|
if (!isAuthError(err)) {
|
|
setEmotionsError(t('tasks.emotions.error', 'Emotionen konnten nicht geladen werden.'));
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) {
|
|
setEmotionsLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [t]);
|
|
|
|
const handleImportCollection = React.useCallback(async (collection: TenantTaskCollection) => {
|
|
if (!slug || !event) {
|
|
return;
|
|
}
|
|
setImportingCollectionId(collection.id);
|
|
try {
|
|
await importTaskCollection(collection.id, slug);
|
|
toast.success(
|
|
t('collections.imported', {
|
|
defaultValue: 'Mission Pack "{{name}}" importiert.',
|
|
name: collection.name,
|
|
}),
|
|
);
|
|
await hydrateTasks(event);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('collections.importFailed', 'Mission Pack konnte nicht importiert werden.'));
|
|
}
|
|
} finally {
|
|
setImportingCollectionId(null);
|
|
}
|
|
}, [event, hydrateTasks, slug, t]);
|
|
|
|
const tasksEnabled = React.useMemo(() => {
|
|
const settingsMode =
|
|
event?.settings && typeof event.settings === 'object' && 'engagement_mode' in (event.settings as Record<string, unknown>)
|
|
? (event.settings as { engagement_mode?: string }).engagement_mode
|
|
: undefined;
|
|
const mode = event?.engagement_mode ?? settingsMode;
|
|
return mode !== 'photo_only';
|
|
}, [event?.engagement_mode, event?.settings]);
|
|
|
|
const summaryBadges = !loading && event ? (
|
|
<div className="mb-4 flex flex-wrap gap-2">
|
|
<Badge className="flex items-center gap-2 rounded-full bg-slate-900 text-white">
|
|
<span className="text-xs uppercase tracking-wide text-white/80">
|
|
{t('summary.assigned', 'Zugeordnete Tasks')}
|
|
</span>
|
|
<span className="text-sm font-semibold">{assignedTasks.length}</span>
|
|
</Badge>
|
|
<Badge className="flex items-center gap-2 rounded-full bg-emerald-600/90 text-white">
|
|
<span className="text-xs uppercase tracking-wide text-white/80">
|
|
{t('summary.library', 'Bibliothek')}
|
|
</span>
|
|
<span className="text-sm font-semibold">{availableTasks.length}</span>
|
|
</Badge>
|
|
<Badge className="flex items-center gap-2 rounded-full bg-pink-500/90 text-white">
|
|
<span className="text-xs uppercase tracking-wide text-white/80">
|
|
{t('summary.mode', 'Aktiver Modus')}
|
|
</span>
|
|
<span className="text-sm font-semibold">
|
|
{tasksEnabled ? t('summary.tasksMode', 'Mission Cards') : t('summary.photoOnly', 'Nur Fotos')}
|
|
</span>
|
|
</Badge>
|
|
</div>
|
|
) : null;
|
|
|
|
async function handleModeChange(checked: boolean) {
|
|
if (!event || !slug) return;
|
|
|
|
setModeSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const nextMode = checked ? 'tasks' : 'photo_only';
|
|
const updated = await updateEvent(slug, {
|
|
settings: {
|
|
...(event.settings ?? {}),
|
|
engagement_mode: nextMode,
|
|
},
|
|
});
|
|
setEvent((prev) => ({
|
|
...(prev ?? updated),
|
|
...(updated ?? {}),
|
|
engagement_mode: updated?.engagement_mode ?? nextMode,
|
|
settings: {
|
|
...(prev?.settings ?? {}),
|
|
...(updated?.settings ?? {}),
|
|
engagement_mode: nextMode,
|
|
},
|
|
}));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(
|
|
checked
|
|
? t('errors.photoOnlyEnable', 'Foto-Modus konnte nicht aktiviert werden.')
|
|
: t('errors.photoOnlyDisable', 'Foto-Modus konnte nicht deaktiviert werden.'),
|
|
);
|
|
}
|
|
} finally {
|
|
setModeSaving(false);
|
|
}
|
|
}
|
|
|
|
const handleAssignSelected = React.useCallback(async () => {
|
|
if (!event || selectedAvailableIds.length === 0) return;
|
|
const ids = selectedAvailableIds;
|
|
const move = availableTasks.filter((task) => ids.includes(task.id));
|
|
if (!move.length) return;
|
|
|
|
const nextAvailableSet = new Set(ids);
|
|
const prevAssigned = assignedTasks;
|
|
const prevAvailable = availableTasks;
|
|
|
|
setAssignedTasks((prev) => [...prev, ...move]);
|
|
setAvailableTasks((prev) => prev.filter((task) => !nextAvailableSet.has(task.id)));
|
|
setSelectedAvailableIds([]);
|
|
setBatchSaving(true);
|
|
try {
|
|
await assignTasksToEvent(event.id, ids);
|
|
toast.success(t('actions.assignedToast', 'Tasks wurden zugewiesen.'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
|
|
}
|
|
setAssignedTasks(prevAssigned);
|
|
setAvailableTasks(prevAvailable);
|
|
} finally {
|
|
setBatchSaving(false);
|
|
}
|
|
}, [event, selectedAvailableIds, availableTasks, assignedTasks, t]);
|
|
|
|
const handleDetachSelected = React.useCallback(async () => {
|
|
if (!event || selectedAssignedIds.length === 0) return;
|
|
const ids = selectedAssignedIds;
|
|
const move = assignedTasks.filter((task) => ids.includes(task.id));
|
|
if (!move.length) return;
|
|
|
|
const nextAssignedSet = new Set(ids);
|
|
const prevAssigned = assignedTasks;
|
|
const prevAvailable = availableTasks;
|
|
|
|
setAssignedTasks((prev) => prev.filter((task) => !nextAssignedSet.has(task.id)));
|
|
setAvailableTasks((prev) => [...prev, ...move]);
|
|
setSelectedAssignedIds([]);
|
|
setBatchSaving(true);
|
|
try {
|
|
await detachTasksFromEvent(event.id, ids);
|
|
toast.success(t('actions.removedToast', 'Tasks wurden entfernt.'));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.remove', 'Tasks konnten nicht entfernt werden.'));
|
|
}
|
|
setAssignedTasks(prevAssigned);
|
|
setAvailableTasks(prevAvailable);
|
|
} finally {
|
|
setBatchSaving(false);
|
|
}
|
|
}, [event, selectedAssignedIds, assignedTasks, availableTasks, t]);
|
|
|
|
const handleInlineUpdate = React.useCallback(
|
|
async (taskId: number, payload: { title?: string; difficulty?: TenantTask['difficulty'] | '' }) => {
|
|
if (!event) return;
|
|
|
|
const prevAssigned = assignedTasks;
|
|
const prevAvailable = availableTasks;
|
|
const existingAssigned = assignedTasks.find((task) => task.id === taskId);
|
|
const existingAvailable = availableTasks.find((task) => task.id === taskId);
|
|
const optimistic = existingAssigned ?? existingAvailable;
|
|
if (!optimistic) {
|
|
return;
|
|
}
|
|
|
|
const patch: Partial<TenantTask> = {
|
|
...payload,
|
|
title: payload.title ?? optimistic.title,
|
|
difficulty: payload.difficulty || null,
|
|
} as Partial<TenantTask>;
|
|
|
|
if (existingAssigned) {
|
|
setAssignedTasks((prev) => prev.map((task) => (task.id === taskId ? { ...task, ...patch } : task)));
|
|
}
|
|
if (existingAvailable) {
|
|
setAvailableTasks((prev) => prev.map((task) => (task.id === taskId ? { ...task, ...patch } : task)));
|
|
}
|
|
|
|
setInlineSavingId(taskId);
|
|
const duplicateAndAssign = async () => {
|
|
const created = await createTask({
|
|
title: patch.title,
|
|
difficulty: patch.difficulty ?? undefined,
|
|
description: optimistic.description ?? null,
|
|
priority: optimistic.priority ?? undefined,
|
|
emotion_id: optimistic.emotion_id ?? undefined,
|
|
event_type_id: optimistic.event_type_id ?? undefined,
|
|
});
|
|
await assignTasksToEvent(event.id, [created.id]);
|
|
setAssignedTasks((prev) => {
|
|
const withoutOld = prev.filter((task) => task.id !== taskId);
|
|
return [...withoutOld, { ...created, emotion: optimistic.emotion ?? created.emotion ?? null }];
|
|
});
|
|
setAvailableTasks((prev) => prev.filter((task) => task.id !== taskId));
|
|
toast.success(t('actions.created', 'Aufgabe erstellt und zugewiesen.'));
|
|
};
|
|
|
|
try {
|
|
if (optimistic.tenant_id === null) {
|
|
await duplicateAndAssign();
|
|
} else {
|
|
const updated = await updateTask(taskId, {
|
|
title: patch.title,
|
|
difficulty: payload.difficulty || undefined,
|
|
description: optimistic.description ?? undefined,
|
|
priority: optimistic.priority ?? undefined,
|
|
emotion_id: optimistic.emotion_id ?? undefined,
|
|
});
|
|
|
|
if (existingAssigned) {
|
|
setAssignedTasks((prev) => prev.map((task) => (task.id === taskId ? { ...task, ...updated } : task)));
|
|
}
|
|
if (existingAvailable) {
|
|
setAvailableTasks((prev) => prev.map((task) => (task.id === taskId ? { ...task, ...updated } : task)));
|
|
}
|
|
toast.success(t('actions.updated', 'Task aktualisiert.'));
|
|
}
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
toast.error(t('errors.update', 'Task konnte nicht aktualisiert werden.'));
|
|
}
|
|
setAssignedTasks(prevAssigned);
|
|
setAvailableTasks(prevAvailable);
|
|
} finally {
|
|
setInlineSavingId(null);
|
|
}
|
|
},
|
|
[event, assignedTasks, availableTasks, t],
|
|
);
|
|
|
|
const actions = (
|
|
<Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
{t('actions.back', 'Zurück zur Übersicht')}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('title', 'Aufgaben & Missionen')}
|
|
subtitle={t('subtitle', 'Stelle Mission Cards und Aufgaben für dieses Event zusammen.')}
|
|
actions={actions}
|
|
tabs={eventTabs}
|
|
currentTabKey="tasks"
|
|
>
|
|
{summaryBadges}
|
|
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{tDashboard('alerts.errorTitle', 'Fehler')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{loading ? (
|
|
<TaskSkeleton />
|
|
) : !event ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
|
|
<AlertDescription>{t('alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
|
|
</Alert>
|
|
) : (
|
|
<>
|
|
<Tabs value={tab} onValueChange={(value) => setTab(value as 'tasks' | 'packs')} className="space-y-6">
|
|
<TabsList className="grid gap-2 rounded-2xl bg-slate-100/80 p-1 sm:grid-cols-2">
|
|
<TabsTrigger value="tasks">{t('tabs.tasks', 'Aufgaben')}</TabsTrigger>
|
|
<TabsTrigger value="packs">{t('tabs.packs', 'Mission Packs')}</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tasks" className="space-y-6">
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader>
|
|
<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 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">
|
|
{t('modes.title', 'Aufgaben & Foto-Modus')}
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
{tasksEnabled
|
|
? t('modes.tasksHint', 'Aufgaben sind aktiv. Gäste sehen Mission Cards in der App.')
|
|
: t('modes.photoOnlyHint', 'Der Foto-Modus ist aktiv. Gäste können Fotos hochladen, sehen aber keine Aufgaben.')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs uppercase tracking-wide text-slate-500">
|
|
{tasksEnabled ? t('modes.tasks', 'Aufgaben aktiv') : t('modes.photoOnly', 'Foto-Modus')}
|
|
</span>
|
|
<Switch
|
|
checked={tasksEnabled}
|
|
onCheckedChange={handleModeChange}
|
|
disabled={modeSaving}
|
|
aria-label={t('modes.switchLabel', 'Aufgaben aktivieren/deaktivieren')}
|
|
/>
|
|
</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('modes.updating', 'Einstellung wird gespeichert ...')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pb-0">
|
|
<Alert variant="default" className="rounded-2xl border border-dashed border-emerald-200 bg-emerald-50/60 text-xs text-slate-700">
|
|
<AlertTitle className="text-sm font-semibold text-slate-900">
|
|
{t('library.hintTitle', 'Weitere Vorlagen in der Aufgaben-Bibliothek')}
|
|
</AlertTitle>
|
|
<AlertDescription className="mt-1 flex flex-wrap items-center gap-2">
|
|
<span>
|
|
{t('library.hintCopy', 'Lege eigene Aufgaben, Emotionen oder Mission Packs zentral an und nutze sie in mehreren Events.')}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-1 rounded-full border-emerald-300 text-emerald-700 hover:bg-emerald-100"
|
|
onClick={() => navigate(buildEngagementTabPath('tasks'))}
|
|
>
|
|
{t('library.open', 'Aufgaben-Bibliothek öffnen')}
|
|
</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragStart={(event) => setDraggingId(Number(event.active.id))}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<CardContent className="grid gap-4 lg:grid-cols-2">
|
|
<section className="space-y-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-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('sections.assigned.title', 'Zugeordnete Tasks')}
|
|
</h3>
|
|
<div className="flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
|
|
<Checkbox
|
|
checked={
|
|
filteredAssignedTasks.length > 0 && filteredAssignedTasks.every((task) => selectedAssignedIds.includes(task.id))
|
|
? true
|
|
: selectedAssignedIds.some((id) => filteredAssignedTasks.some((task) => task.id === id))
|
|
? 'indeterminate'
|
|
: false
|
|
}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedAssignedIds((prev) => {
|
|
const next = new Set(prev);
|
|
filteredAssignedTasks.forEach((task) => next.add(task.id));
|
|
return Array.from(next);
|
|
});
|
|
} else {
|
|
const visibleIds = new Set(filteredAssignedTasks.map((task) => task.id));
|
|
setSelectedAssignedIds((prev) => prev.filter((id) => !visibleIds.has(id)));
|
|
}
|
|
}}
|
|
aria-label={t('sections.assigned.selectAll', 'Alle sichtbaren Aufgaben auswählen')}
|
|
/>
|
|
<span className="text-xs text-slate-600">
|
|
{t('sections.assigned.selectedCount', {
|
|
defaultValue: '{{count}} ausgewählt',
|
|
count: selectedAssignedIds.length,
|
|
})}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
|
|
<Search className="h-4 w-4 text-slate-500" />
|
|
<Input
|
|
value={taskSearch}
|
|
onChange={(event) => setTaskSearch(event.target.value)}
|
|
placeholder={t('sections.assigned.search', 'Aufgaben suchen...')}
|
|
className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700">
|
|
<span>{t('sections.assigned.results', { defaultValue: '{{count}} Treffer', count: filteredAssignedTasks.length })}</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant={difficultyFilter ? 'default' : 'outline'}
|
|
className="rounded-full"
|
|
onClick={() => setDifficultyFilter((prev) => (prev ? '' : 'medium'))}
|
|
aria-expanded={difficultyFilter ? true : false}
|
|
>
|
|
{difficultyFilter
|
|
? t('sections.assigned.difficulty.active', { defaultValue: 'Schwierigkeit: ' }) +
|
|
t(
|
|
difficultyFilter === 'easy'
|
|
? 'sections.assigned.difficulty.easy'
|
|
: difficultyFilter === 'medium'
|
|
? 'sections.assigned.difficulty.medium'
|
|
: 'sections.assigned.difficulty.hard',
|
|
difficultyFilter === 'easy' ? 'Leicht' : difficultyFilter === 'medium' ? 'Mittel' : 'Schwer',
|
|
)
|
|
: t('sections.assigned.difficulty.filter', 'Nach Schwierigkeit filtern')}
|
|
</Button>
|
|
{difficultyFilter ? (
|
|
<div className="flex flex-wrap gap-2 rounded-xl border border-slate-200 bg-white/80 p-2">
|
|
{(['', 'easy', 'medium', 'hard'] as Array<TenantTask['difficulty'] | ''>).map((value) => {
|
|
const active = difficultyFilter === value;
|
|
const label =
|
|
value === 'easy'
|
|
? t('sections.assigned.difficulty.easy', 'Leicht')
|
|
: value === 'medium'
|
|
? t('sections.assigned.difficulty.medium', 'Mittel')
|
|
: value === 'hard'
|
|
? t('sections.assigned.difficulty.hard', 'Schwer')
|
|
: t('sections.assigned.difficulty.all', 'Alle Stufen');
|
|
return (
|
|
<Button
|
|
key={value || 'all'}
|
|
size="sm"
|
|
variant={active ? 'default' : 'outline'}
|
|
className="rounded-full"
|
|
onClick={() => setDifficultyFilter(value)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{emotionChips.length > 0 ? (
|
|
<Button
|
|
size="sm"
|
|
variant={emotionFilterOpen ? 'default' : 'outline'}
|
|
className="rounded-full"
|
|
onClick={() => setEmotionFilterOpen((prev) => !prev)}
|
|
>
|
|
{emotionFilterOpen
|
|
? t('filters.emotionsHide', 'Emotionen ausblenden')
|
|
: t('filters.emotionsShow', 'Emotionen filtern')}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleDetachSelected()}
|
|
disabled={selectedAssignedIds.length === 0 || batchSaving || saving}
|
|
>
|
|
{t('actions.removeSelected', 'Auswahl entfernen')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{emotionChips.length > 0 && emotionFilterOpen ? (
|
|
<div className="flex flex-wrap gap-2 rounded-xl border border-slate-200 bg-white/80 p-2">
|
|
<Button
|
|
size="sm"
|
|
variant={emotionFilter.length === 0 ? 'default' : 'outline'}
|
|
onClick={() => setEmotionFilter([])}
|
|
className="rounded-full"
|
|
>
|
|
{t('filters.allEmotions', 'Alle Emotionen')}
|
|
</Button>
|
|
{emotionChips.map((emotion) => {
|
|
const active = emotionFilter.includes(emotion.id);
|
|
return (
|
|
<Button
|
|
key={emotion.id}
|
|
size="sm"
|
|
variant={active ? 'default' : 'outline'}
|
|
onClick={() =>
|
|
setEmotionFilter((prev) =>
|
|
active ? prev.filter((id) => id !== emotion.id) : [...prev, emotion.id]
|
|
)
|
|
}
|
|
className="rounded-full"
|
|
style={
|
|
active
|
|
? { backgroundColor: emotion.color ?? '#e0f2fe', color: '#0f172a' }
|
|
: { borderColor: emotion.color ?? undefined, color: '#0f172a' }
|
|
}
|
|
>
|
|
{emotion.icon ? <span className="mr-1">{emotion.icon}</span> : null}
|
|
{emotion.name}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
|
|
<DropZone id="assigned-dropzone">
|
|
{filteredAssignedTasks.length === 0 ? (
|
|
<EmptyState
|
|
message={
|
|
taskSearch.trim()
|
|
? t('sections.assigned.noResults', 'Keine Aufgaben zum Suchbegriff.')
|
|
: t('sections.assigned.empty', 'Noch keine Tasks zugewiesen.')
|
|
}
|
|
/>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{filteredAssignedTasks.map((task) => (
|
|
<DraggableTaskCard
|
|
key={task.id}
|
|
task={task}
|
|
origin="assigned"
|
|
onRemove={() => void handleDetachSingle(task.id)}
|
|
showCheckbox
|
|
checked={selectedAssignedIds.includes(task.id)}
|
|
onCheckedChange={(checked) => {
|
|
setSelectedAssignedIds((prev) => {
|
|
if (checked) {
|
|
if (prev.includes(task.id)) return prev;
|
|
return [...prev, task.id];
|
|
}
|
|
return prev.filter((id) => id !== task.id);
|
|
});
|
|
}}
|
|
disabled={batchSaving || saving}
|
|
onInlineUpdate={handleInlineUpdate}
|
|
inlineSaving={inlineSavingId === task.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</DropZone>
|
|
</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('sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
|
|
</h3>
|
|
<div className="rounded-2xl border border-emerald-100 bg-emerald-50/60 p-3 shadow-inner">
|
|
<p className="text-xs font-semibold text-emerald-700">{t('sections.library.quickCreate', 'Schnell neue Aufgabe anlegen')}</p>
|
|
<div className="mt-2 grid gap-2">
|
|
<Input
|
|
value={newTaskTitle}
|
|
onChange={(e) => setNewTaskTitle(e.target.value)}
|
|
placeholder={t('sections.library.quickTitle', 'Titel der Aufgabe')}
|
|
disabled={!tasksEnabled || creatingTask}
|
|
/>
|
|
<Textarea
|
|
value={newTaskDescription}
|
|
onChange={(e) => setNewTaskDescription(e.target.value)}
|
|
placeholder={t('sections.library.quickDescription', 'Beschreibung (optional)')}
|
|
disabled={!tasksEnabled || creatingTask}
|
|
className="min-h-[70px]"
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-slate-700">{t('sections.library.quickEmotion', 'Emotion')}</label>
|
|
<select
|
|
className="h-9 rounded-lg border border-slate-200 bg-white px-2 text-sm"
|
|
value={newTaskEmotionId ?? ''}
|
|
onChange={(e) => setNewTaskEmotionId(e.target.value ? Number(e.target.value) : null)}
|
|
disabled={!tasksEnabled || creatingTask}
|
|
>
|
|
<option value="">{t('sections.library.quickEmotionNone', 'Keine')}</option>
|
|
{relevantEmotions.map((emotion) => (
|
|
<option key={emotion.id} value={emotion.id}>
|
|
{emotion.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-slate-700">{t('sections.library.quickDifficulty', 'Schwierigkeit')}</label>
|
|
<select
|
|
className="h-9 rounded-lg border border-slate-200 bg-white px-2 text-sm"
|
|
disabled={!tasksEnabled || creatingTask}
|
|
value={newTaskDifficulty}
|
|
onChange={(e) => setNewTaskDifficulty(e.target.value as TenantTask['difficulty'] | '')}
|
|
>
|
|
<option value="">{t('sections.library.quickDifficultyNone', 'Keine')}</option>
|
|
<option value="easy">{t('sections.library.difficulty.easy', 'Leicht')}</option>
|
|
<option value="medium">{t('sections.library.difficulty.medium', 'Mittel')}</option>
|
|
<option value="hard">{t('sections.library.difficulty.hard', 'Schwer')}</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => void handleCreateQuickTask()}
|
|
disabled={!newTaskTitle.trim() || creatingTask || !tasksEnabled}
|
|
>
|
|
{creatingTask ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
t('sections.library.quickCreateCta', 'Erstellen & zuweisen')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DropZone id="library-dropzone">
|
|
<div className="space-y-2 max-h-72 overflow-y-auto">
|
|
{availableTasks.length === 0 ? (
|
|
<EmptyState message={t('sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between gap-2 pb-1">
|
|
<div className="flex items-center gap-2 text-xs text-slate-700">
|
|
<Checkbox
|
|
checked={
|
|
availableTasks.length > 0 && availableTasks.every((task) => selectedAvailableIds.includes(task.id))
|
|
? true
|
|
: selectedAvailableIds.some((id) => availableTasks.some((task) => task.id === id))
|
|
? 'indeterminate'
|
|
: false
|
|
}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedAvailableIds((prev) => {
|
|
const next = new Set(prev);
|
|
availableTasks.forEach((task) => next.add(task.id));
|
|
return Array.from(next);
|
|
});
|
|
} else {
|
|
setSelectedAvailableIds([]);
|
|
}
|
|
}}
|
|
aria-label={t('sections.library.selectAll', 'Alle Bibliotheks-Tasks auswählen')}
|
|
/>
|
|
<span>
|
|
{t('sections.library.selectedCount', {
|
|
defaultValue: '{{count}} ausgewählt',
|
|
count: selectedAvailableIds.length,
|
|
})}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleAssignSelected()}
|
|
disabled={selectedAvailableIds.length === 0 || !tasksEnabled || batchSaving || saving}
|
|
>
|
|
{t('actions.assignSelected', 'Auswahl zuweisen')}
|
|
</Button>
|
|
</div>
|
|
{availableTasks.map((task) => (
|
|
<DraggableTaskCard
|
|
key={task.id}
|
|
task={task}
|
|
origin="library"
|
|
onAdd={() => void handleAssignSingle(task.id)}
|
|
disabled={!tasksEnabled || saving || batchSaving}
|
|
showCheckbox
|
|
checked={selectedAvailableIds.includes(task.id)}
|
|
onCheckedChange={(checked) => {
|
|
setSelectedAvailableIds((prev) => {
|
|
if (checked) {
|
|
if (prev.includes(task.id)) return prev;
|
|
return [...prev, task.id];
|
|
}
|
|
return prev.filter((id) => id !== task.id);
|
|
});
|
|
}}
|
|
onInlineUpdate={handleInlineUpdate}
|
|
inlineSaving={inlineSavingId === task.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DropZone>
|
|
</section>
|
|
</CardContent>
|
|
<DragOverlay>
|
|
{draggingId ? (
|
|
<div className="rounded-2xl border border-dashed border-slate-200 bg-white/90 px-4 py-3 shadow-sm opacity-80">
|
|
{filteredAssignedTasks.find((t) => t.id === draggingId)?.title ??
|
|
availableTasks.find((t) => t.id === draggingId)?.title}
|
|
</div>
|
|
) : null}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
</Card>
|
|
|
|
<div className="sticky bottom-3 z-10 flex flex-col gap-2 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-xl shadow-slate-200 lg:top-4 lg:bottom-auto">
|
|
<div className="flex flex-wrap items-center gap-3 text-sm text-slate-700">
|
|
<span className="font-semibold text-slate-900">
|
|
{t('sections.bulk.title', 'Batch-Aktionen')}
|
|
</span>
|
|
<Badge variant="outline" className="border-slate-200 text-slate-700">
|
|
{t('sections.bulk.assignedSelected', {
|
|
defaultValue: '{{count}} ausgewählt (Zugeordnet)',
|
|
count: selectedAssignedIds.length,
|
|
})}
|
|
</Badge>
|
|
<Badge variant="outline" className="border-slate-200 text-slate-700">
|
|
{t('sections.bulk.librarySelected', {
|
|
defaultValue: '{{count}} ausgewählt (Bibliothek)',
|
|
count: selectedAvailableIds.length,
|
|
})}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleAssignSelected()}
|
|
disabled={selectedAvailableIds.length === 0 || !tasksEnabled || batchSaving || saving}
|
|
>
|
|
{t('actions.assignSelected', 'Auswahl zuweisen')}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleDetachSelected()}
|
|
disabled={selectedAssignedIds.length === 0 || batchSaving || saving}
|
|
>
|
|
{t('actions.removeSelected', 'Auswahl entfernen')}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => navigate(buildEngagementTabPath('tasks'))}
|
|
>
|
|
{t('library.open', 'Aufgaben-Bibliothek öffnen')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<EmotionsCard
|
|
emotions={relevantEmotions}
|
|
emotionsLoading={emotionsLoading}
|
|
emotionsError={emotionsError}
|
|
onOpenEmotions={() => setEmotionsModalOpen(true)}
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="packs">
|
|
<MissionPackGrid
|
|
collections={collections}
|
|
loading={collectionsLoading}
|
|
error={collectionsError}
|
|
onImport={handleImportCollection}
|
|
importingId={importingCollectionId}
|
|
onViewAll={() => navigate(buildEngagementTabPath('collections'))}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
)}
|
|
|
|
<Dialog open={emotionsModalOpen} onOpenChange={setEmotionsModalOpen}>
|
|
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('tasks.emotions.manage', 'Emotionen verwalten')}</DialogTitle>
|
|
</DialogHeader>
|
|
<EmotionsSection embedded />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</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 DropZone({ id, children }: { id: string; children: React.ReactNode }) {
|
|
const zone = id === 'assigned-dropzone' ? 'assigned' : 'library';
|
|
const { setNodeRef, isOver } = useDroppable({ id, data: { list: zone } });
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={`rounded-2xl border border-dashed p-2 ${isOver ? 'border-pink-200 bg-pink-50/70' : 'border-slate-200/70'}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DraggableTaskCard({
|
|
task,
|
|
origin,
|
|
onRemove,
|
|
onAdd,
|
|
disabled,
|
|
showCheckbox,
|
|
checked,
|
|
onCheckedChange,
|
|
onInlineUpdate,
|
|
inlineSaving,
|
|
}: {
|
|
task: TenantTask;
|
|
origin: 'assigned' | 'library';
|
|
onRemove?: () => void;
|
|
onAdd?: () => void;
|
|
disabled?: boolean;
|
|
showCheckbox?: boolean;
|
|
checked?: boolean;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
onInlineUpdate?: (taskId: number, payload: { title?: string; difficulty?: TenantTask['difficulty'] | '' }) => void;
|
|
inlineSaving?: boolean;
|
|
}) {
|
|
const { t } = useTranslation('management');
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useDraggable({
|
|
id: task.id,
|
|
data: { list: origin },
|
|
});
|
|
|
|
const [editing, setEditing] = React.useState(false);
|
|
const [titleValue, setTitleValue] = React.useState(task.title ?? '');
|
|
const [difficultyValue, setDifficultyValue] = React.useState<TenantTask['difficulty'] | ''>(task.difficulty ?? '');
|
|
|
|
React.useEffect(() => {
|
|
setTitleValue(task.title ?? '');
|
|
setDifficultyValue(task.difficulty ?? '');
|
|
}, [task.title, task.difficulty]);
|
|
|
|
const style = {
|
|
transform: transform ? CSS.Translate.toString(transform) : undefined,
|
|
transition: transition || undefined,
|
|
opacity: isDragging ? 0.8 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className="rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm"
|
|
onDoubleClick={() => setEditing(true)}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex items-center gap-2 pt-1">
|
|
{showCheckbox ? (
|
|
<Checkbox
|
|
checked={checked ?? false}
|
|
onCheckedChange={(state) => onCheckedChange?.(Boolean(state))}
|
|
aria-label={t('actions.selectTask', 'Task auswählen')}
|
|
/>
|
|
) : null}
|
|
<button
|
|
className="h-7 w-7 rounded-md border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50 disabled:opacity-50"
|
|
{...listeners}
|
|
{...attributes}
|
|
disabled={disabled}
|
|
aria-label={t('library.dragHandle', 'Task verschieben')}
|
|
>
|
|
⋮⋮
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 space-y-2 min-w-0">
|
|
<div className="space-y-1 min-w-0 max-w-full">
|
|
{editing ? (
|
|
<div className="space-y-2">
|
|
<Textarea
|
|
value={titleValue}
|
|
onChange={(e) => setTitleValue(e.target.value)}
|
|
disabled={inlineSaving}
|
|
className="min-h-[64px]"
|
|
/>
|
|
<select
|
|
className="h-9 w-full rounded-lg border border-slate-200 bg-white px-2 text-sm"
|
|
value={difficultyValue}
|
|
onChange={(e) => setDifficultyValue(e.target.value as TenantTask['difficulty'] | '')}
|
|
disabled={inlineSaving}
|
|
>
|
|
<option value="">{t('sections.assigned.difficulty.all', 'Alle Stufen')}</option>
|
|
<option value="easy">{t('sections.library.difficulty.easy', 'Leicht')}</option>
|
|
<option value="medium">{t('sections.library.difficulty.medium', 'Mittel')}</option>
|
|
<option value="hard">{t('sections.library.difficulty.hard', 'Schwer')}</option>
|
|
</select>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="icon"
|
|
variant="secondary"
|
|
className="h-8 w-8"
|
|
disabled={!titleValue.trim() || inlineSaving}
|
|
onClick={() => {
|
|
if (!onInlineUpdate) return;
|
|
onInlineUpdate(task.id, { title: titleValue.trim(), difficulty: difficultyValue });
|
|
setEditing(false);
|
|
}}
|
|
>
|
|
{inlineSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8"
|
|
disabled={inlineSaving}
|
|
onClick={() => {
|
|
setTitleValue(task.title ?? '');
|
|
setDifficultyValue(task.difficulty ?? '');
|
|
setEditing(false);
|
|
}}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium text-slate-900 break-words">{task.title}</p>
|
|
{task.description ? <p className="text-xs text-slate-600 break-words">{task.description}</p> : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{!editing && task.emotion ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-transparent text-[11px]"
|
|
style={{
|
|
backgroundColor: `${task.emotion.color ?? '#eef2ff'}20`,
|
|
color: task.emotion.color ?? '#4338ca',
|
|
}}
|
|
>
|
|
{task.emotion.icon ? <span className="mr-1">{task.emotion.icon}</span> : null}
|
|
{task.emotion.name}
|
|
</Badge>
|
|
) : null}
|
|
{!editing ? (
|
|
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
|
{mapPriority(task.priority, (key, fallback) => t(key, { defaultValue: fallback }))}
|
|
</Badge>
|
|
) : null}
|
|
{task.tenant_id !== null ? (
|
|
<Badge variant="outline" className="border-emerald-200 text-emerald-700">
|
|
{t('tasks.customBadge', 'Eigene Aufgabe')}
|
|
</Badge>
|
|
) : null}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => setEditing((prev) => !prev)}
|
|
aria-label={t('actions.edit', 'Bearbeiten')}
|
|
disabled={inlineSaving}
|
|
>
|
|
{editing ? <X className="h-4 w-4" /> : <Pencil className="h-4 w-4 text-slate-500" />}
|
|
</Button>
|
|
{origin === 'assigned' ? (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onRemove}
|
|
disabled={disabled}
|
|
aria-label={t('actions.remove', 'Vom Event entfernen')}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-slate-500" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={onAdd}
|
|
disabled={disabled}
|
|
aria-label={t('actions.assign', 'Zum Event hinzufügen')}
|
|
>
|
|
<PlusCircle className="h-4 w-4 text-emerald-600" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MissionPackGrid({
|
|
collections,
|
|
loading,
|
|
error,
|
|
onImport,
|
|
importingId,
|
|
onViewAll,
|
|
}: {
|
|
collections: TenantTaskCollection[];
|
|
loading: boolean;
|
|
error: string | null;
|
|
onImport: (collection: TenantTaskCollection) => void;
|
|
importingId: number | null;
|
|
onViewAll: () => void;
|
|
}) {
|
|
const { t } = useTranslation('management', { keyPrefix: 'eventTasks.collections' });
|
|
|
|
return (
|
|
<Card className="border border-slate-200 bg-white/90">
|
|
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2 text-base text-slate-900">
|
|
<Layers className="h-5 w-5 text-pink-500" />
|
|
{t('title', 'Mission Packs')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
{t('subtitle', 'Importiere Aufgaben-Kollektionen, die zu deinem Event passen.')}
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="outline" onClick={onViewAll}>
|
|
{t('viewAll', 'Alle Kollektionen ansehen')}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{error ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('errorTitle', 'Kollektionen nicht verfügbar')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
|
|
{loading ? (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="h-24 animate-pulse rounded-2xl bg-slate-100/60" />
|
|
))}
|
|
</div>
|
|
) : collections.length === 0 ? (
|
|
<EmptyState message={t('empty', 'Keine empfohlenen Kollektionen gefunden.')} />
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{collections.map((collection) => (
|
|
<div key={collection.id} className="flex flex-col rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm">
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<p className="text-sm font-semibold text-slate-900">{collection.name}</p>
|
|
{collection.description ? (
|
|
<p className="text-xs text-slate-500">{collection.description}</p>
|
|
) : null}
|
|
<Badge variant="outline" className="w-fit border-slate-200 text-slate-600">
|
|
{t('tasksCount', {
|
|
defaultValue: '{{count}} Aufgaben',
|
|
count: collection.tasks_count,
|
|
})}
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-4 flex justify-between text-xs text-slate-500">
|
|
<span>{collection.event_type?.name ?? t('genericType', 'Allgemein')}</span>
|
|
<span>{collection.is_global ? t('global', 'Global') : t('custom', 'Custom')}</span>
|
|
</div>
|
|
<Button
|
|
className="mt-4 rounded-full bg-brand-rose text-white"
|
|
disabled={importingId === collection.id}
|
|
onClick={() => onImport(collection)}
|
|
>
|
|
{importingId === collection.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
t('importCta', 'Mission Pack importieren')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
type EmotionsCardProps = {
|
|
emotions: TenantEmotion[];
|
|
emotionsLoading: boolean;
|
|
emotionsError: string | null;
|
|
onOpenEmotions: () => void;
|
|
};
|
|
|
|
function EmotionsCard({ emotions, emotionsLoading, emotionsError, onOpenEmotions }: EmotionsCardProps) {
|
|
const { t } = useTranslation('management');
|
|
const spotlightEmotions = emotions.slice(0, 6);
|
|
|
|
return (
|
|
<Card className="border border-rose-100 bg-rose-50/70 shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base text-rose-900">
|
|
<Sparkles className="h-5 w-5 text-rose-500" />
|
|
{t('tasks.story.emotionsTitle', 'Emotionen')}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-rose-800">
|
|
{t('tasks.story.description', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Badge variant="outline" className="border-rose-200 text-rose-700">
|
|
{t('tasks.story.emotionsCount', { defaultValue: '{{count}} aktiv', count: emotions.length })}
|
|
</Badge>
|
|
<Button
|
|
size="sm"
|
|
className="bg-rose-600 text-white hover:bg-rose-700"
|
|
onClick={onOpenEmotions}
|
|
>
|
|
{t('tasks.story.emotionsCta', 'Emotionen verwalten')}
|
|
</Button>
|
|
</div>
|
|
{emotionsLoading ? (
|
|
<div className="h-10 animate-pulse rounded-xl bg-white/70" />
|
|
) : emotionsError ? (
|
|
<p className="text-xs text-rose-900/70">{emotionsError}</p>
|
|
) : spotlightEmotions.length ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{spotlightEmotions.map((emotion) => (
|
|
<span
|
|
key={emotion.id}
|
|
className="flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold shadow-sm"
|
|
style={{
|
|
backgroundColor: `${emotion.color ?? '#fecdd3'}33`,
|
|
color: emotion.color ?? '#be123c',
|
|
}}
|
|
>
|
|
{emotion.icon ? <span>{emotion.icon}</span> : null}
|
|
{emotion.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-rose-900/70">
|
|
{t('tasks.story.emotionsEmpty', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function mapPriority(priority: TenantTask['priority'], translate: (key: string, defaultValue: string) => string): string {
|
|
switch (priority) {
|
|
case 'low':
|
|
return translate('management.eventTasks.priorities.low', 'Niedrig');
|
|
case 'high':
|
|
return translate('management.eventTasks.priorities.high', 'Hoch');
|
|
case 'urgent':
|
|
return translate('management.eventTasks.priorities.urgent', 'Dringend');
|
|
default:
|
|
return translate('management.eventTasks.priorities.medium', 'Mittel');
|
|
}
|
|
}
|