add life data for tanstak table

2025-12-26 14:03:57 +07:00
parent eeef5ac9f9
commit d52dfb7ab8
8 changed files with 262 additions and 58 deletions
@@ -11,19 +11,21 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import {IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileOpen, IconShieldExclamation} from '@/app/ui/icons/icons';
+import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileOpen, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
 import { useTranslations } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity';

 // Типы данных
 type FileType = 'image' | 'video' | 'audio';
 type FileItem = {
-	id: number;
+	id: string;
 	fileName: string;
 	fileType: FileType;
-	violations: number;
-	checks: number;
-	lastCheck: number; // timestamp в миллисекундах
+	violations?: number | undefined;
+	checks?: number | undefined;
+	lastCheck?: number; // timestamp в миллисекундах
 };

 // Иконки для типов файлов
@@ -52,29 +54,52 @@ const formatDate = (timestamp: number) => {
 	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}`;
 };

-// Компонент таблицы
+const formatDateTime = (timestamp: number) => {
+	const date = new Date(timestamp);
+	const hours = date.getHours().toString().padStart(2, '0');
+	const minutes = date.getMinutes().toString().padStart(2, '0');
+
+	return `${hours}:${minutes}`;
+};
+
 export default function TanstakFilesTable() {
-	// Данные с timestamp вместо Date объектов
-	const [data] = useState<FileItem[]>([
-		{ id: 1, fileName: 'image1.jpg', fileType: 'image', violations: 5, checks: 12, lastCheck: 1705267200000 }, // 15.01.2024
-		{ id: 2, fileName: 'prespresentationpresentationprpresentationpresentationesentationentation.mp4', fileType: 'video', violations: 2, checks: 8, lastCheck: 1705180800000 }, // 14.01.2024
-		{ id: 3, fileName: 'song.mp3', fileType: 'audio', violations: 0, checks: 5, lastCheck: 1705094400000 }, // 13.01.2024
-		{ id: 4, fileName: 'photo1.jpg', fileType: 'image', violations: 3, checks: 10, lastCheck: 1705008000000 }, // 12.01.2024
-		{ id: 5, fileName: 'movie.mp4', fileType: 'video', violations: 1, checks: 7, lastCheck: 1704921600000 }, // 11.01.2024
-		{ id: 6, fileName: 'podcast.mp3', fileType: 'audio', violations: 4, checks: 9, lastCheck: 1704835200000 }, // 10.01.2024
-		{ id: 7, fileName: 'screenshot.png', fileType: 'image', violations: 0, checks: 3, lastCheck: 1704748800000 }, // 09.01.2024
-		{ id: 8, fileName: 'tutorial.mp4', fileType: 'video', violations: 2, checks: 6, lastCheck: 1704662400000 }, // 08.01.2024
-		{ id: 9, fileName: 'music.mp3', fileType: 'audio', violations: 1, checks: 4, lastCheck: 1704576000000 }, // 07.01.2024
-		{ id: 10, fileName: 'image2.jpg', fileType: 'image', violations: 5, checks: 11, lastCheck: 1704489600000 }, // 06.01.2024
-		{ id: 11, fileName: 'film.mov', fileType: 'video', violations: 0, checks: 2, lastCheck: 1704403200000 }, // 05.01.2024
-		{ id: 12, fileName: 'sound.wav', fileType: 'audio', violations: 3, checks: 8, lastCheck: 1704316800000 }, // 04.01.2024
-		{ id: 13, fileName: 'picture.png', fileType: 'image', violations: 2, checks: 7, lastCheck: 1704230400000 }, // 03.01.2024
-		{ id: 14, fileName: 'video2.mp4', fileType: 'video', violations: 1, checks: 5, lastCheck: 1704144000000 }, // 02.01.2024
-		{ id: 15, fileName: 'audio2.mp3', fileType: 'audio', violations: 0, checks: 3, lastCheck: 1704057600000 }, // 01.01.2024
-	]);
+	const {
+		data: userFilesData,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['userFilesData'],
+		queryFn: () => {
+			return getUserFilesData();
+		}
+	});
+
+	const [tableData] = useState<FileItem[]>(
+		userFilesData.files.map((item: any) => {
+			//когда с бека будет приходить время в милисекундах можно будет удалить
+			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();
+
+			return {
+				id: item.id,
+				fileName: item.originalFileName,
+				fileType: item.mimeType.toLocaleLowerCase(),
+				violations: item.violations,
+				checks: item.checks,
+				lastCheck: newDate
+			}
+		})
+	)
+
+	if (typeof window !== 'undefined') {
+	}

 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
@@ -124,6 +149,41 @@ export default function TanstakFilesTable() {
 				),
 				enableColumnFilter: false,
 			},
+			{
+				accessorKey: 'status',
+				header: ({ column }) => (
+					<div className="flex items-center justify-center">
+						<span>
+							status
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="ml-2 p-1 hover:bg-gray-200 rounded"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => {
+					return (
+						<div className={`text-center font-semibold`}>
+							status
+						</div>
+					)
+				},
+			},
 			{
 				accessorKey: 'violations',
 				header: ({ column }) => (
@@ -151,11 +211,20 @@ export default function TanstakFilesTable() {
 						</button>
 					</div>
 				),
-				cell: ({ row }) => (
-					<div className={`text-center font-semibold ${row.original.violations > 0 ? 'text-red-600' : 'text-green-600'}`}>
-						{row.original.violations}
-					</div>
-				),
+				cell: ({ row }) => {
+					let classCollor = () => {
+						let result = ''
+						if (row.original.violations !== undefined) {
+							result = row.original.violations > 0 ? 'text-red-600' : 'text-green-600'
+						}
+						return result;
+					}
+					return (
+						<div className={`text-center font-semibold ${classCollor()}`}>
+							{row.original.violations !== undefined ? row.original.violations : '-'}
+						</div>
+					)
+				},
 			},
 			{
 				accessorKey: 'checks',
@@ -186,7 +255,7 @@ export default function TanstakFilesTable() {
 				),
 				cell: ({ row }) => (
 					<div className="text-center">
-						{row.original.checks}
+						{row.original.checks !== undefined ? row.original.checks : '-'}
 					</div>
 				),
 			},
@@ -217,11 +286,21 @@ export default function TanstakFilesTable() {
 						</button>
 					</div>
 				),
-				cell: ({ row }) => (
-					<div className="text-center">
-						{formatDate(row.original.lastCheck)}
-					</div>
-				),
+				cell: ({ row }) => {
+					return (
+						<div className="text-center">
+							{row.original.lastCheck ? (
+								<>
+									{formatDate(row.original.lastCheck)}
+									<br />
+									{formatDateTime(row.original.lastCheck)}
+								</>
+							) : (
+								<div>-</div>
+							)}
+						</div>
+					)
+				},
 				enableColumnFilter: false,
 			},
 			{
@@ -253,6 +332,12 @@ export default function TanstakFilesTable() {
 						>
 							<IconShieldExclamation />
 						</button>
+						<button
+							onClick={() => handleRemove(row.original)}
+							className="px-3 py-1 bg-red-700 text-white rounded hover:bg-red-800 text-sm"
+						>
+							<IconDelete />
+						</button>
 					</div>
 				),
 				enableSorting: false,
@@ -275,9 +360,14 @@ export default function TanstakFilesTable() {
 		console.log(`Щиток: ${file.fileName}`);
 	};

+	const handleRemove = async (file: FileItem) => {
+		const response = await removeUserFile(file.id);
+		console.log(`Removed: ${response}`);
+	};
+
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
-		let result = data;
+		let result = tableData;

 		// Фильтр по типу файла
 		if (typeFilter !== 'all') {
@@ -294,25 +384,43 @@ export default function TanstakFilesTable() {
 			switch (dateFilter) {
 				case 'today':
 					const todayStart = new Date().setHours(0, 0, 0, 0);
-					result = result.filter(item => item.lastCheck >= todayStart);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= todayStart
+						} else {
+							return 0
+						}
+					});
 					break;
 				case 'week':
 					const weekAgo = now - sevenDays;
-					result = result.filter(item => item.lastCheck >= weekAgo);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= weekAgo;
+						}
+					});
 					break;
 				case 'month':
 					const monthAgo = now - thirtyDays;
-					result = result.filter(item => item.lastCheck >= monthAgo);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= monthAgo;
+						}
+					});
 					break;
 				case 'older':
 					const monthAgo2 = now - thirtyDays;
-					result = result.filter(item => item.lastCheck < monthAgo2);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck < monthAgo2;
+						}
+					});
 					break;
 			}
 		}

 		return result;
-	}, [data, typeFilter, dateFilter]);
+	}, [tableData, typeFilter, dateFilter]);

 	// Создание таблицы
 	const table = useReactTable({