frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue: add violation panel

Browse Source
This commit is contained in:
smanylov
2026-03-17 18:41:02 +07:00
parent 949038979e
commit 333dd5d3c5
10 changed files with 502 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/violations/file-page/violation-page-violations-list.tsx
+148 -49
View File
@@ -4,7 +4,9 @@
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { formatDate } from '@/app/lib/formatDate';
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
interface ViolationFileDetail {
id: number;
@@ -39,17 +41,14 @@ export default function ViolationPageViolationsList({
const t = useTranslations('Global');
const router = useRouter();
const pathname = usePathname();
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
if (!fileViolations?.violations) {
return null;
}
useEffect(() => {
console.log(fileViolations);
}, [fileViolations]);
const handlePageChange = (page: number) => {
router.push(`${pathname}?page=${page}`);
router.push(`${pathname}?page=${page}`, { scroll: false });
};
const getPageNumbers = () => {
@@ -71,79 +70,179 @@ export default function ViolationPageViolationsList({
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>
Всего: {fileViolations.total_elements} | Страница {fileViolations.current_page} из {fileViolations.total_pages}
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
</span>
</div>
<div className="sources-list">
{fileViolations.violations.map(item => {
return (
<div className="source-card" key={item.id}>
<div className="source-image">
<img src={item.url} alt="" />
<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 className="source-header">
<a href={item.page_url} target="_blank" className="source-url">
<span>{item.page_title}</span>
</a>
<span className="source-status new">
{item.status}
);
})}
</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>
</div>
<div className="source-meta">
<span>{item.host}</span>
</div>
<div className="source-actions">
<Link
href={item.page_url}
className="btn-small btn-primary-small"
href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
className="source"
target="_blank"
scroll={false}
>
{t('open')}
{selectedViolation?.page_url}
</Link>
</div>
</div>
);
})}
</div>
<div
className="violation-info-source"
>
<span>
{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
</span>
</div>
<div>
{selectedViolation?.status}
</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">
{fileViolations.has_previous && (
<button
onClick={() => handlePageChange(currentPage - 1)}
className="pagination__item pagination__item--prev"
>
Предыдущая
</button>
)}
<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' : ''}`}
className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
>
{pageNum}
</button>
))}
{fileViolations.has_next && (
<button
onClick={() => handlePageChange(currentPage + 1)}
className="pagination__item pagination__item--next"
>
Следующая
</button>
)}
<button
onClick={() => handlePageChange(currentPage + 1)}
className="pagination-item pagination-item-next"
disabled={!fileViolations.has_next}
>
{t('next')}
</button>
</div>
)}
</div>