imio.smartweb.core 1.2.12__py3-none-any.whl → 1.2.19__py3-none-any.whl

imio/smartweb/core/webcomponents/src/components/Events/{ContactContent/ContactContent.jsx → EventContent/EventContent.jsx}

@@ -16,9 +16,9 @@ const ContactContent = ({ queryUrl, onChange }) => {
 		{ UID: queryString.parse(useFilterQuery().toString())['u'], fullobjects: 1 },
 	);
 	const [params, setParams] = useState(parsed);
-	const [contactItem, setcontactItem] = useState({});
-	const [files, setFiles] = useState(0);
-	const [gallery, setGallery] = useState(0);
+	const [item, setitem] = useState({});
+	const [files, setFiles] = useState();
+	const [gallery, setGallery] = useState();
 	const { response, error, isLoading } = useAxios(
 		{
 			method: "get",
@@ -37,40 +37,40 @@ const ContactContent = ({ queryUrl, onChange }) => {
 	// set all contacts state
 	useEffect(() => {
 		if (response !== null) {
-			setcontactItem(response.items[0]);
+			setitem(response.items[0]);
 		}
 		window.scrollTo(0, 0);
 	}, [response]);
 
 	/// use to set file and gallery items
 	useEffect(() => {
-		if (contactItem.items && contactItem.items.length > 0) {
-			setFiles(contactItem.items.filter(files => files['@type'] === 'File'));
-			setGallery(contactItem.items.filter(files => files['@type'] === 'Image'));
+		if (item.items && item.items.length > 0) {
+			setFiles(item.items.filter(files => files['@type'] === 'File'));
+			setGallery(item.items.filter(files => files['@type'] === 'Image'));
 		}
-	}, [contactItem]);
+	}, [item]);
 
-	function handleClick() {
-		history.push("./");
-		onChange(null);
-	}
+    function handleClick() {
+        history.push("./");
+        onChange(null);
+    }
 	moment.locale('be');
-	const start = moment.utc(contactItem.start).format('DD-MM-YYYY');
-	const end = moment.utc(contactItem.end).format('DD-MM-YYYY');
-	const startHours = moment.utc(contactItem.start).format('LT');
-	const endHours = moment.utc(contactItem.end).format('LT');
+	const start = moment.utc(item.start).format('DD-MM-YYYY');
+	const end = moment.utc(item.end).format('DD-MM-YYYY');
+	const startHours = moment.utc(item.start).format('LT');
+	const endHours = moment.utc(item.end).format('LT');
 
 	let itineraryLink =
 		"https://www.google.com/maps/dir/?api=1&destination=" +
-		contactItem.street +
+		item.street +
 		"+" +
-		contactItem.number +
+		item.number +
 		"+" +
-		contactItem.complement +
+		item.complement +
 		"+" +
-		contactItem.zipcode +
+		item.zipcode +
 		"+" +
-		contactItem.city
+		item.city
 	itineraryLink = itineraryLink.replaceAll('+null', '')
 
 	return (
@@ -80,14 +80,14 @@ const ContactContent = ({ queryUrl, onChange }) => {
 			</button>
 			<article>
 				<header>
-					<h2 className="r-content-title">{contactItem.title}</h2>
+					<h2 className="r-content-title">{item.title}</h2>
 				</header>
 				<figure>
 					<div
 						className="r-content-img"
 						style={{
-							backgroundImage: contactItem.image_affiche_scale
-								? "url(" + contactItem.image_affiche_scale + ")"
+							backgroundImage: item.image_affiche_scale
+								? "url(" + item.image_affiche_scale + ")"
 								: "",
 						}}
 					/>
@@ -110,12 +110,12 @@ const ContactContent = ({ queryUrl, onChange }) => {
 								<div className="r-content-news-info--date">
 									{start === end
 										? (<div>
-											{contactItem.whole_day
+											{item.whole_day
 												? <div className="r-content-date-start">
 													<span>Le&nbsp;</span>
 													<div className="r-time">{start}</div>
 												</div>
-												: contactItem.open_end ?
+												: item.open_end ?
 													<>
 														<div className="r-content-date-one-day">
 															<div className="r-content-date-start">
@@ -160,7 +160,7 @@ const ContactContent = ({ queryUrl, onChange }) => {
 						</div>
 						{/* adress */}
 						<div className="r-content-news-info-aera">
-							{contactItem.street ? (
+							{item.street ? (
 								<div className="icon-baseline">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -175,7 +175,7 @@ const ContactContent = ({ queryUrl, onChange }) => {
 
 							<div className="dpinlb">
 								<div className="r-content-news-info--itinirary">
-									{contactItem.street ? (
+									{item.street ? (
 										<a href={itineraryLink} target="_blank">
 											<span>Itinéraire</span>
 										</a>
@@ -183,7 +183,7 @@ const ContactContent = ({ queryUrl, onChange }) => {
 										""
 									)}
 								</div>
-								{contactItem.reduced_mobility_facilities === true ? (
+								{item.reduced_mobility_facilities === true ? (
 									<div className="r-content-news-info--reduced">
 										<span><Translate text="Accessible aux PMR" /></span>
 									</div>
@@ -196,26 +196,26 @@ const ContactContent = ({ queryUrl, onChange }) => {
 						<div className="r-content-news-info-contact">
 							<div className="dpinlb">
 								<div className="r-content-news-info--name">
-									<span>{contactItem.contact_name}</span>
+									<span>{item.contact_name}</span>
 								</div>
 								<div className="r-content-news-info--phone">
 									<span>
-										<a href={`tel:${contactItem.contact_phone}`}>
-											{contactItem.contact_phone}
+										<a href={`tel:${item.contact_phone}`}>
+											{item.contact_phone}
 										</a>
 									</span>
 								</div>
 								<div className="r-content-news-info--email">
-									<a href={`mailto:${contactItem.contact_email}`}>
-										{contactItem.contact_email}
+									<a href={`mailto:${item.contact_email}`}>
+										{item.contact_email}
 									</a>
 								</div>
 							</div>
 						</div>
 						{/* link  */}
-						{contactItem.event_url === null &&
-							contactItem.online_participation === null &&
-							contactItem.video_url === null ? (
+						{item.event_url === null &&
+							item.online_participation === null &&
+							item.video_url === null ? (
 							""
 						) : (
 							<div className="r-content-news-info-link">
@@ -228,27 +228,27 @@ const ContactContent = ({ queryUrl, onChange }) => {
 									</svg>
 								</div>
 								<div className="dpinlb">
-									{contactItem.event_url === null ? (
+									{item.event_url === null ? (
 										""
 									) : (
 										<div className="r-content-news-info-event_link">
-											<a href={contactItem.event_url}><Translate text="Lien de l'événement" /></a>
+											<a href={item.event_url}><Translate text="Lien de l'événement" /></a>
 										</div>
 									)}
-									{contactItem.online_participation === null ? (
+									{item.online_participation === null ? (
 										""
 									) : (
 										<div className="r-content-news-info--online_participation">
-											<a href={contactItem.online_participation}>
+											<a href={item.online_participation}>
 												<Translate text="Participation en ligne" />
 											</a>
 										</div>
 									)}
-									{contactItem.video_url === null ? (
+									{item.video_url === null ? (
 										""
 									) : (
 										<div className="r-content-news-info--video">
-											<a href={contactItem.video_url}><Translate text="Lien vers la vidéo" /></a>
+											<a href={item.video_url}><Translate text="Lien vers la vidéo" /></a>
 										</div>
 									)}
 								</div>
@@ -256,18 +256,18 @@ const ContactContent = ({ queryUrl, onChange }) => {
 						)}
 
 						{/* Social */}
-						{contactItem.facebook === null &&
-							contactItem.instagram === null &&
-							contactItem.twitter === null ? (
+						{item.facebook === null &&
+							item.instagram === null &&
+							item.twitter === null ? (
 							""
 						) : (
 							<div className="r-content-news-info-social">
 								<ul>
-									{!contactItem.facebook ? (
+									{!item.facebook ? (
 										""
 									) : (
 										<li>
-											<a href={contactItem.facebook} target="_blank">
+											<a href={item.facebook} target="_blank">
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
 													height="800"
@@ -286,11 +286,11 @@ const ContactContent = ({ queryUrl, onChange }) => {
 											</a>
 										</li>
 									)}
-									{!contactItem.instagram ? (
+									{!item.instagram ? (
 										""
 									) : (
 										<li>
-											<a href={contactItem.instagram} target="_blank">
+											<a href={item.instagram} target="_blank">
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
 													height="800"
@@ -305,11 +305,11 @@ const ContactContent = ({ queryUrl, onChange }) => {
 											</a>
 										</li>
 									)}
-									{!contactItem.twitter ? (
+									{!item.twitter ? (
 										""
 									) : (
 										<li>
-											<a href={contactItem.twitter} target="_blank">
+											<a href={item.twitter} target="_blank">
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
 													height="800"
@@ -330,9 +330,9 @@ const ContactContent = ({ queryUrl, onChange }) => {
 					</div>
 					{/* booking */}
 					<div className="r-content-news-info-action">
-						{contactItem.ticket_url ? (
+						{item.ticket_url ? (
 							<div className="r-content-booking">
-								<a href={contactItem.ticket_url}>
+								<a href={item.ticket_url}>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 19.41 19.41"
@@ -355,43 +355,38 @@ const ContactContent = ({ queryUrl, onChange }) => {
 					</div>
 				</div>
 				<div className="r-content-description">
-					<ReactMarkdown>{contactItem.description}</ReactMarkdown>
+					<ReactMarkdown>{item.description}</ReactMarkdown>
 				</div>
 				<div
 					className="r-content-text"
 					dangerouslySetInnerHTML={{
-						__html: contactItem.text && contactItem.text.data,
+						__html: item.text && item.text.data,
 					}}
 				></div>
 				{/* add files to download */}
-				{
-					files ? (
-						<div className="r-content-files">
-							{files.map((file) => (
-								<div className="r-content-file">
-									<a href={file.targetUrl} className="r-content-file-link" rel="nofollow">
-										<span className="r-content-file-title">{file.title}</span>
-										{/* <span className="r-content-file-size">{file.file.size}</span> */}
-										<span className="r-content-file-icon"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg> </span>
-									</a>
-								</div>
-							))}
-						</div>
-					) : ("")
+				{files &&
+					<div className="r-content-files">
+						{files.map((file, i) => (
+							<div key={i} className="r-content-file">
+								<a href={file.targetUrl} className="r-content-file-link" rel="nofollow">
+									<span className="r-content-file-title">{file.title}</span>
+									<span className="r-content-file-icon"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg> </span>
+								</a>
+							</div>
+						))}
+					</div>
 				}
 				{/* add gallery */}
-				{
-					gallery ? (
-						<div className="r-content-gallery">
-							<div className="spotlight-group flexbin r-content-gallery">
-								{gallery.map((image) => (
-									<a className="spotlight" href={image.image_full_scale}>
-										<img src={image.image_preview_scale} />
-									</a>
-								))}
-							</div>
+				{gallery &&
+					<div className="r-content-gallery">
+						<div className="spotlight-group flexbin r-content-gallery">
+							{gallery.map((image, i) => (
+								<a key={i} className="spotlight" href={image.image_extralarge_scale}>
+									<img src={image.image_vignette_scale} />
+								</a>
+							))}
 						</div>
-					) : ("")
+					</div>
 				}
 			</article>
 		</div>

imio/smartweb/core/webcomponents/src/components/Events/{ContactList/ContactList.jsx → EventList/EventList.jsx}

@@ -1,8 +1,8 @@
-import ContactCard from "../ContactCard/ContactCard";
+import EventCard from "../EventCard/EventCard";
 import { Link } from "react-router-dom";
 import React from "react";
 import removeAccents from "remove-accents";
-const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
+const ContactList = ({ itemsArray, onChange, onHover, parentCallback }) => {
     function handleClick(event) {
         onChange(event);
     }
@@ -13,26 +13,26 @@ const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
     return (
         <React.Fragment>
             <ul className="r-result-list event-result-list">
-                {contactArray.map((contactItem, i) => (
+                {itemsArray.map((item, i) => (
                     <li
                         key={i}
                         className="r-list-item-group"
-                        onMouseEnter={() => handleHover(contactItem.UID)}
+                        onMouseEnter={() => handleHover(item.UID)}
                         onMouseLeave={() => handleHover(null)}
-                        onClick={() => handleClick(contactItem.UID)}
+                        onClick={() => handleClick(item.UID)}
                     >
                         <Link
                             className="r-list-item-link"
                             style={{ textDecoration: "none" }}
                             to={{
-                                pathname: removeAccents(contactItem.title).replace(/[^a-zA-Z ]/g, "").replace(/\s/g, "-").toLowerCase(),
-                                search: `?u=${contactItem.UID}`,
+                                pathname: removeAccents(item.title).replace(/[^a-zA-Z ]/g, "").replace(/\s/g, "-").toLowerCase(),
+                                search: `?u=${item.UID}`,
                                 state: {
-                                    idItem: contactItem.UID,
+                                    idItem: item.UID,
                                 },
                             }}
                         ></Link>
-                        <ContactCard contactItem={contactItem} key={contactItem.created} />
+                        <EventCard item={item} key={item.created} />
                     </li>
                 ))}
             </ul>

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
-import { HashRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Filters from "./Filters/Filter";
-import ContactContent from "./ContactContent/ContactContent";
-import ContactList from "./ContactList/ContactList";
-import ContactMap from "./ContactMap/ContactMap";
+import EventContent from "./EventContent/EventContent";
+import EventList from "./EventList/EventList";
+import Map from "../../utils/Map";
 import useAxios from "../../hooks/useAxios";
 import "./Events.scss";
 import useFilterQuery from "../../hooks/useFilterQuery";
@@ -12,7 +12,7 @@ import translation from '../../utils/translation';
 
 export default function Events(props) {
     return (
-        <Router>
+        <Router basename={props.viewPath}>
             <Provider language={props.currentLanguage} translation={translation}>
                 <EventsView
                     queryFilterUrl={props.queryFilterUrl}
@@ -31,14 +31,14 @@ function EventsView(props) {
         { b_start: 0, fullobjects: 1 },
         queryString.parse(useFilterQuery().toString())
     );
-    const [contactArray, setcontactArray] = useState([]);
-    const [contactNumber, setcontactNumber] = useState([]);
+    const [itemsArray, setItemsArray] = useState([]);
+    const [itemsNumber, setItemsNumber] = useState([]);
     const [clickId, setClickId] = useState(null);
     const [hoverId, setHoverId] = useState(null);
     const [filters, setFilters] = useState(parsed);
     const [batchStart, setBatchStart] = useState(0);
     const [loadMoreLaunch, setLoadMoreLaunch] = useState(false);
-    const displayMap =  props.displayMap === "True" ? true : false;
+    const displayMap = props.displayMap === "True" ? true : false;
     const { response, error, isLoading, isMore } = useAxios(
         {
             method: "get",
@@ -57,11 +57,11 @@ function EventsView(props) {
     useEffect(() => {
         if (response !== null) {
             if (isMore) {
-                setcontactArray((contactArray) => [...contactArray, ...response.items]);
+                setItemsArray((itemsArray) => [...itemsArray, ...response.items]);
             } else {
-                setcontactArray(response.items);
+                setItemsArray(response.items);
             }
-            setcontactNumber(response.items_total);
+            setItemsNumber(response.items_total);
         }
     }, [response]);
 
@@ -78,7 +78,7 @@ function EventsView(props) {
     // set state filters when active filter selection
     const filtersChange = (value) => {
         setLoadMoreLaunch(false);
-        setBatchStart((batchStart) => 0);
+        setBatchStart(() => 0);
         setFilters(value);
         window.scrollTo(0, 0);
     };
@@ -104,7 +104,7 @@ function EventsView(props) {
     let portalHeaderHeight = portalHeader.offsetHeight;
 
     const filterRef = useRef();
-    const [style, setStyle] = React.useState({ height:0 });
+    const [style, setStyle] = React.useState({ height: 0 });
     useEffect(() => {
         setStyle({
             height: filterRef.current.clientHeight,
@@ -114,16 +114,17 @@ function EventsView(props) {
     // coditional list render
     let listRender;
     let MapRender;
-    if (contactArray && contactArray.length > 0) {
+    if (itemsArray && itemsArray.length > 0) {
         listRender = (
-            <ContactList onChange={clickID} contactArray={contactArray} onHover={hoverID} />
+            <EventList onChange={clickID} itemsArray={itemsArray} onHover={hoverID} />
         );
         MapRender = (
-            <ContactMap
+            <Map
                 headerHeight={style.height + portalHeaderHeight}
                 clickId={clickId}
                 hoverId={hoverId}
-                items={contactArray}
+                items={itemsArray}
+                queryUrl={props.queryUrl}
             />
         );
     } else if (!isLoading) {
@@ -131,95 +132,95 @@ function EventsView(props) {
     }
 
     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 (
-        <Router>
-            <div className={`ref ${displayMap ? "view-map" : "no-map"}`}>
+        <div className={`ref ${displayMap ? "view-map" : "no-map"}`}>
+            <div
+                className="r-result-filter-container"
+                ref={filterRef}
+                style={{ top: portalHeaderHeight }}
+            >
                 <div
-                    className="r-result-filter-container"
-                    ref={filterRef}
-                    style={{ top: portalHeaderHeight }}
+                    id="r-result-filter"
+                    className="r-result-filter container annuaire-result-filter"
                 >
-                    <div
-                        id="r-result-filter"
-                        className="r-result-filter container annuaire-result-filter"
-                    >
-                        <Filters
-                            url={props.queryFilterUrl}
-                            activeFilter={filters}
-                            onChange={filtersChange}
-                        />
-                        {props.proposeUrl &&
-                            (
-                                <div className="r-add-event">
-                                    <a target="_blank" href={props.proposeUrl}><Translate text='Proposer un événement' /></a>
-                                </div>
-                            )
-                        }
-                        {contactNumber > 0 ? (
-                            <p className="r-results-numbers">
-                                <span>{contactNumber}</span>
-                                {contactNumber > 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>
-                </div>
-                <Switch>
-                    <Route path={"/:name"}>
-                        <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}
+                    <Filters
+                        url={props.queryFilterUrl}
+                        activeFilter={filters}
+                        onChange={filtersChange}
+                    />
+                    {props.proposeUrl &&
+                        (
+                            <div className="r-add-event">
+                                <a target="_blank" href={props.proposeUrl}><Translate text='Proposer un événement' /></a>
                             </div>
-                            }
-                        </div>
-                    </Route>
-                    <Route exact path="*">
-                        <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>
-                                    ) : (
+                        )
+                    }
+                    {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>
+            </div>
+            <Switch>
+
+                <Route exact path="/">
+                    <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>
                                         <span className="no-more-result">
                                             {isLoading ? divLoader : ""}
                                         </span>
-                                    )}
-                                </div>
-                            </div>
-                           {displayMap && <div
-                                className="r-map annuaire-map"
-                                style={{
-                                    top: style.height + portalHeaderHeight,
-                                    height: "calc(100vh-" + style.height + portalHeaderHeight,
-                                }}
-                            >
-                                {MapRender}
+                                        <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>
-                    </Route>
-                </Switch>
-            </div>
-        </Router>
+                        {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"}>
+                    <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}
+                        </div>
+                        }
+                    </div>
+                </Route>
+            </Switch>
+        </div>
     );
 }

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

@@ -280,7 +280,7 @@ article > header {
 // content
 
 .r-content-img{
-  padding-bottom: 56.25%;
+  padding-bottom: 60%;
 }
 .r-content-title{
   margin: 1rem 0;