imio.smartweb.core 1.2.47__py3-none-any.whl → 1.2.49__py3-none-any.whl

imio/smartweb/core/webcomponents/package.json

@@ -55,6 +55,7 @@
     "@loadable/component": "^5.16.3",
     "axios": "^1.6.8",
     "babel-polyfill": "^6.26.0",
+    "bootstrap-icons": "^1.11.3",
     "date-fns": "^3.6.0",
     "flexbin": "^0.2.0",
     "leaflet": "^1.9.4",

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

@@ -1,19 +1,16 @@
 import React, { useEffect, useState, useRef } from "react";
-import {
-    BrowserRouter,
-    Routes,
-    Route,
-} from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Filters from "./Filters/Filter";
 import ContactContent from "./ContactContent/ContactContent";
 import ContactList from "./ContactList/ContactList";
 import Map from "../../utils/Map";
 import useAxios from "../../hooks/useAxios";
 import "./Annuaire.scss";
+import "../Filters/MainFilter.scss";
 import useFilterQuery from "../../hooks/useFilterQuery";
 import { Provider, Translate } from "react-translated";
-import translation from '../../utils/translation';
-import queryString from 'query-string';
+import translation from "../../utils/translation";
+import queryString from "query-string";
 
 export default function Annuaire(props) {
     return (
@@ -104,15 +101,15 @@ function AnnuaireView(props) {
     }, [batchStart]);
 
     // filter top style
-    let portalHeader = document.getElementById("portal-header");
-    let portalHeaderHeight = portalHeader.offsetHeight;
-
     const filterRef = useRef();
     const [style, setStyle] = React.useState({ height: 0 });
+    const [headerHeight, setHeaderHeight] = useState(0);
+
     useEffect(() => {
         setStyle({
             height: filterRef.current.clientHeight,
         });
+        setHeaderHeight(filterRef.current.offsetTop);
     }, [filterRef.current]);
 
     // coditional list render
@@ -124,7 +121,7 @@ function AnnuaireView(props) {
         );
         MapRender = (
             <Map
-                headerHeight={style.height + portalHeaderHeight}
+                headerHeight={style.height + headerHeight}
                 clickId={clickId}
                 hoverId={hoverId}
                 items={contactArray}
@@ -132,16 +129,33 @@ function AnnuaireView(props) {
             />
         );
     } else if (!isLoading) {
-        listRender = <p><Translate text="Aucun contact n'a été trouvé" /></p>;
+        listRender = (
+            <p>
+                <Translate text="Aucun contact n'a été trouvé" />
+            </p>
+        );
     }
 
-    const divLoader = <div className="lds-roller-container"><div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>;
+    const divLoader = (
+        <div className="lds-roller-container">
+            <div className="lds-roller">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+    );
     return (
         <div className={`ref ${displayMap ? "view-map" : "no-map"}`}>
             <div
                 className="r-result-filter-container"
                 ref={filterRef}
-                style={{ top: portalHeaderHeight }}
+                style={{ top: headerHeight }}
             >
                 <div
                     id="r-result-filter"
@@ -152,81 +166,105 @@ function AnnuaireView(props) {
                         activeFilter={filters}
                         onChange={filtersChange}
                     />
-                    {props.proposeUrl &&
-                        (
-                            <div className="r-add-contact">
-                                <a target="_blank" rel="noreferrer" href={props.proposeUrl}><Translate text='Proposer un contact' /></a>
-                            </div>
-                        )
-                    }
+                    {props.proposeUrl && (
+                        <div className="r-add-contact">
+                            <a target="_blank" rel="noreferrer" href={props.proposeUrl}>
+                                <Translate text="Proposer un contact" />
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="16"
+                                    height="16"
+                                    fill="currentColor"
+                                    className="bi bi-plus-circle"
+                                    viewBox="0 0 16 16"
+                                >
+                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
+                                </svg>
+                            </a>
+                        </div>
+                    )}
                     {contactNumber > 0 ? (
                         <p className="r-results-numbers">
                             <span>{contactNumber}</span>
-                            {contactNumber > 1
-                                ? <Translate text='contacts trouvés' />
-                                : <Translate text='contact trouvé' />}
+                            {contactNumber > 1 ? (
+                                <Translate text="contacts trouvés" />
+                            ) : (
+                                <Translate text="contact trouvé" />
+                            )}
                         </p>
                     ) : (
-                        <p className="r-results-numbers"><Translate text='Aucun résultat' /></p>
+                        <p className="r-results-numbers">
+                            <Translate text="Aucun résultat" />
+                        </p>
                     )}
                 </div>
             </div>
             <Routes>
-                <Route exact path="/" element={
-                    <div className="r-wrapper container r-annuaire-wrapper">
-                        <div className="r-result r-annuaire-result">
-                            <div>{listRender}</div>
-                            <div className="r-load-more">
-                                {contactNumber - props.batchSize > batchStart ? (
-                                    <div>
+                <Route
+                    exact
+                    path="/"
+                    element={
+                        <div className="r-wrapper container r-annuaire-wrapper">
+                            <div className="r-result r-annuaire-result">
+                                <div>{listRender}</div>
+                                <div className="r-load-more">
+                                    {contactNumber - props.batchSize > batchStart ? (
+                                        <div>
+                                            <span className="no-more-result">
+                                                {isLoading ? divLoader : ""}
+                                            </span>
+                                            <button onClick={loadMore} className="btn-grad">
+                                                {isLoading ? (
+                                                    <Translate text="Chargement..." />
+                                                ) : (
+                                                    <Translate text="Plus de résultats" />
+                                                )}
+                                            </button>
+                                        </div>
+                                    ) : (
                                         <span className="no-more-result">
                                             {isLoading ? divLoader : ""}
                                         </span>
-                                        <button onClick={loadMore} className="btn-grad">
-                                            {isLoading ? <Translate text='Chargement...' /> : <Translate text='Plus de résultats' />}
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <span className="no-more-result">
-                                        {isLoading ? divLoader : ""}
-                                    </span>
-                                )}
+                                    )}
+                                </div>
                             </div>
+                            {displayMap && (
+                                <div
+                                    className="r-map annuaire-map"
+                                    style={{
+                                        top: style.height + headerHeight,
+                                        height: "calc(100vh-" + style.height + headerHeight,
+                                    }}
+                                >
+                                    {MapRender}
+                                </div>
+                            )}
                         </div>
-                        {displayMap && <div
-                            className="r-map annuaire-map"
-                            style={{
-                                top: style.height + portalHeaderHeight,
-                                height: "calc(100vh-" + style.height + portalHeaderHeight,
-                            }}
-                        >
-                            {MapRender}
-                        </div>
-                        }
-                    </div>
-                }>
-
-                </Route>
-                <Route path={"/:name"} element={
-                    <div className="r-wrapper container r-annuaire-wrapper">
-                        <div className="r-result r-annuaire-result">
-                            <ContactContent queryUrl={props.queryUrl} onChange={clickID} />
-                        </div>
-                        {displayMap && <div
-                            className="r-map annuaire-map"
-                            style={{
-                                top: style.height + portalHeaderHeight,
-                                height: "calc(100vh-" + style.height + portalHeaderHeight,
-                            }}
-                        >
-                            {MapRender}
+                    }
+                ></Route>
+                <Route
+                    path={"/:name"}
+                    element={
+                        <div className="r-wrapper container r-annuaire-wrapper">
+                            <div className="r-result r-annuaire-result">
+                                <ContactContent queryUrl={props.queryUrl} onChange={clickID} />
+                            </div>
+                            {displayMap && (
+                                <div
+                                    className="r-map annuaire-map"
+                                    style={{
+                                        top: style.height + headerHeight,
+                                        height: "calc(100vh-" + style.height + headerHeight,
+                                    }}
+                                >
+                                    {MapRender}
+                                </div>
+                            )}
                         </div>
-                        }
-                    </div>
-                }>
-
-                </Route>
+                    }
+                ></Route>
             </Routes>
         </div>
     );
-}
+}

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

