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

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

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