frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tanstake-table add remove, update function

Browse Source
This commit is contained in:
smanylov
2025-12-26 16:10:42 +07:00
parent d52dfb7ab8
commit 164e2568b9
8 changed files with 119 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "no-copy-frontend",
"version": "0.8.0",
"version": "0.9.0",
"private": true,
"scripts": {
"dev": "next dev -p 2999",
src/app/actions/fileEntity.ts
-2
View File
@@ -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`, {
src/app/components/modalWindow.tsx
+2 -5
View File
@@ -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}
</div>
</div>
)
}
)}
</>
)
}
src/app/components/tanstakTable.tsx
+98 -21
View File
@@ -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<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();
const [tableData, setTableData] = useState<FileItem[]>([]);
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<ColumnFiltersState>([]);
const [dateFilter, setDateFilter] = useState<string>('all');
const [typeFilter, setTypeFilter] = useState<string>('all');
const [pagination, setPagination] = useState({
pageIndex: 0,
pageSize: 10,
});
const [openWindow, setOpenWindow] = useState<boolean>(false);
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(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 (
<div>
<h3 className="text-2xl">
{t('you-sure-you-want-to-delete')}
</h3>
<div className="mt-2 mb-8 text-center">{file.fileName}</div>
<div className="flex justify-center gap-4">
<button className="btn-primary btn-modal"
onClick={async () => {
const response = await removeUserFile(file.id);
if (response === file.id) {
setTableData(
prev => prev.filter(item => item.id !== file.id)
)
setOpenWindow(false);
setOpenWindowChildren(null);
}
}}
>
{t('yes')}
</button>
<button className="btn-primary btn-modal"
onClick={() => {
setOpenWindow(false);
setOpenWindowChildren(null);
}}
>
{t('no')}
</button>
</div>
</div>
)
})
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 (
<div className="p-6 mx-auto tanstak-table">
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
{/* Фильтры */}
<button
className="mb-2 btn-primary rounded disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => refetch()}
disabled={isLoading}
>
{isLoading ? (
<span className="flex items-center gap-2">
refreshing...
</span>
) : (
<span className="flex items-center gap-2">
refresh
</span>
)}
</button>
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 pt-0 px-0">
<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
<div className="flex flex-col w-50">
src/app/lib/prefetch-queries.ts
+3 -2
View File
@@ -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
}),
]);
}
src/app/styles/global-styles.scss
+7
View File
@@ -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);
}
src/i18n/messages/en.json
+4 -1
View File
@@ -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",
src/i18n/messages/ru.json
+4 -1
View File
@@ -144,7 +144,10 @@
"file-size": "Размер файла",
"file-format": "Формат файла",
"mb": "МБ",
"to": "до"
"to": "до",
"yes": "да",
"no": "нет",
"you-sure-you-want-to-delete": "Уверены, что хотите удалить?"
},
"Login-register-form": {
"and": "и",