2026-01-19 16:34:29 +07:00
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import { useState, useMemo, useEffect, ReactNode } from 'react';
|
|
|
|
|
import {
|
|
|
|
|
useReactTable,
|
|
|
|
|
getCoreRowModel,
|
|
|
|
|
getSortedRowModel,
|
|
|
|
|
getPaginationRowModel,
|
|
|
|
|
getFilteredRowModel,
|
|
|
|
|
ColumnDef,
|
|
|
|
|
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 { useTranslations, useLocale } from 'next-intl';
|
|
|
|
|
import DropDownList from '@/app/components/dropDownList';
|
|
|
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
|
|
|
import ModalWindow from '@/app/components/modalWindow';
|
|
|
|
|
import { toast } from 'sonner';
|
|
|
|
|
import { pluralize } from '@/app/lib/pluralize';
|
|
|
|
|
|
|
|
|
|
type FileItem = {
|
|
|
|
|
id: string;
|
|
|
|
|
userId: string;
|
|
|
|
|
userName: string;
|
|
|
|
|
userEmail?: number | undefined;
|
|
|
|
|
userCompany?: number | undefined;
|
|
|
|
|
userSubscription?: number;
|
|
|
|
|
_original?: ApiFile;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type ApiFile = {
|
|
|
|
|
id: string;
|
|
|
|
|
originalFileName: string;
|
|
|
|
|
mimeType: string;
|
|
|
|
|
userEmail: number;
|
|
|
|
|
userCompany: number;
|
|
|
|
|
updatedAt: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type ApiResponse = any;
|
|
|
|
|
|
|
|
|
|
// Иконки для типов файлов
|
|
|
|
|
const FileTypeIcon = ({ type }: { type: string }) => {
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'image':
|
|
|
|
|
return <span className="color-image">
|
|
|
|
|
<IconImageFile />
|
|
|
|
|
</span>;
|
|
|
|
|
case 'video':
|
|
|
|
|
return <span className="color-video">
|
|
|
|
|
<IconVideoFile />
|
|
|
|
|
</span>;
|
|
|
|
|
case 'audio':
|
|
|
|
|
return <span className="color-audio">
|
|
|
|
|
<IconAudioFile />
|
|
|
|
|
</span>;
|
|
|
|
|
default:
|
|
|
|
|
return <span>📄</span>;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Форматирование даты из timestamp
|
|
|
|
|
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}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const cutFileName = (userId: string) => {
|
|
|
|
|
const MAX_FILE_NAME_LENGTH = 26;
|
|
|
|
|
const lastDotIndex = userId.lastIndexOf('.');
|
|
|
|
|
|
|
|
|
|
if (lastDotIndex <= 0) {
|
|
|
|
|
return userId.length > MAX_FILE_NAME_LENGTH ? userId.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : userId;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const nameWithoutExtension = userId.substring(0, lastDotIndex);
|
|
|
|
|
const extension = userId.substring(lastDotIndex);
|
|
|
|
|
|
|
|
|
|
if (userId.length <= MAX_FILE_NAME_LENGTH) {
|
|
|
|
|
return userId;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
|
|
|
|
|
|
|
|
|
|
if (maxNameLength <= 0) {
|
|
|
|
|
return '...' + extension;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-22 17:30:46 +07:00
|
|
|
export default function SystemLogsTable() {
|
2026-01-19 16:34:29 +07:00
|
|
|
const {
|
|
|
|
|
data: tableData,
|
|
|
|
|
isLoading,
|
|
|
|
|
isError,
|
|
|
|
|
error,
|
|
|
|
|
} = useQuery<ApiResponse, Error, any>({
|
|
|
|
|
queryKey: ['userFilesData'],
|
|
|
|
|
queryFn: () => {
|
|
|
|
|
return []
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
select: (data: ApiResponse): any => {
|
|
|
|
|
if (!data?.files) return [
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
userId: 1,
|
|
|
|
|
userName: 'userName',
|
|
|
|
|
userEmail: 'userEmail',
|
|
|
|
|
userCompany: 'userCompany',
|
|
|
|
|
userSubscription: 'userSubscription',
|
|
|
|
|
userRole: 'role',
|
|
|
|
|
userContent: 0,
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
id: item.id,
|
|
|
|
|
userId: item.originalFileName,
|
|
|
|
|
userName: item.mimeType.toLocaleLowerCase(),
|
|
|
|
|
userEmail: item.userEmail,
|
|
|
|
|
userCompany: item.userCompany,
|
|
|
|
|
userSubscription: newDate,
|
|
|
|
|
userRole: 'role',
|
|
|
|
|
userContent: 0,
|
|
|
|
|
_original: item
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
|
|
|
|
// Состояния
|
|
|
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
|
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
|
|
|
|
const [dateFilter, setDateFilter] = useState<string>('all');
|
|
|
|
|
const [typeFilter, setTypeFilter] = useState<string>('all');
|
|
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
|
const [pagination, setPagination] = useState({
|
|
|
|
|
pageIndex: 0,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
});
|
|
|
|
|
const [openWindow, setOpenWindow] = useState<boolean>(false);
|
|
|
|
|
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
|
|
|
|
|
|
|
|
|
|
const [isFileLoading, setIsFileLoading] = useState(false);
|
|
|
|
|
|
|
|
|
|
const t = useTranslations("Global");
|
|
|
|
|
const locale = useLocale();
|
|
|
|
|
|
|
|
|
|
// Определение колонок
|
|
|
|
|
const columns = useMemo<ColumnDef<FileItem>[]>(
|
|
|
|
|
() => [
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userId',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column start">
|
|
|
|
|
<span>
|
|
|
|
|
ID
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
column.getIsSorted() === 'asc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowUp />
|
|
|
|
|
</span>
|
|
|
|
|
: column.getIsSorted() === 'desc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowDown />
|
|
|
|
|
</span>
|
|
|
|
|
: <span>
|
|
|
|
|
<IconFilter />
|
|
|
|
|
</span>
|
|
|
|
|
}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
cell: ({ row }) => (
|
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
|
<div>
|
|
|
|
|
<div className="font-medium w-full truncate" title={row.original.userId}>
|
|
|
|
|
{/* {row.original.userId} */}
|
|
|
|
|
{row.original.userId}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
enableColumnFilter: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userName',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
Пользователь
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
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`}>
|
|
|
|
|
User name
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userEmail',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
email
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
column.getIsSorted() === 'asc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowUp />
|
|
|
|
|
</span>
|
|
|
|
|
: column.getIsSorted() === 'desc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowDown />
|
|
|
|
|
</span>
|
|
|
|
|
: <span>
|
|
|
|
|
<IconFilter />
|
|
|
|
|
</span>
|
|
|
|
|
}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
cell: ({ row }) => {
|
|
|
|
|
let classCollor = () => {
|
|
|
|
|
let result = ''
|
|
|
|
|
if (row.original.userEmail !== undefined) {
|
|
|
|
|
result = row.original.userEmail > 0 ? 'text-red-600' : 'text-green-600'
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<div className={`text-center font-semibold ${classCollor()}`}>
|
|
|
|
|
{row.original.userEmail !== undefined ? row.original.userEmail : '-'}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userCompany',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
Компания
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
column.getIsSorted() === 'asc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowUp />
|
|
|
|
|
</span>
|
|
|
|
|
: column.getIsSorted() === 'desc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowDown />
|
|
|
|
|
</span>
|
|
|
|
|
: <span>
|
|
|
|
|
<IconFilter />
|
|
|
|
|
</span>
|
|
|
|
|
}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
cell: ({ row }) => (
|
|
|
|
|
<div className="text-center">
|
|
|
|
|
{row.original.userCompany !== undefined ? row.original.userCompany : '-'}
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userSubscription',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
Подписка
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
column.getIsSorted() === 'asc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowUp />
|
|
|
|
|
</span>
|
|
|
|
|
: column.getIsSorted() === 'desc' ?
|
|
|
|
|
<span>
|
|
|
|
|
<IconArrowDown />
|
|
|
|
|
</span>
|
|
|
|
|
: <span>
|
|
|
|
|
<IconFilter />
|
|
|
|
|
</span>
|
|
|
|
|
}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
cell: ({ row }) => {
|
|
|
|
|
return (
|
|
|
|
|
<div className="text-center">
|
|
|
|
|
{row.original.userSubscription ? (
|
|
|
|
|
<>
|
|
|
|
|
{formatDate(row.original.userSubscription)}
|
|
|
|
|
<br />
|
|
|
|
|
{formatDateTime(row.original.userSubscription)}
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<div>-</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
enableColumnFilter: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
accessorKey: 'userRole',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
Роль
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
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`}>
|
|
|
|
|
User Роль
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
accessorKey: 'userContent',
|
|
|
|
|
header: ({ column }) => (
|
|
|
|
|
<div className="column">
|
|
|
|
|
<span>
|
|
|
|
|
Контент
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
|
|
|
className="sort-button"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
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`}>
|
|
|
|
|
User Роль
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'actions',
|
|
|
|
|
header: () => {
|
|
|
|
|
return (
|
|
|
|
|
<div className="column">
|
|
|
|
|
{t('actions')}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
cell: ({ row }) => (
|
|
|
|
|
<div className="actions">
|
|
|
|
|
<div className="actions-group">
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleView(row.original)}
|
|
|
|
|
className="bg-blue-500 hover:bg-blue-600"
|
|
|
|
|
>
|
|
|
|
|
<IconEye />
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleDownload(row.original)}
|
|
|
|
|
disabled={isFileLoading}
|
|
|
|
|
className="bg-green-500 hover:bg-green-600"
|
|
|
|
|
>
|
|
|
|
|
<IconFileDownload />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="actions-group">
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleProtect(row.original)}
|
|
|
|
|
className="bg-violet-500 hover:bg-violet-600"
|
|
|
|
|
>
|
|
|
|
|
<IconShieldExclamation />
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleOpenWindowForRemove(row.original)}
|
|
|
|
|
className="bg-red-700 hover:bg-red-800"
|
|
|
|
|
>
|
|
|
|
|
<IconDelete />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
enableSorting: false,
|
|
|
|
|
enableColumnFilter: false,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
[]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Обработчики действий
|
|
|
|
|
const handleView = (file: FileItem) => {
|
|
|
|
|
console.log(`Просмотр файла: ${file.userId}`);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDownload = async (file: FileItem) => {
|
|
|
|
|
setIsFileLoading(true);
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`/api/download/${file.id}`);
|
|
|
|
|
|
|
|
|
|
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 = file.userId || `file-${file.id}`;
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
a.click();
|
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
|
document.body.removeChild(a);
|
|
|
|
|
toast.success(`${t('file-is-downloading')} - ${file.userId}`);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
toast.error(t('failed-to-download-file'))
|
|
|
|
|
} finally {
|
|
|
|
|
setIsFileLoading(false);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleProtect = (file: FileItem) => {
|
|
|
|
|
console.log(`Щиток: ${file.userId}`);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleOpenWindowForRemove = async (file: FileItem) => {
|
|
|
|
|
|
|
|
|
|
setOpenWindowChildren(() => {
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<h3 className="text-2xl">
|
|
|
|
|
{t('you-sure-you-want-to-delete')}
|
|
|
|
|
</h3>
|
|
|
|
|
<div className="mt-2 mb-8 text-center">{file.userId}</div>
|
|
|
|
|
<div className="flex justify-center gap-4">
|
|
|
|
|
<button className="btn-primary btn-modal"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
/* deleteMutation.mutate(file.id) */
|
|
|
|
|
}}
|
|
|
|
|
/* disabled={deleteMutation.isPending} */
|
|
|
|
|
>
|
|
|
|
|
{/* {deleteMutation.isPending ? '...' : t('yes')} */}
|
|
|
|
|
{t('yes')}
|
|
|
|
|
</button>
|
|
|
|
|
<button className="btn-primary btn-modal"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setOpenWindow(false);
|
|
|
|
|
setOpenWindowChildren(null);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{t('no')}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
setOpenWindow(true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/* const deleteMutation = useMutation({
|
|
|
|
|
mutationFn: removeUserFile,
|
|
|
|
|
|
|
|
|
|
onMutate: async (fileId: string) => {
|
|
|
|
|
await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
|
|
|
|
|
|
|
|
|
|
queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
|
|
|
|
|
if (!old?.files) return old;
|
|
|
|
|
return {
|
|
|
|
|
...old,
|
|
|
|
|
files: old.files.filter(file => file.id !== fileId)
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onError: () => {
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
|
|
|
|
|
toast.error(t('error'));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onSuccess: (response, fileId) => {
|
|
|
|
|
if (response === fileId) {
|
|
|
|
|
queryClient.invalidateQueries({
|
|
|
|
|
queryKey: ['userFilesData'],
|
|
|
|
|
refetchType: 'active'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
queryClient.invalidateQueries({
|
|
|
|
|
queryKey: ['userFilesInfo']
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setOpenWindow(false);
|
|
|
|
|
setOpenWindowChildren(null);
|
|
|
|
|
toast.success(t('file-has-been-deleted'));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}); */
|
|
|
|
|
|
|
|
|
|
// Фильтрация по типу файла и дате
|
|
|
|
|
const filteredData = useMemo(() => {
|
|
|
|
|
let result = tableData;
|
|
|
|
|
if (!result) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Фильтр по типу файла
|
|
|
|
|
if (typeFilter !== 'all') {
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
return item.userName === typeFilter
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Фильтр по дате
|
|
|
|
|
if (dateFilter !== 'all') {
|
|
|
|
|
const now = Date.now();
|
|
|
|
|
const oneDay = 24 * 60 * 60 * 1000;
|
|
|
|
|
const sevenDays = 7 * oneDay;
|
|
|
|
|
const thirtyDays = 30 * oneDay;
|
|
|
|
|
|
|
|
|
|
switch (dateFilter) {
|
|
|
|
|
case 'today':
|
|
|
|
|
const todayStart = new Date().setHours(0, 0, 0, 0);
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
if (item.userSubscription) {
|
|
|
|
|
return item.userSubscription >= todayStart
|
|
|
|
|
} else {
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'week':
|
|
|
|
|
const weekAgo = now - sevenDays;
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
if (item.userSubscription) {
|
|
|
|
|
return item.userSubscription >= weekAgo;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'month':
|
|
|
|
|
const monthAgo = now - thirtyDays;
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
if (item.userSubscription) {
|
|
|
|
|
return item.userSubscription >= monthAgo;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 'older':
|
|
|
|
|
const monthAgo2 = now - thirtyDays;
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
if (item.userSubscription) {
|
|
|
|
|
return item.userSubscription < monthAgo2;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (searchQuery.trim()) {
|
|
|
|
|
const query = searchQuery.toLowerCase().trim();
|
|
|
|
|
result = result.filter((item: any) => {
|
|
|
|
|
// Ищем по всем строковым полям
|
|
|
|
|
return Object.keys(item).some(key => {
|
|
|
|
|
const value = item[key];
|
|
|
|
|
if (typeof value === 'string') {
|
|
|
|
|
return value.toLowerCase().includes(query);
|
|
|
|
|
}
|
|
|
|
|
// Если нужно искать по числам или другим типам
|
|
|
|
|
if (typeof value === 'number' || typeof value === 'boolean') {
|
|
|
|
|
return value.toString().toLowerCase().includes(query);
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
}, [tableData, typeFilter, dateFilter, searchQuery]);
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
columns,
|
|
|
|
|
state: {
|
|
|
|
|
sorting,
|
|
|
|
|
columnFilters,
|
|
|
|
|
pagination
|
|
|
|
|
},
|
|
|
|
|
autoResetPageIndex: false,
|
|
|
|
|
onPaginationChange: setPagination,
|
|
|
|
|
onSortingChange: setSorting,
|
|
|
|
|
onColumnFiltersChange: setColumnFilters,
|
|
|
|
|
getCoreRowModel: getCoreRowModel(),
|
|
|
|
|
getSortedRowModel: getSortedRowModel(),
|
|
|
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
|
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
|
|
|
initialState: {
|
|
|
|
|
pagination: {
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const pluralizeFiles = (number: number) => {
|
|
|
|
|
const translate = [t('file'), t('files-few'), t('files')];
|
|
|
|
|
return pluralize(number, translate[0], translate[1], translate[2], locale);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="tanstak-table-wrapper">
|
|
|
|
|
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
|
|
|
|
|
{/* Фильтры */}
|
|
|
|
|
<div className="tanstak-table-filtres">
|
|
|
|
|
<div className="table-filtres-wrapper">
|
|
|
|
|
<div className="table-filtres-item">
|
|
|
|
|
<div className="table-filtres-label">{t('date-filter')}:</div>
|
|
|
|
|
<DropDownList
|
|
|
|
|
value={dateFilter}
|
|
|
|
|
translatedValue={(() => {
|
|
|
|
|
switch (dateFilter) {
|
|
|
|
|
case 'all':
|
|
|
|
|
return t('all-dates')
|
|
|
|
|
case 'week':
|
|
|
|
|
return t('for-a-week')
|
|
|
|
|
case 'month':
|
|
|
|
|
return t('for-a-month')
|
|
|
|
|
case 'older':
|
|
|
|
|
return t('older-than-a-month')
|
|
|
|
|
default:
|
|
|
|
|
return t('today')
|
|
|
|
|
}
|
|
|
|
|
})()}
|
|
|
|
|
callBack={setDateFilter}
|
|
|
|
|
>
|
|
|
|
|
<li value="all">
|
|
|
|
|
{t('all-dates')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="today">
|
|
|
|
|
{t('today')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="week">
|
|
|
|
|
{t('for-a-week')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="month">
|
|
|
|
|
{t('for-a-month')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="older">
|
|
|
|
|
{t('older-than-a-month')}
|
|
|
|
|
</li>
|
|
|
|
|
</DropDownList>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="table-filtres-item">
|
|
|
|
|
<div className="table-filtres-label">{t('type-filter')}:</div>
|
|
|
|
|
<DropDownList
|
|
|
|
|
value={typeFilter}
|
|
|
|
|
translatedValue={
|
|
|
|
|
(() => {
|
|
|
|
|
switch (typeFilter) {
|
|
|
|
|
case 'image':
|
|
|
|
|
return t('images')
|
|
|
|
|
case 'video':
|
|
|
|
|
return t('videos')
|
|
|
|
|
case 'audio':
|
|
|
|
|
return t('audios')
|
|
|
|
|
default:
|
|
|
|
|
return t('all-types')
|
|
|
|
|
}
|
|
|
|
|
})()
|
|
|
|
|
}
|
|
|
|
|
callBack={setTypeFilter}
|
|
|
|
|
>
|
|
|
|
|
<li value="all">
|
|
|
|
|
{t('all-types')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="image">
|
|
|
|
|
{t('images-few')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="video">
|
|
|
|
|
{t('videos')}
|
|
|
|
|
</li>
|
|
|
|
|
<li value="audio">
|
|
|
|
|
{t('audios')}
|
|
|
|
|
</li>
|
|
|
|
|
</DropDownList>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="table-filtres-item">
|
|
|
|
|
<div className="table-filtres-label">{t('search')}:</div>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
value={searchQuery}
|
|
|
|
|
onChange={e => setSearchQuery(e.target.value)}
|
|
|
|
|
placeholder="Поиск пользователей"
|
|
|
|
|
className="table-filtres-input"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="table-filtres-item">
|
|
|
|
|
<div className="table-filtres-label">{t('items-per-page')}:</div>
|
|
|
|
|
<DropDownList
|
|
|
|
|
value={table.getState().pagination.pageSize}
|
|
|
|
|
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
|
|
|
|
|
callBack={table.setPageSize}
|
|
|
|
|
>
|
|
|
|
|
{[5, 10, 20, 50, 100].map(pageSize => (
|
|
|
|
|
<li key={pageSize} value={pageSize}>
|
|
|
|
|
{t('show')} {pageSize}
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</DropDownList>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Таблица */}
|
|
|
|
|
<div className="tanstak-table-block">
|
|
|
|
|
<table className="tanstak-table">
|
|
|
|
|
<thead className="tanstak-table-head">
|
|
|
|
|
{table.getHeaderGroups().map(headerGroup => (
|
|
|
|
|
<tr key={headerGroup.id}>
|
|
|
|
|
{headerGroup.headers.map(header => (
|
|
|
|
|
<th
|
|
|
|
|
key={header.id}
|
|
|
|
|
>
|
|
|
|
|
{header.isPlaceholder
|
|
|
|
|
? null
|
|
|
|
|
: typeof header.column.columnDef.header === 'function'
|
|
|
|
|
? header.column.columnDef.header(header.getContext())
|
|
|
|
|
: header.column.columnDef.header as string}
|
|
|
|
|
</th>
|
|
|
|
|
))}
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody className="tanstak-table-body">
|
|
|
|
|
{table.getRowModel().rows.length > 0 ? (
|
|
|
|
|
table.getRowModel().rows.map(row => (
|
|
|
|
|
<tr key={row.id}>
|
|
|
|
|
{row.getVisibleCells().map(cell => (
|
|
|
|
|
<td key={cell.id}>
|
|
|
|
|
{typeof cell.column.columnDef.cell === 'function'
|
|
|
|
|
? cell.column.columnDef.cell(cell.getContext())
|
|
|
|
|
: cell.getValue() as string}
|
|
|
|
|
</td>
|
|
|
|
|
))}
|
|
|
|
|
</tr>
|
|
|
|
|
))
|
|
|
|
|
) : (
|
|
|
|
|
<tr>
|
|
|
|
|
<td colSpan={columns.length} className="text-center">
|
|
|
|
|
{t('no-data-for-selected-filters')}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
)}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Пагинация */}
|
|
|
|
|
<div className="tanstak-table-pagination">
|
|
|
|
|
<div className="pagination-info">
|
|
|
|
|
<span className="pagination-info-pages">
|
|
|
|
|
{t('page')}{' '}
|
|
|
|
|
<strong>
|
|
|
|
|
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
|
|
|
|
|
</strong>
|
|
|
|
|
</span>
|
|
|
|
|
<span className="pagination-info-files">
|
|
|
|
|
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="pagination-controls">
|
|
|
|
|
<button
|
|
|
|
|
className="arrow"
|
|
|
|
|
onClick={() => table.firstPage()}
|
|
|
|
|
disabled={!table.getCanPreviousPage()}
|
|
|
|
|
>
|
|
|
|
|
<IconDoubleArrowLeft />
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
className="arrow"
|
|
|
|
|
onClick={() => table.previousPage()}
|
|
|
|
|
disabled={!table.getCanPreviousPage()}
|
|
|
|
|
>
|
|
|
|
|
<IconArrowLeft />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div className="pagination-controls-pages">
|
|
|
|
|
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
|
|
|
|
|
const pageIndex = Math.max(
|
|
|
|
|
0,
|
|
|
|
|
Math.min(
|
|
|
|
|
table.getPageCount() - 5,
|
|
|
|
|
table.getState().pagination.pageIndex - 2
|
|
|
|
|
)
|
|
|
|
|
) + i;
|
|
|
|
|
|
|
|
|
|
if (pageIndex < table.getPageCount()) {
|
|
|
|
|
return (
|
|
|
|
|
<button
|
|
|
|
|
key={pageIndex}
|
|
|
|
|
className={`${table.getState().pagination.pageIndex === pageIndex
|
|
|
|
|
? 'current'
|
|
|
|
|
: 'other'
|
|
|
|
|
}`}
|
|
|
|
|
onClick={() => table.setPageIndex(pageIndex)}
|
|
|
|
|
>
|
|
|
|
|
{pageIndex + 1}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
className="arrow"
|
|
|
|
|
onClick={() => table.nextPage()}
|
|
|
|
|
disabled={!table.getCanNextPage()}
|
|
|
|
|
>
|
|
|
|
|
<IconArrowRight />
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
className="arrow"
|
|
|
|
|
onClick={() => table.lastPage()}
|
|
|
|
|
disabled={!table.getCanNextPage()}
|
|
|
|
|
>
|
|
|
|
|
<IconDoubleArrowRight />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
