459 lines
17 KiB
TypeScript
459 lines
17 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { format } from 'date-fns';
|
|
import type { Locale } from 'date-fns';
|
|
import { de, enGB } from 'date-fns/locale';
|
|
import { Layers, Library, Loader2, Plus } from 'lucide-react';
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
getTaskCollections,
|
|
importTaskCollection,
|
|
getEvents,
|
|
PaginationMeta,
|
|
TenantEvent,
|
|
TenantTaskCollection,
|
|
} from '../api';
|
|
import { buildEngagementTabPath } from '../constants';
|
|
import { isAuthError } from '../auth/tokens';
|
|
|
|
const DEFAULT_PAGE_SIZE = 12;
|
|
|
|
type ScopeFilter = 'all' | 'global' | 'tenant';
|
|
|
|
type CollectionsState = {
|
|
items: TenantTaskCollection[];
|
|
meta: PaginationMeta | null;
|
|
};
|
|
|
|
export type TaskCollectionsSectionProps = {
|
|
embedded?: boolean;
|
|
onNavigateToTasks?: () => void;
|
|
};
|
|
|
|
export function TaskCollectionsSection({ embedded = false, onNavigateToTasks }: TaskCollectionsSectionProps) {
|
|
const navigate = useNavigate();
|
|
const { t, i18n } = useTranslation('management');
|
|
|
|
const [collectionsState, setCollectionsState] = React.useState<CollectionsState>({ items: [], meta: null });
|
|
const [page, setPage] = React.useState(1);
|
|
const [search, setSearch] = React.useState('');
|
|
const [scope, setScope] = React.useState<ScopeFilter>('all');
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [successMessage, setSuccessMessage] = React.useState<string | null>(null);
|
|
|
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
const [selectedCollection, setSelectedCollection] = React.useState<TenantTaskCollection | null>(null);
|
|
const [events, setEvents] = React.useState<TenantEvent[]>([]);
|
|
const [selectedEventSlug, setSelectedEventSlug] = React.useState('');
|
|
const [importing, setImporting] = React.useState(false);
|
|
const [eventsLoading, setEventsLoading] = React.useState(false);
|
|
const [eventError, setEventError] = React.useState<string | null>(null);
|
|
const [reloadToken, setReloadToken] = React.useState(0);
|
|
|
|
const scopeParam = React.useMemo(() => {
|
|
if (scope === 'global') return 'global';
|
|
if (scope === 'tenant') return 'tenant';
|
|
return undefined;
|
|
}, [scope]);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
async function loadCollections() {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const result = await getTaskCollections({
|
|
page,
|
|
per_page: DEFAULT_PAGE_SIZE,
|
|
search: search.trim() || undefined,
|
|
scope: scopeParam,
|
|
});
|
|
if (cancelled) return;
|
|
setCollectionsState({ items: result.data, meta: result.meta });
|
|
} catch (err) {
|
|
if (cancelled) return;
|
|
if (!isAuthError(err)) {
|
|
setError(t('collections.notifications.error'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
void loadCollections();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [page, search, scopeParam, reloadToken, t]);
|
|
|
|
React.useEffect(() => {
|
|
if (successMessage) {
|
|
const timeout = setTimeout(() => setSuccessMessage(null), 4000);
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
return undefined;
|
|
}, [successMessage]);
|
|
|
|
async function ensureEventsLoaded() {
|
|
if (events.length > 0 || eventsLoading) {
|
|
return;
|
|
}
|
|
setEventsLoading(true);
|
|
setEventError(null);
|
|
try {
|
|
const result = await getEvents();
|
|
setEvents(result);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setEventError(t('collections.errors.eventsLoad'));
|
|
}
|
|
} finally {
|
|
setEventsLoading(false);
|
|
}
|
|
}
|
|
|
|
function openImportDialog(collection: TenantTaskCollection) {
|
|
setSelectedCollection(collection);
|
|
setSelectedEventSlug('');
|
|
setDialogOpen(true);
|
|
void ensureEventsLoaded();
|
|
}
|
|
|
|
async function handleImport(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (!selectedCollection || !selectedEventSlug) {
|
|
setEventError(t('collections.errors.selectEvent'));
|
|
return;
|
|
}
|
|
setImporting(true);
|
|
setEventError(null);
|
|
try {
|
|
await importTaskCollection(selectedCollection.id, selectedEventSlug);
|
|
setSuccessMessage(t('collections.notifications.imported'));
|
|
setDialogOpen(false);
|
|
setReloadToken((token) => token + 1);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setEventError(t('collections.notifications.error'));
|
|
}
|
|
} finally {
|
|
setImporting(false);
|
|
}
|
|
}
|
|
|
|
const showEmpty = !loading && collectionsState.items.length === 0;
|
|
const locale = i18n.language.startsWith('en') ? enGB : de;
|
|
|
|
const title = t('collections.title') ?? 'Task Collections';
|
|
const subtitle = embedded
|
|
? t('collections.subtitle') ?? ''
|
|
: t('collections.subtitle') ?? '';
|
|
|
|
const navigateToTasks = React.useCallback(() => {
|
|
if (onNavigateToTasks) {
|
|
onNavigateToTasks();
|
|
return;
|
|
}
|
|
navigate(buildEngagementTabPath('tasks'));
|
|
}, [navigate, onNavigateToTasks]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('collections.notifications.error')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{successMessage && (
|
|
<Alert className="border-l-4 border-green-500 bg-green-50 text-sm text-green-900">
|
|
<AlertTitle>{t('collections.notifications.imported')}</AlertTitle>
|
|
<AlertDescription>{successMessage}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
|
<Layers className="h-5 w-5 text-pink-500" />
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">{subtitle}</CardDescription>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button variant="outline" onClick={navigateToTasks}>
|
|
<Library className="mr-2 h-4 w-4" />
|
|
{t('collections.actions.openTasks')}
|
|
</Button>
|
|
<Button
|
|
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
|
onClick={() => setScope('tenant')}
|
|
>
|
|
{t('collections.scope.tenant')}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr),220px]">
|
|
<Input
|
|
placeholder={t('collections.filters.search') ?? 'Nach Vorlagen suchen'}
|
|
value={search}
|
|
onChange={(event) => {
|
|
setPage(1);
|
|
setSearch(event.target.value);
|
|
}}
|
|
/>
|
|
<Select value={scope} onValueChange={(value: ScopeFilter) => { setPage(1); setScope(value); }}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t('collections.filters.allScopes')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{t('collections.filters.allScopes')}</SelectItem>
|
|
<SelectItem value="tenant">{t('collections.filters.tenantOnly')}</SelectItem>
|
|
<SelectItem value="global">{t('collections.filters.globalOnly')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<CollectionsSkeleton />
|
|
) : showEmpty ? (
|
|
<EmptyCollectionsState onCreate={navigateToTasks} />
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{collectionsState.items.map((collection) => (
|
|
<TaskCollectionCard
|
|
key={collection.id}
|
|
collection={collection}
|
|
locale={locale}
|
|
onImport={() => openImportDialog(collection)}
|
|
onNavigateToTasks={navigateToTasks}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{collectionsState.meta && collectionsState.meta.last_page > 1 ? (
|
|
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-4 text-sm">
|
|
<div className="text-slate-500">
|
|
{t('collections.pagination.page', {
|
|
current: collectionsState.meta.current_page ?? 1,
|
|
total: collectionsState.meta.last_page ?? 1,
|
|
})}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage((value) => Math.max(value - 1, 1))}
|
|
disabled={(collectionsState.meta.current_page ?? 1) <= 1}
|
|
>
|
|
{t('collections.pagination.prev')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage((value) => Math.min(value + 1, collectionsState.meta?.last_page ?? value + 1))}
|
|
disabled={(collectionsState.meta.current_page ?? 1) >= (collectionsState.meta.last_page ?? 1)}
|
|
>
|
|
{t('collections.pagination.next')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<ImportCollectionDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
collection={selectedCollection}
|
|
events={events}
|
|
eventsLoading={eventsLoading}
|
|
selectedEventSlug={selectedEventSlug}
|
|
onSelectedEventChange={setSelectedEventSlug}
|
|
onSubmit={handleImport}
|
|
importing={importing}
|
|
error={eventError}
|
|
locale={locale}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TaskCollectionsPage() {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<AdminLayout
|
|
title={t('collections.title') ?? 'Task Collections'}
|
|
subtitle={t('collections.subtitle') ?? ''}
|
|
>
|
|
<TaskCollectionsSection onNavigateToTasks={() => navigate(buildEngagementTabPath('tasks'))} />
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
function TaskCollectionCard({
|
|
collection,
|
|
locale,
|
|
onImport,
|
|
onNavigateToTasks,
|
|
}: {
|
|
collection: TenantTaskCollection;
|
|
locale: Locale;
|
|
onImport: () => void;
|
|
onNavigateToTasks: () => void;
|
|
}) {
|
|
const { t } = useTranslation('management');
|
|
const updatedAt = collection.updated_at ? format(new Date(collection.updated_at), 'Pp', { locale }) : null;
|
|
return (
|
|
<Card className="border border-slate-200/70 bg-white/85 shadow-md shadow-pink-100/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-base text-slate-900">{collection.name}</CardTitle>
|
|
{collection.description ? (
|
|
<CardDescription className="text-xs text-slate-500">{collection.description}</CardDescription>
|
|
) : null}
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm text-slate-600">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant={collection.is_global ? 'secondary' : 'default'}>
|
|
{collection.is_global ? t('collections.scope.global') : t('collections.scope.tenant')}
|
|
</Badge>
|
|
<Badge variant="outline">{t('collections.labels.taskCount', { count: collection.tasks_count })}</Badge>
|
|
{collection.event_type ? (
|
|
<Badge variant="outline">{collection.event_type.name}</Badge>
|
|
) : null}
|
|
</div>
|
|
{updatedAt ? (
|
|
<p className="text-xs text-slate-400">{t('collections.labels.updated', { date: updatedAt })}</p>
|
|
) : null}
|
|
</CardContent>
|
|
<CardFooter className="flex flex-wrap gap-2">
|
|
<Button className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white" onClick={onImport}>
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
{t('collections.actions.import')}
|
|
</Button>
|
|
<Button variant="outline" onClick={onNavigateToTasks}>
|
|
{t('collections.actions.openTasks')}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function ImportCollectionDialog({
|
|
open,
|
|
onOpenChange,
|
|
collection,
|
|
events,
|
|
eventsLoading,
|
|
selectedEventSlug,
|
|
onSelectedEventChange,
|
|
onSubmit,
|
|
importing,
|
|
error,
|
|
locale,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
collection: TenantTaskCollection | null;
|
|
events: TenantEvent[];
|
|
eventsLoading: boolean;
|
|
selectedEventSlug: string;
|
|
onSelectedEventChange: (slug: string) => void;
|
|
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
importing: boolean;
|
|
error: string | null;
|
|
locale: Locale;
|
|
}) {
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{t('collections.dialogs.importTitle')}</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={onSubmit} className="space-y-4">
|
|
<div className="space-y-1">
|
|
<Label>{t('collections.dialogs.collectionLabel')}</Label>
|
|
<p className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600">
|
|
{collection?.name ?? 'Unbekannte Sammlung'}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="collection-event">{t('collections.dialogs.selectEvent')}</Label>
|
|
<Select value={selectedEventSlug} onValueChange={onSelectedEventChange} disabled={eventsLoading || !events.length}>
|
|
<SelectTrigger id="collection-event">
|
|
<SelectValue placeholder={eventsLoading ? t('collections.errors.eventsLoad') : t('collections.dialogs.selectEvent')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{events.map((event) => {
|
|
const eventDate = event.event_date ? format(new Date(event.event_date), 'PPP', { locale }) : null;
|
|
return (
|
|
<SelectItem key={event.slug} value={event.slug}>
|
|
{event.name && typeof event.name === 'string' ? event.name : event.slug}
|
|
{eventDate ? ` · ${eventDate}` : ''}
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
{error ? <p className="text-xs text-rose-600">{error}</p> : null}
|
|
</div>
|
|
<DialogFooter className="flex gap-2">
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
{t('collections.dialogs.cancel')}
|
|
</Button>
|
|
<Button type="submit" disabled={importing || !selectedEventSlug}>
|
|
{importing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{t('collections.dialogs.submit')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function CollectionsSkeleton() {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div key={`collection-skeleton-${index}`} className="h-40 animate-pulse rounded-xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmptyCollectionsState({ onCreate }: { onCreate: () => void }) {
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-slate-200 bg-slate-50/60 p-10 text-center">
|
|
<h3 className="text-base font-semibold text-slate-800">{t('collections.empty.title')}</h3>
|
|
<p className="text-sm text-slate-500">{t('collections.empty.description')}</p>
|
|
<Button onClick={onCreate} className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white">
|
|
<Plus className="mr-1 h-4 w-4" />
|
|
{t('collections.actions.create')}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|