imio.smartweb.core 1.2.91__py3-none-any.whl → 1.3.1__py3-none-any.whl

imio/smartweb/core/webcomponents/src/components/Campaign/CampaignCard/CampaignCard.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { Translate } from "react-translated";
+
+const CampaignCard = (props) => {
+    const [image, setImage] = useState(new Image());
+    const [imageClassName, setImageClassName] = useState("");
+
+    // Set image and image className
+    useEffect(() => {
+        const loadImage = async () => {
+            const img = new Image();
+            const src = props.item.images_raw[0].image.content || "";
+
+            img.src = "data:image/jpeg;base64," + src;
+
+            try {
+                await img.decode(); // Wait for the image to be decoded
+                setImage(img);
+                const imgClassName = img.width < img.height ? "img-contain" : "img-cover";
+                setImageClassName(imgClassName);
+            } catch (error) {
+                // Handle image loading errors here
+                console.error("Error loading image:", error);
+            }
+        };
+
+        if (props.item.images_raw[0].image.content) {
+            loadImage();
+        }
+    }, [props.item]);
+
+    return (
+        <>
+            <div className="r-list-item">
+                {image && image.src ? (
+                    <>
+                        <div className="r-item-img">
+                            <div
+                                className="r-content-figure-blur"
+                                style={{ backgroundImage: "url(" + image.src + ")" }}
+                            />
+                            <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">{props.item.nom}</span>
+                    <div className="campaign-vote">
+                        <div className="campaign-vote-pour">
+                            <i className="bi bi-hand-thumbs-up-fill"></i>
+                            <span className="campaign-vote-pour-count">
+                                {props.item.votes_pour}
+                            </span>
+                        </div>
+                        <div className="campaign-vote-contre">
+                            <i className="bi bi-hand-thumbs-down-fill"></i>
+                            <span className="campaign-vote-contre-count">
+                                {props.item.votes_contre}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="r-item-arrow">
+                    <i class="bi bi-chevron-right"></i>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default CampaignCard;

imio/smartweb/core/webcomponents/src/components/Campaign/CampaignContent/CampaignContent.jsx

@@ -0,0 +1,193 @@
+import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import useAxios from "../../../hooks/useAxios";
+import useFilterQuery from "../../../hooks/useFilterQuery";
+import "spotlight.js";
+import "../../../../node_modules/flexbin/flexbin.css";
+import { Translate } from "react-translated";
+import queryString from "query-string";
+
+export default function CampaignContent({ queryUrl, onChange }) {
+    const navigate = useNavigate();
+    const { u, ...parsed } = Object.assign({
+        id: queryString.parse(useFilterQuery().toString())["u"],
+        b_start: 0,
+    });
+    const [params, setParams] = useState(parsed);
+    const [item, setitem] = useState(null);
+    const [urlVotePour, setUrlVotePour] = useState(null);
+    const [urlVoteContre, setUrlVoteContre] = useState(null);
+
+    const [files, setFiles] = useState();
+    const { response, error, isLoading } = useAxios(
+        {
+            method: "get",
+            url: "",
+            baseURL: queryUrl,
+            headers: {
+                Accept: "application/json",
+            },
+            params: params,
+        },
+        []
+    );
+
+    // set all contacts state
+    useEffect(() => {
+        if (response !== null) {
+            setitem(response.fields);
+            const parsedUrl = new URL(response.url);
+            const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`;
+            const fullUrlPour = `${baseUrl}/ideabox-voter-pour-un-projet/?projet=${response.id}`;
+            const fullUrlContre = `${baseUrl}/ideabox-voter-contre-un-projet/?projet=${response.id}`;
+
+            setUrlVotePour(fullUrlPour);
+            setUrlVoteContre(fullUrlContre);
+        }
+
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "instant",
+        });
+    }, [response]);
+
+    function handleClick() {
+        navigate("..");
+        onChange(null);
+    }
+    return !isLoading ? (
+        <div className="campaign-content r-content">
+            <button type="button" onClick={handleClick}>
+                <Translate text="Retour" />
+            </button>
+            <ContentText item={item} urlVotePour={urlVotePour} urlVoteContre={urlVoteContre} />
+        </div>
+    ) : (
+        <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>
+    );
+}
+
+function ContentText({ item, urlVotePour, urlVoteContre }) {
+    const [image, setImage] = useState(new Image());
+    const [imageClassName, setImageClassName] = useState("");
+
+    useEffect(() => {
+        if (item) {
+            // Set image and image className
+            const src = item.images_raw[0].image.content || "";
+            const img = new Image();
+            img.src = "data:image/jpeg;base64," + src;
+
+            img.onload = () => {
+                setImage(img);
+                const imgClassName = img.width < img.height ? "img-contain" : "img-cover";
+                setImageClassName(imgClassName);
+            };
+
+            img.onerror = (error) => {
+                // Handle image loading errors here
+                console.error("Error loading image:", error);
+            };
+        }
+    }, [item]);
+    return (
+        <>
+            <article>
+                <header>
+                    <h2 className="r-content-title">{item.nom}</h2>
+                </header>
+                <figure>
+                    <div className="campaign-vote" style={{ marginTop: "1.5rem" }}>
+                        <a href={urlVotePour} target="_blank" className="campaign-vote-pour">
+                            <i className="bi bi-hand-thumbs-up-fill"></i>
+                            <span className="campaign-vote-pour-count">({item.votes_pour})</span>
+                            <span className="campaign-vote-contre-text"> Je vote pour</span>
+                        </a>
+                        <a href={urlVoteContre} target="_blank" className="campaign-vote-contre">
+                            <i className="bi bi-hand-thumbs-down-fill"></i>
+                            <span className="campaign-vote-contre-count">
+                                ({item.votes_contre})
+                            </span>
+                            <span className="campaign-vote-contre-text"> Je vote contre</span>
+                        </a>
+                    </div>
+                    {image ? (
+                        <div className="r-content-img">
+                            <div
+                                className="r-content-figure-blur"
+                                style={{ backgroundImage: "url(" + image.src + ")" }}
+                            />
+                            <img
+                                className={"r-content-figure-img" + " " + imageClassName}
+                                src={image.src}
+                                alt=""
+                            />
+                        </div>
+                    ) : (
+                        <>
+                            <div className="r-item-img r-item-img-placeholder"></div>
+                        </>
+                    )}
+                </figure>
+            </article>
+            <div className="contactCard">
+                <div className="contactText">
+                    <div className="r-content-description">
+                        {item.description && (
+                            <div
+                                className="campaign-description"
+                                dangerouslySetInnerHTML={{
+                                    __html: item.description,
+                                }}
+                            />
+                        )}
+                    </div>
+
+                    <div className="contactTextAll"></div>
+                </div>
+                {/* add files to download */}
+                {/* {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>
+                )} */}
+            </div>
+        </>
+    );
+}

imio/smartweb/core/webcomponents/src/components/Campaign/CampaignList/CampaignList.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useContext } from "react";
+import CampaignCard from "../CampaignCard/CampaignCard";
+import { Link } from "react-router-dom";
+import removeAccents from "remove-accents";
+import { ScrollContext } from "../../../hooks/ScrollContext";
+const CampaignList = ({
+    itemsArray,
+    onChange,
+    onHover,
+    showCategoriesOrTopics,
+    contextAuthenticatedUser,
+}) => {
+    const { scrollPos, updateScrollPos } = useContext(ScrollContext);
+
+    function handleClick(event) {
+        onChange(event);
+        updateScrollPos(window.scrollY);
+    }
+
+    function handleHover(event) {
+        onHover(event);
+    }
+
+    useEffect(() => {
+        window.scrollTo({ top: scrollPos, left: 0, behavior: "instant" });
+    }, [itemsArray]);
+
+    return (
+        <React.Fragment>
+            <ul className="r-result-list event-result-list">
+                {itemsArray.map((item, i) => (
+                    <li
+                        key={i}
+                        className="r-list-item-group"
+                        onMouseEnter={() => handleHover(item.id)}
+                        onMouseLeave={() => handleHover(null)}
+                        onClick={() => handleClick(item.id)}
+                    >
+                        <Link
+                            className="r-list-item-link"
+                            style={{ textDecoration: "none" }}
+                            to={{
+                                pathname:
+                                    "/" +
+                                    removeAccents(item.text)
+                                        .replace(/[^a-zA-Z ]/g, "")
+                                        .replace(/\s/g, "-")
+                                        .toLowerCase(),
+                                search: `?u=${item.id}`,
+                                state: {
+                                    idItem: item.id,
+                                },
+                            }}
+                        ></Link>
+                        <CampaignCard
+                            item={item.fields}
+                            showCategoriesOrTopics={showCategoriesOrTopics}
+                            key={item.created}
+                            contextAuthenticatedUser={contextAuthenticatedUser}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </React.Fragment>
+    );
+};
+export default CampaignList;

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

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useCallback, useState } from "react";
+import Select from "react-select";
+import { useNavigate } from "react-router-dom";
+import useAxios from "../../../hooks/useAxios";
+import { Translator, Translate } from "react-translated";
+// import DateFilter from "../../Filters/DateFilter";
+import moment from "moment";
+import queryString from "query-string";
+// import { taxonomy_event_public } from "./../../Filters/PublicTargetData";
+// import { iam } from "./../../Filters/IamData";
+import { menuStyles, moreFilterStyles } from "./../../Filters/SelectStyles";
+
+function Filters(props) {
+    let navigate = useNavigate();
+    const [inputValues, setInputValues] = useState(props.activeFilter);
+    const [topicsFilter, setTopicsFilter] = useState(null);
+    const [zonesFilter, setZonesFilter] = useState(null);
+    // const [localsCategoryFilter, setLocalsCategoryFilter] = useState([]);
+    const [dates, setDates] = useState(null);
+    // Get data
+    const { response, error, isLoading } = useAxios({
+        method: "get",
+        url: [
+            { url: props.queryZonesUrl, identifier: "zones" },
+            { url: props.queryTopicsUrl, identifier: "topics" },
+        ],
+        headers: {
+            Accept: "application/json",
+        },
+        params: inputValues,
+        paramsSerializer: { indexes: null },
+    });
+
+    // set fitlers data to state
+    useEffect(() => {
+        if (response !== null) {
+            const optionsTopics =
+                response.topics &&
+                response.topics.items.map((d) => ({
+                    value: d.value,
+                    label: d.title,
+                }));
+            const optionsCategory =
+                response.category &&
+                response.category.map((d) => ({
+                    value: d.token,
+                    label: d.title,
+                    queryString: "category",
+                }));
+            const optionsZones =
+                response.zones &&
+                response.zones.items.map((d) => ({
+                    value: d.id,
+                    label: d.digest,
+                    queryString: "zones",
+                }));
+            setTopicsFilter(optionsTopics);
+            setZonesFilter(optionsZones);
+
+            // setLocalsCategoryFilter(optionsLocalsCategory);
+        }
+    }, [response]);
+
+    // const to group category and local category
+    // const groupedOptions = [
+    //     {
+    //         label: <Translate text="Catégories spécifiques" />,
+    //         options: localsCategoryFilter,
+    //     },
+    //     {
+    //         label: <Translate text="Catégories" />,
+    //         options: categoryFilter,
+    //     },
+    // ];
+
+    const onChangeHandler = useCallback(({ target: { name, value } }) => {
+        if (value.length > 2) {
+            setInputValues((state) => ({ ...state, [name]: value }), []);
+        } else {
+            setInputValues((prevState) => {
+                const state = { ...prevState };
+                const { [name]: remove, ...rest } = state;
+                return rest;
+            });
+        }
+    });
+    const onChangeHandlerSelect = useCallback((value, action) => {
+        const inputName = action.name;
+        if (value) {
+            setInputValues((state) => ({ ...state, [inputName]: value.value }), []);
+        } else {
+            setInputValues((prevState) => {
+                const state = { ...prevState };
+                const { [inputName]: remove, ...rest } = state;
+                return rest;
+            });
+        }
+    });
+    // const onChangeCheckbox = useCallback((value, action) => {
+    //     if (value.target.checked) {
+    //         setInputValues((state) => ({ ...state, free_entry: true }), []);
+    //     } else {
+    //         setInputValues((state) => {
+    //             const newState = { ...state };
+    //             delete newState["free_entry"];
+    //             return newState;
+    //         }, []);
+    //     }
+    // });
+
+    const onChangeGroupSelect = useCallback((value, action) => {
+        if (value) {
+            setInputValues((state) => ({ ...state, [value.queryString]: value.value }), []);
+        } else {
+            setInputValues((prevState) => {
+                const state = { ...prevState };
+                const { [action.removedValues[0].queryString]: remove, ...rest } = state;
+                return rest;
+            });
+        }
+    });
+
+    // make to no launch useEffect first time
+    const firstUpdate = useRef(true);
+    useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+            return;
+        }
+        navigate({
+            pathname: "./",
+            search: queryString.stringify(inputValues),
+        });
+        props.onChange(inputValues);
+    }, [inputValues]);
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        props.onChange(inputValues);
+    }
+    // set default input value
+    let actTopi =
+        topicsFilter && topicsFilter.filter((option) => option.value === props.activeFilter.topics);
+
+    let actZones =
+        zonesFilter && zonesFilter.filter((option) => option.value === props.activeFilter.zones);
+    // let actCategory =
+    //     categoryFilter &&
+    //     categoryFilter.filter((option) => option.value === props.activeFilter.category);
+
+    // let actTarget =
+    //     taxonomy_event_public &&
+    //     taxonomy_event_public.filter((option) => option.value === props.activeFilter.topics);
+
+    // let actIam = iam && iam.filter((option) => option.value === props.activeFilter.topics);
+
+    useEffect(() => {
+        if (dates) {
+            setInputValues((prevState) => {
+                if (dates["event_dates.query"].length > 1) {
+                    const { "event_dates.range": _, ...rest } = dates;
+                    const newValue = "min:max";
+                    return { ...prevState, ...rest, "event_dates.range": newValue };
+                } else if (dates["event_dates.query"].every((item) => item === null)) {
+                    return {
+                        ...prevState,
+                        "event_dates.query": [moment().format("YYYY-MM-DD")],
+                        "event_dates.range": "min",
+                    };
+                } else {
+                    return { ...prevState, ...dates, "event_dates.range": "min" };
+                }
+            });
+        }
+    }, [dates]);
+
+    return (
+        <React.Fragment>
+            <div className="react-filters-menu">
+                <div className="react-filters-container">
+                    <form className="r-filter r-filter-search" onSubmit={handleSubmit}>
+                        {/* <label>Recherche</label> */}
+                        <div className="relative">
+                            <Translator>
+                                {({ translate }) => (
+                                    <input
+                                        className="input-custom-class"
+                                        name="SearchableText"
+                                        type="text"
+                                        value={inputValues.SearchableText}
+                                        onChange={onChangeHandler}
+                                        placeholder={translate({
+                                            text: "Recherche",
+                                        })}
+                                    />
+                                )}
+                            </Translator>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                stroke="#9f9f9f"
+                                strokeWidth="4"
+                                aria-hidden="true"
+                                display="block"
+                                overflow="visible"
+                                style={{ height: 16, width: 16 }}
+                                viewBox="0 0 32 32"
+                            >
+                                <path d="M13 24a11 11 0 1 0 0-22 11 11 0 0 0 0 22zm8-3 9 9" />
+                            </svg>
+                        </div>
+                    </form>
+                    <div className="react-sep-menu"></div>
+                    {/* Filtre Thématique */}
+                    {/* Filtre Thématique */}
+                    <div className="r-filter top-filter topics-Filter">
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"filter-themes"}
+                                    className="select-custom-no-border"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={topicsFilter && topicsFilter}
+                                    placeholder={translate({
+                                        text: "Thématiques",
+                                    })}
+                                    value={actTopi && actTopi[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+
+                    <div className="r-filter top-filter topics-Filter">
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"filter-zones"}
+                                    className="select-custom-no-border"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={zonesFilter && zonesFilter}
+                                    placeholder={translate({
+                                        text: "Zones",
+                                    })}
+                                    value={actZones && actZones[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+                </div>
+            </div>
+        </React.Fragment>
+    );
+}
+
+export default Filters;

imio/smartweb/core/webcomponents/src/components/Campaign/index.js

@@ -0,0 +1,2 @@
+import loadable from "@loadable/component";
+export default loadable(() => import("./Campaign"));

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

@@ -1,6 +1,7 @@
 .r-result-filter-container {
     z-index: 1;
     background: #fff;
+
     @media screen and (min-width: 1200px) {
         position: sticky;
     }

imio/smartweb/core/webcomponents/src/components/News/NewsContent/NewsContent.jsx

@@ -56,7 +56,6 @@ const ContactContent = ({ queryUrl, onChange, contextAuthenticatedUser }) => {
 
     // Function to generate iframe URL
     const getIframeSrc = (url) => {
-        console.log(item.video_url);
         if (url.includes("youtube.com") || url.includes("youtu.be")) {
             const urlParams = new URLSearchParams(new URL(url).search);
             const videoId = urlParams.get("v") || url.split("/").pop();