357 lines
14 KiB
TypeScript
357 lines
14 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } 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 { 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 {
|
|
EventMember,
|
|
getEvent,
|
|
getEventMembers,
|
|
inviteEventMember,
|
|
removeEventMember,
|
|
TenantEvent,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { ADMIN_EVENTS_PATH } from '../constants';
|
|
|
|
type InviteForm = {
|
|
email: string;
|
|
name: string;
|
|
role: EventMember['role'];
|
|
};
|
|
|
|
const emptyInvite: InviteForm = {
|
|
email: '',
|
|
name: '',
|
|
role: 'member',
|
|
};
|
|
|
|
export default function EventMembersPage() {
|
|
const { t, i18n } = useTranslation(['management', 'dashboard']);
|
|
const locale = React.useMemo(
|
|
() => (i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE'),
|
|
[i18n.language]
|
|
);
|
|
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 [members, setMembers] = React.useState<EventMember[]>([]);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [invite, setInvite] = React.useState<InviteForm>(emptyInvite);
|
|
const [inviting, setInviting] = React.useState(false);
|
|
const [membersUnavailable, setMembersUnavailable] = React.useState(false);
|
|
|
|
const formatDate = React.useCallback(
|
|
(value: string | null | undefined) => {
|
|
if (!value) return '--';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return '--';
|
|
return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
|
|
},
|
|
[locale]
|
|
);
|
|
|
|
const roleLabels = React.useMemo(
|
|
() => ({
|
|
tenant_admin: t('management.members.roles.tenantAdmin', 'Tenant-Admin'),
|
|
member: t('management.members.roles.member', 'Mitglied'),
|
|
}),
|
|
[t]
|
|
);
|
|
|
|
const statusLabels = React.useMemo(
|
|
() => ({
|
|
published: t('management.members.statuses.published', 'Veröffentlicht'),
|
|
draft: t('management.members.statuses.draft', 'Entwurf'),
|
|
active: t('management.members.statuses.active', 'Aktiv'),
|
|
}),
|
|
[t]
|
|
);
|
|
|
|
const resolveRole = React.useCallback(
|
|
(role: string) => roleLabels[role as keyof typeof roleLabels] ?? role,
|
|
[roleLabels]
|
|
);
|
|
|
|
const resolveMemberStatus = React.useCallback(
|
|
(status?: string | null) => {
|
|
if (!status) {
|
|
return statusLabels.active;
|
|
}
|
|
return statusLabels[status as keyof typeof statusLabels] ?? status;
|
|
},
|
|
[statusLabels]
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) {
|
|
setError(t('management.members.errors.missingSlug', 'Kein Event-Slug angegeben.'));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const eventData = await getEvent(slug);
|
|
if (cancelled) return;
|
|
setEvent(eventData);
|
|
|
|
const response = await getEventMembers(slug);
|
|
if (cancelled) return;
|
|
setMembers(response.data);
|
|
setMembersUnavailable(false);
|
|
} catch (err) {
|
|
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
|
|
setMembersUnavailable(true);
|
|
} else if (!isAuthError(err)) {
|
|
setError(t('management.members.errors.load', 'Mitglieder konnten nicht geladen werden.'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [slug, t]);
|
|
|
|
async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (!slug) return;
|
|
if (!invite.email.trim()) {
|
|
setError(t('management.members.errors.emailRequired', 'Bitte gib eine E-Mail-Adresse ein.'));
|
|
return;
|
|
}
|
|
setInviting(true);
|
|
try {
|
|
const member = await inviteEventMember(slug, {
|
|
email: invite.email.trim(),
|
|
name: invite.name.trim() || undefined,
|
|
role: invite.role,
|
|
});
|
|
setMembers((prev) => [member, ...prev]);
|
|
setInvite(emptyInvite);
|
|
setMembersUnavailable(false);
|
|
} catch (err) {
|
|
if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
|
|
setMembersUnavailable(true);
|
|
} else if (!isAuthError(err)) {
|
|
setError(t('management.members.errors.invite', 'Einladung konnte nicht verschickt werden.'));
|
|
}
|
|
} finally {
|
|
setInviting(false);
|
|
}
|
|
}
|
|
|
|
async function handleRemove(member: EventMember) {
|
|
if (!slug) return;
|
|
if (!window.confirm(`${member.name} wirklich entfernen?`)) return;
|
|
try {
|
|
await removeEventMember(slug, member.id);
|
|
setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('management.members.errors.remove', 'Mitglied konnte nicht entfernt werden.'));
|
|
}
|
|
}
|
|
}
|
|
|
|
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.members.actions.back', 'Zurück zur Übersicht')}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('management.members.title', 'Event-Mitglieder')}
|
|
subtitle={t('management.members.subtitle', 'Verwalte Moderatoren, Admins und Helfer für dieses Event.')}
|
|
actions={actions}
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{loading ? (
|
|
<MembersSkeleton />
|
|
) : !event ? (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('management.members.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
|
|
<AlertDescription>{t('management.members.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.members.eventStatus', {
|
|
status: event.status === 'published' ? statusLabels.published : statusLabels.draft,
|
|
})}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6 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.members.sections.list.title', 'Mitglieder')}
|
|
</h3>
|
|
{membersUnavailable ? (
|
|
<Alert>
|
|
<AlertTitle>{t('management.members.alerts.lockedTitle', 'Feature noch nicht aktiviert')}</AlertTitle>
|
|
<AlertDescription>
|
|
{t(
|
|
'management.members.alerts.lockedDescription',
|
|
'Die Mitgliederverwaltung ist für dieses Event noch nicht verfügbar. Bitte kontaktiere den Support, um das Feature freizuschalten.'
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
) : members.length === 0 ? (
|
|
<EmptyState message={t('management.members.sections.list.empty', 'Noch keine Mitglieder eingeladen.')} />
|
|
) : (
|
|
<div className="space-y-2">
|
|
{members.map((member) => (
|
|
<div
|
|
key={member.id}
|
|
className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">{member.name}</p>
|
|
<p className="text-xs text-slate-600">{member.email}</p>
|
|
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
|
<span>
|
|
{t('management.members.labels.status', {
|
|
status: resolveMemberStatus(member.status),
|
|
})}
|
|
</span>
|
|
{member.joined_at && (
|
|
<span>
|
|
{t('management.members.labels.joined', {
|
|
date: formatDate(member.joined_at),
|
|
})}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className="border-pink-200 text-pink-600">
|
|
{resolveRole(member.role)}
|
|
</Badge>
|
|
<Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
|
|
<Users className="h-4 w-4 text-emerald-500" />
|
|
{t('management.members.sections.invite.title', 'Neues Mitglied einladen')}
|
|
</h3>
|
|
<p className="text-xs text-slate-500">
|
|
{t(
|
|
'management.members.sections.invite.helper',
|
|
'Mitglieder erhalten Zugriff auf Fotomoderation, Aufgaben und QR-Einladungen. Admins steuern zusätzlich Pakete, Abrechnung und Events.'
|
|
)}
|
|
</p>
|
|
<form className="space-y-3 rounded-2xl border border-emerald-100 bg-white/90 p-4 shadow-sm" onSubmit={handleInvite}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invite-email">{t('management.members.form.emailLabel', 'E-Mail')}</Label>
|
|
<Input
|
|
id="invite-email"
|
|
type="email"
|
|
placeholder={t('management.members.form.emailPlaceholder', 'person@example.com')}
|
|
value={invite.email}
|
|
onChange={(event) => setInvite((prev) => ({ ...prev, email: event.target.value }))}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invite-name">{t('management.members.form.nameLabel', 'Name (optional)')}</Label>
|
|
<Input
|
|
id="invite-name"
|
|
placeholder={t('management.members.form.namePlaceholder', 'Name')}
|
|
value={invite.name}
|
|
onChange={(event) => setInvite((prev) => ({ ...prev, name: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invite-role">{t('management.members.form.roleLabel', 'Rolle')}</Label>
|
|
<Select
|
|
value={invite.role}
|
|
onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value as InviteForm['role'] }))}
|
|
>
|
|
<SelectTrigger id="invite-role">
|
|
<SelectValue placeholder={t('management.members.form.rolePlaceholder', 'Rolle wählen')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="tenant_admin">{roleLabels.tenant_admin}</SelectItem>
|
|
<SelectItem value="member">{roleLabels.member}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Button type="submit" className="w-full" disabled={inviting}>
|
|
{inviting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
|
|
{' '}{t('management.members.form.submit', 'Einladung senden')}
|
|
</Button>
|
|
</form>
|
|
</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 MembersSkeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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');
|
|
}
|