feat: addd search by region & add sidebar anchors for finance and man…

…dataires
SocialGouv · Jan 19, 2024 · 47bb9c2 · 47bb9c2
1 parent 3e04971
commit 47bb9c2
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 41 deletions.
diff --git a/src/client/src/components/DataSheets/Sections/Enterprise/Infos/EnterpriseInfos.js b/src/client/src/components/DataSheets/Sections/Enterprise/Infos/EnterpriseInfos.js
@@ -47,7 +47,6 @@ const EnterpriseInfos = ({ enterprise: baseEntreprise }) => {
         const element = document.getElementById("mandataires");
         const headerOffset =
           document.getElementById("header")?.offsetHeight || 0; // Dynamic header height
-        console.log(document.getElementById("header"));
         if (element) {
           const position = element.offsetTop - headerOffset; // Subtract header height
           window.scrollTo({
@@ -77,6 +76,36 @@ const EnterpriseInfos = ({ enterprise: baseEntreprise }) => {
         window.removeEventListener("resize", checkAndScroll);
       };
     }
+    if (location.pathname.includes("enterprise") && hash === "#finance-data") {
+      const checkAndScroll = () => {
+        const element = document.getElementById("finance-data");
+        const headerOffset =
+          document.getElementById("header")?.offsetHeight || 0; // Dynamic header height
+        if (element) {
+          const position = element.offsetTop - headerOffset; // Subtract header height
+          window.scrollTo({
+            behavior: "smooth",
+            top: position,
+          });
+          return true;
+        }
+        return false;
+      };
+
+      if (!checkAndScroll()) {
+        const interval = setInterval(() => {
+          if (checkAndScroll()) {
+            clearInterval(interval);
+          }
+        }, 100);
+      }
+
+      window.addEventListener("resize", checkAndScroll);
+
+      return () => {
+        window.removeEventListener("resize", checkAndScroll);
+      };
+    }
   }, [location]);
 
   const siren = getSiren(baseEntreprise);

diff --git a/src/client/src/components/DataSheets/Sections/Enterprise/Infos/Finances/Finances.js b/src/client/src/components/DataSheets/Sections/Enterprise/Infos/Finances/Finances.js
@@ -139,7 +139,7 @@ const Finances = ({ siret, siren }) => {
     });
   }
   return (
-    <>
+    <div id="finance-data">
       {hasBilan_K && (
         <span className="text">
           Cette entreprise déclare un bilan consolidé, voir sur{" "}
@@ -222,7 +222,7 @@ const Finances = ({ siret, siren }) => {
           Non disponible
         </p>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/src/client/src/components/DataSheets/Sidebar/Sidebar.js b/src/client/src/components/DataSheets/Sidebar/Sidebar.js
@@ -92,6 +92,43 @@ const Sidebar = ({
                 }}
               >
                 Entreprise
+                {!isEntrepriseDisplayed && (
+                  <div className="anchors">
+                    <div>
+                      <span className="ellipse-span">
+                        <EllipseIconAside color={"#e3e3fd"} />
+                      </span>
+                      <a
+                        href={`/enterprise/${siren}#finance-data`}
+                        className={"active-anchor"}
+                      >
+                        {"Données financières"}
+                      </a>
+                    </div>
+                    <div>
+                      <span className="ellipse-span">
+                        <EllipseIconAside color={"#e3e3fd"} />
+                      </span>
+                      <a
+                        href={`/enterprise/${siren}#mandataires`}
+                        className={"active-anchor"}
+                      >
+                        {"Mandataires"}
+                      </a>
+                    </div>
+                    <div>
+                      <span className="ellipse-span">
+                        <EllipseIconAside color={"#e3e3fd"} />
+                      </span>
+                      <a
+                        href={`/enterprise/${siren}`}
+                        className={"active-anchor"}
+                      >
+                        {"..."}
+                      </a>
+                    </div>
+                  </div>
+                )}
               </button>
               {isEntrepriseDisplayed && (
                 <div className="anchors">

diff --git a/src/client/src/components/DataSheets/Sidebar/sidebar.scss b/src/client/src/components/DataSheets/Sidebar/sidebar.scss
@@ -183,7 +183,4 @@ $border-color: var(--border-color);
             margin-bottom: $spacing-3;
         }
     }
-
-
-
 }
diff --git a/src/client/src/components/Search/Filters/LocationFilter.js b/src/client/src/components/Search/Filters/LocationFilter.js
@@ -7,13 +7,16 @@ import Config from "../../../services/Config";
 import {
   searchCommune,
   searchDepartement,
+  searchRegion,
+  serachDepartementsByRegion,
 } from "../../../services/LocationSearch/LocationSearch";
 import { selectCustomStyles } from "./customStyles";
 
 const searchLocation = async (query) => {
-  const [departements, communes] = await Promise.all([
+  const [departements, communes, regions] = await Promise.all([
     searchDepartement(query),
     searchCommune(query),
+    searchRegion(query),
   ]);
   const formattedDepartements = departements.map(({ code, nom }) => ({
     label: `${nom} (${code})`,
@@ -26,10 +29,22 @@ const searchLocation = async (query) => {
     type: "commune",
     value: code,
   }));
+  const formattedRegions = regions?.map(({ code, nom }) => ({
+    label: nom,
+    type: "region",
+    value: code,
+  }));
 
   const options = [];
 
   if (formattedDepartements.length > 0) {
+    if (formattedRegions.length > 0) {
+      options.push({
+        label: "REGIONS",
+        options: formattedRegions,
+      });
+    }
+
     options.push({
       label: "DÉPARTEMENTS",
       options: formattedDepartements,
@@ -48,34 +63,72 @@ const searchLocation = async (query) => {
 
 const throttledSearch = pDebounce(searchLocation, 300);
 
-const LocationFilter = ({ filters, addFilter, removeFilter }) => (
-  <div className="control  is-expanded select-control-field ">
-    <AsyncSelect
-      id="location"
-      name="location"
-      placeholder={<div className="select_placeholder">Zone géographique</div>}
-      isMulti
-      defaultOptions={[]}
-      loadOptions={throttledSearch}
-      onChange={(location) => {
-        location ? addFilter("location", location) : removeFilter("location");
-      }}
-      components={{
-        IndicatorSeparator: () => null,
-      }}
-      loadingMessage={() => "Chargement..."}
-      noOptionsMessage={(term) =>
-        term.inputValue.length >= Config.get("advancedSearch").minTerms
-          ? "Aucun résultat"
-          : `Veuillez saisir au moins ${
-              Config.get("advancedSearch").minTerms
-            } caractères`
-      }
-      value={filters?.location || []}
-      styles={selectCustomStyles}
-    />
-  </div>
-);
+const LocationFilter = ({ filters, addFilter, removeFilter }) => {
+  const addAddress = (locations) => {
+    Promise.all(
+      locations.map(async (loc) => {
+        const { type, value, label, regions } = loc;
+
+        if (type === "region" && !regions) {
+          try {
+            const data = await serachDepartementsByRegion(value);
+            const departementsResult = data.map(({ code, nom }) => ({
+              label: `${nom} (${code})`,
+              type: "departement",
+              value: code,
+            }));
+
+            return {
+              label: label,
+              regions: departementsResult,
+              type: type,
+              value: value,
+            };
+          } catch (error) {
+            console.error("Error fetching departements:", error);
+            return loc; // Return the original location in case of an error
+          }
+        } else {
+          return loc; // Return the original location for non-region types
+        }
+      })
+    ).then((updatedLocations) => {
+      // Update the filter with the new array of locations
+      addFilter("location", updatedLocations);
+    });
+  };
+
+  return (
+    <div className="control  is-expanded select-control-field ">
+      <AsyncSelect
+        id="location"
+        name="location"
+        placeholder={
+          <div className="select_placeholder">Zone géographique</div>
+        }
+        isMulti
+        defaultOptions={[]}
+        loadOptions={throttledSearch}
+        onChange={(location) => {
+          location ? addAddress(location) : removeFilter("location");
+        }}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+        loadingMessage={() => "Chargement..."}
+        noOptionsMessage={(term) =>
+          term.inputValue.length >= Config.get("advancedSearch").minTerms
+            ? "Aucun résultat"
+            : `Veuillez saisir au moins ${
+                Config.get("advancedSearch").minTerms
+              } caractères`
+        }
+        value={filters?.location || []}
+        styles={selectCustomStyles}
+      />
+    </div>
+  );
+};
 
 LocationFilter.propTypes = {
   addFilter: PropTypes.func.isRequired,

diff --git a/src/client/src/containers/Search/Search.js b/src/client/src/containers/Search/Search.js
@@ -25,12 +25,18 @@ const XLSX_DOC_TYPE =
 
 const formatLocationFilter = (filters) => {
   const locationFilters = groupBy(filters.location, "type");
+  const codesCommunes = locationFilters?.commune?.map(prop("value")) || [];
+  const departements = [
+    ...(locationFilters?.departement?.map(prop("value")) || []),
+    ...(locationFilters?.region?.flatMap((regionItem) =>
+      regionItem.regions.map((region) => region.value)
+    ) || []),
+  ];
+
   return {
     ...omit(filters, "location"),
-    codesCommunes: normalizeCodeCommunes(
-      locationFilters?.commune?.map(prop("value")) || []
-    ),
-    departements: locationFilters?.departement?.map(prop("value")) || [],
+    codesCommunes: normalizeCodeCommunes(codesCommunes),
+    departements,
   };
 };
 
@@ -40,7 +46,6 @@ const Search = () => {
 
   const { filters, addFilter, removeFilter, removeFilters } =
     useSearchFilters();
-
   const { sortField, sortDirection, toggleSortField } = useSort();
 
   const { data, loading, error, makeQuery, query } = useSearchQuery();

diff --git a/src/client/src/services/LocationSearch/LocationSearch.js b/src/client/src/services/LocationSearch/LocationSearch.js
@@ -4,6 +4,7 @@ const API_BASE_URL = "https://geo.api.gouv.fr";
 
 const DEPARTEMENTS_URL = `${API_BASE_URL}/departements`;
 const COMMUNES_URL = `${API_BASE_URL}/communes`;
+const REGIONS_URL = `${API_BASE_URL}/regions`;
 
 const requestApi = async (url, params) => {
   try {
@@ -24,13 +25,28 @@ const searchDepartementByName = (nom) =>
     limit: 5,
     nom,
   });
-
+export const serachDepartementsByRegion = (code) => {
+  return requestApi(`${REGIONS_URL}/${code}/departements`);
+};
 const searchDepartmentByCodePostal = (code) =>
   requestApi(DEPARTEMENTS_URL, {
     code,
     fields: "nom,code",
     limit: 5,
   });
+const searchRegionByName = (nom) =>
+  requestApi(REGIONS_URL, {
+    fields: "nom,code",
+    limit: 5,
+    nom,
+  });
+
+const searchRegionByCodePostal = (code) =>
+  requestApi(REGIONS_URL, {
+    code,
+    fields: "nom,code",
+    limit: 5,
+  });
 
 export const searchDepartement = (query) =>
   isNaN(query)
@@ -44,6 +60,8 @@ const searchCommuneByName = (nom) =>
     limit: 30,
     nom,
   });
+export const searchRegion = (query) =>
+  isNaN(query) ? searchRegionByName(query) : searchRegionByCodePostal(query);
 
 const searchCommuneByCodePostal = (codePostal) =>
   requestApi(COMMUNES_URL, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -183,7 +183,4 @@ $border-color: var(--border-color); @@
                 margin-bottom: $spacing-3;
             }
         }
     }