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

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

@@ -1,15 +1,23 @@
 import React, { useEffect, useRef, useCallback, useState } from "react";
 import Select from "react-select";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import useAxios from "../../../hooks/useAxios";
-import { Translator } from "react-translated";
+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 history = useHistory();
-    const queryString = require("query-string");
+    let navigate = useNavigate();
     const [inputValues, setInputValues] = useState(props.activeFilter);
     const [topicsFilter, setTopicsFilter] = useState(null);
     const [categoryFilter, setCategoryFilter] = useState(null);
+    const [localsCategoryFilter, setLocalsCategoryFilter] = useState([]);
+    const [dates, setDates] = useState(null);
+    // Get data
     const { response, error, isLoading } = useAxios({
         method: "get",
         url: "",
@@ -18,8 +26,11 @@ function Filters(props) {
             Accept: "application/json",
         },
         params: inputValues,
+        paramsSerializer: { indexes: null },
     });
 
+
+    // set fitlers data to state
     useEffect(() => {
         if (response !== null) {
             const optionsTopics =
@@ -33,12 +44,33 @@ function Filters(props) {
                 response.category.map((d) => ({
                     value: d.token,
                     label: d.title,
+                    queryString: "category",
+                }));
+            const optionsLocalsCategory =
+                response.local_category &&
+                response.local_category.map((d) => ({
+                    value: d.token,
+                    label: d.title,
+                    queryString: "local_category",
                 }));
             setTopicsFilter(optionsTopics);
             setCategoryFilter(optionsCategory);
+            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 }), []);
@@ -62,6 +94,29 @@ function Filters(props) {
             });
         }
     });
+    // 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);
@@ -70,7 +125,7 @@ function Filters(props) {
             firstUpdate.current = false;
             return;
         }
