314 lines
15 KiB
TypeScript
314 lines
15 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { useParams, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useForm, Controller } from 'react-hook-form';
|
||
import dayjs from 'dayjs';
|
||
import { ArrowLeft, Pencil } from 'lucide-react';
|
||
import { useAdmin, useUpdateAdmin } from '@/hooks/useAdmins';
|
||
import { formatDisplayValue } from '@/lib/utils';
|
||
import { PageHeader } from '@/components/PageHeader';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent } 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 { Skeleton } from '@/components/ui/skeleton';
|
||
|
||
const isBadValue = (val: unknown) =>
|
||
val === '-' || val === 'undefined' || val === '' || val === null || val === undefined;
|
||
|
||
const clean = (val: unknown) => (val === '-' || val === 'undefined' ? undefined : val);
|
||
|
||
const roleBadgeVariant = (role: string) => {
|
||
if (role === 'superadmin') return 'destructive' as const;
|
||
if (role === 'admin') return 'default' as const;
|
||
if (role === 'moderator') return 'secondary' as const;
|
||
return 'outline' as const;
|
||
};
|
||
|
||
interface AdminFormValues {
|
||
nickname?: string;
|
||
email?: string;
|
||
role?: string;
|
||
status?: string;
|
||
timezone?: string;
|
||
language?: string;
|
||
phone?: string;
|
||
}
|
||
|
||
const DetailValue: React.FC<{ value: unknown; emptyLabel: string }> = ({ value, emptyLabel }) => {
|
||
const text = formatDisplayValue(value);
|
||
if (text === '-') return <>{emptyLabel}</>;
|
||
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
|
||
return <pre className="overflow-auto rounded-md bg-muted p-2 text-xs">{text}</pre>;
|
||
}
|
||
return <>{text}</>;
|
||
};
|
||
|
||
const AdminDetailPage: React.FC = () => {
|
||
const { t } = useTranslation();
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const { data: admin, isLoading } = useAdmin(id || '');
|
||
const updateAdmin = useUpdateAdmin();
|
||
const [editModal, setEditModal] = useState(false);
|
||
|
||
const form = useForm<AdminFormValues>();
|
||
const emDash = t('common.emDash');
|
||
|
||
const formatDate = (dateStr: string) => {
|
||
if (isBadValue(dateStr)) return emDash;
|
||
const d = dayjs(dateStr);
|
||
return d.isValid() ? d.format('DD.MM.YYYY HH:mm') : dateStr;
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (editModal && admin) {
|
||
form.reset({
|
||
nickname: clean(admin.nickname) as string | undefined,
|
||
email: clean(admin.email) as string | undefined,
|
||
role: clean(admin.role) as string | undefined,
|
||
status: clean(admin.status) as string | undefined,
|
||
timezone: clean(admin.timezone) as string | undefined,
|
||
language: clean(admin.language) as string | undefined,
|
||
phone: clean(admin.phone) as string | undefined,
|
||
});
|
||
}
|
||
}, [editModal, admin, form]);
|
||
|
||
const onSave = (values: AdminFormValues) => {
|
||
const payload = Object.fromEntries(
|
||
Object.entries(values).filter(([_, v]) => v !== '' && v !== undefined && v !== null)
|
||
);
|
||
updateAdmin.mutate(
|
||
{ id: id!, data: payload },
|
||
{
|
||
onSuccess: () => {
|
||
setEditModal(false);
|
||
},
|
||
}
|
||
);
|
||
};
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<Skeleton className="h-8 w-64" />
|
||
<Skeleton className="h-96 w-full" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!admin) return <p className="text-muted-foreground">{t('admins.notFound')}</p>;
|
||
|
||
const titleName = !isBadValue(admin.nickname) ? admin.nickname : admin.email || admin.id;
|
||
|
||
return (
|
||
<div data-testid="page-admin-detail">
|
||
<PageHeader
|
||
title={t('admins.detailTitle', { name: titleName })}
|
||
breadcrumbs={[
|
||
{ label: t('admins.title'), href: '/admins' },
|
||
{ label: String(titleName) },
|
||
]}
|
||
actions={
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
data-testid="btn-edit-admin"
|
||
onClick={() => setEditModal(true)}
|
||
>
|
||
<Pencil className="h-4 w-4" />
|
||
{t('common.edit')}
|
||
</Button>
|
||
<Button variant="outline" data-testid="btn-back" onClick={() => navigate('/admins')}>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
{t('common.backToList')}
|
||
</Button>
|
||
</>
|
||
}
|
||
/>
|
||
<Card>
|
||
<CardContent className="space-y-6">
|
||
<dl className="grid gap-3 text-sm">
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.id')}</dt>
|
||
<dd>{admin.id}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.email')}</dt>
|
||
<dd>{admin.email}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.nickname')}</dt>
|
||
<dd>{isBadValue(admin.nickname) ? emDash : admin.nickname}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.role')}</dt>
|
||
<dd>
|
||
<Badge variant={roleBadgeVariant(admin.role)}>{admin.role}</Badge>
|
||
</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.status')}</dt>
|
||
<dd>
|
||
<Badge variant={admin.status === 'active' ? 'success' : 'destructive'}>{admin.status}</Badge>
|
||
</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.timezone')}</dt>
|
||
<dd>{isBadValue(admin.timezone) ? emDash : admin.timezone}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.language')}</dt>
|
||
<dd>{isBadValue(admin.language) ? emDash : admin.language}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.phone')}</dt>
|
||
<dd>{isBadValue(admin.phone) ? emDash : admin.phone}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('profile.avatarUrl')}</dt>
|
||
<dd>{isBadValue(admin.avatar_url) ? emDash : admin.avatar_url}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('profile.preferencesJson')}</dt>
|
||
<dd><DetailValue value={admin.preferences} emptyLabel={emDash} /></dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.lastLogin')}</dt>
|
||
<dd>{formatDate(admin.last_login)}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.createdAt')}</dt>
|
||
<dd>{formatDate(admin.created_at)}</dd>
|
||
</div>
|
||
<div className="grid grid-cols-[140px_1fr] gap-2">
|
||
<dt className="text-muted-foreground">{t('common.updatedAt')}</dt>
|
||
<dd>{formatDate(admin.updated_at)}</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Dialog open={editModal} onOpenChange={setEditModal}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>{t('admins.editTitle')}</DialogTitle>
|
||
</DialogHeader>
|
||
<form id="admin-edit-form" className="space-y-4" onSubmit={form.handleSubmit(onSave)}>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nickname">{t('common.nickname')}</Label>
|
||
<Input id="nickname" {...form.register('nickname')} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email">{t('common.email')}</Label>
|
||
<Input id="email" {...form.register('email')} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>{t('common.role')}</Label>
|
||
<Controller
|
||
name="role"
|
||
control={form.control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="superadmin">superadmin</SelectItem>
|
||
<SelectItem value="admin">admin</SelectItem>
|
||
<SelectItem value="moderator">moderator</SelectItem>
|
||
<SelectItem value="support">support</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>{t('common.status')}</Label>
|
||
<Controller
|
||
name="status"
|
||
control={form.control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="active">active</SelectItem>
|
||
<SelectItem value="blocked">blocked</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>{t('common.timezone')}</Label>
|
||
<Controller
|
||
name="timezone"
|
||
control={form.control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger><SelectValue placeholder={t('common.selectTimezone')} /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="UTC">UTC</SelectItem>
|
||
<SelectItem value="Europe/Moscow">Europe/Moscow (Москва)</SelectItem>
|
||
<SelectItem value="Europe/London">Europe/London (Лондон)</SelectItem>
|
||
<SelectItem value="Europe/Berlin">Europe/Berlin (Берлин)</SelectItem>
|
||
<SelectItem value="America/New_York">America/New_York (Нью-Йорк)</SelectItem>
|
||
<SelectItem value="Asia/Tokyo">Asia/Tokyo (Токио)</SelectItem>
|
||
<SelectItem value="Asia/Shanghai">Asia/Shanghai (Шанхай)</SelectItem>
|
||
<SelectItem value="Australia/Sydney">Australia/Sydney (Сидней)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>{t('common.language')}</Label>
|
||
<Controller
|
||
name="language"
|
||
control={form.control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger><SelectValue placeholder={t('common.selectLanguage')} /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="ru">{t('common.langRu')}</SelectItem>
|
||
<SelectItem value="en">{t('common.langEn')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="phone">{t('common.phone')}</Label>
|
||
<Input id="phone" placeholder="+7 (999) 123-45-67" {...form.register('phone')} />
|
||
</div>
|
||
</form>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setEditModal(false)}>{t('common.cancel')}</Button>
|
||
<Button type="submit" form="admin-edit-form" disabled={updateAdmin.isPending}>
|
||
{updateAdmin.isPending ? t('common.saving') : t('common.save')}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AdminDetailPage;
|