diff --git a/src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss b/src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss index 1765fdf9..2eb0753b 100644 --- a/src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss +++ b/src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss @@ -18,6 +18,10 @@ display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; + + @media (max-width: $screen-m) { + grid-template-columns: 1fr; + } } .save-container { diff --git a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx index a6bab20f..8ae1b215 100644 --- a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx @@ -21,8 +21,9 @@ export default function RolesInformations(props: IProps) { const [roleSelected, setRoleSelected] = useState(null); const [rulesCheckboxes, setRulesCheckboxes] = useState([]); - + const [selectAll, setSelectAll] = useState(false); useEffect(() => { + setSelectAll(false); async function getUser() { if (!roleUid) return; const role = await Roles.getInstance().getByUid(roleUid as string, { @@ -44,6 +45,9 @@ export default function RolesInformations(props: IProps) { }) .sort((ruleA, ruleB) => (ruleA.name < ruleB.name ? 1 : -1)) .sort((rule) => (rule.checked ? -1 : 1)); + + const selectAll = rulesCheckboxes.every((rule) => rule.checked); + setSelectAll(selectAll); setRulesCheckboxes(rulesCheckboxes); } @@ -52,6 +56,7 @@ export default function RolesInformations(props: IProps) { const handleSelectAllChange = useCallback( (e: React.ChangeEvent) => { + setSelectAll(e.target.checked); const checked = e.target.checked; rulesCheckboxes.forEach((rule) => (rule.checked = checked)); setRulesCheckboxes([...rulesCheckboxes]); @@ -95,6 +100,7 @@ export default function RolesInformations(props: IProps) { }} toolTip="Tout sélectionner" onChange={handleSelectAllChange} + checked={selectAll} />