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

imio/smartweb/core/webcomponents/src/components/Events/EventList/EventList.jsx

@@ -2,7 +2,7 @@ import EventCard from "../EventCard/EventCard";
 import { Link } from "react-router-dom";
 import React from "react";
 import removeAccents from "remove-accents";
-const ContactList = ({ itemsArray, onChange, onHover,showCategoriesOrTopics }) => {
+const ContactList = ({ itemsArray, onChange, onHover, showCategoriesOrTopics }) => {
     function handleClick(event) {
         onChange(event);
     }
@@ -25,18 +25,27 @@ const ContactList = ({ itemsArray, onChange, onHover,showCategoriesOrTopics }) =
                             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,
                                 },
                             }}
                         ></Link>
-                        <EventCard item={item} showCategoriesOrTopics={showCategoriesOrTopics} key={item.created} />
+                        <EventCard
+                            item={item}
+                            showCategoriesOrTopics={showCategoriesOrTopics}
+                            key={item.created}
+                        />
                     </li>
                 ))}
             </ul>
         </React.Fragment>
     );
 };
-export default ContactList;
+export default ContactList;

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

@@ -1,21 +1,17 @@
 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 EventContent from "./EventContent/EventContent";
 import EventList from "./EventList/EventList";
 import Map from "../../utils/Map";
 import useAxios from "../../hooks/useAxios";
 import "./Events.scss";
+import "../Filters/MainFilter.scss";
 import useFilterQuery from "../../hooks/useFilterQuery";
 import { Provider, Translate } from "react-translated";
-import translation from '../../utils/translation';
+import translation from "../../utils/translation";
 import moment from "moment";
