continue: add violation panel
This commit is contained in:
@@ -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 ViolationPageViolationsList from '@/app/ui/violations/file-page/violation-page-violations-list';
|
||||||
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
|
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
|
||||||
import { getFileViolations } from '@/app/actions/violationActions';
|
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 {
|
interface PageProps {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
@@ -19,31 +56,43 @@ export default async function Page({
|
|||||||
params,
|
params,
|
||||||
searchParams
|
searchParams
|
||||||
}: PageProps) {
|
}: PageProps) {
|
||||||
|
/* const t = useTranslations('Global'); */
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
const { page } = await searchParams;
|
const { page } = await searchParams;
|
||||||
const currentPage = Number(page) || 1;
|
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 (
|
return (
|
||||||
<div className="violation-details">
|
<div className="violation-details">
|
||||||
<ViolationPageTitle />
|
<ViolationPageTitle fileInfo={fileInfo} />
|
||||||
<div className="grid grid-cols-[2fr_1fr] gap-3">
|
|
||||||
<div>
|
<div>
|
||||||
<ViolationPageViolationInfo />
|
<div
|
||||||
<ViolationPageViolationsList
|
className="grid grid-cols-[2fr_1fr] gap-3"
|
||||||
fileViolations={fileViolations}
|
>
|
||||||
currentPage={currentPage}
|
<ViolationPageFileInfo fileInfo={fileInfo} />
|
||||||
fileId={id}
|
{/* <ViolationPageActions /> */}
|
||||||
/>
|
<ViolationPpageFileStatistic />
|
||||||
<ViolationPageNote />
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<ViolationPageViolationsList
|
||||||
<ViolationPpageFileStatistic />
|
fileViolations={fileViolations}
|
||||||
<ViolationPageFileInfo />
|
currentPage={currentPage}
|
||||||
<ViolationPageActions />
|
fileId={id}
|
||||||
|
/>
|
||||||
|
{/* <ViolationPageNote /> */}
|
||||||
|
{/* <ViolationPageViolationInfo /> */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
} catch (error) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ViolationFileNotFound />
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -3593,6 +3593,17 @@
|
|||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
border-bottom: 1px solid #f1f5f9;
|
border-bottom: 1px solid #f1f5f9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&.image {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 200px;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-label {
|
.info-label {
|
||||||
@@ -4192,7 +4203,7 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
border-bottom: 2px solid #f1f5f9;
|
border-bottom: 1px solid #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-row {
|
.info-row {
|
||||||
@@ -4300,11 +4311,13 @@
|
|||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
|
||||||
.btn-action {
|
.btn-action {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 150px;
|
/* min-width: 150px; */
|
||||||
|
width: 100%;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-weight: 600;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
|
||||||
|
|
||||||
.source-card {
|
&-grid {
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
display: grid;
|
||||||
border-radius: 12px;
|
grid-template-columns: 3fr 1fr;
|
||||||
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;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-grow: 1;
|
||||||
margin-top: 10px;
|
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 {
|
.pagination {
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
&__item {
|
&-item {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -4462,11 +4574,15 @@
|
|||||||
border: 2px solid #e5e7eb;
|
border: 2px solid #e5e7eb;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #667eea;
|
border-color: #667eea;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--active {
|
&-active {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
color: white;
|
color: white;
|
||||||
border: 2px solid #667eea;
|
border: 2px solid #667eea;
|
||||||
@@ -4478,11 +4594,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.violation-page-note {
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.note-form {
|
.note-form {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #f8fafc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-textarea {
|
.note-textarea {
|
||||||
@@ -4495,6 +4615,7 @@
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background: #f8fafc;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
import { convertBytes } from '@/app/lib/convertBytes';
|
import { convertBytes } from '@/app/lib/convertBytes';
|
||||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||||
import { useTranslations } from 'next-intl';
|
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');
|
const t = useTranslations('Global');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -86,6 +91,11 @@ export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildre
|
|||||||
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
|
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{fileInfo.mimeType === 'image' && (
|
||||||
|
<div className="info-item image">
|
||||||
|
<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="block-wrapper"
|
className="block-wrapper"
|
||||||
@@ -6,32 +16,46 @@ export default function ViolationPageFileInfo() {
|
|||||||
<div className="content-card">
|
<div className="content-card">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h3 className="card-title">
|
<h3 className="card-title">
|
||||||
📄 Информация о файле
|
{t('file-information')}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="info-row">
|
<div className="info-row">
|
||||||
<span className="info-label">Тип файла</span>
|
<span className="info-label">
|
||||||
<span className="info-value">fileType</span>
|
ID
|
||||||
</div>
|
</span>
|
||||||
<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-value">
|
<span className="info-value">
|
||||||
Применен
|
{fileInfo ? fileInfo.supportId : '#'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="info-row">
|
<div className="info-row">
|
||||||
<span className="info-label">Уровень защиты</span>
|
<span className="info-label">
|
||||||
|
{t('file-type')}
|
||||||
|
</span>
|
||||||
<span className="info-value">
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export default function ViolationPageNote() {
|
export default function ViolationPageNote() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="block-wrapper"
|
className="violation-page-note"
|
||||||
>
|
>
|
||||||
|
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h3 className="card-title">
|
<h3 className="card-title">
|
||||||
✏️ Добавить заметку
|
Добавить заметку
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -15,7 +15,7 @@ export default function ViolationPageNote() {
|
|||||||
<input type="hidden" name="action" value="add_note" />
|
<input type="hidden" name="action" value="add_note" />
|
||||||
<textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea>
|
<textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea>
|
||||||
<button type="submit" className="btn-small btn-primary-small">
|
<button type="submit" className="btn-small btn-primary-small">
|
||||||
💾 Сохранить заметку
|
Сохранить заметку
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,45 +1,28 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useTranslations } from 'next-intl';
|
import { useTranslations } from 'next-intl';
|
||||||
import { useParams } from 'next/navigation'
|
|
||||||
import { IconEyeDashed } from '@/app/ui/icons/icons';
|
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 t = useTranslations('Global');
|
||||||
const params = useParams()
|
|
||||||
const id = params.id
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page-title-color-frame violation-page">
|
<div className="page-title-color-frame violation-page">
|
||||||
<div
|
<div
|
||||||
className="violation-page-icon"
|
className="violation-page-icon"
|
||||||
>
|
>
|
||||||
<IconEyeDashed />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>
|
|
||||||
file id: {id}
|
|
||||||
</h1>
|
|
||||||
<div
|
|
||||||
className="violation-page-info"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
fileType
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
{fileInfo.thumbnailFileUrl ? (
|
||||||
fileSize
|
<img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
|
||||||
</span>
|
) : (
|
||||||
|
<IconEyeDashed />
|
||||||
|
)}
|
||||||
|
|
||||||
<span>
|
|
||||||
fileViolationDate
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
fileViolationType
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1>
|
||||||
|
{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -4,7 +4,9 @@
|
|||||||
import { useTranslations } from 'next-intl';
|
import { useTranslations } from 'next-intl';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRouter, usePathname } from 'next/navigation';
|
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 {
|
interface ViolationFileDetail {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -39,17 +41,14 @@ export default function ViolationPageViolationsList({
|
|||||||
const t = useTranslations('Global');
|
const t = useTranslations('Global');
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
|
||||||
|
|
||||||
if (!fileViolations?.violations) {
|
if (!fileViolations?.violations) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(fileViolations);
|
|
||||||
}, [fileViolations]);
|
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
const handlePageChange = (page: number) => {
|
||||||
router.push(`${pathname}?page=${page}`);
|
router.push(`${pathname}?page=${page}`, { scroll: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPageNumbers = () => {
|
const getPageNumbers = () => {
|
||||||
@@ -71,79 +70,179 @@ export default function ViolationPageViolationsList({
|
|||||||
return pages;
|
return pages;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function selectHandler(violation: ViolationFileDetail) {
|
||||||
|
setSelectedViolation(violation);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="block-wrapper">
|
<div className="block-wrapper">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h3 className="card-title">
|
<h3 className="card-title">
|
||||||
Все нарушения этого файла
|
{t('all-file-violations')}
|
||||||
</h3>
|
</h3>
|
||||||
<span>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="sources-list">
|
<div
|
||||||
{fileViolations.violations.map(item => {
|
className="sources-list-wrapper"
|
||||||
return (
|
>
|
||||||
<div className="source-card" key={item.id}>
|
<div className="sources-list">
|
||||||
<div className="source-image">
|
{fileViolations.violations.map(item => {
|
||||||
<img src={item.url} alt="" />
|
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="source-header">
|
);
|
||||||
<a href={item.page_url} target="_blank" className="source-url">
|
})}
|
||||||
<span>{item.page_title}</span>
|
</div>
|
||||||
</a>
|
|
||||||
<span className="source-status new">
|
<div
|
||||||
{item.status}
|
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>
|
</span>
|
||||||
</div>
|
|
||||||
<div className="source-meta">
|
|
||||||
<span>{item.host}</span>
|
|
||||||
</div>
|
|
||||||
<div className="source-actions">
|
|
||||||
<Link
|
<Link
|
||||||
href={item.page_url}
|
href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
|
||||||
className="btn-small btn-primary-small"
|
className="source"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
scroll={false}
|
scroll={false}
|
||||||
>
|
>
|
||||||
{t('open')}
|
{selectedViolation?.page_url}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
);
|
className="violation-info-source"
|
||||||
})}
|
>
|
||||||
</div>
|
<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 && (
|
{fileViolations.total_pages > 1 && (
|
||||||
<div className="pagination">
|
<div className="pagination">
|
||||||
{fileViolations.has_previous && (
|
<button
|
||||||
<button
|
onClick={() => handlePageChange(currentPage - 1)}
|
||||||
onClick={() => handlePageChange(currentPage - 1)}
|
className="pagination-item pagination-item-prev"
|
||||||
className="pagination__item pagination__item--prev"
|
disabled={!fileViolations.has_previous}
|
||||||
>
|
>
|
||||||
Предыдущая
|
{t('previous')}
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
|
|
||||||
{getPageNumbers().map(pageNum => (
|
{getPageNumbers().map(pageNum => (
|
||||||
<button
|
<button
|
||||||
key={pageNum}
|
key={pageNum}
|
||||||
onClick={() => handlePageChange(pageNum)}
|
onClick={() => handlePageChange(pageNum)}
|
||||||
className={`pagination__item ${currentPage === pageNum ? 'pagination__item--active' : ''}`}
|
className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
|
||||||
>
|
>
|
||||||
{pageNum}
|
{pageNum}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{fileViolations.has_next && (
|
<button
|
||||||
<button
|
onClick={() => handlePageChange(currentPage + 1)}
|
||||||
onClick={() => handlePageChange(currentPage + 1)}
|
className="pagination-item pagination-item-next"
|
||||||
className="pagination__item pagination__item--next"
|
disabled={!fileViolations.has_next}
|
||||||
>
|
>
|
||||||
Следующая
|
{t('next')}
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -309,7 +309,13 @@
|
|||||||
"violations-detected": "Violations detected",
|
"violations-detected": "Violations detected",
|
||||||
"content-verification-status": "Content verification status",
|
"content-verification-status": "Content verification status",
|
||||||
"violation-data-updated": "Violation data updated",
|
"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": {
|
"Login-register-form": {
|
||||||
"and": "and",
|
"and": "and",
|
||||||
|
|||||||
@@ -309,7 +309,13 @@
|
|||||||
"violations-detected": "Обнаруженные нарушения",
|
"violations-detected": "Обнаруженные нарушения",
|
||||||
"content-verification-status": "Статус проверки контента",
|
"content-verification-status": "Статус проверки контента",
|
||||||
"violation-data-updated": "Данные нарушений обновлены",
|
"violation-data-updated": "Данные нарушений обновлены",
|
||||||
"open": "Открыть"
|
"open": "Открыть",
|
||||||
|
"file-type": "Тип файла",
|
||||||
|
"file-not-found": "Файл не найден",
|
||||||
|
"all-file-violations": "Все нарушения файла",
|
||||||
|
"previous" : "Предыдущая",
|
||||||
|
"next": "Следующая",
|
||||||
|
"source": "Источник"
|
||||||
},
|
},
|
||||||
"Login-register-form": {
|
"Login-register-form": {
|
||||||
"and": "и",
|
"and": "и",
|
||||||
|
|||||||
Reference in New Issue
Block a user