continue: add violation panel
This commit is contained in:
smanylov
@@ -9,6 +9,43 @@ import ViolationPageActions from '@/app/ui/violations/file-page/violation-page-a
|
||||
import ViolationPageViolationsList from '@/app/ui/violations/file-page/violation-page-violations-list';
|
||||
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
|
||||
import { getFileViolations } from '@/app/actions/violationActions';
|
||||
import { viewFileInfo } from '@/app/actions/fileEntity';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import ViolationFileNotFound from '@/app/ui/violations/file-page/violation-file-not-found';
|
||||
|
||||
type MonitoringStatus = 'NONE' | 'MONITORING_DAILY' | 'MONITORING_WEEKLY' | 'MONITORING_MONTHLY';
|
||||
type MimeType = 'image' | 'video' | 'audio' | 'document';
|
||||
|
||||
export interface FileDetails {
|
||||
id: string;
|
||||
userId: number;
|
||||
originalFileName: string;
|
||||
storedFileName: string;
|
||||
filePath: string;
|
||||
protectedFilePath: string;
|
||||
fileSize: number;
|
||||
mimeType: MimeType;
|
||||
fileExtension: string;
|
||||
checksum: string;
|
||||
uploadSessionId: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
formattedSize: string;
|
||||
downloadUrl: string;
|
||||
existsOnDisk: boolean;
|
||||
supportId: number | null;
|
||||
protectStatus: string;
|
||||
ownerName: string;
|
||||
ownerEmail: string;
|
||||
ownerCompany: string | null;
|
||||
fileName: string;
|
||||
fileFormat: string | null;
|
||||
checksCount: number;
|
||||
fileUploadDate: string;
|
||||
monitoring: MonitoringStatus;
|
||||
thumbnailFileUrl: string;
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -19,31 +56,43 @@ export default async function Page({
|
||||
params,
|
||||
searchParams
|
||||
}: PageProps) {
|
||||
/* const t = useTranslations('Global'); */
|
||||
const { id } = await params;
|
||||
const { page } = await searchParams;
|
||||
const currentPage = Number(page) || 1;
|
||||
|
||||
const fileViolations = await getFileViolations(id, currentPage);
|
||||
try {
|
||||
const fileViolations = await getFileViolations(id, currentPage);
|
||||
const fileInfo: FileDetails = await viewFileInfo(id);
|
||||
|
||||
return (
|
||||
<div className="violation-details">
|
||||
<ViolationPageTitle />
|
||||
<div className="grid grid-cols-[2fr_1fr] gap-3">
|
||||
return (
|
||||
<div className="violation-details">
|
||||
<ViolationPageTitle fileInfo={fileInfo} />
|
||||
<div>
|
||||
<ViolationPageViolationInfo />
|
||||
<ViolationPageViolationsList
|
||||
fileViolations={fileViolations}
|
||||
currentPage={currentPage}
|
||||
fileId={id}
|
||||
/>
|
||||
<ViolationPageNote />
|
||||
</div>
|
||||
<div>
|
||||
<ViolationPpageFileStatistic />
|
||||
<ViolationPageFileInfo />
|
||||
<ViolationPageActions />
|
||||
<div
|
||||
className="grid grid-cols-[2fr_1fr] gap-3"
|
||||
>
|
||||
<ViolationPageFileInfo fileInfo={fileInfo} />
|
||||
{/* <ViolationPageActions /> */}
|
||||
<ViolationPpageFileStatistic />
|
||||
</div>
|
||||
<div>
|
||||
<ViolationPageViolationsList
|
||||
fileViolations={fileViolations}
|
||||
currentPage={currentPage}
|
||||
fileId={id}
|
||||
/>
|
||||
{/* <ViolationPageNote /> */}
|
||||
{/* <ViolationPageViolationInfo /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
} catch (error) {
|
||||
|
||||
return (
|
||||
<ViolationFileNotFound />
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
@@ -3593,6 +3593,17 @@
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
width: 100%;
|
||||
|
||||
&.image {
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
@@ -4192,7 +4203,7 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #f1f5f9;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
@@ -4300,11 +4311,13 @@
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
/* flex-wrap: wrap; */
|
||||
|
||||
.btn-action {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
/* min-width: 150px; */
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
@@ -4375,84 +4388,183 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sources-list {
|
||||
.sources-list-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 10px;
|
||||
height: 80vh;
|
||||
|
||||
.sources-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.source-card {
|
||||
/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0; */
|
||||
|
||||
background: #fff;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 20px #0000001a;
|
||||
|
||||
|
||||
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px;
|
||||
height: calc(16vh - 12px);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* flex-direction: column; */
|
||||
opacity: 0.75;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
border: 1px solid #6366f1;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #e6eaf3 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.source-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
gap: 5px;
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
.source-image {
|
||||
max-width: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-url {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.source-status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
|
||||
&.new {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
.source-meta {
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.source-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.violation-info {
|
||||
/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
*/
|
||||
background: #fff;
|
||||
border: 1px solid #f3f4f6;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 20px #0000001a;
|
||||
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.source-card {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
}
|
||||
|
||||
.source-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.source-image {
|
||||
max-width: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-url {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.source-status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
|
||||
&.new {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
.source-meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.source-actions {
|
||||
display: flex;
|
||||
&-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
flex-grow: 1;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-image {
|
||||
|
||||
margin-bottom: 20px;
|
||||
/* padding-bottom: 15px; */
|
||||
/* border-bottom: 2px solid #e6e8eb; */
|
||||
|
||||
img {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&-source {
|
||||
margin-bottom: 20px;
|
||||
/* padding-bottom: 15px; */
|
||||
/* border-bottom: 2px solid #e6e8eb; */
|
||||
|
||||
span {
|
||||
color: #64748b;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #6366f1;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
border-left: 1px solid #e2e8f0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
gap: 4px;
|
||||
margin-top: 20px;
|
||||
|
||||
&__item {
|
||||
&-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
@@ -4462,11 +4574,15 @@
|
||||
border: 2px solid #e5e7eb;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
&--active {
|
||||
&-active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: 2px solid #667eea;
|
||||
@@ -4478,11 +4594,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.violation-page-note {
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.note-form {
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.note-textarea {
|
||||
@@ -4495,6 +4615,7 @@
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
background: #f8fafc;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { convertBytes } from '@/app/lib/convertBytes';
|
||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
|
||||
|
||||
export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: any) {
|
||||
export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: {
|
||||
fileInfo: FileDetails,
|
||||
setWindowClose: any,
|
||||
setWindowChildren: any
|
||||
}) {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
return (
|
||||
@@ -86,6 +91,11 @@ export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildre
|
||||
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
|
||||
</div>
|
||||
</div>
|
||||
{fileInfo.mimeType === 'image' && (
|
||||
<div className="info-item image">
|
||||
<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
'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,4 +1,14 @@
|
||||
export default function ViolationPageFileInfo() {
|
||||
'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"
|
||||
@@ -6,32 +16,46 @@ export default function ViolationPageFileInfo() {
|
||||
<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">Тип файла</span>
|
||||
<span className="info-value">fileType</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="info-row">
|
||||
<span className="info-label">Водяной знак</span>
|
||||
<span className="info-label">
|
||||
ID
|
||||
</span>
|
||||
<span className="info-value">
|
||||
Применен
|
||||
{fileInfo ? fileInfo.supportId : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">Уровень защиты</span>
|
||||
<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>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
export default function ViolationPageNote() {
|
||||
return (
|
||||
<div
|
||||
className="block-wrapper"
|
||||
className="violation-page-note"
|
||||
>
|
||||
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
✏️ Добавить заметку
|
||||
Добавить заметку
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function ViolationPageNote() {
|
||||
<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>
|
||||
|
||||
@@ -1,45 +1,28 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useParams } from 'next/navigation'
|
||||
import { IconEyeDashed } from '@/app/ui/icons/icons';
|
||||
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
|
||||
|
||||
export default function ViolationPageTitle() {
|
||||
export default function ViolationPageTitle({ fileInfo }: { fileInfo: FileDetails }) {
|
||||
const t = useTranslations('Global');
|
||||
const params = useParams()
|
||||
const id = params.id
|
||||
|
||||
return (
|
||||
<div className="page-title-color-frame violation-page">
|
||||
<div
|
||||
className="violation-page-icon"
|
||||
>
|
||||
<IconEyeDashed />
|
||||
</div>
|
||||
<div>
|
||||
<h1>
|
||||
file id: {id}
|
||||
</h1>
|
||||
<div
|
||||
className="violation-page-info"
|
||||
>
|
||||
<span>
|
||||
fileType
|
||||
</span>
|
||||
|
||||
<span>
|
||||
fileSize
|
||||
</span>
|
||||
{fileInfo.thumbnailFileUrl ? (
|
||||
<img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
|
||||
) : (
|
||||
<IconEyeDashed />
|
||||
)}
|
||||
|
||||
<span>
|
||||
fileViolationDate
|
||||
</span>
|
||||
|
||||
<span>
|
||||
fileViolationType
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -309,7 +309,13 @@
|
||||
"violations-detected": "Violations detected",
|
||||
"content-verification-status": "Content verification status",
|
||||
"violation-data-updated": "Violation data updated",
|
||||
"open": "Open"
|
||||
"open": "Open",
|
||||
"file-type": "File type",
|
||||
"file-not-found": "File not found",
|
||||
"all-file-violations" : "All file violations",
|
||||
"previous" : "Previous",
|
||||
"next": "Next",
|
||||
"source": "Source"
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "and",
|
||||
|
||||
@@ -309,7 +309,13 @@
|
||||
"violations-detected": "Обнаруженные нарушения",
|
||||
"content-verification-status": "Статус проверки контента",
|
||||
"violation-data-updated": "Данные нарушений обновлены",
|
||||
"open": "Открыть"
|
||||
"open": "Открыть",
|
||||
"file-type": "Тип файла",
|
||||
"file-not-found": "Файл не найден",
|
||||
"all-file-violations": "Все нарушения файла",
|
||||
"previous" : "Предыдущая",
|
||||
"next": "Следующая",
|
||||
"source": "Источник"
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "и",
|
||||
|
||||
Reference in New Issue
Block a user