add multiselect for files tanstak-table

src/app/components/tanstak-table/TanstakTable.tsx

@@ -12,7 +12,7 @@ import {
 	ColumnFiltersState,
 	PaginationState
 } from '@tanstack/react-table';
-import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo } from '@/app/ui/icons/icons';
+import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/DropDownList';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -29,6 +29,8 @@ import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 import { useViewport } from '@/app/hooks/useViewport';
 import { downloadFile } from '@/app/actions/fileEntity';
 import { useDebouncedCallback } from 'use-debounce';
+import Link from 'next/link';
+import { SelectedFilesAction } from '@/app/components/tanstak-table/SelectedFilesActions';
 
 export type FileItem = {
 	id: string;
@@ -80,9 +82,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		pageIndex: 0,
 		pageSize: 10,
 	});
-	const [query, setQuery] = useState<string>('');
+	/* const [query, setQuery] = useState<string>(''); */
 	const [searchInputValue, setSearchInputValue] = useState<string>('');
 	const [searchQuery, setSearchQuery] = useState<string>('');
+	const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
 
 	const debouncedSetSearchQuery = useDebouncedCallback(
 		(value: string) => {
@@ -260,9 +263,49 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
 	}
 
+	function selectHandler(fileId: string) {
+
+		setSelectedFiles((prev) => {
+			const newSet = new Set(prev)
+			if (newSet.has(fileId)) {
+				newSet.delete(fileId)
+			} else {
+				newSet.add(fileId)
+			}
+			return newSet;
+		});
+	}
+
 	// Определение колонок
 	const columns = useMemo<ColumnDef<FileItem>[]>(
 		() => [
+			{
+				accessorKey: 'selectd',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+
+						</span>
+					</div>
+				),
+				cell: ({ row }) => {
+					return (
+						<div className="text-center table-item table-item-id">
+							<button
+								className={`table-item-checkbox ${selectedFiles.has(row.original.id) ? 'selected' : ''}`}
+								onClick={() => {
+									selectHandler(row.original.id);
+								}}
+							>
+								{selectedFiles.has(row.original.id) && (
+									<IconCheck />
+								)}
+
+							</button>
+						</div>
+					)
+				},
+			},
 			{
 				accessorKey: 'id',
 				header: ({ column }) => (
@@ -478,6 +521,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				cell: ({ row }) => (
 					<div className="actions">
 						<div className="actions-group">
+							<Link
+								href={`/pages/file/${row.original.id}`}
+								className="bg-violet-500 hover:bg-violet-600"
+								title={t('view')}
+							>
+								<IconEye />
+							</Link>
 						</div>
 						<div className="actions-group">
 							{row.original.protectStatus === 'PROTECTED' && (
@@ -507,7 +557,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				enableColumnFilter: false,
 			},
 		],
-		[viewport.device]
+		[viewport.device, selectedFiles]
 	);
 
 	const handleView = async (file: FileItem) => {
@@ -613,7 +663,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		}
 
 		return result;
-	}, [query, typeFilter, dateFilter]);
+	}, [/* query, */ typeFilter, dateFilter]);
 
 	useEffect(() => {
 		const currentPageRows = table.getRowModel().rows;
@@ -904,6 +954,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</button>
 				</div>
 			</div>
+			<SelectedFilesAction filesId={selectedFiles} callBack={setSelectedFiles} />
 		</div >
 	);
 }