imio.smartweb.core 1.4.4__py3-none-any.whl → 1.4.5__py3-none-any.whl

imio/smartweb/core/webcomponents/package.json

@@ -72,7 +72,7 @@
         "react-markdown": "^9.0.1",
         "react-moment": "^1.1.3",
         "react-router-dom": "^6.22.3",
-        "react-select": "^5.8.0",
+        "react-select": "^5.10.1",
         "react-translated": "^2.5.0",
         "react-web-component": "^2.0.2",
         "react-web-component-style-loader": "^0.1.4-alpha",

imio/smartweb/core/webcomponents/src/components/Annuaire/Annuaire.scss

@@ -117,7 +117,7 @@ article > header {
                         background-color: #000;
                         background-size: cover;
                         border-radius: 5px;
-                        
+
                         &.r-item-img-placeholder {
                             background-color: #f2f2f2;
                         }
@@ -300,6 +300,37 @@ article > header {
     }
 }
 
+.accordion-body-annuaire {
+    padding-top: 1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    span {
+        font-weight: bold;
+        margin-right: 0.5rem;
+    }
+    .taxonomy-Filter {
+        width: auto;
+    }
+}
+
+.more-filter-btn.more-filter-btn-annuaire {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    display: none;
+    @media screen and (max-width: 630px) {
+        display: flex;
+        margin-left: auto;
+        margin-bottom: 0.5rem;
+    }
+}
+.accordion-body-annuaire-title-full-screen {
+    @media screen and (max-width: 630px) {
+        display: none;
+    }
+}
 // FOR BLA
 
 .r-wrapper {

imio/smartweb/core/webcomponents/src/components/Annuaire/Filters/Filter.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useCallback, useState } from "react";
+import React, { useEffect, useRef, useCallback, useState, useMemo } from "react";
 import Select from "react-select";
 import { useNavigate } from "react-router-dom";
 import useAxios from "../../../hooks/useAxios";
 import { Translator } from "react-translated";
 import queryString from "query-string";
-// import TaxonomyFilter from "../../Filters/TaxonomyFilter";
+import TaxonomyFilter from "../../Filters/TaxonomyFilter";
 import { iam } from "./../../Filters/IamData";
 import { menuStyles, moreFilterStyles } from "./../../Filters/SelectStyles";
 
