refactor for file page
This commit is contained in:
smanylov
@@ -0,0 +1,256 @@
|
||||
// app/ui/violations/file-page/violation-page-violations-list.tsx
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { formatDate } from '@/app/lib/formatDate';
|
||||
import ViolationPageNote from '@/app/ui/file-page/file-page-note';
|
||||
|
||||
interface ViolationFileDetail {
|
||||
id: number;
|
||||
url: string;
|
||||
page_url: string;
|
||||
page_title: string;
|
||||
host: string;
|
||||
status: string;
|
||||
created_date: string;
|
||||
file_id: string;
|
||||
}
|
||||
|
||||
interface ViolationFile {
|
||||
violations: ViolationFileDetail[],
|
||||
total_elements: number,
|
||||
total_pages: number,
|
||||
current_page: number,
|
||||
page_size: number,
|
||||
has_next: boolean,
|
||||
has_previous: boolean
|
||||
}
|
||||
|
||||
export default function FilePageViolationsList({
|
||||
fileViolations,
|
||||
currentPage,
|
||||
fileId
|
||||
}: {
|
||||
fileViolations: ViolationFile,
|
||||
currentPage: number,
|
||||
fileId: string
|
||||
}) {
|
||||
const t = useTranslations('Global');
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
|
||||
|
||||
if (!fileViolations?.violations) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
router.push(`${pathname}?page=${page}`, { scroll: false });
|
||||
};
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pages = [];
|
||||
const maxVisible = 5;
|
||||
const total = fileViolations.total_pages;
|
||||
|
||||
let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
|
||||
let end = Math.min(total, start + maxVisible - 1);
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
function selectHandler(violation: ViolationFileDetail) {
|
||||
setSelectedViolation(violation);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="block-wrapper">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
{t('all-file-violations')}
|
||||
</h3>
|
||||
<span>
|
||||
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="sources-list-wrapper"
|
||||
>
|
||||
<div className="sources-list">
|
||||
{fileViolations.violations.map(item => {
|
||||
return (
|
||||
<div
|
||||
className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
selectHandler(item);
|
||||
}}
|
||||
>
|
||||
{/* <div className="source-header">
|
||||
<div className="source-image">
|
||||
<img src={item.url} alt="" />
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
<div
|
||||
className="source-header-left"
|
||||
>
|
||||
<div className="source-image">
|
||||
<img src={item.url} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="source-meta"
|
||||
>
|
||||
{t('source')}:
|
||||
</span>
|
||||
<span className="source-url">
|
||||
{item.host}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="source-header-right"
|
||||
>
|
||||
<span className="source-status new">
|
||||
{item.status}
|
||||
</span>
|
||||
|
||||
<div className="source-actions">
|
||||
<Link
|
||||
href={item.page_url}
|
||||
className="btn-small btn-primary-small"
|
||||
target="_blank"
|
||||
scroll={false}
|
||||
>
|
||||
{t('open')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="violation-info"
|
||||
>
|
||||
<div
|
||||
className="violation-info-grid"
|
||||
>
|
||||
<div
|
||||
className="violation-info-content"
|
||||
>
|
||||
<h3
|
||||
className="violation-info-title"
|
||||
>
|
||||
{selectedViolation?.page_title}
|
||||
</h3>
|
||||
<div
|
||||
className="violation-info-image"
|
||||
>
|
||||
<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
|
||||
</div>
|
||||
<div
|
||||
className="violation-info-source"
|
||||
>
|
||||
|
||||
<span>
|
||||
{t('source')}:
|
||||
</span>
|
||||
<Link
|
||||
href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
|
||||
className="source"
|
||||
target="_blank"
|
||||
scroll={false}
|
||||
>
|
||||
{selectedViolation?.page_url}
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="violation-info-source"
|
||||
>
|
||||
<span>
|
||||
{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{selectedViolation?.status}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-auto"
|
||||
>
|
||||
Тут думаю нужно будет отображать инфу о работе с нарушением и её статус
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="violation-info-actions"
|
||||
>
|
||||
<div className="action-buttons">
|
||||
<button type="button" className="btn-action btn-warning">
|
||||
Взять в работу
|
||||
</button>
|
||||
|
||||
<button type="button" className="btn-action btn-success">
|
||||
Отметить решенным
|
||||
</button>
|
||||
|
||||
<button type="button" className="btn-action btn-secondary">
|
||||
Ложное срабатывание
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <ViolationPageNote /> */}
|
||||
</div>
|
||||
</div>
|
||||
{fileViolations.total_pages > 1 && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
className="pagination-item pagination-item-prev"
|
||||
disabled={!fileViolations.has_previous}
|
||||
>
|
||||
{t('previous')}
|
||||
</button>
|
||||
|
||||
{getPageNumbers().map(pageNum => (
|
||||
<button
|
||||
key={pageNum}
|
||||
onClick={() => handlePageChange(pageNum)}
|
||||
className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
className="pagination-item pagination-item-next"
|
||||
disabled={!fileViolations.has_next}
|
||||
>
|
||||
{t('next')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user