124 lines
4.2 KiB
JavaScript
124 lines
4.2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Paper from '@mui/material/Paper';
|
|
import Stack from '@mui/material/Stack';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import Typography from '@mui/material/Typography';
|
|
import * as React from 'react';
|
|
|
|
import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
|
|
import PermissionSettings from './PermissionSettings.ee';
|
|
import PermissionCatalogFieldLoader from './PermissionCatalogFieldLoader';
|
|
import ActionField from './ActionField';
|
|
|
|
const PermissionCatalogField = ({
|
|
name = 'permissions',
|
|
disabled = false,
|
|
syncIsCreator = false,
|
|
}) => {
|
|
const { data, isLoading: isPermissionCatalogLoading } =
|
|
usePermissionCatalog();
|
|
const permissionCatalog = data?.data;
|
|
const [dialogName, setDialogName] = React.useState();
|
|
|
|
if (isPermissionCatalogLoading) return <PermissionCatalogFieldLoader />;
|
|
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell component="th" />
|
|
|
|
{permissionCatalog?.actions.map((action) => (
|
|
<TableCell component="th" key={action.key}>
|
|
<Typography
|
|
component="div"
|
|
variant="subtitle1"
|
|
align="center"
|
|
sx={{
|
|
color: 'text.secondary',
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{action.label}
|
|
</Typography>
|
|
</TableCell>
|
|
))}
|
|
|
|
<TableCell component="th" />
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{permissionCatalog?.subjects.map((subject) => (
|
|
<TableRow
|
|
key={subject.key}
|
|
sx={{ '&:last-child td': { border: 0 } }}
|
|
data-test={`${subject.key}-permission-row`}
|
|
>
|
|
<TableCell scope="row">
|
|
<Typography variant="subtitle2" component="div">
|
|
{subject.label}
|
|
</Typography>
|
|
</TableCell>
|
|
|
|
{permissionCatalog?.actions.map((action) => (
|
|
<TableCell key={`${subject.key}.${action.key}`} align="center">
|
|
<Typography variant="subtitle2" component="div">
|
|
{action.subjects.includes(subject.key) && (
|
|
<ActionField
|
|
action={action}
|
|
subject={subject}
|
|
disabled={disabled}
|
|
name={name}
|
|
syncIsCreator={syncIsCreator}
|
|
/>
|
|
)}
|
|
{!action.subjects.includes(subject.key) && '-'}
|
|
</Typography>
|
|
</TableCell>
|
|
))}
|
|
|
|
<TableCell>
|
|
<Stack direction="row" gap={1} justifyContent="right">
|
|
<IconButton
|
|
color="info"
|
|
size="small"
|
|
onClick={() => setDialogName(subject.key)}
|
|
disabled={disabled}
|
|
data-test="permission-settings-button"
|
|
>
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
|
|
<PermissionSettings
|
|
open={dialogName === subject.key}
|
|
onClose={() => setDialogName('')}
|
|
fieldPrefix={`${name}.${subject.key}`}
|
|
subject={subject.key}
|
|
actions={permissionCatalog?.actions}
|
|
conditions={permissionCatalog?.conditions}
|
|
/>
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
};
|
|
PermissionCatalogField.propTypes = {
|
|
name: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
syncIsCreator: PropTypes.bool,
|
|
};
|
|
|
|
export default PermissionCatalogField;
|