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

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

@@ -2,20 +2,21 @@ 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 } from "react-translated";
+import { Translator, Translate } from "react-translated";
 import DateFilter from "../../Filters/DateFilter";
 import moment from "moment";
-import queryString from 'query-string';
+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 [categoryFilter, setCategoryFilter] = useState(null);
-
-    // const [dates, setDates] = useState({ start: moment().format('YYYY-MM-DD'), end: null});
+    const [localsCategoryFilter, setLocalsCategoryFilter] = useState([]);
     const [dates, setDates] = useState(null);
-
     // Get data
     const { response, error, isLoading } = useAxios({
         method: "get",
@@ -25,9 +26,11 @@ function Filters(props) {
             Accept: "application/json",
         },
         params: inputValues,
-        paramsSerializer: { indexes: null }
+        paramsSerializer: { indexes: null },
     });
 
+
+    // set fitlers data to state
     useEffect(() => {
         if (response !== null) {
             const optionsTopics =
@@ -41,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 locale" />,
+            options: localsCategoryFilter,
+        },
+        {
+            label: <Translate text="Catégories" />,
+            options: categoryFilter,
+        },
+    ];
+
     const onChangeHandler = useCallback(({ target: { name, value } }) => {
         if (value.length > 2) {
             setInputValues((state) => ({ ...state, [name]: value }), []);
@@ -70,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);
@@ -96,111 +143,231 @@ 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 => {
+            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 {
+                } 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>
             </div>
-            {props.onlyPastEvents === "False" &&
-                <div className="r-filter  schedul-Filter">
-                    <DateFilter language={props.language} setDates={setDates} />
+
+            {/* -------------- 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>
     );
 }
 
-export default Filters;
+export default Filters;

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

@@ -1,13 +1,12 @@
-
-
 import React, { useState, useContext } from "react";
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import moment from "moment";
-import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { Dropdown, DropdownButton } from "react-bootstrap";
 import { Translate, Translator } from "react-translated";
-import { nl, fr, enGB, de } from 'date-fns/locale';
-import './DateFilter.scss';
+import { nl, fr, enGB, de } from "date-fns/locale";
+
+import "./DateFilter.scss";
 
 const languageList = {
     fr: fr,
@@ -19,61 +18,61 @@ function DateFilter({ language, setDates }) {
     // const currentLanguage = useContext(LanguageContext);
     const [dateRange, setDateRange] = useState([null, null]);
     const [startDate, endDate] = dateRange;
-    const [filter, setFilter] = useState('Période');
+    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'));
+        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)) {
+        if (e.every((item) => item === null)) {
             setFilter(periodTitle.all);
         } else {
             setFilter(periodTitle.custom);
         }
     };
-    const today = moment().format('YYYY-MM-DD');
+    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 ...)' />
-    }
+        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':
+            case "all":
                 setDates({ "event_dates.query": [today] });
                 setFilter(periodTitle.all);
                 break;
-            case 'today':
+            case "today":
                 setDates({ "event_dates.query": [today, today] });
                 setFilter(periodTitle.today);
                 break;
-            case 'tomorrow':
-                const tomorrow = moment().add(1, 'days').format('YYYY-MM-DD');
+            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');
+            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');
+            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');
+            case "thisMonth":
+                const endOfMonth = moment().endOf("month").format("YYYY-MM-DD");
                 setDates({ "event_dates.query": [today, endOfMonth] });
                 setFilter(periodTitle.thisMonth);
                 break;
@@ -83,13 +82,17 @@ function DateFilter({ language, setDates }) {
     };
 
     useState(() => {
-        setLanguageToLocale(languageList[language])
+        setLanguageToLocale(languageList[language]);
     }, []);
 
     return (
         <>
             <div className="period-filter">
-                <DropdownButton className="period-filter-toggler" onSelect={handleSelect} title={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>
@@ -97,28 +100,33 @@ function DateFilter({ language, setDates }) {
                     <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>}
+                        {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>
@@ -126,4 +134,4 @@ function DateFilter({ language, setDates }) {
     );
 }
 
-export default DateFilter;
+export default DateFilter;