ajouter un filtre pour les types de territoires dans la recherche et …

…améliorer la gestion des états
dataesr · Jan 13, 2025 · f243c8f · f243c8f
1 parent 4771f33
commit f243c8f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 58 deletions.
diff --git a/client/src/api/atlas.ts b/client/src/api/atlas.ts
@@ -96,7 +96,11 @@ export async function getGeoIdsFromSearch(
   q: string,
   territoiresType: string = ""
 ) {
-  const url = `${VITE_APP_SERVER_URL}/atlas/get-geo-ids-from-search?q=${q}&niveau_geo=${territoiresType}`;
+  let niveau_geo = "";
+  if (territoiresType !== "all") {
+    niveau_geo = territoiresType;
+  }
+  const url = `${VITE_APP_SERVER_URL}/atlas/get-geo-ids-from-search?q=${q}&niveau_geo=${niveau_geo}`;
   return fetch(url).then((response) => response.json());
 }
 

diff --git a/client/src/pages/atlas/components/main/tabs/search/index.tsx b/client/src/pages/atlas/components/main/tabs/search/index.tsx
@@ -9,6 +9,7 @@ import {
   Spinner,
   Text,
   Title,
+  Badge,
 } from "@dataesr/dsfr-plus";
 
 import {
@@ -27,7 +28,7 @@ type SearchTypes = {
 };
 
 export function Search() {
-  const [territoiresType, setTerritoiresType] = useState("");
+  const [territoiresType, setTerritoiresType] = useState("all");
   const [searchValue, setSearchValue] = useState("");
   const navigate = useNavigate();
 
@@ -41,10 +42,10 @@ export function Search() {
     isLoading: isLoadingSearch,
     refetch,
   } = useQuery({
-    queryKey: ["atlas/search", searchValue, territoiresType],
-    queryFn: () => getGeoIdsFromSearch(searchValue, territoiresType),
+    queryKey: ["atlas/search", searchValue],
+    queryFn: () => getGeoIdsFromSearch(searchValue),
     enabled: false,
-  });
+  }); // TODO: add a debounce + delete unused props
 
   const handleClick = async () => {
     refetch();
@@ -70,6 +71,34 @@ export function Search() {
   // Sort the list of territories by label
   territoiresList.sort((a, b) => a.label.localeCompare(b.label));
 
+    function GetFilterButton({ type, label }) {
+      if(!dataSearch) {
+        return null;
+      }
+      return (
+        <li
+          className={territoiresType === type ? "active" : ""}
+        >
+          {dataSearch?.filter((el) => el.niveau_geo === type)?.length === 0 && type!=="all" ? (
+            null
+          ):(
+            <span onClick={() => setTerritoiresType(type)}>
+              {label}
+              <Badge className="fr-ml-1w" color="pink-tuile">
+                {
+                  (type === "all" && dataSearch?.length) || dataSearch?.filter((el) => el.niveau_geo === type)?.length
+                }
+              </Badge>
+            </span>
+          )}
+        </li>
+      );
+    }
+
+    const filteredData = territoiresType !== "all"
+      ? dataSearch?.filter((el) => el.niveau_geo === territoiresType)
+      : dataSearch; 
+
   return (
     <Container as="section">
       <Row>
@@ -124,48 +153,13 @@ export function Search() {
               <Col>
                 <div className="territories-filter">
                   <ul>
-                    <li className={territoiresType === "" ? "active" : ""}>
-                      <span onClick={() => setTerritoiresType("")}>Tous</span>
-                    </li>
-                    <li
-                      className={territoiresType === "REGION" ? "active" : ""}
-                    >
-                      <span onClick={() => setTerritoiresType("REGION")}>
-                        Régions
-                      </span>
-                    </li>
-                    <li
-                      className={territoiresType === "ACADEMIE" ? "active" : ""}
-                    >
-                      <span onClick={() => setTerritoiresType("ACADEMIE")}>
-                        Académies
-                      </span>
-                    </li>
-                    <li
-                      className={
-                        territoiresType === "DEPARTEMENT" ? "active" : ""
-                      }
-                    >
-                      <span onClick={() => setTerritoiresType("DEPARTEMENT")}>
-                        Départements
-                      </span>
-                    </li>
-                    <li
-                      className={
-                        territoiresType === "UNITE_URBAINE" ? "active" : ""
-                      }
-                    >
-                      <span onClick={() => setTerritoiresType("UNITE_URBAINE")}>
-                        Unités urbaines
-                      </span>
-                    </li>
-                    <li
-                      className={territoiresType === "COMMUNE" ? "active" : ""}
-                    >
-                      <span onClick={() => setTerritoiresType("COMMUNE")}>
-                        Communes
-                      </span>
-                    </li>
+                    {dataSearch?.length > 0 && (<span className="fr-icon-filter-line" aria-hidden="true" />)}
+                    <GetFilterButton type="all" label="Tous" />
+                    <GetFilterButton type="REGION" label="Régions" />
+                    <GetFilterButton type="ACADEMIE" label="Académies" />
+                    <GetFilterButton type="DEPARTEMENT" label="Départements" />
+                    <GetFilterButton type="UNITE_URBAINE" label="Unités urbaines" />
+                    <GetFilterButton type="COMMUNE" label="Communes" />
                   </ul>
                 </div>
 
@@ -182,16 +176,13 @@ export function Search() {
                       exemple : "Paris", "Bretagne", "Occitanie", etc ...
                       <br />
                       Puis cliquez sur le bouton <strong>"Rechercher"</strong>
-                      <br />
-                      Vous pouvez limiter les résultats à un type de territoire
-                      en cliquant sur les boutons correspondants
                     </i>
                   </div>
                 )}
 
                 {dataSearch?.length > 0 ? (
                   <ul className="results">
-                    {dataSearch.map((result: SearchTypes) => (
+                    {filteredData.map((result: SearchTypes) => (
                       <li
                         key={result.geo_id}
                         onClick={() => {

diff --git a/client/src/pages/atlas/components/main/tabs/search/styles.scss b/client/src/pages/atlas/components/main/tabs/search/styles.scss
@@ -16,10 +16,6 @@
     &:last-child {
       border-bottom: none;
     }
-
-    &:hover {
-      background-color: #f3f3f3;
-    }
   }
 }
 
@@ -29,14 +25,13 @@
     cursor: pointer;
     display: inline-block;
     list-style: none;
-    padding: 0 5px;
+    padding: 5px;
+    border-bottom: 3px solid transparent;
 
     &:hover {
-      background-color: #f3f3f3;
       border-bottom: 3px solid #a94645;
     }
     &.active {
-      background-color: var(--background-alt-grey-active);
       border-bottom: 3px solid #000091;
       transition: border-bottom 0.6s;
     }