diff --git a/frontend/src/features/admin/shows/ShowDetail.tsx b/frontend/src/features/admin/shows/ShowDetail.tsx index 0a8bd7a..5da0a62 100644 --- a/frontend/src/features/admin/shows/ShowDetail.tsx +++ b/frontend/src/features/admin/shows/ShowDetail.tsx @@ -8,6 +8,7 @@ import type { MediaAssetDto } from '@/shared/api/types' import { Badge } from '@/shared/ui/badge' import { Button } from '@/shared/ui/button' import { Input } from '@/shared/ui/input' +import { Pager } from '@/shared/ui/pager' import { toast } from '@/shared/ui/toast-store' import { listMedia } from '@/features/admin/media/api' import { @@ -23,12 +24,16 @@ import { addEpisode, getShow, removeEpisode } from './api' type Candidate = { asset: MediaAssetDto; parsed: ParsedEpisode } +const PAGE_SIZE = 20 + export function ShowDetail({ showId }: { showId: string }) { const { t } = useTranslation() const queryClient = useQueryClient() const [filter, setFilter] = useState('') const [deselected, setDeselected] = useState>(new Set()) const [adding, setAdding] = useState<{ current: number; total: number } | null>(null) + const [candPage, setCandPage] = useState(1) + const [epPage, setEpPage] = useState(1) const { data: show, isLoading } = useQuery({ queryKey: ['admin', 'shows', showId], @@ -84,6 +89,16 @@ export function ShowDetail({ showId }: { showId: string }) { const isSingle = show.kind === 'Single' const canAdd = !isSingle || show.episodes.length === 0 + + // Постраничный вывод длинных списков (кандидаты на добавление и сами серии). Страницу зажимаем в + // допустимый диапазон — чтобы после удаления/фильтрации не застрять на пустой странице. + const candTotalPages = Math.max(1, Math.ceil(candidates.length / PAGE_SIZE)) + const candPageSafe = Math.min(candPage, candTotalPages) + const candItems = candidates.slice((candPageSafe - 1) * PAGE_SIZE, candPageSafe * PAGE_SIZE) + const epTotalPages = Math.max(1, Math.ceil(show.episodes.length / PAGE_SIZE)) + const epPageSafe = Math.min(epPage, epTotalPages) + const epOffset = (epPageSafe - 1) * PAGE_SIZE + const epItems = show.episodes.slice(epOffset, epOffset + PAGE_SIZE) const toggle = (id: string) => setDeselected((prev) => { const next = new Set(prev) @@ -151,7 +166,10 @@ export function ShowDetail({ showId }: { showId: string }) { className="max-w-md" placeholder={t('admin.shows.filterAssets')} value={filter} - onChange={(e) => setFilter(e.target.value)} + onChange={(e) => { + setCandPage(1) + setFilter(e.target.value) + }} />