UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-02-22 20:38:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(frontend): enhance accordion layout

Browse Source
This commit is contained in:
yassinedorbozgithub 2025-02-08 08:54:34 +01:00
parent 584eb83d68
commit eba9ac6135
1 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/roles/PermissionsBody.tsx
View File

@ -41,8 +41,14 @@ const DEFAULT_PAYLOAD: IPermissionAttributes = {
role: "", role: "",
}; };
const AccordionModelHead = () => ( const AccordionModelHead = () => (
<Grid container direction="row" minHeight="6rem" alignContent="center" mb={1}> <Grid
<Grid item width="6rem" /> container
direction="row"
minHeight="3rem"
alignContent="center"
bgcolor="#0001"
>
<Grid item width="6rem" m="0.2rem" />
<Grid item xs textAlign="left"> <Grid item xs textAlign="left">
<Typography fontWeight={700} fontSize="body2.fontSize"> <Typography fontWeight={700} fontSize="body2.fontSize">
Action Action
@ -95,17 +101,19 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
EntityType.PERMISSION, EntityType.PERMISSION,
options, options,
); );
const [expanded, setExpanded] = useState<string | false>(false); const [expanded, setExpanded] = useState<string | undefined>();
const [payload, setPayload] = const [payload, setPayload] =
useState<IPermissionAttributes>(DEFAULT_PAYLOAD); useState<IPermissionAttributes>(DEFAULT_PAYLOAD);
const reset = () => setPayload(DEFAULT_PAYLOAD); const reset = () => setPayload(DEFAULT_PAYLOAD);
const handleChange = const handleChange = (panel: string) => () => {
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { setExpanded(panel === expanded ? "" : panel);
setExpanded(isExpanded ? panel : false); setPayload(DEFAULT_PAYLOAD);
}; };
useEffect(() => { useEffect(() => {
if (expanded === false && models?.[0]?.id) setExpanded(models[0].id); if (typeof expanded !== "string" && models?.[0]?.id) {
setExpanded(models[0].id);
}
}, [models]); }, [models]);
return ( return (
@ -139,7 +147,8 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
<AccordionDetails sx={{ p: 0, m: 0 }}> <AccordionDetails sx={{ p: 0, m: 0 }}>
<Paper <Paper
sx={{ sx={{
padding: 2, m: 2,
border: "1px solid #0002",
}} }}
> >
<AccordionModelHead /> <AccordionModelHead />
@ -179,14 +188,21 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
<Typography>{action}</Typography> <Typography>{action}</Typography>
</Grid> </Grid>
<Grid item xs> <Grid item xs>
<Typography>{relation}</Typography> <Typography sx={{ ml: "0.2rem" }}>
{relation}
</Typography>
</Grid> </Grid>
</Grid> </Grid>
</> </>
); );
})} })}
<Grid container minHeight="2.5rem" padding={1}> <Grid
<Grid item width="6rem" alignContent="center"> container
minHeight="2.5rem"
padding="1rem 0"
borderTop="1px solid #0002"
>
<Grid item width="6rem" alignContent="center" pl="0.6rem">
<IconButton <IconButton
size="small" size="small"
color="primary" color="primary"
@ -200,6 +216,7 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
}); });
reset(); reset();
}} }}
disabled={!payload.action || !payload.relation}
> >
<AddIcon fontSize="small" /> <AddIcon fontSize="small" />
</IconButton> </IconButton>