From 164e2568b900c0ed2d8d42bf33e8c73d7b0783d8 Mon Sep 17 00:00:00 2001 From: smanylov Date: Fri, 26 Dec 2025 16:10:42 +0700 Subject: [PATCH] tanstake-table add remove, update function --- package.json | 2 +- src/app/actions/fileEntity.ts | 2 - src/app/components/modalWindow.tsx | 7 +- src/app/components/tanstakTable.tsx | 119 +++++++++++++++++++++++----- src/app/lib/prefetch-queries.ts | 5 +- src/app/styles/global-styles.scss | 7 ++ src/i18n/messages/en.json | 5 +- src/i18n/messages/ru.json | 5 +- 8 files changed, 119 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 7a8f998..00c1f33 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.8.0", + "version": "0.9.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/actions/fileEntity.ts b/src/app/actions/fileEntity.ts index 565e196..ae8b6b0 100644 --- a/src/app/actions/fileEntity.ts +++ b/src/app/actions/fileEntity.ts @@ -9,7 +9,6 @@ const API_BASE_URL = process.env.NODE_ENV === 'development' export async function getUserFilesData() { const token = await getSessionData('token'); - console.log('fetch'); try { const response = await fetch(`${API_BASE_URL}/api/v1/data`, { @@ -48,7 +47,6 @@ export async function getUserFilesData() { export async function removeUserFile(fileId : string) { const token = await getSessionData('token'); - console.log('remove'); try { const response = await fetch(`${API_BASE_URL}/api/v1/data`, { diff --git a/src/app/components/modalWindow.tsx b/src/app/components/modalWindow.tsx index 95c80db..e2ee970 100644 --- a/src/app/components/modalWindow.tsx +++ b/src/app/components/modalWindow.tsx @@ -1,14 +1,12 @@ import React, { ReactNode } from 'react'; interface ModalWindowtProps { - children: ReactNode; + children: ReactNode | null; state: boolean; callBack: (value: boolean) => void; } export default function ModalWindow({ children, state, callBack }: ModalWindowtProps) { - console.log(state); - return ( <> {state && ( @@ -25,8 +23,7 @@ export default function ModalWindow({ children, state, callBack }: ModalWindowtP {children} - ) - } + )} ) } \ No newline at end of file diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 56404e9..07584fc 100644 --- a/src/app/components/tanstakTable.tsx +++ b/src/app/components/tanstakTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useMemo } from 'react'; +import { useState, useMemo, useEffect, ReactNode } from 'react'; import { useReactTable, getCoreRowModel, @@ -16,6 +16,7 @@ import { useTranslations } from 'next-intl'; import DropDownList from '@/app/components/dropDownList'; import { useQuery } from '@tanstack/react-query'; import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity'; +import ModalWindow from '@/app/components/modalWindow'; // Типы данных type FileType = 'image' | 'video' | 'audio'; @@ -71,7 +72,8 @@ export default function TanstakFilesTable() { data: userFilesData, isLoading, isError, - error + error, + refetch } = useQuery({ queryKey: ['userFilesData'], queryFn: () => { @@ -79,26 +81,33 @@ export default function TanstakFilesTable() { } }); - const [tableData] = useState( - 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(); + const [tableData, setTableData] = useState([]); - return { - id: item.id, - fileName: item.originalFileName, - fileType: item.mimeType.toLocaleLowerCase(), - violations: item.violations, - checks: item.checks, - lastCheck: newDate - } - }) - ) + useEffect(() => { + if (userFilesData?.files) { + const formattedData = 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 + }; + }); + + setTableData(formattedData); + } + }, [userFilesData]); if (typeof window !== 'undefined') { + console.log('typeof window !== undefined'); + console.log(userFilesData) } // Состояния @@ -106,6 +115,12 @@ export default function TanstakFilesTable() { const [columnFilters, setColumnFilters] = useState([]); const [dateFilter, setDateFilter] = useState('all'); const [typeFilter, setTypeFilter] = useState('all'); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 10, + }); + const [openWindow, setOpenWindow] = useState(false); + const [openWindowChildren, setOpenWindowChildren] = useState(null); const t = useTranslations("Global"); @@ -361,8 +376,42 @@ export default function TanstakFilesTable() { }; const handleRemove = async (file: FileItem) => { - const response = await removeUserFile(file.id); - console.log(`Removed: ${response}`); + + setOpenWindowChildren(() => { + return ( +
+

+ {t('you-sure-you-want-to-delete')} +

+
{file.fileName}
+
+ + +
+
+ ) + }) + setOpenWindow(true); }; // Фильтрация по типу файла и дате @@ -422,6 +471,15 @@ export default function TanstakFilesTable() { return result; }, [tableData, typeFilter, dateFilter]); + useEffect(() => { + const currentPageRows = table.getRowModel().rows; + const pageCount = table.getPageCount(); + + if (currentPageRows.length === 0 && pagination.pageIndex > 0 && pageCount > 0) { + table.setPageIndex(pagination.pageIndex - 1); + } + }, [filteredData, pagination.pageIndex]); + // Создание таблицы const table = useReactTable({ data: filteredData, @@ -429,7 +487,10 @@ export default function TanstakFilesTable() { state: { sorting, columnFilters, + pagination }, + autoResetPageIndex: false, + onPaginationChange: setPagination, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), @@ -445,7 +506,23 @@ export default function TanstakFilesTable() { return (
+ {/* Фильтры */} +
diff --git a/src/app/lib/prefetch-queries.ts b/src/app/lib/prefetch-queries.ts index 68f4227..20dfc66 100644 --- a/src/app/lib/prefetch-queries.ts +++ b/src/app/lib/prefetch-queries.ts @@ -1,6 +1,6 @@ import { QueryClient } from '@tanstack/react-query'; import { getUserData } from '@/app/actions/action'; -import {getUserFilesData} from '@/app/actions/fileEntity'; +import { getUserFilesData } from '@/app/actions/fileEntity'; export async function prefetchLayoutQueries(queryClient: QueryClient) { await Promise.all([ @@ -10,7 +10,8 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) { }), queryClient.prefetchQuery({ queryKey: ['userFilesData'], - queryFn: () => getUserFilesData() + queryFn: () => getUserFilesData(), + staleTime: 30 * 1000 }), ]); } \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 7f3d1a1..3dbcc67 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -151,6 +151,13 @@ } .tanstak-table { + .btn-modal { + transition: all 0.3ms ease-in-out; + border-radius: 10px; + padding: 5px 20px; + font-weight: 500; + } + :where(.divide-gray-200 > tr:last-child) { border-bottom: 1px solid var(--color-gray-200); } diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index b7ce4cc..e7af3ee 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -144,7 +144,10 @@ "file-size": "File size", "file-format": "File format", "mb": "MB", - "to": "to" + "to": "to", + "yes": "yes", + "no": "no", + "you-sure-you-want-to-delete": "Are you sure you want to delete?" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index bd067a2..7d914fb 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -144,7 +144,10 @@ "file-size": "Размер файла", "file-format": "Формат файла", "mb": "МБ", - "to": "до" + "to": "до", + "yes": "да", + "no": "нет", + "you-sure-you-want-to-delete": "Уверены, что хотите удалить?" }, "Login-register-form": { "and": "и",