add tanstak table
This commit is contained in:
smanylov
@@ -0,0 +1,79 @@
|
|||||||
|
import React, { ReactNode, useState, useRef } from 'react';
|
||||||
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
||||||
|
|
||||||
|
interface DropDownListProps {
|
||||||
|
children: ReactNode;
|
||||||
|
value: string | number;
|
||||||
|
callBack: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChildProps {
|
||||||
|
value?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DropDownList({ children, value, callBack }: DropDownListProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||||
|
useClickOutside(dropdownRef, () => {
|
||||||
|
setIsOpen(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
const enhancedChildren = React.Children.map(children, (child, index) => {
|
||||||
|
if (React.isValidElement<ChildProps>(child)) {
|
||||||
|
const childValue = child.props.value || undefined;
|
||||||
|
|
||||||
|
return React.cloneElement<ChildProps>(child, {
|
||||||
|
onClick: () => {
|
||||||
|
callBack(childValue || "");
|
||||||
|
setIsOpen(false);
|
||||||
|
},
|
||||||
|
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1]`,
|
||||||
|
key: index
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return child;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full" ref={dropdownRef}>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setIsOpen(!isOpen)
|
||||||
|
}}
|
||||||
|
className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium text-[#6366f1] bg-white border-2 border-[#6366f1] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<span className="mr-2">
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#6366f1] focus:outline-none">
|
||||||
|
<ul
|
||||||
|
className="py-1"
|
||||||
|
role="listbox"
|
||||||
|
aria-labelledby="language-selector"
|
||||||
|
>
|
||||||
|
{enhancedChildren}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+415
-191
@@ -10,195 +10,400 @@ import {
|
|||||||
ColumnDef,
|
ColumnDef,
|
||||||
SortingState,
|
SortingState,
|
||||||
ColumnFiltersState,
|
ColumnFiltersState,
|
||||||
FilterFn,
|
|
||||||
} from '@tanstack/react-table';
|
} from '@tanstack/react-table';
|
||||||
import { rankItem } from '@tanstack/match-sorter-utils';
|
import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDownload, IconShield, DoubleArrowRight, ArrowRight, DoubleArrowLeft, ArrowLeft, ArrowUp, ArrowDown, Filter } from '@/app/ui/icons/icons';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import DropDownList from '@/app/components/dropDownList';
|
||||||
|
|
||||||
// Типы данных
|
// Типы данных
|
||||||
type Person = {
|
type FileType = 'image' | 'video' | 'audio';
|
||||||
|
type FileItem = {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
fileName: string;
|
||||||
age: number;
|
fileType: FileType;
|
||||||
email: string;
|
violations: number;
|
||||||
department: string;
|
checks: number;
|
||||||
salary: number;
|
lastCheck: number; // timestamp в миллисекундах
|
||||||
};
|
};
|
||||||
|
|
||||||
// Кастомная функция фильтрации
|
// Иконки для типов файлов
|
||||||
const fuzzyFilter: FilterFn<Person> = (row, columnId, value, addMeta) => {
|
const FileTypeIcon = ({ type }: { type: FileType }) => {
|
||||||
const itemRank = rankItem(row.getValue(columnId), value);
|
switch (type) {
|
||||||
addMeta({ itemRank });
|
case 'image':
|
||||||
return itemRank.passed;
|
return <span className="text-[#f08c00]">
|
||||||
};
|
<IconImageFile />
|
||||||
|
</span>;
|
||||||
// Определяем тип для фильтров
|
case 'video':
|
||||||
declare module '@tanstack/react-table' {
|
return <span className="text-[#2f9e44]">
|
||||||
interface FilterFns {
|
<IconVideoFile />
|
||||||
fuzzy: FilterFn<unknown>;
|
</span>;
|
||||||
|
case 'audio':
|
||||||
|
return <span className="text-[#1971c2]">
|
||||||
|
<IconAudioFile />
|
||||||
|
</span>;
|
||||||
|
default:
|
||||||
|
return <span>📄</span>;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function DataTable() {
|
// Форматирование даты из timestamp
|
||||||
// Данные
|
const formatDate = (timestamp: number) => {
|
||||||
const [data] = useState<Person[]>([
|
const date = new Date(timestamp);
|
||||||
{ id: 1, name: 'Иван Петров', age: 28, email: 'ivan@example.com', department: 'IT', salary: 80000 },
|
const day = date.getDate().toString().padStart(2, '0');
|
||||||
{ id: 2, name: 'Анна Сидорова', age: 32, email: 'anna@example.com', department: 'HR', salary: 65000 },
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||||
{ id: 3, name: 'Сергей Иванов', age: 45, email: 'sergey@example.com', department: 'Финансы', salary: 95000 },
|
const year = date.getFullYear();
|
||||||
{ id: 4, name: 'Мария Кузнецова', age: 26, email: 'maria@example.com', department: 'Маркетинг', salary: 60000 },
|
return `${day}.${month}.${year}`;
|
||||||
{ id: 5, name: 'Алексей Смирнов', age: 38, email: 'alex@example.com', department: 'IT', salary: 85000 },
|
};
|
||||||
{ id: 6, name: 'Ольга Васнецова', age: 29, email: 'olga@example.com', department: 'HR', salary: 62000 },
|
|
||||||
{ id: 7, name: 'Дмитрий Орлов', age: 41, email: 'dmitry@example.com', department: 'Финансы', salary: 92000 },
|
// Компонент таблицы
|
||||||
{ id: 8, name: 'Екатерина Новикова', age: 35, email: 'ekaterina@example.com', department: 'Маркетинг', salary: 70000 },
|
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: 'presentation.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 [sorting, setSorting] = useState<SortingState>([]);
|
const [sorting, setSorting] = useState<SortingState>([]);
|
||||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||||
const [globalFilter, setGlobalFilter] = useState('');
|
const [dateFilter, setDateFilter] = useState<string>('all');
|
||||||
const [rowSelection, setRowSelection] = useState({});
|
const [typeFilter, setTypeFilter] = useState<string>('all');
|
||||||
|
|
||||||
|
const t = useTranslations("Global");
|
||||||
|
|
||||||
// Определение колонок
|
// Определение колонок
|
||||||
const columns = useMemo<ColumnDef<Person>[]>(
|
const columns = useMemo<ColumnDef<FileItem>[]>(
|
||||||
() => [
|
() => [
|
||||||
{
|
{
|
||||||
id: 'select',
|
accessorKey: 'fileName',
|
||||||
header: ({ table }) => (
|
header: ({ column }) => (
|
||||||
<input
|
<div className="flex items-center justify-start">
|
||||||
type="checkbox"
|
<span>
|
||||||
checked={table.getIsAllPageRowsSelected()}
|
{t('file')}
|
||||||
onChange={table.getToggleAllPageRowsSelectedHandler()}
|
</span>
|
||||||
/>
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="ml-2 p-1 hover:bg-gray-200 rounded"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<Filter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<input
|
<div className="flex items-center space-x-2">
|
||||||
type="checkbox"
|
<FileTypeIcon type={row.original.fileType} />
|
||||||
checked={row.getIsSelected()}
|
<div>
|
||||||
onChange={row.getToggleSelectedHandler()}
|
<div className="font-medium">{row.original.fileName}</div>
|
||||||
/>
|
</div>
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
enableSorting: false,
|
|
||||||
enableColumnFilter: false,
|
enableColumnFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'id',
|
accessorKey: 'violations',
|
||||||
header: 'ID',
|
header: ({ column }) => (
|
||||||
cell: (info) => info.getValue(),
|
<div className="flex items-center justify-center">
|
||||||
|
<span>
|
||||||
|
{t('violations')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="ml-2 p-1 hover:bg-gray-200 rounded"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<Filter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className={`text-center font-semibold ${row.original.violations > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||||
|
{row.original.violations}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'name',
|
accessorKey: 'checks',
|
||||||
header: 'Имя',
|
header: ({ column }) => (
|
||||||
cell: (info) => info.getValue(),
|
<div className="flex items-center justify-center">
|
||||||
filterFn: fuzzyFilter,
|
<span>
|
||||||
|
{t('checks')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="ml-2 p-1 hover:bg-gray-200 rounded"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<Filter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="text-center">
|
||||||
|
{row.original.checks}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'age',
|
accessorKey: 'lastCheck',
|
||||||
header: 'Возраст',
|
header: ({ column }) => (
|
||||||
cell: (info) => info.getValue(),
|
<div className="flex items-center justify-center">
|
||||||
|
<span>
|
||||||
|
{t('last-check')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="ml-2 p-1 hover:bg-gray-200 rounded"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<ArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<Filter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="text-center">
|
||||||
|
{formatDate(row.original.lastCheck)}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
enableColumnFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: 'email',
|
id: 'actions',
|
||||||
header: 'Email',
|
header: () => {
|
||||||
cell: (info) => info.getValue(),
|
return (
|
||||||
},
|
<div className="flex items-center justify-center">
|
||||||
{
|
{t('actions')}
|
||||||
accessorKey: 'department',
|
</div>
|
||||||
header: 'Отдел',
|
)
|
||||||
cell: (info) => info.getValue(),
|
},
|
||||||
},
|
cell: ({ row }) => (
|
||||||
{
|
<div className="flex space-x-2 justify-center">
|
||||||
accessorKey: 'salary',
|
<button
|
||||||
header: 'Зарплата',
|
onClick={() => handleView(row.original)}
|
||||||
cell: (info) => `$${Number(info.getValue()).toLocaleString()}`,
|
className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
|
||||||
|
>
|
||||||
|
<IconEye />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDownload(row.original)}
|
||||||
|
className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
|
||||||
|
>
|
||||||
|
<IconDownload />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleProtect(row.original)}
|
||||||
|
className="px-3 py-1 bg-violet-500 text-white rounded hover:bg-violet-600 text-sm"
|
||||||
|
>
|
||||||
|
<IconShield />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
enableSorting: false,
|
||||||
|
enableColumnFilter: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Обработчики действий
|
||||||
|
const handleView = (file: FileItem) => {
|
||||||
|
console.log(`Просмотр файла: ${file.fileName}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = (file: FileItem) => {
|
||||||
|
console.log(`Скачать: ${file.fileName}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleProtect = (file: FileItem) => {
|
||||||
|
console.log(`Щиток: ${file.fileName}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Фильтрация по типу файла и дате
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
let result = data;
|
||||||
|
|
||||||
|
// Фильтр по типу файла
|
||||||
|
if (typeFilter !== 'all') {
|
||||||
|
result = result.filter(item => item.fileType === 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 => item.lastCheck >= todayStart);
|
||||||
|
break;
|
||||||
|
case 'week':
|
||||||
|
const weekAgo = now - sevenDays;
|
||||||
|
result = result.filter(item => item.lastCheck >= weekAgo);
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
const monthAgo = now - thirtyDays;
|
||||||
|
result = result.filter(item => item.lastCheck >= monthAgo);
|
||||||
|
break;
|
||||||
|
case 'older':
|
||||||
|
const monthAgo2 = now - thirtyDays;
|
||||||
|
result = result.filter(item => item.lastCheck < monthAgo2);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}, [data, typeFilter, dateFilter]);
|
||||||
|
|
||||||
// Создание таблицы
|
// Создание таблицы
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
data,
|
data: filteredData,
|
||||||
columns,
|
columns,
|
||||||
filterFns: {
|
|
||||||
fuzzy: fuzzyFilter,
|
|
||||||
},
|
|
||||||
state: {
|
state: {
|
||||||
sorting,
|
sorting,
|
||||||
columnFilters,
|
columnFilters,
|
||||||
globalFilter,
|
|
||||||
rowSelection,
|
|
||||||
},
|
},
|
||||||
onSortingChange: setSorting,
|
onSortingChange: setSorting,
|
||||||
onColumnFiltersChange: setColumnFilters,
|
onColumnFiltersChange: setColumnFilters,
|
||||||
onGlobalFilterChange: setGlobalFilter,
|
|
||||||
onRowSelectionChange: setRowSelection,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
getCoreRowModel: getCoreRowModel(),
|
||||||
getSortedRowModel: getSortedRowModel(),
|
getSortedRowModel: getSortedRowModel(),
|
||||||
getPaginationRowModel: getPaginationRowModel(),
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
getFilteredRowModel: getFilteredRowModel(),
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
globalFilterFn: fuzzyFilter, // Используем саму функцию, а не строку
|
initialState: {
|
||||||
|
pagination: {
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-6 max-w-6xl mx-auto">
|
<div className="p-6 mx-auto">
|
||||||
<h1 className="text-2xl font-bold mb-6">Таблица сотрудников</h1>
|
{/* Фильтры */}
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 p-4">
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
|
||||||
|
<div className="flex flex-col w-[150px]">
|
||||||
|
<div className="text-sm font-medium mb-1">{t('date-filter')}:</div>
|
||||||
|
<DropDownList
|
||||||
|
value={dateFilter}
|
||||||
|
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="flex flex-col w-[150px]">
|
||||||
<div className="mb-4">
|
<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
|
||||||
<input
|
<DropDownList
|
||||||
type="text"
|
value={typeFilter}
|
||||||
placeholder="Поиск по всем полям..."
|
callBack={setTypeFilter}
|
||||||
value={globalFilter}
|
>
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
<li value="all">
|
||||||
className="px-4 py-2 border rounded-md w-full max-w-md"
|
{t('all-types')}
|
||||||
/>
|
</li>
|
||||||
</div>
|
<li value="image">
|
||||||
|
{t('images')}
|
||||||
|
</li>
|
||||||
|
<li value="video">
|
||||||
|
{t('videos')}
|
||||||
|
</li>
|
||||||
|
<li value="audio">
|
||||||
|
{t('audios')}
|
||||||
|
</li>
|
||||||
|
</DropDownList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Фильтры по колонкам */}
|
<div className="flex flex-col w-full md:w-auto">
|
||||||
<div className="flex gap-4 mb-4 flex-wrap">
|
<div className="text-sm font-medium mb-1">{t('items-per-page')}:</div>
|
||||||
{table.getAllColumns()
|
<DropDownList
|
||||||
.filter(column => column.getCanFilter() && column.id !== 'select')
|
value={table.getState().pagination.pageSize}
|
||||||
.map(column => (
|
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
|
||||||
<div key={column.id} className="flex flex-col">
|
callBack={table.setPageSize}
|
||||||
<label className="text-sm font-medium mb-1">
|
>
|
||||||
{typeof column.columnDef.header === 'string'
|
{[5, 10, 20, 50, 100].map(pageSize => (
|
||||||
? column.columnDef.header
|
<li key={pageSize} value={pageSize}>
|
||||||
: column.id}
|
{t('show')} {pageSize}
|
||||||
</label>
|
</li>
|
||||||
{column.id === 'department' ? (
|
))}
|
||||||
<select
|
</DropDownList>
|
||||||
value={(column.getFilterValue() as string) || ''}
|
</div>
|
||||||
onChange={e => column.setFilterValue(e.target.value)}
|
|
||||||
className="px-3 py-1 border rounded"
|
|
||||||
>
|
|
||||||
<option value="">Все отделы</option>
|
|
||||||
<option value="IT">IT</option>
|
|
||||||
<option value="HR">HR</option>
|
|
||||||
<option value="Финансы">Финансы</option>
|
|
||||||
<option value="Маркетинг">Маркетинг</option>
|
|
||||||
</select>
|
|
||||||
) : column.id === 'age' ? (
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
placeholder="Возраст от..."
|
|
||||||
value={(column.getFilterValue() as number) || ''}
|
|
||||||
onChange={e => column.setFilterValue(e.target.value ? parseInt(e.target.value) : undefined)}
|
|
||||||
className="px-3 py-1 border rounded w-32"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder={`Фильтр ${column.id}`}
|
|
||||||
value={(column.getFilterValue() as string) || ''}
|
|
||||||
onChange={e => column.setFilterValue(e.target.value)}
|
|
||||||
className="px-3 py-1 border rounded"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Таблица */}
|
{/* Таблица */}
|
||||||
<div className="overflow-x-auto border rounded-lg">
|
<div className="overflow-x-auto rounded-lg shadow">
|
||||||
<table className="min-w-full divide-y divide-gray-200">
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
<thead className="bg-gray-50">
|
<thead className="bg-gray-50">
|
||||||
{table.getHeaderGroups().map(headerGroup => (
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
@@ -206,96 +411,115 @@ export default function DataTable() {
|
|||||||
{headerGroup.headers.map(header => (
|
{headerGroup.headers.map(header => (
|
||||||
<th
|
<th
|
||||||
key={header.id}
|
key={header.id}
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
|
className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider"
|
||||||
onClick={header.column.getToggleSortingHandler()}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center">
|
{header.isPlaceholder
|
||||||
{header.isPlaceholder
|
? null
|
||||||
? null
|
: typeof header.column.columnDef.header === 'function'
|
||||||
: typeof header.column.columnDef.header === 'string'
|
? header.column.columnDef.header(header.getContext())
|
||||||
? header.column.columnDef.header
|
: header.column.columnDef.header as string}
|
||||||
: header.column.id}
|
|
||||||
{{
|
|
||||||
asc: ' 🔼',
|
|
||||||
desc: ' 🔽',
|
|
||||||
}[header.column.getIsSorted() as string] ?? null}
|
|
||||||
</div>
|
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
{table.getRowModel().rows.map(row => (
|
{table.getRowModel().rows.length > 0 ? (
|
||||||
<tr key={row.id} className="hover:bg-gray-50">
|
table.getRowModel().rows.map(row => (
|
||||||
{row.getVisibleCells().map(cell => (
|
<tr key={row.id} className="hover:bg-gray-50 transition-colors">
|
||||||
<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
|
{row.getVisibleCells().map(cell => (
|
||||||
{typeof cell.column.columnDef.cell === 'function'
|
<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
|
||||||
? cell.column.columnDef.cell(cell.getContext())
|
{typeof cell.column.columnDef.cell === 'function'
|
||||||
: cell.getValue() as string}
|
? cell.column.columnDef.cell(cell.getContext())
|
||||||
</td>
|
: cell.getValue() as string}
|
||||||
))}
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={columns.length} className="px-6 py-8 text-center text-gray-500">
|
||||||
|
{t('no-data-for-selected-filters')}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Пагинация */}
|
{/* Пагинация */}
|
||||||
<div className="flex items-center justify-between mt-4">
|
<div className="flex flex-col md:flex-row items-center justify-between mt-6 gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-700">
|
||||||
|
{t('page')}{' '}
|
||||||
|
<strong>
|
||||||
|
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount()}
|
||||||
|
</strong>
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-gray-500">
|
||||||
|
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {t('files')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
onClick={() => table.setPageIndex(0)}
|
onClick={() => table.firstPage()}
|
||||||
disabled={!table.getCanPreviousPage()}
|
disabled={!table.getCanPreviousPage()}
|
||||||
>
|
>
|
||||||
⟪
|
<DoubleArrowLeft />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
onClick={() => table.previousPage()}
|
onClick={() => table.previousPage()}
|
||||||
disabled={!table.getCanPreviousPage()}
|
disabled={!table.getCanPreviousPage()}
|
||||||
>
|
>
|
||||||
⟨
|
<ArrowLeft />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{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={`border border-black px-3 py-1 rounded-md ${table.getState().pagination.pageIndex === pageIndex
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
onClick={() => table.setPageIndex(pageIndex)}
|
||||||
|
>
|
||||||
|
{pageIndex + 1}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
onClick={() => table.nextPage()}
|
onClick={() => table.nextPage()}
|
||||||
disabled={!table.getCanNextPage()}
|
disabled={!table.getCanNextPage()}
|
||||||
>
|
>
|
||||||
⟩
|
<ArrowRight />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
onClick={() => table.lastPage()}
|
||||||
disabled={!table.getCanNextPage()}
|
disabled={!table.getCanNextPage()}
|
||||||
>
|
>
|
||||||
⟫
|
<DoubleArrowRight />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<span>
|
|
||||||
Страница{' '}
|
|
||||||
<strong>
|
|
||||||
{table.getState().pagination.pageIndex + 1} из {table.getPageCount()}
|
|
||||||
</strong>
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
value={table.getState().pagination.pageSize}
|
|
||||||
onChange={e => table.setPageSize(Number(e.target.value))}
|
|
||||||
className="px-2 py-1 border rounded"
|
|
||||||
>
|
|
||||||
{[5, 10, 20, 30, 40, 50].map(pageSize => (
|
|
||||||
<option key={pageSize} value={pageSize}>
|
|
||||||
Показать {pageSize}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<span>
|
|
||||||
Всего строк: {data.length} | Отфильтровано: {table.getFilteredRowModel().rows.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -128,13 +128,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stats-wrapper {
|
.stats-wrapper {
|
||||||
border-radius: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0 4px 20px #00000014;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import DataTable from '@/app/components/tanstakTable';
|
import TanstakFilesTable from '@/app/components/tanstakTable';
|
||||||
export default function FilesTable() {
|
export default function FilesTable() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="block-wrapper">
|
||||||
<DataTable/>
|
<TanstakFilesTable/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -4,7 +4,7 @@ export default function StatsGrid() {
|
|||||||
const t = useTranslations("Global");
|
const t = useTranslations("Global");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="stats-wrapper">
|
<div className="block-wrapper stats-wrapper">
|
||||||
<h3>
|
<h3>
|
||||||
{t('your-content')}
|
{t('your-content')}
|
||||||
</h3>
|
</h3>
|
||||||
|
|||||||
@@ -36,4 +36,55 @@ export function IconDownload() {
|
|||||||
<path fill="currentColor" d="M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z" />
|
<path fill="currentColor" d="M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z" />
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IconEye() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
|
||||||
|
<path fill="currentColor" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DoubleArrowRight() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z" /><path fill="currentColor" d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z" /></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DoubleArrowLeft() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.59 18L19 16.59L14.42 12L19 7.41L17.59 6l-6 6z" /><path fill="currentColor" d="m11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z" /></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ArrowRight() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z" /></svg>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ArrowLeft() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6z" /></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ArrowUp() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m7 14l5-5l5 5z" /></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ArrowDown() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m7 10l5 5l5-5z" /></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Filter() {
|
||||||
|
return (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1m4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1" /></svg>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
@@ -4,9 +4,12 @@
|
|||||||
"description": "This is a demo application with i18n support"
|
"description": "This is a demo application with i18n support"
|
||||||
},
|
},
|
||||||
"Global": {
|
"Global": {
|
||||||
|
"actions": "Actions",
|
||||||
|
"all-types": "All types",
|
||||||
"statistics": "Statistics",
|
"statistics": "Statistics",
|
||||||
"your-content": "Your content",
|
"your-content": "Your content",
|
||||||
"fail": "Fail",
|
"file": "File",
|
||||||
|
"files": "Files",
|
||||||
"content-type": "Content type",
|
"content-type": "Content type",
|
||||||
"quantity": "Quantity",
|
"quantity": "Quantity",
|
||||||
"size": "Size",
|
"size": "Size",
|
||||||
@@ -37,7 +40,20 @@
|
|||||||
"current-status-of": "Current status of security and activity of the monitoring system",
|
"current-status-of": "Current status of security and activity of the monitoring system",
|
||||||
"total-files": "Total files",
|
"total-files": "Total files",
|
||||||
"disk-space-used": "Disk space used",
|
"disk-space-used": "Disk space used",
|
||||||
"out-of": "out of"
|
"out-of": "out of",
|
||||||
|
"last-check": "Last check",
|
||||||
|
"all-dates": "All dates",
|
||||||
|
"today": "Today",
|
||||||
|
"for-a-week": "For a week",
|
||||||
|
"for-a-month": "For a month",
|
||||||
|
"older-than-a-month": "Older than a month",
|
||||||
|
"show": "Show",
|
||||||
|
"no-data-for-selected-filters": "No data for selected filters",
|
||||||
|
"page": "Page",
|
||||||
|
"shown": "Shown",
|
||||||
|
"date-filter": "Date filter",
|
||||||
|
"type-filter": "Type filter",
|
||||||
|
"items-per-page": "Items per page"
|
||||||
},
|
},
|
||||||
"Login-register-form": {
|
"Login-register-form": {
|
||||||
"and": "and",
|
"and": "and",
|
||||||
|
|||||||
@@ -4,9 +4,12 @@
|
|||||||
"description": "Это демонстрационное приложение с поддержкой i18n"
|
"description": "Это демонстрационное приложение с поддержкой i18n"
|
||||||
},
|
},
|
||||||
"Global": {
|
"Global": {
|
||||||
|
"actions": "Действия",
|
||||||
|
"all-types": "Все типы",
|
||||||
"statistics": "Статистика",
|
"statistics": "Статистика",
|
||||||
"your-content": "Ваш контент",
|
"your-content": "Ваш контент",
|
||||||
"fail": "Фаил",
|
"file": "Фаил",
|
||||||
|
"files": "Фаил",
|
||||||
"content-type": "Тип контента",
|
"content-type": "Тип контента",
|
||||||
"quantity": "Количество",
|
"quantity": "Количество",
|
||||||
"size": "Размер",
|
"size": "Размер",
|
||||||
@@ -37,7 +40,20 @@
|
|||||||
"current-status-of": "Текущий статус защищенности и активности системы мониторинга",
|
"current-status-of": "Текущий статус защищенности и активности системы мониторинга",
|
||||||
"total-files": "Всего файлов",
|
"total-files": "Всего файлов",
|
||||||
"disk-space-used": "Использовано места на диске",
|
"disk-space-used": "Использовано места на диске",
|
||||||
"out-of": "из"
|
"out-of": "из",
|
||||||
|
"last-check": "Последняя проверка",
|
||||||
|
"all-dates": "Все даты",
|
||||||
|
"today": "Сегодня",
|
||||||
|
"for-a-week": "За неделю",
|
||||||
|
"for-a-month": "За месяц",
|
||||||
|
"older-than-a-month": "Старше месяца",
|
||||||
|
"show": "Показать",
|
||||||
|
"no-data-for-selected-filters": "Нет данных по выбранным фильтрам",
|
||||||
|
"page": "Страница",
|
||||||
|
"shown": "Показано",
|
||||||
|
"date-filter": "Фильтр по дате",
|
||||||
|
"type-filter": "Фильтр по типу",
|
||||||
|
"items-per-page": "Записей на странице"
|
||||||
},
|
},
|
||||||
"Login-register-form": {
|
"Login-register-form": {
|
||||||
"and": "и",
|
"and": "и",
|
||||||
|
|||||||
Reference in New Issue
Block a user