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

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

@@ -0,0 +1,70 @@
+.taxonomy-Filter {
+    width: 100%;
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    transition: all .3s ease-in-out;
+}
+
+
+.dropDownFilter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0 5px;
+    transition: max-width .3s ease-in-out;
+    transition: opacity 3s ease-in-out;
+
+    border: solid 1px #CFCFCF;
+    border-radius: 20px;
+    outline: 1px solid transparent;
+
+    &-active {
+        border-color: #2684FF;
+        outline: 1px solid #2684FF;
+
+        // border-width: 2px;
+        .sub0 {}
+    }
+
+    .sub0 {
+        text-decoration: none;
+        padding: 10px 10px;
+    }
+
+    .sub1 {
+        // transition: max-width .3s ease-in-out;
+        padding-right: 5px;
+        transition: all .4s cubic-bezier(0, .74, .58, 1.04);
+
+        div[class*="control"] {
+            flex-wrap: nowrap;
+            border-radius: 15px;
+        }
+    }
+
+    .sub2 {
+        // transition: max-width .3s ease-in-out;
+        padding-right: 5px;
+        transition: all .4s cubic-bezier(0, .74, .58, 1.04);
+
+        div[class*="control"] {
+            flex-wrap: nowrap;
+            border-radius: 15px;
+        }
+    }
+
+    .dropDownFilter-invisble {
+        opacity: 0;
+        max-width: 0px;
+        height: 0px;
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .dropDownFilter-visible {
+        max-width: 150px;
+        height: auto;
+        opacity: 1;
+    }
+}

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

@@ -2,14 +2,17 @@ import React, { useEffect, useCallback, useRef, 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 queryString from 'query-string';
+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 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: "",
@@ -28,15 +31,36 @@ function Filters(props) {
             }));
             const optionsTaxonomy = response.category
                 ? 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 }), []);
@@ -61,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(() => {
@@ -87,89 +123,110 @@ 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>
     );
 }
 
-export default Filters;
+export default Filters;

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

@@ -1,18 +1,15 @@
-import React, { useEffect, useState, createContext, useContex } from "react";
-import {
-    BrowserRouter,
-    Routes,
-    Route,
-} from "react-router-dom";
+import React, { useEffect, useState, createContext } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Filters from "./Filters/Filter";
 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 queryString from 'query-string';
+import translation from "../../utils/translation";
+import queryString from "query-string";
 
 export const LanguageContext = createContext("fr");
 export default function News(props) {
@@ -98,72 +95,118 @@ const NewsView = (props) => {
     // coditional list render
     let listRender;
     if (itemsArray && itemsArray.length > 0) {
-        listRender = <NewsList onChange={clickID} itemsArray={itemsArray} showCategoriesOrTopics={props.showCategoriesOrTopics} />;
+        listRender = (
+            <NewsList
+                onChange={clickID}
+                itemsArray={itemsArray}
+                showCategoriesOrTopics={props.showCategoriesOrTopics}
+            />
+        );
     } 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>
             <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 &&
-                                        (
+                        <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>
-                                        )
-                                    }
+                                        )}
+                                    </div>
                                     {itemsNumber > 0 ? (
                                         <p className="r-results-numbers">
                                             <span>{itemsNumber}</span>{" "}
-                                            {itemsNumber > 1
-                                                ? <Translate text='Actualités trouvées' />
-                                                : <Translate text='Actualité trouvée' />}
+                                            {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">
-                                    {itemsNumber - 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>
-                        <Route path={"/:name"} element={
-                            <NewsContent
-                                onChange={clickID}
-                                onReturn={filtersChange}
-                                queryUrl={props.queryUrl}
-                            />
-                        }>
-                        </Route>
+                                        )}
+                                    </div>
+                                </>
+                            }
+                        ></Route>
+                        <Route
+                            path={"/:name"}
+                            element={
+                                <NewsContent
+                                    onChange={clickID}
+                                    onReturn={filtersChange}
+                                    queryUrl={props.queryUrl}
+                                />
+                            }
+                        ></Route>
                     </Routes>
                 </div>
             </div>