imio.smartweb.core 1.2.47__py3-none-any.whl → 1.2.48__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, moreFilterStyles } 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 locale" />,
+            options: localsCategoryFilter,
+        },
+        {
+            label: <Translate text="Catégories" />,
+            options: taxonomyFilter,
+        },
+    ];
+
     const onChangeHandler = useCallback(({ target: { name, value } }) => {
         if (value.length > 2) {
             setInputValues((state) => ({ ...state, [name]: value }), []);
@@ -87,89 +111,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={onChangeHandlerSelect}
+                                    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 { 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,108 @@ 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é" />
+                                                </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>

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

@@ -1,21 +1,25 @@
 .breadcrumb {
   padding: 0;
 }
+
 .r-result-list {
   margin-top: 50px;
   padding-left: 0;
   list-style: none;
 }
+
 #portal-column-content {
   h1 {
     font-size: 0px;
     position: absolute;
   }
 }
+
 #viewlet-below-content-title,
 #viewlet-below-content-description {
   display: none;
 }
+
 /* image */
 /* text */
 .r-item-text {
@@ -24,31 +28,29 @@
   display: flex;
   flex-direction: column;
 }
+
 .r-item-title {
   display: block;
 }
 
-.r-results-numbers {
-  width: 100%;
-  margin-bottom: 0.5rem;
-  span {
-    font-weight: bold;
-  }
-}
+
 // content
 
 .r-content-img {
   padding-bottom: 60%;
 }
+
 .new-content {
   max-width: 700px;
   margin: 0 auto;
 }
+
 //// for bla ////
 /* list item */
 .r-load-more {
   text-align: center;
   margin-bottom: 2rem;
+
   button {
     background: #000;
     border: solid 1px transparent;
@@ -61,13 +63,16 @@
     font-size: 14px;
     margin: 0 auto;
     display: block;
+
     &:hover {
       background: rgba(0, 0, 0, 0.871);
     }
   }
 }
+
 .r-actu-wrapper {
   position: relative;
+
   &:after {
     width: 495px;
     display: block;
@@ -78,6 +83,7 @@
     right: 0;
     transform: translateY(-20%);
   }
+
   .r-list-item-group {
     max-width: 900px;
     margin: 30px auto;
@@ -86,20 +92,24 @@
     border: 1px solid #D1D1D1;
   }
 }
+
 /* text */
 .r-item-title {
   font-size: 18px;
   font-weight: bold;
 }
+
 .r-item-description {
   font-size: 16px;
   color: #444444;
   margin-top: 10px;
 }
+
 /* image */
 .r-item-img {
   border-radius: 15px 15px 15px 0px;
 }
+
 .r-actu-wrapper {
   .r-item-img {
     width: 100%;
@@ -107,15 +117,18 @@
     background-position: top;
     background-size: cover;
     background-repeat: no-repeat;
+
     @media screen and (min-width:775px) {
       width: 323px;
     }
   }
 }
+
 /* arrow more */
 .r-item-read-more {
   margin-top: auto;
 }
+
 .r-item-arrow-more {
   width: 50px;
   height: 50px;
@@ -130,6 +143,7 @@
   background-size: 20px;
   background-position: center;
 }
+
 .r-list-item-group {
   &:hover {
     .r-item-arrow-more {
@@ -142,10 +156,11 @@
 }
 
 .r-list-item {
-  @media screen and (max-width:600px) {
+  @media screen and (max-width:774px) {
     flex-direction: column;
   }
 }
+
 .r-item-read-more {
   @media screen and (max-width:600px) {
     position: relative;
@@ -156,6 +171,7 @@
   display: inline-flex;
   align-self: center;
   margin-right: 0.4rem;
+
   svg {
     top: .125em;
     position: relative;
@@ -163,6 +179,7 @@
     width: 1em;
   }
 }
+
 .dpinlb {
   display: inline-block;
   vertical-align: top;
@@ -173,12 +190,15 @@
     width: 30px;
     height: 30px;
   }
+
   ul {
     display: flex;
     align-items: center;
     margin: 0;
+
     li {
       list-style: none;
+
       a {
         &:hover {
           opacity: .7;
@@ -194,4 +214,4 @@
   color: #747474;
   font-weight: 400;
   font-size: 13px;
-} 
+}