refactor for file page
This commit is contained in:
smanylov
@@ -1,13 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl'
|
||||
|
||||
export default function ViolationFileNotFound() {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
return (
|
||||
<div className="violation-details">
|
||||
{t('file-not-found')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
export default function ViolationPageActions() {
|
||||
return (
|
||||
<div
|
||||
className="block-wrapper"
|
||||
>
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
Действия
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="action-buttons">
|
||||
<div>
|
||||
<button type="button" className="btn-action btn-warning">
|
||||
Взять в работу
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" className="btn-action btn-success">
|
||||
Отметить решенным
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" className="btn-action btn-secondary">
|
||||
Ложное срабатывание
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
|
||||
import { convertBytes } from '@/app/lib/convertBytes';
|
||||
import { formatDate } from '@/app/lib/formatDate';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function ViolationPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="block-wrapper"
|
||||
>
|
||||
<div className="content-card">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
{t('file-information')}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">
|
||||
ID
|
||||
</span>
|
||||
<span className="info-value">
|
||||
{fileInfo ? fileInfo.supportId : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">
|
||||
{t('file-type')}
|
||||
</span>
|
||||
<span className="info-value">
|
||||
{fileInfo ? fileInfo.mimeType : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">
|
||||
{t('size')}
|
||||
</span>
|
||||
<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">
|
||||
{t('loaded')}
|
||||
</span>
|
||||
<span className="info-value">
|
||||
{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">
|
||||
{t('monitoring')}
|
||||
</span>
|
||||
<span className="info-value">
|
||||
{fileInfo ? fileInfo.monitoring : '#'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
export default function ViolationPpageFileStatistic() {
|
||||
return (
|
||||
<div
|
||||
className="block-wrapper"
|
||||
>
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
Статистика по файлу
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="stats-mini-grid">
|
||||
<div className="stat-mini-card">
|
||||
<div
|
||||
className="stat-mini-value"
|
||||
style={{'color': '#dc2626'}}
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div className="stat-mini-label">Новых</div>
|
||||
</div>
|
||||
<div className="stat-mini-card">
|
||||
<div
|
||||
className="stat-mini-value"
|
||||
style={{'color': '#d97706'}}
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div className="stat-mini-label">В работе</div>
|
||||
</div>
|
||||
<div className="stat-mini-card">
|
||||
<div
|
||||
className="stat-mini-value"
|
||||
style={{'color': '#059669'}}
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div className="stat-mini-label">Решено</div>
|
||||
</div>
|
||||
<div className="stat-mini-card">
|
||||
<div
|
||||
className="stat-mini-value"
|
||||
style={{'color': '#6366f1'}}
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div className="stat-mini-label">Всего</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
export default function ViolationPageNote() {
|
||||
return (
|
||||
<div
|
||||
className="violation-page-note block-wrapper"
|
||||
>
|
||||
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
Добавить заметку
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="note-form">
|
||||
<form method="POST">
|
||||
<input type="hidden" name="action" value="add_note" />
|
||||
<textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea>
|
||||
<button type="submit" className="btn-small btn-primary-small">
|
||||
Сохранить заметку
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { IconEyeDashed } from '@/app/ui/icons/icons';
|
||||
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
|
||||
|
||||
export default function ViolationPageTitle({ fileInfo }: { fileInfo: FileDetails }) {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
return (
|
||||
<div className="page-title-color-frame violation-page">
|
||||
{/* <div
|
||||
className="violation-page-icon"
|
||||
>
|
||||
|
||||
{fileInfo.thumbnailFileUrl ? (
|
||||
<img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
|
||||
) : (
|
||||
<IconEyeDashed />
|
||||
)}
|
||||
|
||||
</div> */}
|
||||
<h1>
|
||||
{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
export default function ViolationPageViolationInfo() {
|
||||
return (
|
||||
<div
|
||||
className="block-wrapper"
|
||||
>
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
Информация о нарушении
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">Тип нарушения</span>
|
||||
<span className="info-value">Неавторизованное использование</span>
|
||||
</div>
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">Дата обнаружения</span>
|
||||
<span className="info-value">0</span>
|
||||
</div>
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">Уверенность</span>
|
||||
<span className="info-value">0%</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="violation-source"
|
||||
>
|
||||
<div
|
||||
className="violation-source-title"
|
||||
>
|
||||
Источник нарушения:
|
||||
</div>
|
||||
<div className="url-display">
|
||||
<a href="#" target="_blank" className="url-link">
|
||||
url
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="notes-section">
|
||||
<div className="notes-title">📝 Заметки:</div>
|
||||
<div className="notes-content">
|
||||
<span>Заметок пока нет. Вы можете добавить первую заметку ниже.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,256 +0,0 @@
|
||||
// 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/violations/file-page/violation-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 ViolationPageViolationsList({
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -253,7 +253,7 @@ export default function ViolationsTable() {
|
||||
<IconEye />
|
||||
</button> */}
|
||||
<Link
|
||||
href={`/pages/violations/${row.original.fileId}`}
|
||||
href={`/pages/file/${row.original.fileId}`}
|
||||
className="bg-violet-500 hover:bg-violet-600"
|
||||
title={t('view')}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user