1a4bdb1fe1
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
385 lines
12 KiB
TypeScript
385 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { format } from 'date-fns';
|
|
import { de, enGB } from 'date-fns/locale';
|
|
import type { Locale } from 'date-fns';
|
|
import { Palette, Plus, Power, Smile } from 'lucide-react';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import {
|
|
getEmotions,
|
|
createEmotion,
|
|
updateEmotion,
|
|
TenantEmotion,
|
|
EmotionPayload,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
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 { Switch } from '@/components/ui/switch';
|
|
|
|
const DEFAULT_COLOR = '#6366f1';
|
|
|
|
type EmotionFormState = {
|
|
name: string;
|
|
description: string;
|
|
icon: string;
|
|
color: string;
|
|
is_active: boolean;
|
|
sort_order: number;
|
|
};
|
|
|
|
const INITIAL_FORM_STATE: EmotionFormState = {
|
|
name: '',
|
|
description: '',
|
|
icon: 'lucide-smile',
|
|
color: DEFAULT_COLOR,
|
|
is_active: true,
|
|
sort_order: 0,
|
|
};
|
|
|
|
export default function EmotionsPage(): JSX.Element {
|
|
const { t, i18n } = useTranslation('management');
|
|
|
|
const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
|
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
const [saving, setSaving] = React.useState(false);
|
|
const [form, setForm] = React.useState<EmotionFormState>(INITIAL_FORM_STATE);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
async function load() {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await getEmotions();
|
|
if (!cancelled) {
|
|
setEmotions(data);
|
|
}
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('emotions.errors.load'));
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
void load();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [t]);
|
|
|
|
function openCreateDialog() {
|
|
setForm(INITIAL_FORM_STATE);
|
|
setDialogOpen(true);
|
|
}
|
|
|
|
async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (!form.name.trim()) {
|
|
setError(t('emotions.errors.nameRequired'));
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
setError(null);
|
|
const payload: EmotionPayload = {
|
|
name: form.name.trim(),
|
|
description: form.description.trim() || null,
|
|
icon: form.icon.trim() || 'lucide-smile',
|
|
color: form.color.trim() || DEFAULT_COLOR,
|
|
is_active: form.is_active,
|
|
sort_order: form.sort_order,
|
|
};
|
|
|
|
try {
|
|
const created = await createEmotion(payload);
|
|
setEmotions((prev) => [created, ...prev]);
|
|
setDialogOpen(false);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('emotions.errors.create'));
|
|
}
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function toggleEmotion(emotion: TenantEmotion) {
|
|
try {
|
|
const updated = await updateEmotion(emotion.id, { is_active: !emotion.is_active });
|
|
setEmotions((prev) => prev.map((item) => (item.id === updated.id ? updated : item)));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(t('emotions.errors.toggle'));
|
|
}
|
|
}
|
|
}
|
|
|
|
const locale = i18n.language.startsWith('en') ? enGB : de;
|
|
|
|
return (
|
|
<AdminLayout
|
|
title={t('emotions.title') ?? 'Emotions'}
|
|
subtitle={t('emotions.subtitle') ?? ''}
|
|
actions={
|
|
<Button
|
|
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
|
onClick={openCreateDialog}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{t('emotions.actions.create')}
|
|
</Button>
|
|
}
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('emotions.errors.genericTitle')}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl text-slate-900">{t('emotions.title')}</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">{t('emotions.subtitle')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{loading ? (
|
|
<EmotionSkeleton />
|
|
) : emotions.length === 0 ? (
|
|
<EmptyEmotionsState />
|
|
) : (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{emotions.map((emotion) => (
|
|
<EmotionCard
|
|
key={emotion.id}
|
|
emotion={emotion}
|
|
onToggle={() => toggleEmotion(emotion)}
|
|
locale={locale}
|
|
canToggle={!emotion.is_global}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<EmotionDialog
|
|
open={dialogOpen}
|
|
onOpenChange={setDialogOpen}
|
|
form={form}
|
|
setForm={setForm}
|
|
saving={saving}
|
|
onSubmit={handleCreate}
|
|
/>
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
function EmotionCard({
|
|
emotion,
|
|
onToggle,
|
|
locale,
|
|
canToggle,
|
|
}: {
|
|
emotion: TenantEmotion;
|
|
onToggle: () => void;
|
|
locale: Locale;
|
|
canToggle: boolean;
|
|
}) {
|
|
const { t } = useTranslation('management');
|
|
const updatedLabel = emotion.updated_at
|
|
? format(new Date(emotion.updated_at), 'PP', { locale })
|
|
: null;
|
|
|
|
return (
|
|
<Card className="border border-slate-100 bg-white/90 shadow-sm">
|
|
<CardHeader className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant="outline"
|
|
className={emotion.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
|
|
>
|
|
{emotion.is_global ? t('emotions.scope.global') : t('emotions.scope.tenant')}
|
|
</Badge>
|
|
<Badge variant="secondary" className="bg-slate-100 text-slate-700">
|
|
{emotion.event_types.map((type) => type.name).join(', ') || t('emotions.labels.noEventType')}
|
|
</Badge>
|
|
</div>
|
|
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
|
|
<Smile className="h-4 w-4" />
|
|
{emotion.name}
|
|
</CardTitle>
|
|
{emotion.description && (
|
|
<CardDescription className="text-sm text-slate-600">{emotion.description}</CardDescription>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="flex items-center justify-between text-xs text-slate-500">
|
|
<div className="flex items-center gap-2">
|
|
<Palette className="h-4 w-4" />
|
|
<span>{emotion.color}</span>
|
|
</div>
|
|
{updatedLabel && <span>{t('emotions.labels.updated', { date: updatedLabel })}</span>}
|
|
</CardContent>
|
|
<CardFooter className="flex items-center justify-between border-t border-slate-100 bg-slate-50/60 px-4 py-3">
|
|
<span className="text-xs text-slate-500">
|
|
{emotion.is_active ? t('emotions.status.active') : t('emotions.status.inactive')}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onToggle}
|
|
disabled={!canToggle}
|
|
className={!canToggle ? 'pointer-events-none opacity-60' : ''}
|
|
>
|
|
<Power className="mr-2 h-4 w-4" />
|
|
{emotion.is_active ? t('emotions.actions.disable') : t('emotions.actions.enable')}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function EmptyEmotionsState() {
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/40 p-12 text-center">
|
|
<div className="rounded-full bg-white p-4 shadow-inner">
|
|
<Smile className="h-8 w-8 text-indigo-500" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h3 className="text-lg font-semibold text-slate-800">{t('emotions.empty.title')}</h3>
|
|
<p className="text-sm text-slate-600">{t('emotions.empty.description')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmotionSkeleton() {
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{Array.from({ length: 4 }).map((_, index) => (
|
|
<div key={index} className="animate-pulse rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm">
|
|
<div className="mb-3 h-4 w-24 rounded bg-slate-200" />
|
|
<div className="mb-2 h-5 w-40 rounded bg-slate-200" />
|
|
<div className="h-16 rounded bg-slate-100" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmotionDialog({
|
|
open,
|
|
onOpenChange,
|
|
form,
|
|
setForm,
|
|
saving,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
form: EmotionFormState;
|
|
setForm: React.Dispatch<React.SetStateAction<EmotionFormState>>;
|
|
saving: boolean;
|
|
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
}) {
|
|
const { t } = useTranslation('management');
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('emotions.dialogs.createTitle')}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form className="space-y-4" onSubmit={onSubmit}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="emotion-name">{t('emotions.dialogs.name')}</Label>
|
|
<Input
|
|
id="emotion-name"
|
|
value={form.name}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="emotion-description">{t('emotions.dialogs.description')}</Label>
|
|
<textarea
|
|
id="emotion-description"
|
|
value={form.description}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
|
|
className="min-h-[80px] w-full rounded-md border border-slate-200 bg-white/80 p-2 text-sm shadow-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="emotion-icon">{t('emotions.dialogs.icon')}</Label>
|
|
<Input
|
|
id="emotion-icon"
|
|
value={form.icon}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, icon: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="emotion-color">{t('emotions.dialogs.color')}</Label>
|
|
<Input
|
|
id="emotion-color"
|
|
value={form.color}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, color: event.target.value }))}
|
|
placeholder="#6366f1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-lg border border-indigo-100 bg-indigo-50/60 p-3">
|
|
<div>
|
|
<Label htmlFor="emotion-active" className="text-sm font-medium text-slate-800">
|
|
{t('emotions.dialogs.activeLabel')}
|
|
</Label>
|
|
<p className="text-xs text-slate-500">{t('emotions.dialogs.activeDescription')}</p>
|
|
</div>
|
|
<Switch
|
|
id="emotion-active"
|
|
checked={form.is_active}
|
|
onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: Boolean(checked) }))}
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter className="flex justify-end gap-2">
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
{t('emotions.dialogs.cancel')}
|
|
</Button>
|
|
<Button type="submit" disabled={saving}>
|
|
{saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{t('emotions.dialogs.submit')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|