DFiP_Budget_planing/web/src/pages/AdminPanel/UsersPage/UserTableForAdd.jsx

import { Autocomplete, Box, IconButton, TextField, Typography } from '@mui/material';
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { useEffect, useMemo, useState } from 'react';
import { TrashSvg } from '../../../components/common/icons/icons';
import { ROLES_NAME_ID } from '../../../constants/constants';
import { CheckIcon, CheckedIcon } from '../IconsForTable/icons';

const StyleForChecked = {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'flex-start',
	cursor: 'pointer',
	'& svg': {
		width: '1rem',
		height: '1rem',
	},
	'&:hover': {
		opacity: 0.8,
	},
};

const UserTableForAdd = ({ usersEmail = [], sspOptions = [], onDeleteUser, onChangeUsers }) => {
	const [allUsers, setAllUsers] = useState([]);

	useEffect(() => {
		const emailUsers = usersEmail.map((email) => ({
			id: email,
			email: email,
			ssp: '',
			admin: false,
			executor_dfip: false,
			executor_rf: false,
			username: email.split('@')[0],
			ssp_id: null,
		}));

		setAllUsers((prev) => [...prev, ...emailUsers]);
	}, [usersEmail]);

	const handleRoleChange = (userId, role) => {
		const allRoles = Object.fromEntries(Object.keys(ROLES_NAME_ID).map((key) => [key, false]));
		allRoles[role] = true;
		setAllUsers((prev) => prev.map((user) => (user.id === userId ? { ...user, ...allRoles, role_id: ROLES_NAME_ID[role] } : user)));
	};

	const handleSspChange = (userId, ssp) => {
		setAllUsers((prev) =>
			prev.map((user) =>
				user.id === userId
					? {
							...user,
							ssp: ssp,
							ssp_id: ssp.id,
						}
					: user,
			),
		);
	};

	const handleDeleteUser = (userId) => {
		setAllUsers((prev) => prev.filter((user) => user.id !== userId));
		onDeleteUser(allUsers.length - 1);
	};

	useEffect(() => {
		onChangeUsers?.(allUsers);
	}, [allUsers]);

	const columns = useMemo(
		() => [
			{
				accessorKey: 'email',
				header: 'Email пользователя',
				maxSize: 400,
				size: 200,
				Cell: ({ row }) => {
					const user = row.original;
					return <Typography>{user.email}</Typography>;
				},
				enableEditing: false,
				enableColumnActions: false,
			},
			{
				accessorKey: 'ssp',
				header: 'ССП/Региональный филиал',
				size: 134,
				maxSize: 268,
				Cell: ({ row }) => {
					return (
						<Autocomplete
							fullWidth
							size='small'
							options={sspOptions}
							getOptionLabel={(option) => option.title || option.name || ''}
							value={row.original.ssp}
							onChange={(e, newValue) => handleSspChange(row.original.id, newValue || '')}
							sx={{
								height: '1.5rem',
								padding: 0,
								maxWidth: '10rem',

								'.MuiInputBase-root': {
									height: '1.5rem',
									border: '1px solid var(--stroke)',
									borderRadius: '0.5rem',
								},
							}}
							renderInput={(params) => (
								<TextField
									{...params}
									placeholder='Не выбран'
									size='small'
									variant='outlined'
									sx={{
										fontSize: ' 0.88rem',
										'.MuiInputBase-input': {
											minWidth: '6.25rem',
											padding: 0,
										},
									}}
								/>
							)}
							freeSolo={false}
						/>
					);
				},
				enableColumnActions: false,
			},
			{
				accessorKey: 'admin',
				header: 'Администратор',
				size: 70,
				maxSize: 140,
				Cell: ({ row }) => (
					<Box sx={StyleForChecked} onClick={() => handleRoleChange(row.original.id, 'admin')}>
						{row.original.admin ? <CheckedIcon color='primary' /> : <CheckIcon />}
					</Box>
				),
				enableColumnActions: false,
			},
			{
				accessorKey: 'executor_dfip',
				header: 'Исполнитель ДФиП',
				size: 70,
				maxSize: 140,
				Cell: ({ row }) => (
					<Box sx={StyleForChecked} onClick={() => handleRoleChange(row.original.id, 'executor_dfip')}>
						{row.original.executor_dfip ? <CheckedIcon color='success' /> : <CheckIcon />}
					</Box>
				),
				enableColumnActions: false,
			},
			{
				accessorKey: 'executor_rf',
				header: 'Исполнитель РФ',
				size: 70,
				maxSize: 140,
				Cell: ({ row }) => (
					<Box sx={StyleForChecked} onClick={() => handleRoleChange(row.original.id, 'executor_rf')}>
						{row.original.executor_rf ? <CheckedIcon color='warning' /> : <CheckIcon />}
					</Box>
				),
				enableColumnActions: false,
			},
			{
				id: 'actions',
				header: '',
				size: 30,
				maxSize: 60,
				Cell: ({ row }) => {
					return (
						<Box
							sx={{
								display: 'flex',
								alignItems: 'center',
								justifyContent: 'center',
							}}>
							<IconButton size='small' onClick={() => handleDeleteUser(row.original.id)} sx={{ color: 'error.main' }}>
								<Box
									sx={{
										display: 'flex',
										padding: '0.75rem 1.25rem',
										width: '4rem',
										height: '2.75rem',
										justifyContent: 'center',
										alignItems: 'center',
									}}>
									<TrashSvg fill={'red'} />
								</Box>
							</IconButton>
						</Box>
					);
				},
				enableEditing: false,
				enableSorting: false,
				enableColumnFilter: false,
				enableColumnActions: false,
				enableHiding: false,
			},
		],
		[allUsers, sspOptions],
	);

	const table = useMaterialReactTable({
		columns,
		data: allUsers,
		enablePagination: false,
		enableBottomToolbar: false,
		enableDensityToggle: false,
		enableFullScreenToggle: false,
		enableRowActions: false,

		enableTopToolbar: false,

		enableColumnFilters: false,
		enableGlobalFilter: false,

		muiTableBodyRowProps: ({ _row }) => ({
			sx: {
				fontSize: '.75rem',
				height: '2.75rem',
				'& .MuiTableCell-root': {
					padding: 0,
					paddingLeft: '.5rem',
					height: '2.75rem',
					maxHeight: '2.75rem',
				},
			},
		}),
		muiTableHeadRowProps: {
			sx: {
				fontSize: (theme) => theme.adminTable.fontSize,
				height: (theme) => theme.adminTable.MuiTableRow.styleOverrides.root.height,
				'& .MuiTableCell-root': {
					padding: 0,
					height: '2rem',
					textAlign: 'center',
					verticalAlign: 'middle',
					paddingLeft: '0.75rem',
				},
			},
		},
		muiTableBodyCellProps: {
			sx: {
				maxHeight: '2.75rem',
				fontSize: 'inherit',
			},
		},
		muiTableHeadCellProps: {
			sx: {
				fontSize: 'inherit',
				fontWeight: 'bold',
				backgroundColor: '#f5f5f5',
			},
		},
		muiTableProps: {
			sx: {
				'& thead': {
					position: 'sticky',
					top: 0,
					zIndex: 10,
				},
			},
		},
		muiTablePaperProps: {
			sx: {
				width: '72rem',
				maxWidth: '72rem',
				display: 'flex',
				flexDirection: 'column',
				minHeight: '18.38rem',
				boxShadow: 'none',
				border: 'none',
				background: 'transparent',
			},
		},
		muiTableContainerProps: {
			sx: {
				flex: '1 1 auto',
				overflow: 'auto',
				maxHeight: '18.38rem',
			},
		},
		enableRowNumbers: false,
		muiToolbarAlertBannerProps: false,
	});

	return (
		<Box
			sx={{
				display: 'flex',
				flexDirection: 'column',
				'& .MuiTableContainer-root': {
					overflow: 'auto',
				},
			}}>
			<MaterialReactTable table={table} />
		</Box>
	);
};

export default UserTableForAdd;