continue: change local check button design

This commit is contained in:
smanylov
2026-03-23 14:07:44 +07:00
parent c5c4687063
commit b5ec4ccbcd
4 changed files with 73 additions and 19 deletions
+35
View File
@@ -3911,6 +3911,7 @@
display: flex; display: flex;
align-self: center; align-self: center;
gap: 5px; gap: 5px;
&.image { &.image {
svg { svg {
color: v.$color-image; color: v.$color-image;
@@ -4881,4 +4882,38 @@
.local-file-check-result { .local-file-check-result {
cursor: pointer; cursor: pointer;
} }
.btn-check-file {
color: v.$p-color;
cursor: pointer;
background: v.$white;
border: 2px solid v.$p-color;
border-radius: 20px;
align-items: center;
gap: 6px;
min-width: 110px;
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
transition: all .3s;
display: flex;
box-shadow: 0 10px 40px v.$shadow-1;
opacity: 0.8;
&:hover {
box-shadow: 0 5px 5px v.$shadow-1;
opacity: 1;
}
}
.local-file-check-link {
color: v.$p-color;
font-weight: 600;
margin-left: 5px;
&:hover {
text-decoration: underline;
}
}
} }
+30 -17
View File
@@ -8,6 +8,7 @@ import { fileUpload, chunkUpload, checkChunkStatus } from '@/app/actions/fileUpl
import { getFileType } from '@/app/lib/getFileType'; import { getFileType } from '@/app/lib/getFileType';
import { searchUserFiles } from '@/app/actions/searchActions'; import { searchUserFiles } from '@/app/actions/searchActions';
import { toast } from 'sonner'; import { toast } from 'sonner';
import Link from 'next/link';
interface SelectedFile { interface SelectedFile {
file: File; file: File;
@@ -35,6 +36,7 @@ export default function LocalFileCheck() {
const [fileId, setFileId] = useState<string | null>(null); const [fileId, setFileId] = useState<string | null>(null);
const [searchResult, setSearchResult] = useState<string | null>(null); const [searchResult, setSearchResult] = useState<string | null>(null);
const isCancelledRef = useRef(false); const isCancelledRef = useRef(false);
const [fileLink, setFileLink] = useState<string | null>(null);
const childRef = useRef(null); const childRef = useRef(null);
@@ -212,6 +214,7 @@ export default function LocalFileCheck() {
const handlerSearchUserFile = useCallback(async (fileId: string, fileName: string): Promise<void> => { const handlerSearchUserFile = useCallback(async (fileId: string, fileName: string): Promise<void> => {
setFileLink(null);
try { try {
let result = await searchUserFiles(fileId); let result = await searchUserFiles(fileId);
@@ -221,25 +224,22 @@ export default function LocalFileCheck() {
} }
if (result?.content?.length) { if (result?.content?.length) {
result.content.some((e: any) => { result.content.some((e: {
status: string,
fileId: string
}) => {
if (e.status === 'PROTECTED') { if (e.status === 'PROTECTED') {
toast.success(t('file-file-name-already-exists', { console.log(e);
fileName: fileName toast.success(t('file-is-protected'));
})); setSearchResult(t('file-is-protected'));
setSearchResult(t('file-file-name-already-exists', { setFileLink(e.fileId);
fileName: fileName
}));
return true; return true;
} }
return false; return false;
}); });
} else { } else {
toast.warning(t('file-file-name-does-not-exist', { toast.warning(t('no-similar-files-title'));
fileName: fileName setSearchResult(t('no-similar-files-title'));
}));
setSearchResult(t('file-file-name-does-not-exist', {
fileName: fileName
}));
} }
} catch (error) { } catch (error) {
@@ -250,7 +250,9 @@ export default function LocalFileCheck() {
} }
} }
}, [fileId]) }, [fileId]);
/* fileLink, setFileLink */
return ( return (
<div <div
@@ -262,16 +264,18 @@ export default function LocalFileCheck() {
accept={acceptString} accept={acceptString}
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={handleFileInputChange} onChange={handleFileInputChange}
aria-label="Выбор файла для защиты" aria-label=""
/> />
<button <button
className="btn btn-primary" className="btn btn-check-file"
onClick={handleButtonClick} onClick={handleButtonClick}
type="button" type="button"
disabled={uploadProgress && uploadProgress !== 100 ? true : false} disabled={uploadProgress && uploadProgress !== 100 ? true : false}
style={{ minWidth: '140px' }} style={{ minWidth: '140px' }}
> >
<span>Проверка файла</span> <span>
{t('file-verification')}
</span>
{(uploadProgress !== 0 && uploadProgress !== 100) && ( {(uploadProgress !== 0 && uploadProgress !== 100) && (
<div className="loading-animation"> <div className="loading-animation">
<span className="global-spinner"></span> <span className="global-spinner"></span>
@@ -282,10 +286,19 @@ export default function LocalFileCheck() {
className="local-file-check-result" className="local-file-check-result"
onClick={() => { onClick={() => {
setSearchResult(null); setSearchResult(null);
setFileLink(null);
setIsFileUploaded(false); setIsFileUploaded(false);
}} }}
> >
{searchResult} {searchResult}
{fileLink && (
<Link
href={`/pages/violations/${fileLink}`}
className="local-file-check-link"
>
{t('read-more')}
</Link>
)}
</div> </div>
</div> </div>
) )
+4 -1
View File
@@ -355,7 +355,10 @@
"request-payment": "Request payment", "request-payment": "Request payment",
"amount-to-be-withdrawn": "Amount to be withdrawn", "amount-to-be-withdrawn": "Amount to be withdrawn",
"payment-method": "Payment method", "payment-method": "Payment method",
"payment-history": "Payment history" "payment-history": "Payment history",
"file-verification": "File verification",
"file-is-protected": "The file is protected.",
"read-more": "Read more"
}, },
"Login-register-form": { "Login-register-form": {
"and": "and", "and": "and",
+4 -1
View File
@@ -355,7 +355,10 @@
"request-payment": "Запросить выплату", "request-payment": "Запросить выплату",
"amount-to-be-withdrawn": "Сумма к выводу", "amount-to-be-withdrawn": "Сумма к выводу",
"payment-method": "Способ выплаты", "payment-method": "Способ выплаты",
"payment-history": "История выплат" "payment-history": "История выплат",
"file-verification": "Проверка файла",
"file-is-protected": "Файл защищен.",
"read-more": "Подробнее"
}, },
"Login-register-form": { "Login-register-form": {
"and": "и", "and": "и",