add permission change button

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

@@ -32,6 +32,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import Link from 'next/link';
 import { SelectedFilesAction } from '@/app/components/tanstak-table/SelectedFilesActions';
 import Image from 'next/image';
+import { filePermisionChange } from '@/app/actions/trackingActions';
 
 export type FileItem = {
 	id: string;
@@ -45,7 +46,10 @@ export type FileItem = {
 	protectStatus: string;
 	_original?: ApiFile;
 	supportId: number;
-	thumbnailFileUrl: string
+	thumbnailFileUrl: string;
+	permissions: {
+		DOWNLOAD: boolean;
+	}
 };
 
 type ApiFile = {
@@ -61,6 +65,9 @@ type ApiFile = {
 	supportId: number;
 	fileName: string;
 	thumbnailFileUrl: string;
+	permissions: {
+		DOWNLOAD: boolean;
+	}
 };
 
 type ApiResponse = {
@@ -190,7 +197,10 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 				protectStatus: item.protectStatus,
 				supportId: item.supportId,
 				_original: item,
-				thumbnailFileUrl: item.thumbnailFileUrl
+				thumbnailFileUrl: item.thumbnailFileUrl,
+				permissions: {
+					DOWNLOAD: item.permissions.DOWNLOAD,
+				}
 			}));
 
 			return {
@@ -553,6 +563,33 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 					)
 				},
 			},
+			{
+				accessorKey: 'downloadPermision',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							Можно скачать по ссылке
+						</span>
+					</div>
+				),
+				cell: ({ row }) => {
+					return (
+						<div className="text-center font-semibold table-item">
+							<button
+								onClick={() => changeDownloadPermition(row.original.id, row.original.permissions.DOWNLOAD)}
+								disabled={isFileLoading}
+								className={`toggle-switch ${row.original.permissions?.DOWNLOAD ? 'active' : 'inactive'}`}
+								title={'change-permission'}
+							>
+								<span className="toggle-slider"></span>
+								<span className="toggle-label">
+									{row.original.permissions?.DOWNLOAD ? 'Да' : 'Нет'}
+								</span>
+							</button>
+						</div>
+					)
+				},
+			},
 			{
 				id: 'actions',
 				header: () => {
@@ -564,15 +601,8 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 				},
 				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>
-							{(showFileLink && row.original.fileType === 'document') && (
+						{(showFileLink && row.original.fileType === 'document') ? (
+							<div className="actions-group">
 								<Link
 									href={`/watch-doc?docid=${row.original.id}`}
 									className="bg-indigo-500 hover:bg-indigo-600"
@@ -581,30 +611,41 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 								>
 									<IconLink />
 								</Link>
-							)}
-						</div>
-						<div className="actions-group">
-							{row.original.protectStatus === 'PROTECTED' && (
-								<button
-									onClick={() => handleDownload(row.original)}
-									disabled={isFileLoading}
-									className="table-action-download"
-									title={t('download')}
-								>
-									<IconFileDownload />
-								</button>
-							)}
-							<button
-								onClick={() => {
-									handleView(row.original)
-								}}
-								className="table-action-view"
-								title={t('make-check')}
-							>
-								<IconInfo />
-							</button>
-						</div>
-
+							</div>
+						) : (
+							<>
+								<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' && (
+										<button
+											onClick={() => handleDownload(row.original)}
+											disabled={isFileLoading}
+											className="table-action-download"
+											title={t('download')}
+										>
+											<IconFileDownload />
+										</button>
+									)}
+									<button
+										onClick={() => {
+											handleView(row.original)
+										}}
+										className="table-action-view"
+										title={t('make-check')}
+									>
+										<IconInfo />
+									</button>
+								</div>
+							</>
+						)}
 					</div>
 				),
 				enableSorting: false,
@@ -659,6 +700,16 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 		}
 	}
 
+	const changeDownloadPermition = async (fileId: string, permission: boolean) => {
+		const response = await filePermisionChange(fileId, !permission);
+		if (response) {
+			queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
+			toast.success('Разрешение на скачивание изменено.');
+		} else {
+			toast.warning('Не удалось изменить разрешение на скачивание.');
+		}
+	}
+
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
 		let result = tableData;
@@ -735,6 +786,10 @@ export default function TanstakFilesTable({ fileType, showFileLink }: { fileType
 		state: {
 			sorting,
 			pagination,
+			columnVisibility: {
+				monitoring: showFileLink ? false : true,
+				downloadPermision: showFileLink ? true : false,
+			}
 		},
 		pageCount: totalPages,
 		manualPagination: true,