@@ -40,51 +40,68 @@ function formatData(data) {
 function Filters(props) {
     let navigate = useNavigate();
     const [inputValues, setInputValues] = useState(props.activeFilter);
+    const fixedParams = { b_start: 0, fullobjects: 1 };
     const [topicsFilter, setTopicsFilter] = useState([]);
-    // const [taxonomyData, setTaxonomyData] = useState(null);
+    const [taxonomyData, setTaxonomyData] = useState(null);
     const [taxonomyFilter, setTaxonomyFilter] = useState(null);
     const [facilitiesFilter, setFacilitiesFilter] = useState(null);
     const [cat, setCat] = useState(false);
     const [activeComponent, setActiveComponent] = useState(null);
-    const { response, error, isLoading } = useAxios({
-        method: "get",
-        url: "",
-        baseURL: props.url,
-        headers: {
-            Accept: "application/json",
-        },
-        params: inputValues,
-    });
+    const [isSmallScreen, setIsSmallScreen] = useState(false);
+    const axiosConfig = useMemo(
+        () => ({
+            method: "get",
+            url: "",
+            baseURL: props.url,
+            headers: {
+                Accept: "application/json",
+            },
+            params: fixedParams,
+        }),
+        [props.url]
+    );
 
-    useEffect(() => {
-        if (response !== null) {
-            const optionsTopics =
-                response.topics &&
-                response.topics.map((d) => ({
-                    value: d.token,
-                    label: d.title,
-                }));
+    const { response, error, isLoading } = useAxios(axiosConfig);
 
-            // const taxodonnee = formatData(response.taxonomy_contact_category);
-            const optionsTaxonomy =
-                response.taxonomy_contact_category &&
-                response.taxonomy_contact_category.map((d) => ({
-                    value: d.token,
-                    label: d.title,
-                }));
-            const optionsFacilities =
-                response.facilities &&
-                response.facilities.map((d) => ({
-                    value: d.token,
-                    label: d.title,
-                }));
-            setTopicsFilter(optionsTopics);
-            // setTaxonomyData(taxodonnee);
-            setTaxonomyFilter(optionsTaxonomy);
-            setFacilitiesFilter(optionsFacilities);
-        }
+    // Memoize the processed data
+    const processedData = useMemo(() => {
+        if (!response) return null;
+
+        const optionsTopics = response.topics?.map((d) => ({
+            value: d.token,
+            label: d.title,
+        }));
+
+        const taxodonnee = formatData(response.taxonomy_contact_category);
+
+        const optionsTaxonomy = response.taxonomy_contact_category?.map((d) => ({
+            value: d.token,
+            label: d.title,
+        }));
+
+        const optionsFacilities = response.facilities?.map((d) => ({
+            value: d.token,
+            label: d.title,
+        }));
+
+        return {
+            topics: optionsTopics,
+            taxonomy: optionsTaxonomy,
+            facilities: optionsFacilities,
+            taxodonnee,
+        };
     }, [response]);
 
+    // Update state when processed data changes
+    useEffect(() => {
+        if (processedData) {
+            setTopicsFilter(processedData.topics);
+            setTaxonomyData(processedData.taxodonnee);
+            setTaxonomyFilter(processedData.taxonomy);
+            setFacilitiesFilter(processedData.facilities);
+        }
+    }, [processedData]);
+
     // set values from search input
     const onChangeHandler = useCallback(({ target: { name, value } }) => {
         if (value.length > 2) {
@@ -100,6 +117,7 @@ function Filters(props) {
 
     // set values from select
     const onChangeHandlerSelect = useCallback((value, action) => {
+        console.log(value);
         const inputName = action.name;
         if (value) {
             setInputValues((state) => ({ ...state, [inputName]: value.value }), []);
@@ -150,6 +168,18 @@ function Filters(props) {
         setActiveComponent(index);
     };
 
+    // Check screen size on mount and resize
+    useEffect(() => {
+        const checkScreenSize = () => {
+            setIsSmallScreen(window.innerWidth <= 630);
+        };
+
+        checkScreenSize();
+        window.addEventListener("resize", checkScreenSize);
+
+        return () => window.removeEventListener("resize", checkScreenSize);
+    }, []);
+
     return (
         <React.Fragment>
             <div className="react-filters-menu">
@@ -186,29 +216,7 @@ function Filters(props) {
                             </svg>
                         </div>
                     </form>
-                    {/* More filter*/}
-                    <button
-                        className="more-filter-btn collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#collapseOne"
-                        aria-expanded="false"
-                        aria-controls="collapseOne"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 32 32"
-                            style={{ height: 16, width: 16 }}
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="3"
-                            aria-hidden="true"
-                            display="block"
-                            overflow="visible"
-                        >
-                            <path d="M7 16H3m26 0H15M29 6h-4m-8 0H3m26 20h-4M7 16a4 4 0 108 0 4 4 0 00-8 0zM17 6a4 4 0 108 0 4 4 0 00-8 0zm0 20a4 4 0 108 0 4 4 0 00-8 0zm0 0H3"></path>
-                        </svg>
-                    </button>
+
                     <div className="react-sep-menu"></div>
                     {/* Filtre Thématique */}
                     <div className="r-filter top-filter topics-Filter">
@@ -274,14 +282,54 @@ function Filters(props) {
             {/* More filter */}
 
             {/* Affichage dynamique des liens avec divs associées */}
+            {/* More filter*/}
+            <button
+                className="more-filter-btn more-filter-btn-annuaire collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapseOne"
+                aria-expanded="false"
+                aria-controls="collapseOne"
+            >
+                <span>
+                    <Translator>
+                        {({ translate }) => (
+                            <span>
+                                {translate({
+                                    text: "Catégories",
+                                })}
+                            </span>
+                        )}
+                    </Translator>
+                </span>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 32 32"
+                    style={{ height: 16, width: 16 }}
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    aria-hidden="true"
+                    display="block"
+                    overflow="visible"
+                >
+                    <path d="M7 16H3m26 0H15M29 6h-4m-8 0H3m26 20h-4M7 16a4 4 0 108 0 4 4 0 00-8 0zM17 6a4 4 0 108 0 4 4 0 00-8 0zm0 20a4 4 0 108 0 4 4 0 00-8 0zm0 0H3"></path>
+                </svg>
+            </button>
             <div
                 id="collapseOne"
-                className="accordion-collapse collapse more-filter-container "
+                className={`accordion-collapse ${isSmallScreen ? "collapse" : ""} more-filter-container`}
                 aria-labelledby="headingOne"
                 data-bs-parent="#accordionExample"
             >
-                <div className="accordion-body">
-                    {/* <div className="taxonomy-Filter">
+                <div className="accordion-body-annuaire">
+                    <span className="accordion-body-annuaire-title-full-screen">
+                        <Translator>
+                            {({ translate }) => <span>{translate({ text: "Catégories" })}</span>}
+                        </Translator>
+                    </span>
+
+                    <div className="taxonomy-Filter">
                         {taxonomyData &&
                             taxonomyData.map((donnees, i) => (
                                 <TaxonomyFilter
@@ -294,10 +342,10 @@ function Filters(props) {
                                     test={i}
                                 />
                             ))}
-                    </div> */}
-                    <div className="r-filter  facilities-Filter">
-                        {/* <label>Catégories</label> */}
-                        <Translator>
+                    </div>
+                    {/* <div className="r-filter  facilities-Filter"> */}
+                    {/* <label>Catégories</label> */}
+                    {/* <Translator>
                             {({ translate }) => (
                                 <Select
                                     styles={moreFilterStyles}
@@ -312,8 +360,8 @@ function Filters(props) {
                                     value={actTaxo && actTaxo[0]}
                                 />
                             )}
-                        </Translator>
-                    </div>
+                        </Translator> */}
+                    {/* </div> */}
                 </div>
             </div>
         </React.Fragment>

imio/smartweb/core/webcomponents/src/components/Filters/MainFilter.scss

@@ -41,7 +41,6 @@
 .react-filters-menu {
     display: flex;
     width: 100%;
-    margin-bottom: 1rem;
 
     .react-filters-container {
         display: flex;
@@ -178,12 +177,9 @@
         top: inherit;
     }
 
-    &.collapsed {
+    &.collapsed svg {
         transform: rotate(180deg);
-
-        svg {
-            stroke: #9f9f9f;
-        }
+        stroke: #9f9f9f;
     }
 }
 
@@ -197,9 +193,9 @@
         gap: 20px;
         align-items: center;
         padding: 1rem;
-        background-color: #f8f8f8;
+        // background-color: #f8f8f8;
         justify-content: center;
-        border: solid 1px #e4e4e4;
+        // border-bottom: solid 1px #e4e4e4;
         border-left: none;
         border-right: none;
 

imio/smartweb/core/webcomponents/src/components/Filters/TaxonomyFilter.jsx

@@ -1,94 +1,147 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import PropTypes from "prop-types";
 import Select from "react-select";
 import "./TaxonomyFilter.scss";
 
 function TaxonomyFilter({ onChange, sub, title, token, isActive, setCat, onClick }) {
-    const [select1Value, setSelect1Value] = useState(null);
-    const [select2Value, setSelect2Value] = useState(null);
-    const [select3Value, setSelect3Value] = useState(null);
-    const [firstLevelOptions, setFirstLevelOptions] = useState(null);
-    const [secondLevelOptions, setSecondLevelOptions] = useState(null);
-    // État pour suivre l'affichage de la div associée
-    const [secondLevelVisible, setsecondLevelVisible] = useState(false);
-    const [thirdLevelVisible, setThirdLevelVisible] = useState(false);
-    //  const avev la valeur des filtres
-    const [filterValue, setFilterValue] = useState({
-        taxonomy_contact_category_for_filtering: null,
+    // Regroupement des états liés
+    const [selectValues, setSelectValues] = useState({
+        first: null,
+        second: null,
+        third: null,
     });
 
-    // Object { b_start: "0", fullobjects: "1", taxonomy_contact_category_for_filtering: "ol8av3v8bn" }
+    const [visibility, setVisibility] = useState({
+        secondLevel: false,
+        thirdLevel: false,
+    });
+
+    const [options, setOptions] = useState({
+        firstLevel: null,
+        secondLevel: null,
+    });
+
+    // Mémoisation des options du premier niveau
+    const firstLevelOptions = useMemo(() => {
+        if (!sub) return null;
+        return sub.map((d) => ({
+            value: d.token,
+            label: d.title,
+            ...(d.sub && { sub: d.sub }),
+        }));
+    }, [sub]);
+
+    // Gestionnaires d'événements avec useCallback
+    const handleLinkClick = useCallback(() => {
+        setVisibility((prev) => ({
+            secondLevel: !prev.secondLevel,
+            thirdLevel: false,
+        }));
+        setSelectValues((prev) => ({
+            ...prev,
+            second: null,
+            third: null,
+        }));
+    }, []);
+
+    const onChangeSub1 = useCallback(
+        (value, action) => {
+            // console.log(value);
+            if (value?.sub) {
+                const secondLevelOptions = value.sub.map((d) => ({
+                    value: d.token,
+                    label: d.title,
+                }));
+                setSelectValues((prev) => ({
+                    ...prev,
+                    second: value.label,
+                    third: null,
+                }));
+                setOptions((prev) => ({
+                    ...prev,
+                    secondLevel: secondLevelOptions,
+                }));
+                setVisibility((prev) => ({
+                    ...prev,
+                    thirdLevel: true,
+                }));
+                onChange(value, action);
+            } else {
+                setSelectValues((prev) => ({
+                    ...prev,
+                    second: value.label,
+                    third: null,
+                }));
+                setOptions((prev) => ({
+                    ...prev,
+                    secondLevel: null,
+                }));
+                onChange(value, action);
+            }
+        },
+        [onChange]
+    );
+
+    const onChangeSub2 = useCallback(
+        (value, action) => {
+            setSelectValues((prev) => ({
+                ...prev,
+                third: value.label,
+            }));
+            onChange(value, action);
+        },
+        [onChange]
+    );
+
+    const handleApply = useCallback(
+        (value, title) => {
+            setCat((prev) => !prev);
+            if (!visibility.secondLevel) {
+                onChange(
+                    { value, label: title },
+                    { name: "taxonomy_contact_category_for_filtering" }
+                );
+            } else {
+                onChange(null, { name: "taxonomy_contact_category_for_filtering" });
+            }
+        },
+        [visibility.secondLevel, onChange, setCat]
+    );
 
-    // Dans le composant TaxonomyFilter
+    // Effet pour réinitialiser l'état quand isActive change
     useEffect(() => {
         if (!isActive) {
-            setsecondLevelVisible(false);
-            setThirdLevelVisible(false);
-            setSelect2Value(null);
+            setVisibility({
+                secondLevel: false,
+                thirdLevel: false,
+            });
+            setSelectValues((prev) => ({
+                ...prev,
+                second: null,
+                third: null,
+            }));
         }
     }, [isActive]);
 
+    // Effet pour mettre à jour les options du premier niveau
     useEffect(() => {
         if (sub) {
-            const optionsSub1 = sub.map((d) => ({
-                value: d.token,
-                label: d.title,
-                ...(d.sub && { sub: d.sub }),
+            setOptions((prev) => ({
+                ...prev,
+                firstLevel: firstLevelOptions,
             }));
-            setFirstLevelOptions(optionsSub1);
         }
-    }, [sub]);
-    // Gestionnaire d'événements pour le clic sur le lien
-    const handleLinkClick = () => {
-        // Inverser la valeur de l'état pour afficher ou masquer la div
-        setsecondLevelVisible(!secondLevelVisible);
-        setSelect2Value(null);
-        setThirdLevelVisible(false);
-    };
-
-    // Gestionnaire d'événements pour le changement de valeur dans le premier select
-    const onChangeSub1 = (value, action) => {
-        if (value && value.sub) {
-            const optionsSub2 = value.sub.map((d) => ({
-                value: d.token,
-                label: d.title,
-            }));
-            setSelect2Value(value.label);
-            setSelect3Value(null);
-            setSecondLevelOptions(optionsSub2);
-            setThirdLevelVisible(true);
-            onChange(value, action);
-        } else {
-            setSecondLevelOptions(null);
-        }
-    };
-
-    // Gestionnaire d'événements pour le changement de valeur dans le deuxième select
-    const onChangeSub2 = (value, action) => {
-        setSelect3Value(value.label);
-        onChange(value, action);
-    };
-
-    // send the value to the first level (a link)
-    const handleApply = (value, title) => {
-        setCat((prevCat) => !prevCat);
-        if (!secondLevelVisible) {
-            onChange(
-                { value: value, label: title },
-                { name: "taxonomy_contact_category_for_filtering" }
-            );
-        } else {
-            onChange(null, { name: "taxonomy_contact_category_for_filtering" });
-        }
-    };
+    }, [sub, firstLevelOptions]);
 
     return (
         <div onClick={onClick}>
             <div
                 className={
-                    secondLevelVisible ? "dropDownFilter dropDownFilter-active" : "dropDownFilter"
+                    visibility.secondLevel
+                        ? "dropDownFilter dropDownFilter-active"
+                        : "dropDownFilter"
                 }
             >
-                {/* Lien avec gestionnaire d'événements */}
                 <a
                     className="sub0"
                     href="#"
@@ -96,48 +149,56 @@ function TaxonomyFilter({ onChange, sub, title, token, isActive, setCat, onClick
                     onClick={(e) => {
                         e.preventDefault();
                         handleLinkClick();
-                        handleApply(token, title); // Pass the correct value to handleApply
+                        handleApply(token, title);
                     }}
                 >
                     {title}
                 </a>
 
-                {/* Div conditionnellement rendue en fonction de l'état */}
-                {firstLevelOptions && (
+                {options.firstLevel && (
                     <div
                         className={
-                            secondLevelVisible
+                            visibility.secondLevel
                                 ? "sub1 dropDownFilter-visible"
                                 : "sub1 dropDownFilter-invisble"
                         }
                     >
                         <Select
-                            name={"taxonomy_contact_category_for_filtering"}
-                            className="select-custom-class library-facilities"
+                            name="taxonomy_contact_category_for_filtering"
+                            className={`select-custom-class library-facilities react-select-container ${
+                                selectValues.second && selectValues.second !== "Catégories"
+                                    ? "select-has-value"
+                                    : ""
+                            }`}
+                            classNamePrefix="react-select-custom-multi"
                             onChange={onChangeSub1}
-                            options={firstLevelOptions}
-                            value={select2Value}
-                            placeholder={select2Value ? select2Value : "Catégories"}
+                            options={options.firstLevel}
+                            value={selectValues.second}
+                            placeholder={selectValues.second ? selectValues.second : "Catégories"}
                         />
                     </div>
                 )}
 
-                {/* Div 3 conditionnellement rendue en fonction de l'état */}
-                {secondLevelOptions && (
+                {options.secondLevel && (
                     <div
                         className={
-                            thirdLevelVisible
+                            visibility.thirdLevel
                                 ? "sub2 dropDownFilter-visible"
                                 : "sub2 dropDownFilter-invisble"
                         }
                     >
                         <Select
-                            name={"taxonomy_contact_category_for_filtering"}
-                            className="select-custom-class library-facilities"
+                            name="taxonomy_contact_category_for_filtering"
+                            className={`react-custom-multi-select-container library-facilities ${
+                                selectValues.third && selectValues.third !== "Catégories"
+                                    ? "select-has-value"
+                                    : ""
+                            }`}
+                            classNamePrefix="react-select-custom-multi"
                             onChange={onChangeSub2}
-                            options={secondLevelOptions}
-                            value={select3Value}
-                            placeholder={select3Value ? select3Value : "Catégories"}
+                            options={options.secondLevel}
+                            value={selectValues.third}
+                            placeholder={selectValues.third ? selectValues.third : "Catégories"}
                         />
                     </div>
                 )}
@@ -146,4 +207,25 @@ function TaxonomyFilter({ onChange, sub, title, token, isActive, setCat, onClick
     );
 }
 
+TaxonomyFilter.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    sub: PropTypes.arrayOf(
+        PropTypes.shape({
+            token: PropTypes.string.isRequired,
+            title: PropTypes.string.isRequired,
+            sub: PropTypes.array,
+        })
+    ),
+    title: PropTypes.string.isRequired,
+    token: PropTypes.string.isRequired,
+    isActive: PropTypes.bool,
+    setCat: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+};
+
+TaxonomyFilter.defaultProps = {
+    isActive: false,
+    onClick: () => {},
+};
+
 export default TaxonomyFilter;