-        history.push({
+        navigate({
             pathname: "./",
             search: queryString.stringify(inputValues),
         });
@@ -88,88 +143,228 @@ function Filters(props) {
     let actCategory =
         categoryFilter &&
         categoryFilter.filter((option) => option.value === props.activeFilter.category);
-    const customStyles = {
-        control: (styles) => ({
-            ...styles,
-            backgroundColor: "white",
-            borderRadius: "0",
-            height: "50px",
-        }),
-        placeholder: (styles) => ({
-            ...styles,
-            color: "000",
-            fontWeight: "bold",
-            fontSize: "12px",
-            textTransform: "uppercase",
-            letterSpacing: "1.2px",
-        }),
-        option: (styles, { data, isDisabled, isFocused, isSelected }) => {
-            return {
-                ...styles,
-            };
-        },
-    };
-    
+
+    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>
-            <form className="r-filter" onSubmit={handleSubmit}>
-                {/* <label>Recherche</label> */}
-                <div className="r-filter-search">
+            <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>
+                    {/* More filter*/}
+                    <button
+                        className="more-filter-btn collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseOne"
+                        aria-expanded="false"
+                        aria-controls="collapseOne"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 32 32"
+                            style={{ height: 16, width: 16 }}
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="3"
+                            aria-hidden="true"
+                            display="block"
+                            overflow="visible"
+                        >
+                            <path d="M7 16H3m26 0H15M29 6h-4m-8 0H3m26 20h-4M7 16a4 4 0 108 0 4 4 0 00-8 0zM17 6a4 4 0 108 0 4 4 0 00-8 0zm0 20a4 4 0 108 0 4 4 0 00-8 0zm0 0H3"></path>
+                        </svg>
+                    </button>
+                    <div className="react-sep-menu"></div>
+                    {props.onlyPastEvents === "False" && (
+                        <div className="r-filter  schedul-Filter">
+                            <DateFilter language={props.language} setDates={setDates} />
+                        </div>
+                    )}
+                    <div className="react-sep-menu"></div>
+
+                    {/* <div className="r-filter top-filter facilities-Filter">
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"category"}
+                                    className="select-custom-no-border library-facilities"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={categoryFilter && categoryFilter}
+                                    placeholder={translate({
+                                        text: "Quoi",
+                                    })}
+                                    value={actCategory && actCategory[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div> */}
+
+                    {/* test */}
                     <Translator>
                         {({ translate }) => (
-                        <input
-                            className="input-custom-class"
-                            name="SearchableText"
-                            type="text"
-                            value={inputValues.SearchableText}
-                            onChange={onChangeHandler}
-                            placeholder={translate({
-                                text: 'Recherche'
-                              })}
-                        />
-                    )}
+                            <div className="r-filter  top-filter facilities-Filter">
+                                {/* <label>Catégories</label> */}
+                                <Select
+                                    styles={menuStyles}
+                                    name={"category"}
+                                    className="select-custom-no-border library-facilities"
+                                    isClearable
+                                    onChange={onChangeGroupSelect}
+                                    options={localsCategoryFilter.length === 0 ?  categoryFilter && categoryFilter :groupedOptions}
+                                    placeholder={translate({
+                                        text: "Quoi",
+                                    })}
+                                    value={actCategory && actCategory[0]}
+                                />
+                            </div>
+                        )}
                     </Translator>
-                    <button type="submit"></button>
                 </div>
-            </form>
-
-            <div className="r-filter topics-Filter">
-                {/* <label>Thématiques</label> */}
-                <Translator>
-                    {({ translate }) => (
-                        <Select
-                            styles={customStyles}
-                            name={"topics"}
-                            className="select-custom-class library-topics"
-                            isClearable
-                            onChange={onChangeHandlerSelect}
-                            options={topicsFilter && topicsFilter}
-                            placeholder={translate({
-                                text: 'Thématiques'
-                            })}
-                            value={actTopi && actTopi[0]}
-                        />
-                    )}
-                </Translator>
             </div>
-            <div className="r-filter  facilities-Filter">
-                {/* <label>Catégories</label> */}
-                <Translator>
-                    {({ translate }) => (
-                        <Select
-                            styles={customStyles}
-                            name={"category"}
-                            className="select-custom-class library-facilities"
-                            isClearable
-                            onChange={onChangeHandlerSelect}
-                            options={categoryFilter && categoryFilter}
-                            placeholder={translate({
-                                text: 'Catégories'
-                              })}
-                            value={actCategory && actCategory[0]}
-                        />
-                    )}
-                </Translator>
+
+            {/* -------------- More filter --------------  */}
+
+            <div
+                id="collapseOne"
+                className="accordion-collapse collapse more-filter-container "
+                aria-labelledby="headingOne"
+                data-bs-parent="#accordionExample"
+            >
+                <div className="accordion-body">
+                    {/* Filtre thématique */}
+                    <div className="r-filter collapse-filter topics-Filter">
+                        {/* <label>Thématiques</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={moreFilterStyles}
+                                    name={"topics"}
+                                    className="library-topics"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={topicsFilter && topicsFilter}
+                                    placeholder={translate({
+                                        text: "Thématiques",
+                                    })}
+                                    value={actTopi && actTopi[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+                    {/* Filtre Public cible */}
+                    <div className="r-filter collapse-filter public-target-Filter">
+                        {/* <label>Thématiques</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={moreFilterStyles}
+                                    name={"taxonomy_event_public"}
+                                    className="library-topics"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={taxonomy_event_public && taxonomy_event_public}
+                                    placeholder={translate({
+                                        text: "Public cible",
+                                    })}
+                                    value={actTarget && actTarget[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+
+                    {/* Filtre iam */}
+                    <div className="r-filter collapse-filter iam-Filter">
+                        {/* <label>Thématiques</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={moreFilterStyles}
+                                    name={"iam"}
+                                    className="library-topics"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={iam && iam}
+                                    placeholder={translate({
+                                        text: "Profil",
+                                    })}
+                                    value={actIam && actIam[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+
+                    {/* Filtre Gratuit */}
+                    {/* <div className="r-filter collapse-filter free-Filter">
+                        <div className="form-check form-switch">
+                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">
+                                Gratuit
+                            </label>
+                            <input
+                                className="form-check-input"
+                                onChange={onChangeCheckbox}
+                                type="checkbox"
+                                id="flexSwitchCheckDefault"
+                            />
+                        </div>
+                    </div> */}
+                </div>
             </div>
         </React.Fragment>
     );

