diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index 93962e9..5615b5b 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -26,7 +26,7 @@ export default function Page() {
- + {/* */}
@@ -34,8 +34,13 @@ export default function Page() {
+ + {/* */} +
+
-
diff --git a/src/app/components/FileTypeIcon.tsx b/src/app/components/FileTypeIcon.tsx new file mode 100644 index 0000000..3b57350 --- /dev/null +++ b/src/app/components/FileTypeIcon.tsx @@ -0,0 +1,22 @@ +import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons'; + +export const FileTypeIcon = ({ type }: { type: string }) => { + switch (type) { + case 'image': + return + + ; + case 'video': + return + + ; + case 'audio': + return + + ; + default: + return + + ; + } +}; \ No newline at end of file diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 4ca918f..77b0ebe 100644 --- a/src/app/components/tanstakTable.tsx +++ b/src/app/components/tanstakTable.tsx @@ -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 } from '@/app/ui/icons/icons'; +import { 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'; @@ -21,6 +21,7 @@ import { toast } from 'sonner'; import { pluralize } from '@/app/lib/pluralize'; import { convertBytes } from '@/app/lib/convertBytes'; import { FileInfoModalWindow } from '@/app/ui/modal-windows/file-info-modal-window'; +import { FileTypeIcon } from '@/app/components/FileTypeIcon'; type FileType = 'image' | 'video' | 'audio'; @@ -53,26 +54,6 @@ type ApiResponse = { files?: ApiFile[]; }; -// Иконки для типов файлов -const FileTypeIcon = ({ type }: { type: string }) => { - switch (type) { - case 'image': - return - - ; - case 'video': - return - - ; - case 'audio': - return - - ; - default: - return 📄; - } -}; - // Форматирование даты из timestamp const formatDate = (timestamp: number) => { const date = new Date(timestamp); diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 5da2f05..8388b31 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -454,6 +454,13 @@ padding: 8px; border-radius: 6px; } + + &-document { + color: v.$white; + background: v.$color-document; + padding: 8px; + border-radius: 6px; + } } .split-blocks { diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index e806e77..1d10934 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -3534,4 +3534,46 @@ &-content { color: v.$text-s; } +} + +.section-add-file { + position: relative; + + .section-drop-down-list { + position: absolute; + left: 80%; + top: 50%; + max-height: 0; + color: v.$text-p; + font-size: 16px; + border-radius: 20px; + padding: 0; + border: none; + width: fit-content; + z-index: 2; + font-weight: 500; + + background: #ffffff00; + overflow: hidden; + transition: all 0.5s ease; + transform: translateY(-50%); + + &.opened { + max-height: 500px; + padding: 15px 10px; + box-shadow: 0 4px 20px #00000014; + background: v.$white; + } + + a { + white-space: nowrap; + color: v.$p-color; + opacity: 0.7; + } + + a:hover { + transition: all 0.3s ease; + opacity: 1; + } + } } \ No newline at end of file diff --git a/src/app/ui/dashboard/new/dashboard-user-files.tsx b/src/app/ui/dashboard/new/dashboard-user-files.tsx index ce3ee2f..89cfb6d 100644 --- a/src/app/ui/dashboard/new/dashboard-user-files.tsx +++ b/src/app/ui/dashboard/new/dashboard-user-files.tsx @@ -1,48 +1,153 @@ +'use client' + +import { useQuery } from '@tanstack/react-query'; +import { getUserFilesData } from '@/app/actions/fileEntity'; +import { useEffect, useState, useRef } from 'react'; +import { FileTypeIcon } from '@/app/components/FileTypeIcon'; +import { convertBytes } from '@/app/lib/convertBytes'; +import { useTranslations } from 'next-intl'; +import { useClickOutside } from '@/app/hooks/useClickOutside'; +import Link from 'next/link'; + +type FileItem = { + id: string; + fileName: string; + fileType: string; + size?: number | undefined; + uploadDate?: number; + protectStatus: string; + supportId: number; +}; + +type ApiFile = { + id: string; + originalFileName: string; + mimeType: string; + fileSize: number; + updatedAt: string; + protectStatus: string; + supportId: number; +}; + +type ApiResponse = { + files?: ApiFile[]; +}; + export default function DashboardUserFiles() { + const { + data: tableData, + isLoading, + isError, + error, + } = useQuery({ + queryKey: ['userFilesData', 1, 5], + queryFn: () => getUserFilesData(1, 5), + + select: (data: ApiResponse): FileItem[] => { + if (!data?.files) return []; + + return data.files.map((item: ApiFile) => { + const [datePart, timePart] = item.updatedAt.split(' '); + const [day, month, year] = datePart.split('-').map(Number); + const [hours, minutes, seconds] = timePart.split(':').map(Number); + const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime(); + console.log(newDate); + + return { + id: item.id, + fileName: item.originalFileName, + fileType: item.mimeType.toLocaleLowerCase(), + size: item.fileSize, + uploadDate: newDate, + protectStatus: item.protectStatus, + supportId: item.supportId, + }; + }); + }, + }); + + const t = useTranslations('Global'); + const [openDropDownList, setOpenDropDownList] = useState(false); + const dropDownList = useRef(null); + useClickOutside( + dropDownList, + () => { + setOpenDropDownList(false) + }, + openDropDownList + ); + + const formatDate = (timestamp: number) => { + const date = new Date(timestamp); + const day = date.getDate().toString().padStart(2, '0'); + const month = (date.getMonth() + 1).toString().padStart(2, '0'); + const year = date.getFullYear(); + + return `${day}.${month}.${year}`; + }; + + useEffect(() => { + console.log(tableData); + }, [tableData]); + + + return (

Ваши файлы

- Загрузить файл → +
{ + setOpenDropDownList(!openDropDownList); + }} + ref={dropDownList} + > + {t('add')} +
+
+ + {t('photo-marking')} + + + {t('video-marking')} + + + {t('audio-marking')} + +
+
+
-
-
- 🎬
-
-
- Запись экрана 2026-01-09 в 15.45.28.mov
-
- 11.3 МБ • - 11.01.2026
-
-
✓ Защищено
-
-
-
- 🎬
-
-
- SOUNE_миграция.mov
-
- 17.1 МБ • - 11.01.2026
-
-
✓ Защищено
-
-
-
- 🎬
-
-
- SOUNE_миграция.mov
-
- 17.1 МБ • - 11.01.2026
-
-
✓ Защищено
-
+ {tableData?.map((file) => { + return ( +
+
+ +
+
+
+ {file.fileName} +
+
+ {convertBytes(file.size ? file.size : 0)} • {formatDate(file.uploadDate ? file.uploadDate : 0)} +
+
+
+ {t(file.protectStatus)} +
+
+ ) + })}
)