add file search and some fixes and bugs
This commit is contained in:
smanylov
@@ -11,9 +11,13 @@ export default function Page() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="search-grid">
|
||||
<SectionSearchFile maxFileSize={1024000000} allowedExtensions={[]} fileType="video"/>
|
||||
<SectionSearchFile
|
||||
maxFileSize={1024000000}
|
||||
allowedExtensions={['jpg', 'jpeg', 'png', 'gif', 'bmp']}
|
||||
fileType="image"
|
||||
/>
|
||||
<div className="search-sidebar">
|
||||
test
|
||||
side
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -42,7 +42,7 @@ export async function getUserFilesData(page: number, pageSize: number) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeUserFile(fileId: string) {
|
||||
export async function removeUserFile(fileId: string, fullDelete: number) {
|
||||
const token = await getSessionData('token');
|
||||
|
||||
try {
|
||||
@@ -54,6 +54,7 @@ export async function removeUserFile(fileId: string) {
|
||||
message_body: {
|
||||
action: 'delete_file',
|
||||
file_id: fileId,
|
||||
full_delete: fullDelete,
|
||||
token: token
|
||||
}
|
||||
}),
|
||||
@@ -79,3 +80,64 @@ export async function removeUserFile(fileId: string) {
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchUserFiles(fileId: string) {
|
||||
const token = await getSessionData('token');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/v1/files/${fileId}/similar?auth_token=${token}`, {
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let parsed = await response.json();
|
||||
|
||||
if (parsed.message_code === 0) {
|
||||
return parsed.message_body;
|
||||
} else {
|
||||
throw parsed;
|
||||
}
|
||||
} else {
|
||||
throw (`${response.status}`);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchGlobalFiles(fileId: string) {
|
||||
const token = await getSessionData('token');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
version: 1,
|
||||
msg_id: 20007,
|
||||
message_body: {
|
||||
file_id: fileId,
|
||||
}
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
let parsed = await response.json();
|
||||
|
||||
if (parsed.message_code === 0) {
|
||||
return parsed.message_body;
|
||||
} else {
|
||||
throw parsed;
|
||||
}
|
||||
} else {
|
||||
throw (`${response.status}`);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
return error
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,36 @@
|
||||
|
||||
import { useEffect, useRef, useCallback } from 'react';
|
||||
import { tokenLifeExtension } from '@/app/actions/auth';
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
import { removeUserFile } from '@/app/actions/fileEntity';
|
||||
|
||||
export default function ActivityTracker() {
|
||||
const lastRefreshTime = useRef(Date.now());
|
||||
const activityTimeoutRef = useRef<NodeJS.Timeout>(null);
|
||||
const isRefreshing = useRef(false);
|
||||
|
||||
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
const selectedId = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('searchedFileId='))
|
||||
?.split('=')[1];
|
||||
|
||||
const handleCookie = async () => {
|
||||
if (selectedId) {
|
||||
await removeUserFile(selectedId, 1);
|
||||
document.cookie = 'searchedFileId=; path=/; max-age=0';
|
||||
}
|
||||
};
|
||||
|
||||
if (selectedId) {
|
||||
handleCookie();
|
||||
}
|
||||
}, [pathname, searchParams]);
|
||||
|
||||
// Debounce функция
|
||||
const debounce = useCallback((func: () => void, delay: number) => {
|
||||
if (activityTimeoutRef.current) {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { useRef, useState, useCallback, ChangeEvent, DragEvent, useEffect, useMemo } from 'react';
|
||||
import { IconShieldAdd } from '@/app/ui/icons/icons';
|
||||
import { IconSearch } from '@/app/ui/icons/icons';
|
||||
import { fileUpload, cancelUpload, chunkUpload, checkChunkStatus } from '@/app/actions/fileUpload';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { searchUserFiles, removeUserFile, searchGlobalFiles } from '@/app/actions/fileEntity';
|
||||
import { SearchedUserFilesList } from '@/app/ui/search/searched-user-files-list';
|
||||
import { SearchedGlobalFilesList } from '@/app/ui/search/searched-global-files-list';
|
||||
import { useRouter } from 'next/navigation';
|
||||
interface SelectedFile {
|
||||
file: File;
|
||||
preview: string | undefined;
|
||||
name: string;
|
||||
size: string;
|
||||
dimensions?: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface FileUploadInitResponse {
|
||||
@@ -39,6 +39,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
const [uploadId, setUploadId] = useState<string | null>(null);
|
||||
const [isFileUploaded, setIsFileUploaded] = useState<boolean>(false);
|
||||
const [uploadProgress, setUploadProgress] = useState<number>(0);
|
||||
const [fileId, setFileId] = useState<string | null>(null);
|
||||
|
||||
const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
|
||||
const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
|
||||
const queryClient = useQueryClient();
|
||||
const isCancelledRef = useRef(false);
|
||||
|
||||
@@ -74,37 +78,22 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
return { isValid: true };
|
||||
};
|
||||
|
||||
const getImageDimensions = (file: File): Promise<{ width: number; height: number }> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
|
||||
img.onload = () => {
|
||||
const dimensions = {
|
||||
width: img.width,
|
||||
height: img.height
|
||||
};
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
resolve(dimensions);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
reject(new Error(t('error-uploading-file')));
|
||||
};
|
||||
|
||||
img.src = objectUrl;
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileSelect = useCallback(async (file: File | null): Promise<void> => {
|
||||
if (!file) {
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (fileId) {
|
||||
await removeUserFile(fileId, 1);
|
||||
setFileId(null);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
setIsFileUploaded(false);
|
||||
setSearchedUserFiles([]);
|
||||
setSearchedGlobalFiles([]);
|
||||
|
||||
setUploadProgress(0);
|
||||
|
||||
const validation = validateFile(file);
|
||||
@@ -114,30 +103,20 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
return;
|
||||
}
|
||||
|
||||
let dimensions = undefined;
|
||||
if (fileType === "image") {
|
||||
try {
|
||||
dimensions = await getImageDimensions(file) as { width: number, height: number };
|
||||
if (dimensions.width < 100 || dimensions.height < 100 ||
|
||||
dimensions.width > 10000 || dimensions.height > 10000) {
|
||||
setError(`${t('image-size')}: ${dimensions.width}x${dimensions.height}. ${t('acceptable-range')}: 100x100 - 10000x10000 ${t('pixels')}.`);
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
setError(t('error-reading-image'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedFile({
|
||||
file,
|
||||
name: file.name,
|
||||
size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
|
||||
dimensions,
|
||||
preview: file.size < 10 * 1024 * 1024 ? URL.createObjectURL(file) : undefined
|
||||
});
|
||||
|
||||
console.log('Файл выбран:', file.name, file.size);
|
||||
handlerFileUpload({
|
||||
file,
|
||||
name: file.name,
|
||||
size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
|
||||
preview: file.size < 10 * 1024 * 1024 ? URL.createObjectURL(file) : undefined
|
||||
});
|
||||
|
||||
}, [fileType, t]);
|
||||
|
||||
const handleFileInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
|
||||
@@ -221,6 +200,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
return;
|
||||
}
|
||||
|
||||
const isLastChunk = chunkIndex === totalChunks - 1;
|
||||
const start = chunkIndex * CHUNK_SIZE;
|
||||
const end = Math.min(start + CHUNK_SIZE, file.size);
|
||||
const chunk = file.slice(start, end);
|
||||
@@ -229,7 +209,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
formData.append('upload_id', response.upload_id);
|
||||
formData.append('chunk_number', chunkIndex.toString());
|
||||
formData.append('chunk', chunk);
|
||||
/* formData.append('findSimilar', '0'); */
|
||||
formData.append('findSimilar', '1');
|
||||
|
||||
const chunkResponse = await chunkUpload(formData);
|
||||
|
||||
@@ -238,6 +218,11 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
}
|
||||
|
||||
setUploadProgress(Math.floor((chunkIndex + 1) / totalChunks * 100));
|
||||
|
||||
if (isLastChunk) {
|
||||
setFileId(chunkResponse.message_body.file_id);
|
||||
document.cookie = `searchedFileId=${chunkResponse.message_body.file_id}`
|
||||
}
|
||||
}
|
||||
|
||||
const chunkStatus = await checkChunkStatus(response.upload_id);
|
||||
@@ -257,7 +242,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
} finally {
|
||||
setUploadId(null);
|
||||
}
|
||||
}, [uploadId, fileType, t]);
|
||||
}, [uploadId, fileType]);
|
||||
|
||||
useEffect(() => {
|
||||
// Обработка закрытия вкладки
|
||||
@@ -295,11 +280,42 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
}
|
||||
});
|
||||
|
||||
const handlerSearchUserFile = useCallback(async (fileId: string): Promise<void> => {
|
||||
|
||||
try {
|
||||
let result = await searchUserFiles(fileId);
|
||||
|
||||
if (result.content.length) {
|
||||
setSearchedUserFiles(result.content);
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
}, [fileId])
|
||||
|
||||
const handlerSearchGlobalFile = useCallback(async (fileId: string): Promise<void> => {
|
||||
|
||||
try {
|
||||
let result = await searchGlobalFiles(fileId);
|
||||
if (result.images.length) {
|
||||
setSearchedGlobalFiles(result.images);
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
}, [fileId])
|
||||
|
||||
return (
|
||||
<div className="upload-section">
|
||||
<h3>
|
||||
{t('upload-for-protection', { fileType: t(fileType.toLocaleLowerCase()) })}
|
||||
</h3>
|
||||
<div className="search-info">
|
||||
<div className="search-info-title">Как работает поиск?</div>
|
||||
<div className="search-info-text">
|
||||
Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами,
|
||||
используя алгоритмы компьютерного зрения и цифровых отпечатков.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`drag-drop-zone ${isDragging ? 'dragging' : ''}`}
|
||||
@@ -307,25 +323,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<IconShieldAdd />
|
||||
<IconSearch />
|
||||
<h4>
|
||||
{t('drag-the-file-here')}
|
||||
Выберите файл для поиска
|
||||
</h4>
|
||||
{/* <p className="mb-2.5 text-[#6b7280]">
|
||||
{t('or')}
|
||||
</p> */}
|
||||
|
||||
{fileType === "image" && (
|
||||
<p className="description">
|
||||
{t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')}
|
||||
</p>
|
||||
)}
|
||||
<p className="description">
|
||||
{t('file-format')}: {acceptString}
|
||||
</p>
|
||||
<p className="description">
|
||||
{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
|
||||
</p>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
@@ -341,7 +342,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
onClick={handleButtonClick}
|
||||
type="button"
|
||||
>
|
||||
{t('select-files-to-protect')}
|
||||
Выбрать файл
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
@@ -352,9 +353,9 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
|
||||
{selectedFile && (
|
||||
<div
|
||||
className={`selected-file ${isFileUploaded ? 'done' : ''}`}
|
||||
className={`selected-file`}
|
||||
>
|
||||
<div className="selected-file-file-info">
|
||||
<div className="selected-file-file-info relative">
|
||||
<div>
|
||||
<p className="text-gray-700">
|
||||
<span className="font-medium">
|
||||
@@ -366,52 +367,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
{t('size')}:
|
||||
</span> {selectedFile.size}
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
<span className="font-medium">{t('cost-of-protection')}:</span> 0
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
<span className="font-medium">{t('current-balance')}:</span> 0
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{isFileUploaded && (
|
||||
<div className="font-medium text-green-600 text-2xl">
|
||||
{t('file-successfully-uploaded')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(fileType === 'image' && selectedFile.preview) && (
|
||||
<img
|
||||
src={selectedFile.preview}
|
||||
alt="Предпросмотр загруженного изображения"
|
||||
className="uploaded-image"
|
||||
onError={() => setError('Не удалось загрузить превью изображения')}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex gap-3 justify-center relative">
|
||||
<button
|
||||
className="btn btn-cancel"
|
||||
onClick={handleClearFile}
|
||||
type="button"
|
||||
>
|
||||
{isFileUploaded ? t('close') : t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-confirm ${error || isFileUploaded || uploadId ? 'disabled' : ''}`}
|
||||
onClick={() => {
|
||||
handlerFileUpload(selectedFile);
|
||||
}}
|
||||
type="button"
|
||||
disabled={error || isFileUploaded || uploadId ? true : false}
|
||||
>
|
||||
{t('upload-file')}
|
||||
</button>
|
||||
{uploadProgress !== 0 && (
|
||||
<div
|
||||
className={`absolute top-5 right-5 font-medium ${isFileUploaded ? "text-green-600" : ""}`}
|
||||
className={`absolute top-0 right-0 font-medium ${isFileUploaded ? "text-green-600" : ""}`}
|
||||
>
|
||||
{uploadProgress}%
|
||||
</div>
|
||||
@@ -420,6 +379,120 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isFileUploaded && (
|
||||
<>
|
||||
<div
|
||||
className="mb-4"
|
||||
>
|
||||
<button
|
||||
className="btn btn-primary btn-search"
|
||||
/* disabled={fileId ? false : true} */
|
||||
onClick={() => {
|
||||
if (fileId) {
|
||||
handlerSearchUserFile(fileId)
|
||||
}
|
||||
}}
|
||||
>
|
||||
Начать поиск
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(searchedUserFiles.length !== 0) && (
|
||||
<SearchedUserFilesList list={searchedUserFiles} />
|
||||
|
||||
)}
|
||||
|
||||
<div
|
||||
className="global-search-section"
|
||||
>
|
||||
<div className="global-search-header">
|
||||
<div className="global-search-title">
|
||||
Глобальный поиск изображений
|
||||
</div>
|
||||
<div className="">
|
||||
Найти где ещё используется ваше изображение в интернете
|
||||
</div>
|
||||
<div className="global-search-badge">
|
||||
Интернет поиск
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="global-search-content">
|
||||
<div className="global-search-info">
|
||||
<div className="global-search-info-title">
|
||||
Поиск по всему интернету
|
||||
</div>
|
||||
<div className="global-search-info-text">
|
||||
Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
|
||||
на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="search-counter" id="search-counter">
|
||||
<div className="counter-info">
|
||||
<div className="counter-icon" id="counter-icon"></div>
|
||||
<div className="counter-text">
|
||||
<div className="counter-label">Глобальных поисков сегодня</div>
|
||||
<div className="counter-value" id="counter-value">0 из 10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="progress-fill"
|
||||
id="progress-fill"
|
||||
style={{ width: '0%' }}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="global-search-btn"
|
||||
id="global-search-btn"
|
||||
onClick={() => {
|
||||
if (fileId) {
|
||||
handlerSearchGlobalFile(fileId)
|
||||
}
|
||||
}}
|
||||
>
|
||||
Найти в интернете
|
||||
</button>
|
||||
|
||||
<div className="global-loading" id="global-loading">
|
||||
<div className="global-spinner"></div>
|
||||
<div className="global-loading-text" id="global-loading-text">
|
||||
Поиск изображений в интернете...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
|
||||
<div className="global-result-card">
|
||||
<div className="global-result-header">
|
||||
<span>Найдено в интернете</span>
|
||||
</div>
|
||||
<div className="global-result-content">
|
||||
<SearchedGlobalFilesList list={searchedGlobalFiles} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="global-no-result" id="global-no-result">
|
||||
<div className="global-no-result-icon">‍</div>
|
||||
<h4>Похожие изображения в интернете не найдены</h4>
|
||||
<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
|
||||
</div>
|
||||
|
||||
<div className="global-error" id="global-error">
|
||||
<strong>Ошибка глобального поиска:</strong>
|
||||
<span id="global-error-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
SortingState,
|
||||
ColumnFiltersState,
|
||||
} from '@tanstack/react-table';
|
||||
import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
|
||||
import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import DropDownList from '@/app/components/dropDownList';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
@@ -447,7 +447,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
{t('download')}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
{/* <button
|
||||
onClick={() => handleOpenWindowForRemove(row.original)}
|
||||
className="table-action-delete"
|
||||
>
|
||||
@@ -455,7 +455,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
<span>
|
||||
{t('delete')}
|
||||
</span>
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -515,7 +515,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
<div className="flex justify-center gap-4">
|
||||
<button className="btn-primary btn-modal"
|
||||
onClick={() => {
|
||||
deleteMutation.mutate(file.id)
|
||||
deleteMutation.mutate({
|
||||
fileId: file.id,
|
||||
removeParam: 1,
|
||||
})
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
@@ -537,9 +540,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
};
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: removeUserFile,
|
||||
mutationFn: ({ fileId, removeParam }: { fileId: string; removeParam: number }) =>
|
||||
removeUserFile(fileId, removeParam),
|
||||
|
||||
onMutate: async (fileId: string) => {
|
||||
onMutate: async ({ fileId, removeParam }: { fileId: string; removeParam: number }) => {
|
||||
await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
|
||||
|
||||
queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
|
||||
@@ -556,7 +560,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
toast.error(t('error'));
|
||||
},
|
||||
|
||||
onSuccess: (response, fileId) => {
|
||||
onSuccess: (response, { fileId }) => {
|
||||
if (response === fileId) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['userFilesData'],
|
||||
|
||||
@@ -234,6 +234,9 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
|
||||
const chunkResponse = await chunkUpload(formData);
|
||||
|
||||
if (chunkResponse.message_desc !== 'Chunk uploaded successfully') {
|
||||
if (chunkResponse.message_desc === 'Duplicate file upload') {
|
||||
throw (`duplicate-file`);
|
||||
}
|
||||
throw new Error(`Chunk ${chunkIndex} upload failed`);
|
||||
}
|
||||
|
||||
@@ -251,9 +254,13 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
|
||||
|
||||
} catch (error) {
|
||||
if (!isCancelledRef.current) {
|
||||
if (error === 'duplicate-file') {
|
||||
setError(t('error-duplicate-file'));
|
||||
} else {
|
||||
setError(t('error-uploading-file'));
|
||||
console.error('Upload error:', error);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setUploadId(null);
|
||||
}
|
||||
|
||||
@@ -158,7 +158,12 @@
|
||||
color: v.$white;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
&:disabled {
|
||||
background: linear-gradient(135deg, v.$p-color-disabled, v.$s-color-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px v.$shadow-1;
|
||||
}
|
||||
@@ -260,6 +265,11 @@
|
||||
color: v.$text-p;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 4px 20px v.$shadow-1;
|
||||
|
||||
&:has(.modal-window-view-file) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2773,3 +2773,666 @@
|
||||
max-width: calc(100vw - var(--side-bar-width) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.search-info {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&-title {
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: #3730a3;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary.btn-search {
|
||||
background: linear-gradient(135deg, #667eea 50%, #764ba2 100%);
|
||||
border: none
|
||||
}
|
||||
|
||||
.global-search-section {
|
||||
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
|
||||
padding: 0;
|
||||
box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
.global-search-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.global-search-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.global-search-badge {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #667eea;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.global-search-content {
|
||||
padding: 24px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 0 0 20px 20px;
|
||||
background:
|
||||
linear-gradient(#fff, #fff) padding-box,
|
||||
linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
|
||||
.global-search-info {
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
|
||||
border: 2px solid #c7d2fe;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.global-search-info-title {
|
||||
font-weight: 700;
|
||||
color: #3730a3;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.global-search-info-text {
|
||||
color: #4338ca;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.search-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.counter-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 80px;
|
||||
height: 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border-radius: 4px;
|
||||
transition: all 0.5s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.global-search-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 16px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.global-loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
margin: 20px 0;
|
||||
|
||||
.global-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top: 4px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: calc(100% - 16px);
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid #764ba2;
|
||||
border-radius: 50%;
|
||||
animation: spin 2s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.global-loading-text {
|
||||
color: #4b5563;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.global-result {
|
||||
display: none;
|
||||
margin: 20px 0;
|
||||
animation: slideUp 0.5s ease;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.global-result-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.global-result-header {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.global-result-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.global-result-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.global-result-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 2px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.global-result-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.global-result-title {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.global-result-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.global-result-size,
|
||||
.global-result-host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.global-result-size {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.global-result-host {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.global-result-passage {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.global-result-url {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: #eff6ff;
|
||||
border-color: #667eea;
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.global-no-result {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.global-error {
|
||||
display: none;
|
||||
background: #fef2f2;
|
||||
border: 2px solid #fecaca;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
color: #991b1b;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.user-file-search-results {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.results-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.results-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.result-item {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.result-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-fallback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.result-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-filename {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-details {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.similarity-score {
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.similarity-percentage {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.similarity-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-protected {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.badge-high-protection {
|
||||
background: #ddd6fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
|
||||
&:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
|
||||
&:hover {
|
||||
background: #059669;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-window-view-file {
|
||||
/* position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
max-height: 90%;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); */
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 20px;
|
||||
max-height: calc(90vh - 80px);
|
||||
overflow-y: auto;
|
||||
background: v.$white;
|
||||
|
||||
.file-info-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.info-header {
|
||||
background: #f8fafc;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.status-badges {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,8 @@ $bg-darkening: #0000007a;
|
||||
$shadow-1: #0000001a;
|
||||
$white: #fff;
|
||||
$red: #dc2626;
|
||||
$p-color-disabled: #6365f18e;
|
||||
$s-color-disabled: #8a5cf663;
|
||||
|
||||
$color-image: #f08c00;
|
||||
$color-video: #2f9e44;
|
||||
|
||||
@@ -146,3 +146,9 @@ export function IconBurgerMenu() {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconSearch() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14" /></svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
export function SearchedGlobalFilesList({ list }: { list: any }) {
|
||||
return (
|
||||
<>
|
||||
{list.map((item: any, index: number) => {
|
||||
return (
|
||||
<div
|
||||
className="global-result-item"
|
||||
key={index}
|
||||
>
|
||||
<div className="global-result-image">
|
||||
<img src={item.url} alt={item.pageTitle} />
|
||||
</div>
|
||||
<div className="global-result-info">
|
||||
<div className="global-result-title">
|
||||
{item.pageTitle}
|
||||
</div>
|
||||
<div className="global-result-meta">
|
||||
<div className="global-result-size">
|
||||
{item.height}x{item.width}
|
||||
</div>
|
||||
<div className="global-result-host">
|
||||
{item.host}
|
||||
</div>
|
||||
</div>
|
||||
<div className="global-result-passage">
|
||||
{item.pageTitle}
|
||||
</div>
|
||||
<a href={item.pageUrl} target="_blank" className="global-result-url" title={item.pageUrl}>
|
||||
{item.pageUrl}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
import { convertBytes } from '@/app/lib/convertBytes';
|
||||
import { toast } from 'sonner';
|
||||
import { useState, ReactNode } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import ModalWindow from '@/app/components/modalWindow';
|
||||
|
||||
export function SearchedUserFilesList({ list }: { list: any }) {
|
||||
const [isFileLoading, setIsFileLoading] = useState(false);
|
||||
const [openWindow, setOpenWindow] = useState<boolean>(false);
|
||||
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
|
||||
const t = useTranslations('Global');
|
||||
|
||||
const handlerDownload = async (fileId: string, fileName: string) => {
|
||||
setIsFileLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/download/${fileId}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`error: ${response.status}`);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = fileName || `file-${fileId}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success(`${t('file-is-downloading')} - ${fileName}`);
|
||||
} catch (error) {
|
||||
toast.error(t('failed-to-download-file'))
|
||||
} finally {
|
||||
setIsFileLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerViewfile = async (e: any) => {
|
||||
setOpenWindowChildren(() => {
|
||||
return (
|
||||
<div
|
||||
className="modal-window-view-file"
|
||||
>
|
||||
<div className="modal-window-view-file-header">
|
||||
<div
|
||||
className="modal-window-view-file-title"
|
||||
>
|
||||
{e.originalFileName}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="modal-window-view-file-content"
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<div>
|
||||
<img
|
||||
src={e.url ? e.url : '#'}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="file-info-card"
|
||||
>
|
||||
<div className="info-header">
|
||||
<h4>Информация о файле</h4>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">ID в системе:</span>
|
||||
<span className="info-value">
|
||||
{e.supportId ? e.supportId : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">Дата загрузки:</span>
|
||||
<span className="info-value">
|
||||
{e.uploadDate ? e.uploadDate : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">Размер файла:</span>
|
||||
<span className="info-value">
|
||||
{convertBytes(e.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">Статус защиты:</span>
|
||||
<span className="info-value">
|
||||
{e.status ? e.status : '#'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
setOpenWindow(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="user-file-search-results"
|
||||
>
|
||||
<div className="results-header">
|
||||
<div className="results-title">Результаты поиска</div>
|
||||
<div className="results-count">
|
||||
Найдено файлов: {list.length}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="results-list"
|
||||
>
|
||||
{list.map((e: any, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
|
||||
>
|
||||
<div className="result-item">
|
||||
<div className="result-header">
|
||||
<div className="result-preview">
|
||||
<img src="view-image.php?id=431" alt="Preview" />
|
||||
<div className="preview-fallback">
|
||||
<span>📄</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="result-info">
|
||||
<div className="result-filename" title={e.originalFileName}>
|
||||
{e.originalFileName}
|
||||
</div>
|
||||
<div className="result-details">
|
||||
Загружен: - •
|
||||
Размер: {convertBytes(e.fileSize)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="similarity-score">
|
||||
<div className="similarity-percentage">
|
||||
{e.similarityLevel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="result-badges">
|
||||
<span className="badge badge-protected">
|
||||
🛡️ Защищено
|
||||
</span>
|
||||
<span className="badge badge-high-protection">
|
||||
🔒 Высокий уровень защиты
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="result-actions">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => {
|
||||
handlerViewfile(e);
|
||||
}}
|
||||
>
|
||||
👁️ Просмотр
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
disabled={isFileLoading}
|
||||
onClick={() => handlerDownload(e.fileId, e.originalFileName)}
|
||||
>
|
||||
💾 Скачать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -143,6 +143,7 @@
|
||||
"pixels": "pixels",
|
||||
"error-processing-file": "Error processing file",
|
||||
"error-uploading-file": "Error uploading file",
|
||||
"error-duplicate-file": "Such a file already exists",
|
||||
"unknown-validation-error": "Unknown validation error",
|
||||
"unsupported-file-format": "Unsupported file format.",
|
||||
"the-file-is-too-large": "The file is too large",
|
||||
|
||||
@@ -143,6 +143,7 @@
|
||||
"pixels": "пикселей",
|
||||
"error-processing-file": "Ошибка при обработке файла",
|
||||
"error-uploading-file": "Ошибка при загрузке файла",
|
||||
"error-duplicate-file": "Такой файл уже есть",
|
||||
"unknown-validation-error": "Неизвестная ошибка валидации",
|
||||
"unsupported-file-format": "Неподдерживаемый формат файла.",
|
||||
"the-file-is-too-large": "Файл слишком большой",
|
||||
|
||||
Reference in New Issue
Block a user