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

imio/smartweb/core/webcomponents/src/index.scss

@@ -1,275 +1,292 @@
-.portaltype-imio-smartweb-directoryview{
-  #portal-header{
-    margin-bottom: 0!important;
-  }
-  #portal-breadcrumbs{
-    margin-bottom: 0!important;
-    .breadcrumb{
-      margin-bottom: 0!important;
+.portaltype-imio-smartweb-directoryview {
+    #portal-header {
+        margin-bottom: 0 !important;
+    }
+
+    #portal-breadcrumbs {
+        margin-bottom: 0 !important;
+
+        .breadcrumb {
+            margin-bottom: 0 !important;
+        }
     }
-  }
 }
 
-/* Filters */
-.r-wrapper{
-  position: relative;
-  figure{
-    display: block;
-  }
+.r-wrapper {
+    position: relative;
+
+    figure {
+        display: block;
+    }
 }
-.r-result-filter-container,
+
 .r-actu-wrapper {
-  padding-top: 1rem;
+    padding-top: 1rem;
 }
+
 .r-result {
-  position: relative;
-  &-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding-bottom: 20px;
-    border-bottom: solid 1px #cccc;
-    align-items: center;
-    .r-filter {
-      width: 100%;
-      max-width: 200px;
-      label {
-        display: block;
-      }
-      .r-filter-search {
-        position: relative;
-        .input-custom-class {
-          line-height: 50px;
-          border: 1px solid #CCCCCC;
-          height: 50px;
-          padding: 0 10px;
-          font-weight: bold;
-          color: #000;
-          width: 100%;
-          letter-spacing: 1.2px;
-          &::placeholder {
-            color: #000;
-            font-size: 12px;
-            opacity: 1;
-            text-transform: uppercase;
-            letter-spacing: '1.2px';
-          }
-        }
-        button {
-          background: url(./assets/search.svg) no-repeat;
-          background-position: center;
-          background-size: 80%;
-          border: none;
-          width: 20px;
-          position: absolute;
-          right: 10px;
-          top: 0;
-          bottom: 0;
-        }
-      }
+    position: relative;
+}
 
+.r-add-event,
+.r-add-news,
+.r-add-contact {
+    @media screen and (min-width: 992px) {
+        position: absolute;
+        right: 0;
+        bottom: 0px;
+        padding-bottom: 1rem;
+    }
+    a {
+        color: #2d2d2d;
+        text-decoration: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 7px;
+        &:hover,
+        &:focus {
+            text-decoration: underline;
+        }
     }
-  }
-}
-.r-add-event,.r-add-news,.r-add-contact{
-  a{
-    background: #000;
-    color: #fff;
-    text-decoration: none;
-    padding: 1rem;
-  }
 }
+
 /* list item */
 .r-list-item-link {
-  inset: 0px !important;
-  position: absolute !important;
+    inset: 0px !important;
+    position: absolute !important;
 }
+
 .r-list-item-group {
-  margin: 15px 0;
-  position: relative;
+    margin: 15px 0;
+    position: relative;
 }
+
 .r-list-item {
-  display: flex;
-  height: 100%;
-  align-items: stretch;
+    display: flex;
+    height: 100%;
+    align-items: stretch;
 }
+
 /* load-more-link */
 .load-more-link {
-  background: transparent;
-  margin: 0 auto;
-  border: none;
-  display: block;
+    background: transparent;
+    margin: 0 auto;
+    border: none;
+    display: block;
 }
 
 //// for bla ////
-/* filters */
-.r-filter {
-  label {
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 13px;
-    margin-bottom: 10px;
-  }
-}
+
 // content
 .r-content-description {
-  font-weight: 500;
+    font-weight: 500;
 }
+
 .r-wrapper .r-result-list .r-list-item-group .r-list-item .r-item-text {
-  flex: min-content;
+    flex: min-content;
 }
 
 // map
 
 .leaflet-popup {
-  padding: 0 !important;
+    padding: 0 !important;
 }
+
 .leaflet-container {
-  opacity: 1 !important;
+    opacity: 1 !important;
 }
 
-
 // Flies and gallery
 
+.r-content-files {
+    margin: 2rem 0;
 
-.r-content-files{
-  margin: 2rem 0;
-  &-title{
-    margin-bottom: 1rem;
-  }
-  .r-content-file{
-    margin: 1rem 0;
-    &-link{
-      text-decoration: none;
-      display: flex;
-      gap: 20px;
-      padding: 1rem;
-      border: solid 1px #e6e6e6;
-      justify-content: space-between;
-      &:hover{
-        border: solid 1px #868686;
-      }
+    &-title {
+        margin-bottom: 1rem;
+    }
+
+    .r-content-file {
+        margin: 1rem 0;
+
+        &-link {
+            text-decoration: none;
+            display: flex;
+            gap: 20px;
+            padding: 1rem;
+            border: solid 1px #e6e6e6;
+            justify-content: space-between;
+
+            &:hover {
+                border: solid 1px #868686;
+            }
+        }
+    }
+
+    span {
+        display: block;
     }
-  }
-  span{
-    display: block;
-  }
 }
 
-.r-content-gallery{
-  margin: 2rem 0;
-  &.flexbin > * > img {
-    height: 226px;
-  }
-  &.flexbin > * {
-    height: 226px;
-  }
+.r-content-gallery {
+    margin: 2rem 0;
+
+    &.flexbin > * > img {
+        height: 226px;
+    }
+
+    &.flexbin > * {
+        height: 226px;
+    }
 }
 
 //  loaer
-.lds-roller-container{
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: hsla(0, 0%, 100%, 0.82);
+.lds-roller-container {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: hsla(0, 0%, 100%, 0.82);
 }
+
 .lds-roller {
-  display: inline-block;
-  position: absolute;
-  width: 80px;
-  height: 80px;
-  top: 5rem;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 0;
+    display: inline-block;
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    top: 5rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 0;
 }
+
 .lds-roller div {
-  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  transform-origin: 40px 40px;
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
 }
+
 .lds-roller div:after {
-  content: " ";
-  display: block;
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: rgb(51, 51, 51);
-  margin: -4px 0 0 -4px;
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: rgb(51, 51, 51);
+    margin: -4px 0 0 -4px;
 }
+
 .lds-roller div:nth-child(1) {
-  animation-delay: -0.036s;
+    animation-delay: -0.036s;
 }
+
 .lds-roller div:nth-child(1):after {
-  top: 63px;
-  left: 63px;
+    top: 63px;
+    left: 63px;
 }
+
 .lds-roller div:nth-child(2) {
-  animation-delay: -0.072s;
+    animation-delay: -0.072s;
 }
+
 .lds-roller div:nth-child(2):after {
-  top: 68px;
-  left: 56px;
+    top: 68px;
+    left: 56px;
 }
+
 .lds-roller div:nth-child(3) {
-  animation-delay: -0.108s;
+    animation-delay: -0.108s;
 }
+
 .lds-roller div:nth-child(3):after {
-  top: 71px;
-  left: 48px;
+    top: 71px;
+    left: 48px;
 }
+
 .lds-roller div:nth-child(4) {
-  animation-delay: -0.144s;
+    animation-delay: -0.144s;
 }
+
 .lds-roller div:nth-child(4):after {
-  top: 72px;
-  left: 40px;
+    top: 72px;
+    left: 40px;
 }
+
 .lds-roller div:nth-child(5) {
-  animation-delay: -0.18s;
+    animation-delay: -0.18s;
 }
+
 .lds-roller div:nth-child(5):after {
-  top: 71px;
-  left: 32px;
+    top: 71px;
+    left: 32px;
 }
+
 .lds-roller div:nth-child(6) {
-  animation-delay: -0.216s;
+    animation-delay: -0.216s;
 }
+
 .lds-roller div:nth-child(6):after {
-  top: 68px;
-  left: 24px;
+    top: 68px;
+    left: 24px;
 }
+
 .lds-roller div:nth-child(7) {
-  animation-delay: -0.252s;
+    animation-delay: -0.252s;
 }
+
 .lds-roller div:nth-child(7):after {
-  top: 63px;
-  left: 17px;
+    top: 63px;
+    left: 17px;
 }
+
 .lds-roller div:nth-child(8) {
-  animation-delay: -0.288s;
+    animation-delay: -0.288s;
 }
+
 .lds-roller div:nth-child(8):after {
-  top: 56px;
-  left: 12px;
+    top: 56px;
+    left: 12px;
 }
+
 @keyframes lds-roller {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 // image figure
 .r-content-figure {
-  position: relative;
-  aspect-ratio: 16/9;
-  background-color: #000;
-  &-blur {
+    position: relative;
+    aspect-ratio: 16/9;
+    background-color: #000;
+
+    &-blur {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center;
+        opacity: 0.8;
+    }
+
+    &-img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        backdrop-filter: blur(10px);
+    }
+}
+
+.r-content-img-blur {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -277,35 +294,53 @@
     left: 0;
     background-size: cover;
     background-position: center;
-    opacity: 0.8;
-  }
-  &-img{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    backdrop-filter: blur(10px);
-  }
-}
-.r-content-img-blur {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-size: cover;
-  background-position: center;
 }
 
 .img-cover {
-  background-size: cover;
-  background-position: center;
+    background-size: cover;
+    background-position: center;
 }
+
 .img-contain {
-  object-fit: contain;
-  object-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
+    object-fit: contain;
+    object-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.no-search-item-img {
+    background: black;
+    background-color: #c9c9c9 !important;
+    background-position: center !important;
+}
+
+.r-search-img {
+    background-color: #c9c9c9 !important;
+}
+
+.portaltype-imio-smartweb-eventsview,
+.portaltype-imio-smartweb-directoryview,
+.portaltype-imio-smartweb-newsview {
+    #portal-breadcrumbs,
+    #portal-header {
+        margin-bottom: 0 !important;
+    }
+}
+
+.edit-rest-elements {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+}
+
+.edit-rest-elements-content {
+    top: 10px;
+}
+.edit-rest-elements-news {
+    padding: 10px;
+}

imio/smartweb/core/webcomponents/src/utils/Map.jsx

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from "react";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import useFilterQuery from "../hooks/useFilterQuery";
+import L from "leaflet";
+import iconSvg from "../assets/pin-react.svg";
+import iconSvgActivated from "../assets/pin-react-active.svg";
+import { Link } from "react-router-dom";
+import "./Map.scss";
+import "leaflet/dist/leaflet.css";
+import removeAccents from "remove-accents";
+import queryString from "query-string";
+
+function ChangeMapView({ activeItem, arrayOfLatLngs }) {
+    const map = useMap();
+    if (activeItem) {
+        const activeCoord = [];
+        activeCoord.push(activeItem.geolocation.latitude);
+        activeCoord.push(activeItem.geolocation.longitude);
+        map.setView(activeCoord, 15);
+    } else {
+        let bounds = new L.LatLngBounds(arrayOfLatLngs);
+        map.fitBounds(bounds);
+    }
+    return null;
+}
+
+function Map(props) {
+    const [activeItem, setActiveItem] = useState(null);
+    const [filterGeoArray, setFilterGeoArray] = useState([]);
+    const [allPosition, setAllPosition] = useState(null);
+    const { u, ...parsed } = Object.assign({
+        UID: queryString.parse(useFilterQuery().toString())["u"],
+    });
+    // Delete Imio positions
+    useEffect(() => {
+        const filterArray = props.items.filter(
+            (isgeo) =>
+                isgeo.geolocation.latitude &&
+                isgeo.geolocation.latitude !== 50.4989185 &&
+                isgeo.geolocation.longitude !== 4.7184485
+        );
+        setFilterGeoArray(filterArray);
+    }, [props]);
+
+    // Setup Maker Icon
+    const mapIcon = (url) => {
+        return new L.Icon({
+            iconUrl: url,
+            iconSize: [29, 37],
+        });
+    };
+    // Get Marker Icon and Z-index
+    const getMarkerIcon = (index) => {
+        if (index === parsed.UID) {
+            return mapIcon(iconSvgActivated);
+        }
+        if (index === props.hoverId) {
+            return mapIcon(iconSvgActivated);
+        }
+        return mapIcon(iconSvg);
+    };
+    const getMarkerZindex = (index) => {
+        if (index === props.clickId) {
+            return 999;
+        }
+        if (index === props.hoverId) {
+            return 999;
+        }
+        return 1;
+    };
+
+    useEffect(() => {
+        var result =
+            filterGeoArray &&
+            filterGeoArray.filter((obj) => {
+                return obj.UID === parsed.UID;
+            });
+        setActiveItem(result[0]);
+    }, [filterGeoArray]);
+
+    useEffect(() => {
+        if (filterGeoArray.length > 0) {
+            let posArray = [];
+            filterGeoArray.map((pos, i) => {
+                let lat = pos.geolocation.latitude;
+                let long = pos.geolocation.longitude;
+                posArray.push([lat, long]);
+            });
+            setAllPosition(posArray);
+        }
+    }, [filterGeoArray]);
+    const position = [50.85034, 4.35171];
+
+    const markers = filterGeoArray.map((mark,i) => (
+        <Marker
+            key={i}
+            icon={getMarkerIcon(mark.UID)}
+            zIndexOffset={getMarkerZindex(mark.UID)}
+            position={[
+                mark.geolocation ? mark.geolocation.latitude : "",
+                mark.geolocation ? mark.geolocation.longitude : "",
+            ]}
+            eventHandlers={{
+                mouseover: (e) => {
+                    // Gérer les événements ici
+                },
+            }}
+        >
+            <Popup closeButton={false}>
+                <Link
+                    className="r-map-popup"
+                    style={{ textDecoration: "none" }}
+                    to={{
+                        pathname:
+                            "/" +
+                            removeAccents(mark.title)
+                                .replace(/[^a-zA-Z ]/g, "")
+                                .replace(/\s/g, "-")
+                                .toLowerCase(),
+                        search: `?u=${mark.UID}`,
+                        state: {
+                            idItem: mark.UID,
+                        },
+                    }}
+                >
+                    <span className="r-map-popup-title">{mark.title}</span>
+                    <p className="r-map-popup-category">{mark.category && mark.category.title}</p>
+                </Link>
+            </Popup>
+        </Marker>
+    ));
+
+    return (
+        <div>
+            <MapContainer
+                style={{ height: `calc(100vh - ${props.headerHeight}px)`, minHeight: "600px" }}
+                center={position}
+                zoom={15}
+            >
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                {allPosition != null ? (
+                    <ChangeMapView
+                        activeItem={activeItem}
+                        activeItemUID={parsed.UID}
+                        arrayOfLatLngs={allPosition && allPosition}
+                    />
+                ) : (
+                    ""
+                )}
+                {filterGeoArray && markers}
+            </MapContainer>
+        </div>
+    );
+}
+
+export default Map;