imio/smartweb/core/webcomponents/src/components/Filters/DateFilter.jsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import moment from "moment";
+import { Dropdown, DropdownButton } from "react-bootstrap";
+import { Translate, Translator } from "react-translated";
+import { nl, fr, enGB, de } from "date-fns/locale";
+
+import "./DateFilter.scss";
+
+const languageList = {
+    fr: fr,
+    nl: nl,
+    de: de,
+    en: enGB,
+};
+function DateFilter({ language, setDates }) {
+    const [dateRange, setDateRange] = useState([null, null]);
+    const [startDate, endDate] = dateRange;
+    const [filter, setFilter] = useState(<Translate text="Quand" />);
+    const [languageToLocale, setLanguageToLocale] = useState();
+
+    const handleApply = (e) => {
+        setDateRange(e);
+        const dates = e; // Remplacez ceci par votre tableau de dates
+        const filteredDates = dates.filter((date) => date !== null);
+        const formattedDates = filteredDates.map((date) => moment(date).format("YYYY-MM-DD"));
+        setDates({ "event_dates.query": formattedDates });
+        if (e.every((item) => item === null)) {
+            setFilter(periodTitle.all);
+        } else {
+            setFilter(periodTitle.custom);
+        }
+    };
+    const today = moment().format("YYYY-MM-DD");
+
+    const periodTitle = {
+        all: <Translate text="Toutes les dates" />,
+        today: <Translate text="Aujourd'hui" />,
+        tomorrow: <Translate text="Demain" />,
+        thisWeekEnd: <Translate text="Ce week-end" />,
+        thisWeek: <Translate text="Cette semaine" />,
+        thisMonth: <Translate text="Ce mois-ci" />,
+        custom: <Translate text="Personnalisé (Du ... au ...)" />,
+    };
+
+    const handleSelect = (eventKey) => {
+        switch (eventKey) {
+            case "all":
+                setDates({ "event_dates.query": [today] });
+                setFilter(periodTitle.all);
+                break;
+            case "today":
+                setDates({ "event_dates.query": [today, today] });
+                setFilter(periodTitle.today);
+                break;
+            case "tomorrow":
+                const tomorrow = moment().add(1, "days").format("YYYY-MM-DD");
+                setDates({ "event_dates.query": [tomorrow, tomorrow] });
+                setFilter(periodTitle.tomorrow);
+                break;
+            case "thisWeekEnd":
+                const startOfWeekEnd = moment().endOf("week").format("YYYY-MM-DD");
+                const endOfWeekEnd = moment().endOf("week").add(1, "days").format("YYYY-MM-DD");
+                setDates({ "event_dates.query": [startOfWeekEnd, endOfWeekEnd] });
+                setFilter(periodTitle.thisWeekEnd);
+                break;
+            case "thisWeek":
+                const endOfWeek = moment().endOf("week").add(1, "days").format("YYYY-MM-DD");
+                setDates({ "event_dates.query": [today, endOfWeek] });
+                setFilter(periodTitle.thisWeek);
+                break;
+            case "thisMonth":
+                const endOfMonth = moment().endOf("month").format("YYYY-MM-DD");
+                setDates({ "event_dates.query": [today, endOfMonth] });
+                setFilter(periodTitle.thisMonth);
+                break;
+            default:
+                break;
+        }
+    };
+
+    useState(() => {
+        setLanguageToLocale(languageList[language]);
+    }, []);
+
+    return (
+        <>
+            <div className="period-filter">
+                <DropdownButton
+                    className="period-filter-toggler"
+                    onSelect={handleSelect}
+                    title={filter}
+                >
+                    <Dropdown.Item eventKey="all">{periodTitle.all}</Dropdown.Item>
+                    <Dropdown.Item eventKey="today">{periodTitle.today}</Dropdown.Item>
+                    <Dropdown.Item eventKey="tomorrow">{periodTitle.tomorrow}</Dropdown.Item>
+                    <Dropdown.Item eventKey="thisWeekEnd">{periodTitle.thisWeekEnd}</Dropdown.Item>
+                    <Dropdown.Item eventKey="thisWeek">{periodTitle.thisWeek}</Dropdown.Item>
+                    <Dropdown.Item eventKey="thisMonth">{periodTitle.thisMonth}</Dropdown.Item>
+                    <div className="perdiod-filter-range">
+                        {languageToLocale && (
+                            <Translator>
+                                {({ translate, language }) => (
+                                    <DatePicker
+                                        dateFormat="dd/MM/yyyy"
+                                        placeholderText={translate({
+                                            text: "Personnalisé (Du ... au ...)",
+                                        })}
+                                        selectsRange={true}
+                                        startDate={startDate}
+                                        endDate={endDate}
+                                        minDate={new Date().setDate(new Date().getDate() + 1)}
+                                        onChange={(update) => {
+                                            setDateRange(update);
+                                            if (
+                                                (update[0] !== null && update[1] !== null) ||
+                                                (update[0] == null && update[1] == null)
+                                            ) {
+                                                handleApply(update);
+                                            }
+                                        }}
+                                        isClearable={true}
+                                        locale={languageToLocale}
+                                    />
+                                )}
+                            </Translator>
+                        )}
+                    </div>
+                </DropdownButton>
+            </div>
+        </>
+    );
+}
+
+export default DateFilter;

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

