From 9128c0e2984f5cdfc2ed414d93c17bef7eafa193 Mon Sep 17 00:00:00 2001 From: smanylov Date: Fri, 27 Mar 2026 13:50:41 +0700 Subject: [PATCH] add resolved button for matched file --- src/app/actions/violationActions.ts | 7 +- src/app/styles/pages-styles.scss | 178 ++++++++++-------- .../file-page-violation-info.tsx | 58 +++++- .../file-page-violations-list.tsx | 4 +- src/i18n/messages/en.json | 3 +- src/i18n/messages/ru.json | 3 +- 6 files changed, 158 insertions(+), 95 deletions(-) diff --git a/src/app/actions/violationActions.ts b/src/app/actions/violationActions.ts index 1e4c9e5..58ff158 100644 --- a/src/app/actions/violationActions.ts +++ b/src/app/actions/violationActions.ts @@ -355,8 +355,11 @@ export async function fetchComplainInfo(id: number) { } } -export async function updateMatchStatus(id: number, status: string) { +export type MatchStatus = 'NEW' | 'SHOWED' | 'LEGAL_IN_WORK' | 'COMPLAINT_IN_WORK' | 'COMPLAINT_AND_LEGAL_IN_WORK' | 'AUTHORIZED_USE'; + +export async function updateMatchStatus(id: number, status: MatchStatus) { const token = await getSessionData('token'); + console.log('updateMatchStatus'); try { const response = await fetch(`${API_BASE_URL}/api/v1/data`, { @@ -380,7 +383,7 @@ export async function updateMatchStatus(id: number, status: string) { if (response.ok) { let parsed = await response.json(); - if (parsed?.message_body.status === 'SHOWED') { + if (parsed?.message_body.status) { return true } else { throw parsed; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 210210a..c7f8060 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -4468,34 +4468,6 @@ flex: 1; } - .source-status { - padding: 4px 10px; - border-radius: 6px; - font-size: 11px; - font-weight: 600; - white-space: nowrap; - margin-bottom: 5px; - - &.new, - &.created { - background: v.$status-new; - } - - &.showed { - background-color: v.$b-color-1; - } - - &.legal_in_work, - &.complaint_in_work { - background: v.$status-in-work; - color: v.$white; - } - - &.authorized_use { - background: v.$authorized-use; - } - } - .source-meta { gap: 15px; font-size: 12px; @@ -4514,6 +4486,85 @@ } } + .source-status { + padding: 4px 10px; + border-radius: 6px; + font-size: 11px; + font-weight: 600; + white-space: nowrap; + margin-bottom: 5px; + user-select: none; + + &.new, + &.created { + background: v.$status-new; + } + + &.showed { + background-color: v.$b-color-1; + } + + &.legal_in_work, + &.complaint_in_work { + background: v.$status-in-work; + color: v.$white; + } + + &.authorized_use { + background: v.$authorized-use; + } + } + + .btn-action { + flex: 1; + width: 100%; + padding: 12px 20px; + border-radius: 12px; + font-weight: 600; + border: none; + cursor: pointer; + transition: all 0.3s ease; + font-size: 14px; + max-width: 300px; + } + + .btn-case { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + margin-bottom: 20px; + + &:hover { + transform: translateY(-2px); + } + } + + .btn-success { + background: linear-gradient(135deg, #10b981, #059669); + color: white; + max-width: 200px; + padding: 6px 10px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); + } + } + + /* .btn-warning { + background: linear-gradient(135deg, #f59e0b, #d97706); + color: white; + } + + .btn-secondary { + background: linear-gradient(135deg, #64748b, #475569); + color: white; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4); + } + } */ + .violation-info { background: #fff; border: 1px solid #f3f4f6; @@ -4550,7 +4601,6 @@ } &-image { - margin-bottom: 20px; width: 300px; height: 200px; @@ -4561,9 +4611,13 @@ } } - &-source { - margin-bottom: 20px; + &-right-side { + display: flex; + flex-direction: column; + gap: 10px; + } + &-source { span { color: #64748b; margin-right: 5px; @@ -4574,6 +4628,19 @@ } } + &-date-status { + display: flex; + gap: 10px; + + .source-status { + margin-bottom: 0; + } + } + + &-action { + margin-top: auto; + } + &-actions { border-left: 1px solid #e2e8f0; padding-left: 15px; @@ -4584,6 +4651,7 @@ grid-template-columns: 300px auto; gap: 10px; flex-shrink: 0; + padding-bottom: 20px; border-bottom: 1px solid rgb(226, 232, 240); } @@ -4604,54 +4672,6 @@ border-bottom: 1px solid rgb(226, 232, 240); padding-bottom: 10px; } - - .btn-action { - flex: 1; - width: 100%; - padding: 12px 20px; - border-radius: 12px; - font-weight: 600; - border: none; - cursor: pointer; - transition: all 0.3s ease; - font-size: 14px; - max-width: 300px; - } - - .btn-case { - background: linear-gradient(135deg, #6366f1, #8b5cf6); - color: white; - margin-bottom: 20px; - - &:hover { - transform: translateY(-2px); - } - } - - /* .btn-warning { - background: linear-gradient(135deg, #f59e0b, #d97706); - color: white; - } - - .btn-success { - background: linear-gradient(135deg, #10b981, #059669); - color: white; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); - } - } - - .btn-secondary { - background: linear-gradient(135deg, #64748b, #475569); - color: white; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4); - } - } */ } } diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx index 31691e3..f5281e6 100644 --- a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx +++ b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx @@ -8,24 +8,36 @@ import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint'; import CaseViolation from '@/app/ui/file-page/violation-table/case-violation'; import { updateMatchStatus } from '@/app/actions/violationActions'; import { useQueryClient } from '@tanstack/react-query'; -import { useEffect, useRef } from 'react'; +import { useCallback, useEffect } from 'react'; +import { MatchStatus } from '@/app/actions/violationActions'; +import { toast } from 'sonner'; export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) { const t = useTranslations('Global'); + const tStatus = useTranslations('Match-status'); const queryClient = useQueryClient(); + const updateStatusHandler = useCallback(async (id: number, status: MatchStatus) => { + const response = await updateMatchStatus(id, status); + if (response) { + if (status === 'AUTHORIZED_USE') { + toast.success('Статус обновлен'); + } + queryClient.invalidateQueries({ queryKey: ['fileViolations'] }); + return true; + } + return false; + }, [queryClient]); + useEffect(() => { const updateStatus = async () => { if (selectedViolation && (selectedViolation.status === 'CREATED' || selectedViolation.status === 'NEW')) { - const response = await updateMatchStatus(selectedViolation.id, 'SHOWED'); - if (response) { - queryClient.invalidateQueries({ queryKey: ['fileViolations'] }); - } + await updateStatusHandler(selectedViolation.id, 'SHOWED'); } }; updateStatus(); - }, [selectedViolation, queryClient]); + }, [selectedViolation, updateStatusHandler]); if (!selectedViolation) { return ( @@ -57,7 +69,9 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV {selectedViolation?.page_title} -
+
@@ -74,14 +88,38 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'} + {/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/} + {selectedViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? ( + <> + + {tStatus('LEGAL_IN_WORK')} + + + {tStatus('COMPLAINT_IN_WORK')} + + + ) : ( + + {tStatus(selectedViolation?.status)} + + )}
-
- {selectedViolation?.status} +
+
diff --git a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx index cc30915..3add083 100644 --- a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx +++ b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx @@ -108,10 +108,10 @@ export default function FilePageViolationsList({ {item.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? ( <> - {t('legal_in_work')} + {tStatus('LEGAL_IN_WORK')} - {t('complaint_in_work')} + {tStatus('COMPLAINT_IN_WORK')} ) : ( diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index fd778bc..3e0ee93 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -368,7 +368,8 @@ "how-does-search-work": "How does search work?", "search-info-description-text": "Our system analyzes the uploaded file and compares it with your protected files, using computer vision and digital fingerprinting algorithms.", "documents-few": "Documents", - "change": "Change" + "change": "Change", + "mark-as-solved": "Mark as solved" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index e03ac56..8a7c276 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -368,7 +368,8 @@ "how-does-search-work": "Как работает поиск?", "search-info-description-text": "Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами, используя алгоритмы компьютерного зрения и цифровых отпечатков.", "documents-few": "Документов", - "change": "Изменить" + "change": "Изменить", + "mark-as-solved": "Отметить решенным" }, "Login-register-form": { "and": "и",