@@ -36,18 +36,7 @@ body .outer-wrapper {
   padding: 0 !important;
 }
 
-.r-result-filter-container {
-  @media screen and (min-width:1200px) {
-    position: sticky;
-  }
 
-  background: #fff;
-  z-index: 1;
-}
-
-.annuaire-result-filter {
-  padding: 0 .75rem;
-}
 
 #portal-column-content {
   h1 {
@@ -83,17 +72,6 @@ article>header {
 
 /////////
 
-
-
-.r-results-numbers {
-  width: 100%;
-  margin-bottom: 0.5rem;
-
-  span {
-    font-weight: bold;
-  }
-}
-
 .r-wrapper {
   display: block;
 
@@ -142,6 +120,10 @@ article>header {
             z-index: -1;
             background-color: #000;
 
+            &.r-item-img-placeholder {
+              background: #f2f2f2;
+            }
+
             @media screen and (min-width:600px) {
               width: 246px;
               height: 149px;
@@ -383,6 +365,16 @@ article>header {
 
               .r-item-contact {
                 width: 100%;
+                .topics {
+                  margin-top: 10px;
+                  span {
+                    padding: 5px;
+                    background: #f1f1f1;
+                    border-radius: 5px;
+                    margin-right: 5px;
+                    
+                  }
+                }
               }
             }
           }

imio/smartweb/core/webcomponents/src/components/Annuaire/ContactCard/ContactCard.jsx

@@ -5,8 +5,7 @@ const ContactCard = ({ item }) => {
     const [image, setImage] = useState(new Image());
     const [imageClassName, setImageClassName] = useState("");
     const title = item.title && item.title;
-    const category =
-        item.taxonomy_contact_category && item.taxonomy_contact_category[0];
+    const category = item.taxonomy_contact_category && item.taxonomy_contact_category[0];
     const number = item.number ? item.number : "";
     const street = item.street ? item.street : "";
     const complement = item.complement ? item.complement : "";
@@ -15,7 +14,7 @@ const ContactCard = ({ item }) => {
     const phones = item.phones ? item.phones : "";
     const mails = item.mails ? item.mails : "";
     const topics = item.topics ? item.topics : "";
-    let countryTitle = item.country && item.country.title
+    let countryTitle = item.country && item.country.title;
     let itineraryLink =
         "https://www.google.com/maps/dir/?api=1&destination=" +
         item.street +
@@ -28,9 +27,9 @@ const ContactCard = ({ item }) => {
         "+" +
         item.city +
         "+" +
-        countryTitle
+        countryTitle;
 
-    itineraryLink = itineraryLink.replaceAll('+null', '')
+    itineraryLink = itineraryLink.replaceAll("+null", "");
 
     // Set image and image className
     useEffect(() => {
@@ -58,20 +57,25 @@ const ContactCard = ({ item }) => {
 
     return (
         <div className="r-list-item">
-            {image && image.src
-                ? <>
+            {image && image.src ? (
+                <>
                     <div className="r-item-img">
-                        <div className="r-content-figure-blur"
+                        <div
+                            className="r-content-figure-blur"
                             style={{ backgroundImage: "url(" + image.src + ")" }}
                         />
-                        <img className={"r-content-figure-img" + " " + imageClassName}
-                            src={image.src} alt="" />
+                        <img
+                            className={"r-content-figure-img" + " " + imageClassName}
+                            src={image.src}
+                            alt=""
+                        />
                     </div>
                 </>
-                : <>
+            ) : (
+                <>
                     <div className="r-item-img r-item-img-placeholder"></div>
                 </>
-            }
+            )}
             <div className="r-item-text">
                 <span className="r-item-title">{title}</span>
                 {category ? <span className="r-item-categorie">{category.title}</span> : ""}
@@ -97,23 +101,23 @@ const ContactCard = ({ item }) => {
                         <div className="phones">
                             {phones
                                 ? phones.map((phone, i) => {
-                                    return <span key={i}>{phone.number}</span>;
-                                })
+                                      return <span key={i}>{phone.number}</span>;
+                                  })
                                 : ""}
                         </div>
                         <div className="mails">
                             {mails
                                 ? mails.map((mail, i) => {
-                                    return <span key={i}>{mail.mail_address}</span>;
-                                })
+                                      return <span key={i}>{mail.mail_address}</span>;
+                                  })
                                 : ""}
                         </div>
                         <div className="topics">
-                            {topics
-                                ? topics.map((mail, i) => {
-                                    return <span key={i}>{mail.title}</span>;
+                        {topics
+                            ? topics.slice(0, 3).map((mail, i) => {
+                                return <span key={i}>{mail.title}</span>;
                                 })
-                                : ""}
+                            : ""}
                         </div>
                     </div>
                 </div>

imio/smartweb/core/webcomponents/src/components/Annuaire/ContactContent/ContactContent.jsx

@@ -128,7 +128,9 @@ const ContactContent = ({ queryUrl, onChange }) => {
                         <ReactMarkdown>{item.description}</ReactMarkdown>
                     </div>
                     <div className="contactTextAll">
-                        <p className="annuaire-info-title"><Translate text="Infos pratiques" /></p>
+                        <p className="annuaire-info-title">
+                            <Translate text="Infos pratiques" />
+                        </p>
                         {item.category ? <span>{item.category}</span> : ""}
                         {item.street ? (
                             <div className="annaire-adresse">
@@ -174,7 +176,7 @@ const ContactContent = ({ queryUrl, onChange }) => {
                                         width="16"
                                         height="16"
                                         fill="currentColor"
-                                        class="bi bi-clock-fill"
+                                        className="bi bi-clock-fill"
                                         viewBox="0 0 16 16"
                                     >
                                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
@@ -190,14 +192,14 @@ const ContactContent = ({ queryUrl, onChange }) => {
                                                         : "annuaire-day-open"
                                                 }
                                             >
-                                               <Translate text={item.schedule_for_today} />
+                                                <Translate text={item.schedule_for_today} />
                                             </span>
                                             <svg
                                                 xmlns="http://www.w3.org/2000/svg"
                                                 width="10"
                                                 height="10"
                                                 fill="currentColor"
-                                                class="bi bi-caret-down-fill"
+                                                className="bi bi-caret-down-fill"
                                                 viewBox="0 0 16 16"
                                             >
                                                 <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />

imio/smartweb/core/webcomponents/src/components/Annuaire/ContactList/ContactList.jsx

@@ -25,7 +25,12 @@ const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
                             className="r-list-item-link"
                             style={{ textDecoration: "none" }}
                             to={{
-                                pathname: "/" + removeAccents(item.title).replace(/[^a-zA-Z ]/g, "").replace(/\s/g, "-").toLowerCase(),
+                                pathname:
+                                    "/" +
+                                    removeAccents(item.title)
+                                        .replace(/[^a-zA-Z ]/g, "")
+                                        .replace(/\s/g, "-")
+                                        .toLowerCase(),
                                 search: `?u=${item.UID}`,
                                 state: {
                                     idItem: item.UID,
@@ -39,4 +44,4 @@ const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
         </React.Fragment>
     );
 };
-export default ContactList;
+export default ContactList;