continue: change local check button design
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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": "и",
|
||||||
|
|||||||
Reference in New Issue
Block a user