-import queryString from 'query-string';
-
+import queryString from "query-string";
 
 export default function Events(props) {
     return (
@@ -37,7 +33,12 @@ export default function Events(props) {
 }
 function EventsView(props) {
     const { u, ...parsed } = Object.assign(
-        { b_start: 0, fullobjects: 1, "event_dates.query": [moment().format('YYYY-MM-DD')], "event_dates.range": props.onlyPastEvents === "True" ? "max" : "min"},
+        {
+            b_start: 0,
+            fullobjects: 1,
+            "event_dates.query": [moment().format("YYYY-MM-DD")],
+            "event_dates.range": props.onlyPastEvents === "True" ? "max" : "min",
+        },
         queryString.parse(useFilterQuery().toString())
     );
     const [itemsArray, setItemsArray] = useState([]);
@@ -110,15 +111,14 @@ function EventsView(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
@@ -126,11 +126,16 @@ function EventsView(props) {
     let MapRender;
     if (itemsArray && itemsArray.length > 0) {
         listRender = (
-            <EventList onChange={clickID} itemsArray={itemsArray} onHover={hoverID} showCategoriesOrTopics={props.showCategoriesOrTopics} />
+            <EventList
+                onChange={clickID}
+                itemsArray={itemsArray}
+                onHover={hoverID}
+                showCategoriesOrTopics={props.showCategoriesOrTopics}
+            />
         );
         MapRender = (
             <Map
-                headerHeight={style.height + portalHeaderHeight}
+                headerHeight={style.height + headerHeight}
                 clickId={clickId}
                 hoverId={hoverId}
                 items={itemsArray}
@@ -138,16 +143,32 @@ function EventsView(props) {
             />
         );
     } else if (!isLoading) {
-        listRender = <p><Translate text="Aucun événement n'a été trouvé" /></p>;
+        listRender = (
+            <p>
+                <Translate text="Aucun événement 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"
@@ -160,80 +181,105 @@ function EventsView(props) {
                         language={props.language}
                         onlyPastEvents={props.onlyPastEvents}
                     />
-                    {props.proposeUrl &&
-                        (
-                            <div className="r-add-event">
-                                <a target="_blank" href={props.proposeUrl}><Translate text='Proposer un événement' /></a>
-                            </div>
-                        )
-                    }
-                    {itemsNumber > 0 ? (
-                        <p className="r-results-numbers">
-                            <span>{itemsNumber}</span>
-                            {itemsNumber > 1
-                                ? <Translate text='événements trouvés' />
-                                : <Translate text='événement trouvé' />}
-                        </p>
-                    ) : (
-                        <p className="r-results-numbers"><Translate text='Aucun résultat' /></p>
+                    {props.proposeUrl && (
+                        <div className="r-add-event">
+                            <a target="_blank" href={props.proposeUrl}>
+                                <Translate text="Proposer un événement" />
+                                <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>
                     )}
                 </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">
-                                {itemsNumber - props.batchSize > batchStart ? (
-                                    <div>
+                <Route
+                    exact
+                    path="/"
+                    element={
+                        <div className="r-wrapper container r-annuaire-wrapper">
+                            <div className="r-result r-annuaire-result">
+                                {itemsNumber > 0 ? (
+                                    <p className="r-results-numbers">
+                                        <span>{itemsNumber}</span>
+                                        {itemsNumber > 1 ? (
+                                            <Translate text="événements trouvés" />
+                                        ) : (
+                                            <Translate text="événement trouvé" />
+                                        )}
+                                    </p>
+                                ) : (
+                                    <p className="r-results-numbers">
+                                        <Translate text="Aucun résultat" />
+                                    </p>
+                                )}
+                                <div>{listRender}</div>
+                                <div className="r-load-more">
+                                    {itemsNumber - 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">
-                            <EventContent 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">
+                                <EventContent queryUrl={props.queryUrl} onChange={clickID} onlyPastEvents={props.onlyPastEvents} />
+                            </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/Events/Events.scss

@@ -36,18 +36,6 @@ 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,14 +71,7 @@ article>header {
 
 
 /////////
-.r-results-numbers {
-  width: 100%;
-  margin-bottom: 0.5rem;
 
-  span {
-    font-weight: bold;
-  }
-}
 
 .r-wrapper {
   display: block;
@@ -112,15 +93,6 @@ article>header {
     margin-top: 2rem;
     padding-bottom: 2rem;
 
-    &-filter {
-      display: flex;
-      gap: 20px;
-
-      .r-filter {
-        width: 100%;
-      }
-    }
-
     &-list {
       padding: 0;
 
@@ -147,6 +119,10 @@ article>header {
             width: 100%;
             padding-bottom: 56%;
 
+            &.r-item-img-placeholder {
+              background: #f2f2f2;
+            }
+
             @media screen and (min-width:600px) {
               width: 246px;
               height: 149px;
@@ -327,6 +303,54 @@ article>header {
   vertical-align: top;
 }
 
+.r-recurence-past {
+  opacity: 0.5;
+}
+
+.recurence-schedul {
+  position: relative;
+}
+
+.recurence-schedul-more {
+  display: block;
+}
+
+.recurence-modal-display {
+  background-color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: max-content;
+  padding: 10px 15px !important;
+  box-shadow:
+    0.7px 0px 5.3px rgba(0, 0, 0, 0.024),
+    2.5px 0px 17.9px rgba(0, 0, 0, 0.036),
+    11px 0px 80px rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  border: solid 1px #dadada;
+
+  span {
+    font-size: 14px;
+    color: #000;
+    border-bottom: solid 1px #969696;
+    margin-bottom: 0.4rem;
+    display: block;
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+}
+
+.recurence-modal-hide {
+  display: none;
+}
+
 //// for bla ////
 // content
 
@@ -334,8 +358,16 @@ article>header {
   padding-bottom: 60%;
 }
 
+.r-content-header {
+  margin-bottom: 1rem;
+}
+
 .r-content-title {
-  margin: 1rem 0;
+  margin: 0;
+}
+
+.r-content-recur-start-hours {
+  display: flex;
 }
 
 .news-info-title {
@@ -447,6 +479,24 @@ article>header {
   }
 }
 
+.r-content-topics {
+  display: flex;
+  gap: 15px;
+
+  span {
+    padding: 5px;
+    background: #f1f1f1;
+    border-radius: 5px;
+    margin-right: 5px;
+  }
+}
+
+.r-content-title-cat {
+  color: #8e8e8e;
+  margin-right: 5px;
+  font-size: 14px;
+}
+
 // //  No Map
 //   // Main
 .no-map {