feat: add dirgeant filter + entreprise tille filter + fix search bye …

…CORSE location
SocialGouv · Dec 15, 2023 · 7ef0015 · 7ef0015
1 parent 66f2a39
commit 7ef0015
Show file tree

Hide file tree

Showing 17 changed files with 446 additions and 198 deletions.
diff --git a/src/client/src/components/App/Breadcrumbs/Breadcrumbs.jsx b/src/client/src/components/App/Breadcrumbs/Breadcrumbs.jsx
@@ -36,7 +36,7 @@ const Breadcrumbs = () => {
           <span>
             {location.pathname.includes("establishment")
               ? "Fiche établissement"
-              : location.pathname.includes("entreprise") && "Fiche entreprise"}
+              : location.pathname.includes("enterprise") && "Fiche entreprise"}
           </span>
         </div>
       )}

diff --git a/src/client/src/components/App/_variables.scss b/src/client/src/components/App/_variables.scss
@@ -81,7 +81,7 @@ $font-size-title: 1.5rem;
 $segoe: "Segoe Pro", sans-serif;
 $evolventa: "Evolventa", sans-serif;
 $roboto: Roboto, sans-serif;
-$marianne: Marianne, arial, sans-serif;
+$marianne: "Marianne", arial, sans-serif;
 
 /* SPACING (values from Bulma) */
 $spacing-1: map-get($spacing-values, "1"); // 0.25rem

diff --git a/src/client/src/components/DataSheets/Sections/Enterprise/Infos/EnterpriseInfos.js b/src/client/src/components/DataSheets/Sections/Enterprise/Infos/EnterpriseInfos.js
@@ -1,6 +1,7 @@
 import { merge } from "lodash";
 import PropTypes from "prop-types";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router";
 
 import Association from "../../../../../containers/Association/Association";
 import { formatSiret, formatTva } from "../../../../../helpers/utils";
@@ -38,6 +39,45 @@ import ObservationRCS from "./ObservationRCS";
 
 const EnterpriseInfos = ({ enterprise: baseEntreprise }) => {
   const [accordionOpen, setAccordionOpen] = useState(true);
+  const location = useLocation();
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (location.pathname.includes("enterprise") && hash === "#mandataires") {
+      const checkAndScroll = () => {
+        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({
+            behavior: "smooth",
+            top: position,
+          });
+          return true;
+        }
+        return false;
+      };
+
+      // Check if element is available and scroll to it
+      if (!checkAndScroll()) {
+        // If element is not available, set an interval to check again
+        const interval = setInterval(() => {
+          if (checkAndScroll()) {
+            clearInterval(interval); // Clear interval once the element is found
+          }
+        }, 100); // Check every 100ms
+      }
+
+      // Add resize event listener
+      window.addEventListener("resize", checkAndScroll);
+
+      // Clean up interval and remove event listener on component unmount
+      return () => {
+        window.removeEventListener("resize", checkAndScroll);
+      };
+    }
+  }, [location]);
 
   const siren = getSiren(baseEntreprise);
 

