67 lines
3.8 KiB
TypeScript
67 lines
3.8 KiB
TypeScript
import React from 'react';
|
||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||
import { Card, Descriptions, Spin, Button, Tag } from 'antd';
|
||
import { useCalendar } from '../../hooks/useCalendars';
|
||
import dayjs from 'dayjs';
|
||
|
||
const CalendarDetailPage: React.FC = () => {
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const { data: calendar, isLoading } = useCalendar(id || '');
|
||
|
||
const isBadValue = (val: unknown) =>
|
||
val === '-' || val === 'undefined' || val === '' || val === null || val === undefined;
|
||
|
||
const displayValue = (val: unknown) => (isBadValue(val) ? '-' : String(val));
|
||
|
||
const formatDate = (dateStr: string) => {
|
||
if (isBadValue(dateStr)) return '-';
|
||
const d = dayjs(dateStr);
|
||
return d.isValid() ? d.format('DD.MM.YYYY HH:mm') : dateStr;
|
||
};
|
||
|
||
if (isLoading) return <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />;
|
||
if (!calendar) return <p>Календарь не найден</p>;
|
||
|
||
const tagsStr = Array.isArray(calendar.tags) && calendar.tags.length > 0 ? calendar.tags.join(', ') : '-';
|
||
|
||
return (
|
||
<Card title={`Календарь ${calendar.title || calendar.id}`}>
|
||
<Descriptions bordered column={1}>
|
||
<Descriptions.Item label="ID">{calendar.id}</Descriptions.Item>
|
||
<Descriptions.Item label="Название">{calendar.title}</Descriptions.Item>
|
||
<Descriptions.Item label="Короткое имя">{displayValue(calendar.short_name)}</Descriptions.Item>
|
||
<Descriptions.Item label="Описание">{displayValue(calendar.description)}</Descriptions.Item>
|
||
<Descriptions.Item label="Тип">
|
||
<Tag color={calendar.type === 'commercial' ? 'gold' : 'blue'}>{calendar.type}</Tag>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="Статус">
|
||
<Tag color={calendar.status === 'active' ? 'green' : calendar.status === 'frozen' ? 'orange' : 'red'}>
|
||
{calendar.status}
|
||
</Tag>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="Причина">{displayValue(calendar.reason)}</Descriptions.Item>
|
||
<Descriptions.Item label="Категория">{displayValue(calendar.category)}</Descriptions.Item>
|
||
<Descriptions.Item label="Владелец">
|
||
{!isBadValue(calendar.owner_id) ? (
|
||
<Link to={`/users/${calendar.owner_id}`}>{calendar.owner_id}</Link>
|
||
) : '-'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="Цвет">{displayValue(calendar.color)}</Descriptions.Item>
|
||
<Descriptions.Item label="Изображение">{displayValue(calendar.image_url)}</Descriptions.Item>
|
||
<Descriptions.Item label="Подтверждение">{displayValue(calendar.confirmation)}</Descriptions.Item>
|
||
<Descriptions.Item label="Теги">{tagsStr}</Descriptions.Item>
|
||
<Descriptions.Item label="Рейтинг">{calendar.rating_avg} ({calendar.rating_count})</Descriptions.Item>
|
||
<Descriptions.Item label="Настройки">
|
||
{calendar.settings ? JSON.stringify(calendar.settings) : '-'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="Создано">{formatDate(calendar.created_at)}</Descriptions.Item>
|
||
<Descriptions.Item label="Обновлено">{formatDate(calendar.updated_at)}</Descriptions.Item>
|
||
</Descriptions>
|
||
<Button style={{ marginTop: 16 }} onClick={() => navigate('/calendars')}>Назад к списку</Button>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default CalendarDetailPage;
|