Merge pull request #345 from mission-apprentissage/ui/enhance-multise…

…lect [UI] Ajoute un selectAll au multiselect
mission-apprentissage · Oct 30, 2024 · ee2ee76 · ee2ee76
2 parents 58e2c5b + 69a1082
commit ee2ee76
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/ui/src/Components/MultiSelect/MultiSelect.js b/ui/src/Components/MultiSelect/MultiSelect.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 
-import Checkbox from "@codegouvfr/react-dsfr/Checkbox";
-import Input from "@codegouvfr/react-dsfr/Input";
+import { Checkbox } from "@codegouvfr/react-dsfr/Checkbox";
+import { Input } from "@codegouvfr/react-dsfr/Input";
 import { useEffect, useRef, useState } from "react";
 
 import { isPlural } from "../../campagnes/utils";
@@ -11,7 +11,7 @@ const MultiSelect = ({ options, name, placeholder = "", label, selected, setSele
   const [isOpen, setIsOpen] = useState(false);
   const [values, setValues] = useState(selected || []);
   const [search, setSearch] = useState("");
-
+  const [isAllSelected, setIsAllSelected] = useState(false);
   const dropdownRef = useRef(null);
 
   const displayedValues = values
@@ -31,14 +31,27 @@ const MultiSelect = ({ options, name, placeholder = "", label, selected, setSele
     }
     setValues(updatedValues);
     setSelected(updatedValues);
+    setIsAllSelected(updatedValues.length === options.length);
   };
 
   useEffect(() => {
     if (!values?.length && selected?.length) {
       setValues(selected);
     }
+    setIsAllSelected(selected?.length === options?.length);
   }, [selected]);
 
+  const handleSelectAll = (e) => {
+    if (e.target.checked) {
+      setValues(options.map((option) => option.value));
+      setSelected(options.map((option) => option.value));
+      setIsAllSelected(true);
+    } else {
+      setValues([]);
+      setIsAllSelected(false);
+    }
+  };
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -98,6 +111,19 @@ const MultiSelect = ({ options, name, placeholder = "", label, selected, setSele
       </InputContainer>
       {isOpen && (
         <MenuContainer>
+          <Checkbox
+            options={[
+              {
+                label: isAllSelected ? "Tout désélectionner" : "Tout sélectionner",
+                nativeInputProps: {
+                  name: `multiselect-${name}-select-all`,
+                  checked: isAllSelected,
+                  onChange: handleSelectAll,
+                },
+              },
+            ]}
+            small
+          />
           {(search && formattedSearchedOptions.length) || (!search && formattedOptions.length) ? (
             <Checkbox options={search ? formattedSearchedOptions : formattedOptions} small />
           ) : (

diff --git a/ui/src/campagnes/CreateCampagnes/FormationsSelector.js b/ui/src/campagnes/CreateCampagnes/FormationsSelector.js
@@ -11,7 +11,7 @@ import BeatLoader from "react-spinners/BeatLoader";
 import { DIPLOME_TYPE_MATCHER, USER_ROLES, VIEW_TYPES } from "../../constants";
 import { UserContext } from "../../context/UserContext";
 import useFetchCampagnes from "../../hooks/useFetchCampagnes";
-import useFetchDiplomesWithCampagnesCount from "../../hooks/useFetchDiplomesWithCampagnesCount";
+import useFetchDiplomesAndEtablissementsFilter from "../../hooks/useFetchDiplomesAndEtablissementsFilter";
 import useFetchRemoteFormations from "../../hooks/useFetchRemoteFormations";
 import { remoteEtablissementLabelGetterFromFormation } from "../../utils/etablissement";
 import FilterButtons from "../Shared/FilterButtons/FilterButtons";
@@ -114,7 +114,7 @@ const FormationsSelector = ({ selectedFormations, setSelectedFormations }) => {
     diplomesFilter,
     etablissementsFilter,
     isSuccess: isSuccessDiplomesAndEtablissementsFilter,
-  } = useFetchDiplomesWithCampagnesCount();
+  } = useFetchDiplomesAndEtablissementsFilter();
 
   const {
     campagnes: campagnes,
@@ -185,7 +185,7 @@ const FormationsSelector = ({ selectedFormations, setSelectedFormations }) => {
         />
       )}
       <>
-        {isSuccessFormations && (
+        {isSuccessDiplomesAndEtablissementsFilter && (
           <>
             <FilterButtons
               search={search}

diff --git a/ui/src/campagnes/Shared/CampagnesSelector/CampagnesSelector.js b/ui/src/campagnes/Shared/CampagnesSelector/CampagnesSelector.js
@@ -14,7 +14,7 @@ import {
 } from "../../../constants";
 import { UserContext } from "../../../context/UserContext";
 import useFetchCampagnes from "../../../hooks/useFetchCampagnes";
-import useFetchDiplomesWithCampagnesCount from "../../../hooks/useFetchDiplomesWithCampagnesCount";
+import useFetchDiplomesAndEtablissementsFilter from "../../../hooks/useFetchDiplomesAndEtablissementsFilter";
 import { etablissementLabelGetterFromFormation } from "../../../utils/etablissement";
 import ActionButtons from "../../ManageCampagne/ActionButtons/ActionButtons";
 import { ButtonContainer } from "../../styles/resultsCampagnes.style";
@@ -62,7 +62,7 @@ const CampagnesSelector = ({
     diplomesFilter,
     etablissementsFilter,
     isSuccess: isSuccessDiplomesAndEtablissementsFilter,
-  } = useFetchDiplomesWithCampagnesCount();
+  } = useFetchDiplomesAndEtablissementsFilter();
 
   const currentPageCampagneIds = campagnes?.map((campagne) => campagne.id);
 

diff --git a/ui/src/campagnes/Shared/FilterButtons/FilterButtons.js b/ui/src/campagnes/Shared/FilterButtons/FilterButtons.js
@@ -36,13 +36,13 @@ const FilterButtons = ({
   }, [inputValue, setSearch, setIsOpened]);
 
   useEffect(() => {
-    if (!selectedEtablissementsSiret) {
+    if (!selectedEtablissementsSiret?.length) {
       setSelectedEtablissementsSiret(etablissementsOptions.map((option) => option.value));
     }
   }, [selectedEtablissementsSiret, etablissementsOptions]);
 
   useEffect(() => {
-    if (!selectedDiplomesIntitule) {
+    if (!selectedDiplomesIntitule?.length) {
       setSelectedDiplomesIntitule(diplomesOptions.map((option) => option.value));
     }
   }, [diplomesOptions]);

diff --git a/...oks/useFetchDiplomesWithCampagnesCount.js → ...seFetchDiplomesAndEtablissementsFilter.js b/...oks/useFetchDiplomesWithCampagnesCount.js → ...seFetchDiplomesAndEtablissementsFilter.js