diff --git a/src/client/src/components/DataSheets/Sections/Enterprise/Infos/Mandataires/Mandataires.js b/src/client/src/components/DataSheets/Sections/Enterprise/Infos/Mandataires/Mandataires.js
@@ -9,7 +9,7 @@ import NonBorderedTable from "../../../SharedComponents/NonBorderedTable/NonBord
 
 const Mandataires = ({ mandataires }) => {
   return mandataires && mandataires.length ? (
-    <div className="data-sheet--table">
+    <div id="mandataires" className="data-sheet--table">
       <NonBorderedTable isScrollable={mandataires.length > 7}>
         <thead>
           <tr>

diff --git a/src/client/src/components/DataSheets/Sections/SharedComponents/Subcategory/Subcategory.js b/src/client/src/components/DataSheets/Sections/SharedComponents/Subcategory/Subcategory.js
@@ -16,9 +16,10 @@ const Subcategory = ({
   sourceCustom = null,
   sourceDate = null,
   className = "",
+  id = "",
 }) => {
   return (
-    <div className={classNames("subcategory", className)}>
+    <div id={id} className={classNames("subcategory", className)}>
       {subtitle && (
         <div className="subcategory__header">
           <h3 className="subcategory__title has-text-dark-blue">{subtitle}</h3>
@@ -61,6 +62,7 @@ Subcategory.propTypes = {
   className: PropTypes.string,
   datas: PropTypes.arrayOf(PropTypes.object),
   hasDateImport: PropTypes.bool,
+  id: PropTypes.string,
   sourceCustom: PropTypes.string,
   sourceDate: PropTypes.string,
   sourceSi: PropTypes.string,

diff --git a/src/client/src/components/Search/Filters/AdministartionFilter.jsx b/src/client/src/components/Search/Filters/AdministartionFilter.jsx
@@ -6,23 +6,26 @@ import React, { useEffect, useRef, useState } from "react";
 import ArrowDown from "../../shared/Icons/ArrowDown.jsx";
 
 const AdministartionFilter = ({
-  onFromSubmit,
+  onFormSubmit,
   removeFilters,
+  id,
   label,
   children,
   customFilters,
   addSaveClearButton = true,
+  filters,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const dropdownRef = useRef(null);
+
   const handleSubmit = (e) => {
-    setShowMenu(!showMenu);
-    onFromSubmit(e);
+    setShowMenu((prevShowMenu) => !prevShowMenu);
+    onFormSubmit(e);
   };
 
   const onToggleMenu = (e) => {
     e.preventDefault();
-    setShowMenu(!showMenu);
+    setShowMenu((prevShowMenu) => !prevShowMenu);
   };
 
   const handleClickOutside = (e) => {
@@ -42,11 +45,27 @@ const AdministartionFilter = ({
   const childrenWithProps = React.Children.map(children, (child) =>
     React.cloneElement(child, { onToggleMenu })
   );
+
+  const getButtonLabel = () => {
+    if (id === "dirigeant") {
+      if (
+        filters["dirigeant"]?.nom !== "" ||
+        filters["dirigeant"]?.prenom !== ""
+      )
+        return (
+          (filters["dirigeant"] &&
+            `${filters["dirigeant"].nom} ${filters["dirigeant"].prenom}`) ||
+          label
+        );
+    }
+    return label;
+  };
+
   return (
     <div className="custom-dropdown" id="custom-dropdown" ref={dropdownRef}>
       <div className=" select-control-field">
         <button className="custom-dropdown-button" onClick={onToggleMenu}>
-          {label}
+          {getButtonLabel()}
           <span>
             <ArrowDown size={18} color="#161616" />
           </span>
@@ -69,7 +88,7 @@ const AdministartionFilter = ({
                 onClick={(e) => {
                   e.preventDefault();
                   removeFilters(customFilters);
-                  setShowMenu(!showMenu);
+                  setShowMenu((prevShowMenu) => !prevShowMenu);
                 }}
               >
                 Supprimer
@@ -94,8 +113,10 @@ AdministartionFilter.propTypes = {
   addSaveClearButton: PropTypes.bool,
   children: PropTypes.node,
   customFilters: PropTypes.arrayOf(PropTypes.string),
+  filters: PropTypes.object,
+  id: PropTypes.string,
   label: PropTypes.string,
-  onFromSubmit: PropTypes.func,
+  onFormSubmit: PropTypes.func,
   removeFilters: PropTypes.func.isRequired,
 };
 

diff --git a/src/client/src/components/Search/Filters/AdministartionFilter.scss b/src/client/src/components/Search/Filters/AdministartionFilter.scss
@@ -73,6 +73,7 @@
     -moz-border-radius: 3px;
     border-radius: 3px;
     width: 480px;
+    max-width: 100%;
     z-index: 1000;
     .filter__siege_button {
         input {
@@ -92,6 +93,8 @@
         overflow-y: auto;
         padding:4px ;
         margin-bottom: $spacing-5;
+        width: 100%;
+
     }
     .form-inputs {
         display: flex;

diff --git a/src/client/src/components/Search/Filters/DirigeantFromFilter.js b/src/client/src/components/Search/Filters/DirigeantFromFilter.js
@@ -1,46 +1,49 @@
 import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 const DirigeantFromFilter = ({
   removeFilter,
   addFilter,
   id,
   filters,
   onToggleMenu,
+  onFormSubmit,
 }) => {
   const [dirigeant, setDirigeant] = useState({
-    dmax: "",
-    dmin: "",
-    nom: filters?.dirigeant?.nom,
-    prenom: filters?.dirigeant?.prenom,
+    nom: filters?.dirigeant?.nom || "",
+    prenom: filters?.dirigeant?.prenom || "",
   });
-  useEffect(() => {
-    setDirigeant({
-      nom: filters?.dirigeant?.nom,
-      prenom: filters?.dirigeant?.prenom,
-    });
-  }, [filters]);
+
   const submitDirigeant = (e) => {
     e.preventDefault();
-    addFilter(id, dirigeant);
     onToggleMenu(e);
+    onFormSubmit(e);
   };
 
   const reset = (e) => {
     e.preventDefault();
-    setDirigeant({ dmax: "", dmin: "", nom: "", prenom: "" });
+    setDirigeant({ nom: "", prenom: "" });
     removeFilter(id);
     onToggleMenu(e);
+    onFormSubmit(e);
   };
+
   const handleInputChange = (fieldName, e) => {
-    e.persist();
-    setDirigeant((prev) => ({
-      ...prev,
-      [fieldName]: e.target?.value ? e.target.value : "",
-    }));
+    e.persist(); // If you're using React 17 or newer, this line is not necessary
+
+    setDirigeant((prev) => {
+      const updatedDirigeant = {
+        ...prev,
+        [fieldName]: e.target?.value,
+      };
+
+      addFilter(id, updatedDirigeant);
+
+      return updatedDirigeant;
+    });
   };
 
-  const { nom, prenom, dmax, dmin } = dirigeant;
+  const { nom, prenom } = dirigeant;
 
   return (
     <div>
@@ -67,26 +70,7 @@ const DirigeantFromFilter = ({
           className="custom-dropdown-button "
         />
       </div>
-      <div className="form-date-inputs">
-        <label htmlFor={id}>Né(e) entre :</label>
-        <div className="form-inputs">
-          <input
-            id={`${id}-start`}
-            type="date"
-            value={dmin}
-            onChange={(e) => handleInputChange("dmin", e)}
-            className="custom-dropdown-button "
-          />
-          &nbsp;et&nbsp;
-          <input
-            id={`${id}-end`}
-            value={dmax}
-            type="date"
-            onChange={(e) => handleInputChange("dmax", e)}
-            className="custom-dropdown-button "
-          />
-        </div>
-      </div>
+
       <div className="form-buttons">
         <button onClick={reset}>Effacer</button>
 
@@ -103,9 +87,10 @@ DirigeantFromFilter.propTypes = {
   filters: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
+  onFormSubmit: PropTypes.func.isRequired,
+  onToggleMenu: PropTypes.func.isRequired,
   placeholder: PropTypes.string.isRequired,
   removeFilter: PropTypes.func.isRequired,
-  onToggleMenu: PropTypes.func.isRequired,
 };
 
 export default DirigeantFromFilter;