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

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

@@ -1,16 +1,18 @@
 import React, { useEffect, useCallback, useRef, 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 queryString from "query-string";
+import { iam } from "./../../Filters/IamData";
+import { menuStyles } 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 [taxonomyFilter, setTaxonomyFilter] = useState(null);
+    const [localsCategoryFilter, setLocalsCategoryFilter] = useState([]);
     const { response, error, isLoading } = useAxios({
         method: "get",
         url: "",
@@ -31,13 +33,34 @@ 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);
             setTaxonomyFilter(optionsTaxonomy);
+            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: taxonomyFilter,
+        },
+    ];
+
     const onChangeHandler = useCallback(({ target: { name, value } }) => {
         if (value.length > 2) {
             setInputValues((state) => ({ ...state, [name]: value }), []);
@@ -62,6 +85,18 @@ function Filters(props) {
         }
     });
 
+    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(() => {
@@ -69,7 +104,7 @@ function Filters(props) {
             firstUpdate.current = false;
             return;
         }
-        history.push({
+        navigate({
             pathname: "./",
             search: queryString.stringify(inputValues),
         });
@@ -88,86 +123,107 @@ function Filters(props) {
     let actTaxo =
         taxonomyFilter &&
         taxonomyFilter.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 actIam = iam && iam.filter((option) => option.value === props.activeFilter.topics);
+
     return (
         <React.Fragment>
-            <form className="r-filter" onSubmit={handleSubmit}>
-                {/* <label>Recherche</label> */}
-                <div className="r-filter-search">
-                    <Translator>
-                        {({ translate }) => (
-                            <input
-                                className="input-custom-class"
-                                name="SearchableText"
-                                type="text"
-                                value={inputValues.SearchableText}
-                                onChange={onChangeHandler}
-                                placeholder={translate({
-                                    text: 'Recherche'
-                                  })}
-                            />
-                        )}
-                    </Translator>
-                    <button type="submit"></button>
+            <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>
+                    <div className="r-filter top-filter topics-Filter">
+                        {/* <label>Thématiques</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"topics"}
+                                    className="select-custom-no-border library-topics"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={topicsFilter && topicsFilter}
+                                    placeholder={translate({
+                                        text: "Thématiques",
+                                    })}
+                                    value={actTopi && actTopi[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+                    <div className="react-sep-menu"></div>
+                    <div className="r-filter top-filter facilities-Filter">
+                        {/* <label>Catégories</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"category"}
+                                    className="select-custom-no-border library-facilities"
+                                    isClearable
+                                    onChange={onChangeGroupSelect}
+                                    options={localsCategoryFilter.length === 0 ? taxonomyFilter &&  taxonomyFilter : groupedOptions}
+                                    placeholder={translate({
+                                        text: "Catégories",
+                                    })}
+                                    value={actTaxo && actTaxo[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
+                    <div className="react-sep-menu"></div>
+                    {/* Filtre iam */}
+                    <div className="r-filter top-filter iam-Filter">
+                        {/* <label>Thématiques</label> */}
+                        <Translator>
+                            {({ translate }) => (
+                                <Select
+                                    styles={menuStyles}
+                                    name={"iam"}
+                                    className="select-custom-no-border library-topics"
+                                    isClearable
+                                    onChange={onChangeHandlerSelect}
+                                    options={iam && iam}
+                                    placeholder={translate({
+                                        text: "Profil",
+                                    })}
+                                    value={actIam && actIam[0]}
+                                />
+                            )}
+                        </Translator>
+                    </div>
                 </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={taxonomyFilter && taxonomyFilter}
-                            placeholder={translate({
-                                text: 'Catégories'
-                              })}
-                            value={actTaxo && actTaxo[0]}
-                        />
-                    )}
-                </Translator>
             </div>
         </React.Fragment>
     );

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

@@ -1,36 +1,52 @@
-import React, { useEffect, useState } from "react";
-import { HashRouter as Router, Switch, Route } from "react-router-dom";
+import React, { useEffect, useState, useContext, createContext } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ScrollContext } from "../../hooks/ScrollContext";
 import Filters from "./Filters/Filter";
-import ContactContent from "./ContactContent/ContactContent";
-import ContactList from "./ContactList/ContactList";
+import NewsContent from "./NewsContent/NewsContent";
+import NewsList from "./NewsList/NewsList";
 import useAxios from "../../hooks/useAxios";
 import "./News.scss";
+import "../Filters/MainFilter.scss";
 import useFilterQuery from "../../hooks/useFilterQuery";
 import { Provider, Translate } from "react-translated";
-import translation from '../../utils/translation';
+import translation from "../../utils/translation";
+import queryString from "query-string";
 
+export const LanguageContext = createContext("fr");
 export default function News(props) {
+    // Utilisation de useState pour gérer la valeur du contexte
+    const [scrollPos, setScrollPos] = useState(0);
+    // Fonction pour mettre à jour la position du scroll
+    const updateScrollPos = (newScrollPos) => {
+        setScrollPos(newScrollPos);
+    };
     return (
-        <Router>
-            <Provider language={props.currentLanguage} translation={translation}>
-                <NewsView
-                    queryFilterUrl={props.queryFilterUrl}
-                    queryUrl={props.queryUrl}
-                    proposeUrl={props.proposeUrl}
-                    batchSize={props.batchSize}
-                />
-            </Provider>
-        </Router>
+        <LanguageContext.Provider value={props.currentLanguage}>
+            <BrowserRouter basename={props.viewPath}>
+                <Provider language={props.currentLanguage} translation={translation}>
+                    <ScrollContext.Provider value={{ scrollPos, updateScrollPos }}>
+                        <NewsView
+                            queryFilterUrl={props.queryFilterUrl}
+                            queryUrl={props.queryUrl}
+                            proposeUrl={props.proposeUrl}
+                            batchSize={props.batchSize}
+                            showCategoriesOrTopics={props.showCategoriesOrTopics}
+                            contextAuthenticatedUser={props.contextAuthenticatedUser}
+                        />
+                    </ScrollContext.Provider>
+                </Provider>
+            </BrowserRouter>
+        </LanguageContext.Provider>
     );
 }
 const NewsView = (props) => {
-    const queryString = require("query-string");
     const { u, ...parsed } = Object.assign(
         { b_start: 0, fullobjects: 1 },
         queryString.parse(useFilterQuery().toString())
     );
-    const [contactArray, setcontactArray] = useState([]);
-    const [contactNumber, setcontactNumber] = useState([]);
+    const { scrollPos, updateScrollPos } = useContext(ScrollContext);
+    const [itemsArray, setItemsArray] = useState([]);
+    const [itemsNumber, setItemsNumber] = useState([]);
     const [clickId, setClickId] = useState(null);
     const [filters, setFilters] = useState(parsed);
     const [batchStart, setBatchStart] = useState(0);
@@ -53,11 +69,11 @@ const NewsView = (props) => {
     useEffect(() => {
         if (response !== null) {
             if (isMore) {
-                setcontactArray((contactArray) => [...contactArray, ...response.items]);
+                setItemsArray((itemsArray) => [...itemsArray, ...response.items]);
             } else {
-                setcontactArray(response.items);
+                setItemsArray(response.items);
             }
-            setcontactNumber(response.items_total);
+            setItemsNumber(response.items_total);
         }
     }, [response]);
 
@@ -75,6 +91,7 @@ const NewsView = (props) => {
 
     // set batch
     const loadMore = () => {
+        updateScrollPos(window.scrollY);
         setBatchStart((batchStart) => batchStart + parseInt(props.batchSize));
         setLoadMoreLaunch(true);
     };
@@ -89,74 +106,124 @@ const NewsView = (props) => {
     }, [batchStart]);
     // coditional list render
     let listRender;
-    if (contactArray && contactArray.length > 0) {
-        listRender = <ContactList onChange={clickID} contactArray={contactArray} />;
+    if (itemsArray && itemsArray.length > 0) {
+        listRender = (
+            <NewsList
+                onChange={clickID}
+                itemsArray={itemsArray}
+                showCategoriesOrTopics={props.showCategoriesOrTopics}
+                contextAuthenticatedUser={props.contextAuthenticatedUser}
+            />
+        );
     } else if (!isLoading) {
-        listRender = <p><Translate text="Aucune actualité n'a été trouvée" /></p>;
+        listRender = (
+            <p>
+                <Translate text="Aucune actualité n'a été trouvée" />
+            </p>
+        );
     }
 
-    const divLoader = <div className="lds-roller-container"><div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>;
-
+    const divLoader = (
+        <div className="lds-roller-container">
+            <div className="lds-roller">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+    );
     return (
         <div>
-            <Router>
-                <div className="r-wrapper r-actu-wrapper">
-                    <div className="r-result r-annuaire-result">
-                        <Switch>
-                            <Route path={"/:name"}>
-                                <ContactContent
-                                    onChange={clickID}
-                                    onReturn={filtersChange}
-                                    queryUrl={props.queryUrl}
-                                />
-                            </Route>
-                            <Route exact path="*">
-                                <div className="r-result-filter actu-result-filter">
-                                    <Filters
-                                        url={props.queryFilterUrl}
-                                        activeFilter={filters}
-                                        onChange={filtersChange}
-                                    />
-                                    {props.proposeUrl &&
-                                        (
+            <div className="r-wrapper r-actu-wrapper">
+                <div className="r-result r-annuaire-result">
+                    <Routes>
+                        <Route
+                            exact
+                            path="/"
+                            element={
+                                <>
+                                    <div className="r-result-filter actu-result-filter">
+                                        <Filters
+                                            url={props.queryFilterUrl}
+                                            activeFilter={filters}
+                                            onChange={filtersChange}
+                                        />
+                                        {props.proposeUrl && (
                                             <div className="r-add-news">
-                                                <a target="_blank" href={props.proposeUrl}><Translate text='Proposer une actualité' /></a>
+                                                <a target="_blank" href={props.proposeUrl}>
+                                                    <Translate text="Proposer une actualité" />
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        width="16"
+                                                        height="16"
+                                                        fill="currentColor"
+                                                        className="bi bi-plus-circle"
+                                                        viewBox="0 0 16 16"
+                                                    >
+                                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                                                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
+                                                    </svg>
+                                                </a>
                                             </div>
-                                        )
-                                    }
-                                    {contactNumber > 0 ? (
+                                        )}
+                                    </div>
+                                    {itemsNumber > 0 ? (
                                         <p className="r-results-numbers">
-                                            <span>{contactNumber}</span>{" "}
-                                            {contactNumber > 1
-                                                ? <Translate text='Actualités trouvées' />
-                                                : <Translate text='Actualité trouvée' />}
+                                            <span>{itemsNumber}</span>{" "}
+                                            {itemsNumber > 1 ? (
+                                                <Translate text="Actualités trouvées" />
+                                            ) : (
+                                                <Translate text="Actualité trouvée" />
+                                            )}
                                         </p>
                                     ) : (
-                                        <p className="r-results-numbers"><Translate text='Aucun résultat' /></p>
+                                        <p className="r-results-numbers">
+                                            <Translate text="Aucun résultat" />
+                                        </p>
                                     )}
-                                </div>
-                                <div>{listRender}</div>
-                                <div className="r-load-more">
-                                    {contactNumber - props.batchSize > batchStart ? (
-                                        <div>
+                                    <div>{listRender}</div>
+                                    <div className="r-load-more">
+                                        {itemsNumber - props.batchSize > batchStart ? (
+                                            <div>
+                                                <span className="no-more-result">
+                                                    {isLoading ? divLoader : ""}
+                                                </span>
+                                                <button onClick={loadMore} className="btn-grad">
+                                                    {isLoading ? (
+                                                        <Translate text="Chargement..." />
+                                                    ) : (
+                                                        <Translate text="Plus de résultats" />
+                                                    )}
+                                                </button>
+                                            </div>
+                                        ) : (
                                             <span className="no-more-result">
                                                 {isLoading ? divLoader : ""}
                                             </span>
-                                            <button onClick={loadMore} className="btn-grad">
-                                                {isLoading ? <Translate text='Chargement...' /> : <Translate text='Plus de résultats' />}
-                                            </button>
-                                        </div>
-                                    ) : (
-                                        <span className="no-more-result">
-                                            {isLoading ? divLoader : ""}
-                                        </span>
-                                    )}
-                                </div>
-                            </Route>
-                        </Switch>
-                    </div>
+                                        )}
+                                    </div>
+                                </>
+                            }
+                        ></Route>
+                        <Route
+                            path={"/:name"}
+                            element={
+                                <NewsContent
+                                    onChange={clickID}
+                                    onReturn={filtersChange}
+                                    queryUrl={props.queryUrl}
+                                    contextAuthenticatedUser={props.contextAuthenticatedUser}
+                                />
+                            }
+                        ></Route>
+                    </Routes>
                 </div>
-            </Router>
+            </div>
         </div>
     );
 };