From 43205c12ec5641cbcecc20b819ce42211ec59900 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 17 Jul 2023 11:37:57 +0200
Subject: [PATCH] :sparkles: Responsive & select all optimized

---
 .../Layouts/Roles/RolesInformations/classes.module.scss   | 4 ++++
 .../Components/Layouts/Roles/RolesInformations/index.tsx  | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

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<Role | null>(null);
 	const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]);
-
+	const [selectAll, setSelectAll] = useState<boolean>(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<HTMLInputElement>) => {
+			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}
 						/>
 					</div>
 					<Form onSubmit={onSubmitHandler}>