4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Responsive & select all optimized

Browse Source
This commit is contained in:
Maxime Lalo 2023-07-17 11:37:57 +02:00
parent 2665d477ad
commit 43205c12ec
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss
View File

@ -18,6 +18,10 @@
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 32px; gap: 32px;
@media (max-width: $screen-m) {
grid-template-columns: 1fr;
}
} }
.save-container { .save-container {

8
src/front/Components/Layouts/Roles/RolesInformations/index.tsx
View File

@ -21,8 +21,9 @@ export default function RolesInformations(props: IProps) {
const [roleSelected, setRoleSelected] = useState<Role | null>(null); const [roleSelected, setRoleSelected] = useState<Role | null>(null);
const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]); const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]);
const [selectAll, setSelectAll] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
setSelectAll(false);
async function getUser() { async function getUser() {
if (!roleUid) return; if (!roleUid) return;
const role = await Roles.getInstance().getByUid(roleUid as string, { 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((ruleA, ruleB) => (ruleA.name < ruleB.name ? 1 : -1))
.sort((rule) => (rule.checked ? -1 : 1)); .sort((rule) => (rule.checked ? -1 : 1));
const selectAll = rulesCheckboxes.every((rule) => rule.checked);
setSelectAll(selectAll);
setRulesCheckboxes(rulesCheckboxes); setRulesCheckboxes(rulesCheckboxes);
} }
@ -52,6 +56,7 @@ export default function RolesInformations(props: IProps) {
const handleSelectAllChange = useCallback( const handleSelectAllChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => { (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectAll(e.target.checked);
const checked = e.target.checked; const checked = e.target.checked;
rulesCheckboxes.forEach((rule) => (rule.checked = checked)); rulesCheckboxes.forEach((rule) => (rule.checked = checked));
setRulesCheckboxes([...rulesCheckboxes]); setRulesCheckboxes([...rulesCheckboxes]);
@ -95,6 +100,7 @@ export default function RolesInformations(props: IProps) {
}} }}
toolTip="Tout sélectionner" toolTip="Tout sélectionner"
onChange={handleSelectAllChange} onChange={handleSelectAllChange}
checked={selectAll}
/> />
</div> </div>
<Form onSubmit={onSubmitHandler}> <Form onSubmit={onSubmitHandler}>