@@ -0,0 +1,104 @@
+.schedul-Filter {
+    width: 100%;
+
+    @media screen and (min-width:630px) {
+        width: auto;
+    }
+}
+
+.period-filter {
+    width: 100%;
+
+    @media screen and (min-width:630px) {
+        width: auto;
+    }
+
+    .period-filter-toggler {
+        width: 100%;
+
+        @media screen and (min-width:630px) {
+            width: auto;
+        }
+
+        &>button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-width: 150px;
+            background: transparent;
+            color: hsl(0, 0%, 20%);
+            box-sizing: border-box;
+            font-weight: bold;
+            font-size: 14px;
+            letter-spacing: 1.4px;
+            text-align: left;
+            min-height: 30px;
+            outline: 0 !important;
+            position: relative;
+            -webkit-transition: all 100ms;
+            transition: all 100ms;
+            background-color: white;
+            border-color: none;
+            border-radius: 0;
+            border-width: 1px;
+            border: solid 1px #fff;
+            box-sizing: border-box;
+            height: 40px;
+            border-radius: 10px;
+            width: 100%;
+
+            @media screen and (min-width:630px) {
+                width: auto;
+            }
+
+            @media screen and (max-width:629px) {
+                background-color: transparent;
+                border-color: hsl(0, 0%, 70%);
+                color: hsl(0, 0%, 20%);
+                border: solid 1px #CFCFCF;
+            }
+
+            &:hover {
+                background-color: transparent;
+                border-color: hsl(0, 0%, 70%);
+                color: hsl(0, 0%, 20%);
+                border: solid 1px #CFCFCF;
+            }
+
+            &:focus,
+            &:active {
+                border-color: #2684FF !important;
+                background: transparent !important;
+                color: hsl(0, 0%, 20%) !important;
+                box-shadow: 0 0 0 2px #2684FF !important;
+            }
+
+            &:after {
+                content: "";
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false' fill='%23CFCFCF' class='css-tj5bde-Svg'%3E%3Cpath d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'%3E%3C/path%3E%3C/svg%3E");
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-repeat: no-repeat;
+                border: inherit;
+                border-color: transparent;
+                background-position: center;
+                vertical-align: bottom;
+                margin-left: auto;
+            }
+        }
+    }
+
+}
+
+.perdiod-filter-range {
+    padding: 5px 16px;
+
+    input {
+        border: solid 1px hsl(0, 0%, 42%) !important;
+        border-radius: 5px;
+        padding: 5px 9px;
+        color: hsl(0, 0%, 20%);
+        border: solid 1px hsl(0, 0%, 70%) !important;
+    }
+}