imio.smartweb.core 1.2.37__py3-none-any.whl → 1.2.79__py3-none-any.whl

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

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

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

@@ -0,0 +1,42 @@
+export const iam = [
+    {
+        label: "Commerçant",
+        value: "merchant",
+    },
+    {
+        label: "Demandeur d'emploi",
+        value: "job_seeker",
+    },
+    {
+        label: "En situation de handicap",
+        value: "disabled_person",
+    },
+    {
+        label: "Jeune",
+        value: "young",
+    },
+    {
+        label: "Journaliste",
+        value: "journalist",
+    },
+    {
+        label: "Nouvel arrivant",
+        value: "newcomer",
+    },
+    {
+        label: "Organisateur d'événement",
+        value: "event_planner",
+    },
+    {
+        label: "Parent",
+        value: "parent",
+    },
+    {
+        label: "Senior",
+        value: "elder",
+    },
+    {
+        label: "Touriste",
+        value: "tourist",
+    },
+];

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

@@ -0,0 +1,229 @@
+.r-result-filter-container {
+    z-index: 1;
+    background: #fff;
+    @media screen and (min-width: 1200px) {
+        position: sticky;
+    }
+    &:after {
+        content: "";
+        background: #fff;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 312px;
+        top: 0;
+        transform: translateY(-100%);
+    }
+    .r-result-filter {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        border-bottom: solid 1px #cccc;
+        position: relative;
+    }
+}
+
+.r-results-numbers {
+    width: 100%;
+    margin-bottom: 0rem;
+    padding-top: 1rem;
+
+    span {
+        font-weight: bold;
+    }
+}
+
+.r-result-filter {
+    position: relative;
+}
+//  react filter menu
+
+.react-filters-menu {
+    display: flex;
+    width: 100%;
+    margin-bottom: 1rem;
+
+    .react-filters-container {
+        display: flex;
+        align-items: flex-start;
+        position: relative;
+        flex-direction: column;
+        width: auto;
+        border-radius: 30px;
+        gap: 10px;
+        background: #fff;
+        width: 100%;
+
+        @media screen and (min-width: 630px) {
+            align-items: center;
+            flex-direction: row;
+            width: auto;
+            padding: 4px 15px;
+            border: solid 1px #cfcfcf;
+            box-shadow:
+                0 3px 12px 0 rgba(0, 0, 0, 0.1),
+                0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    .react-sep-menu {
+        display: none;
+        background: #cfcfcf;
+        width: 1px;
+        height: 20px;
+
+        @media screen and (min-width: 630px) {
+            display: block;
+        }
+    }
+
+    span[class$="-indicatorSeparator"] {
+        display: none;
+    }
+
+    div[class$="-indicatorContainer"] {
+        padding: 0;
+    }
+
+    .accordion-collapse {
+        padding-top: 1rem;
+    }
+
+    .top-filter {
+        width: 100%;
+
+        @media screen and (min-width: 630px) {
+            width: auto;
+        }
+
+        .select-custom-no-border {
+            width: 100%;
+
+            @media screen and (min-width: 630px) {
+                width: auto;
+            }
+
+            div[class$="-control"] {
+                width: 100%;
+
+                @media screen and (max-width: 629px) {
+                    border-color: hsl(0, 0%, 70%);
+                    color: hsl(0, 0%, 20%);
+                    border: solid 1px #cfcfcf;
+                }
+
+                @media screen and (min-width: 630px) {
+                    width: auto;
+                }
+            }
+        }
+    }
+}
+
+// react search bar
+
+.r-filter-search {
+    position: relative;
+    padding: 12px 6px;
+    border-radius: 50px;
+    display: block;
+    width: 100%;
+
+    @media screen and (max-width: 629px) {
+        width: calc(100% - 40px);
+        border: solid 1px #cfcfcf;
+        box-shadow:
+            0 3px 12px 0 rgba(0, 0, 0, 0.1),
+            0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    @media screen and (min-width: 630px) {
+        width: 175px;
+    }
+
+    input {
+        border: none;
+        width: 100%;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    svg {
+        position: absolute;
+        transform: translateX(-100%);
+        right: 0;
+    }
+
+    .relative {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+//   // More filters
+
+.more-filter-btn {
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    right: 0;
+    top: 18px;
+
+    @media screen and (min-width: 630px) {
+        width: auto;
+        translate: 40px;
+        top: inherit;
+    }
+
+    &.collapsed {
+        transform: rotate(180deg);
+
+        svg {
+            stroke: #9f9f9f;
+        }
+    }
+}
+
+.more-filter-container {
+    &.collapse:not(.show) {
+        display: none;
+    }
+
+    .accordion-body {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+        padding: 1rem;
+        background-color: #f8f8f8;
+        justify-content: center;
+        border: solid 1px #e4e4e4;
+        border-left: none;
+        border-right: none;
+
+        @media screen and (max-width: 630px) {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .free-Filter {
+        label {
+            font-size: 12px;
+            font-weight: bold;
+            letter-spacing: 1.4px;
+        }
+
+        .form-check {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding: 0;
+
+            input {
+                margin: 0;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+export const taxonomy_event_public = [
+    {
+        label: "Petit enfant",
+        value: "i8gf49541q",
+    },
+    {
+        label: "Petit enfant » 1 an",
+        value: "tdtpdh546x",
+    },
+    {
+        label: "Petit enfant » 2 ans",
+        value: "19hb3u884v",
+    },
+    {
+        label: "Petit enfant » 3 ans",
+        value: "cl7oi9xaig",
+    },
+    {
+        label: "Enfant",
+        value: "omg40jn2yl",
+    },
+    {
+        label: "Enfant » 4 ans",
+        value: "a04ryxt74a",
+    },
+    {
+        label: "Enfant » 5 ans",
+        value: "2u0ugvi72u",
+    },
+    {
+        label: "Enfant » 6 ans",
+        value: "8btkbsp9ei",
+    },
+    {
+        label: "Enfant » 7 ans",
+        value: "gp881gyhmy",
+    },
+    {
+        label: "Enfant » 8 ans",
+        value: "me9vnw7vnk",
+    },
+    {
+        label: "Enfant » 9 ans",
+        value: "11ps76le1h",
+    },
+    {
+        label: "Enfant » 10 ans",
+        value: "rf2m1fbrot",
+    },
+    {
+        label: "Enfant » 11 ans",
+        value: "79qhii8mnf",
+    },
+    {
+        label: "Adolescent",
+        value: "ah0rbc2qr4",
+    },
+    {
+        label: "Adolescent » 12 ans",
+        value: "x6rmmxao6i",
+    },
+    {
+        label: "Adolescent » 13 ans",
+        value: "1pn83a9xkw",
+    },
+    {
+        label: "Adolescent » 14 ans",
+        value: "b8skpvhfka",
+    },
+    {
+        label: "Adolescent » 15 ans",
+        value: "snvxin8j4j",
+    },
+    {
+        label: "Adolescent » 16 ans",
+        value: "v4ty7v0hab",
+    },
+    {
+        label: "Adolescent » 17 ans",
+        value: "1x1ii6jxhu",
+    },
+    {
+        label: "Adulte",
+        value: "5lfbjyeea0",
+    },
+    {
+        label: "Plus de 60 ans",
+        value: "58cuuquwed",
+    },
+    {
+        label: "Tout public",
+        value: "ry275hefdy",
+    },
+];

imio/smartweb/core/webcomponents/src/components/Filters/SelectStyles.js

@@ -0,0 +1,58 @@
+export const menuStyles = {
+    control: (styles) => ({
+        ...styles,
+        backgroundColor: "white",
+        borderColor: "transparent",
+        borderRadius: "10px",
+        minWidth:"150px",
+        height: "40px",
+    }),
+    menu: (styles) => ({
+        ...styles,
+        width: "max-content",
+        maxWidth: "250px",
+    }),
+    placeholder: (styles) => ({
+        ...styles,
+        color: "000",
+        fontWeight: "bold",
+        fontSize: "14px",
+        letterSpacing: "1.4px",
+    }),
+    indicators: (styles) => ({
+        ...styles,
+        color: "blue",
+    }),
+    option: (styles) => {
+        return {
+            ...styles,
+        };
+    },
+};
+
+export const moreFilterStyles = {
+    control: (styles) => ({
+        ...styles,
+        backgroundColor: "white",
+        borderRadius: "10px",
+        height: "30px",
+        minWidth:"150px",
+    }),
+    placeholder: (styles) => ({
+        ...styles,
+        color: "000",
+        fontWeight: "bold",
+        fontSize: "12px",
+        letterSpacing: "1.4px",
+    }),
+    menu: (styles) => ({
+        ...styles,
+        width: "max-content",
+        maxWidth: "250px",
+    }),
+    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+        return {
+            ...styles,
+        };
+    },
+};

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

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from "react";
+import Select from "react-select";
+import "./TaxonomyFilter.scss";
+
+function TaxonomyFilter({ onChange, sub, title, token, isActive, setCat, onClick }) {
+    const [select1Value, setSelect1Value] = useState(null);
+    const [select2Value, setSelect2Value] = useState(null);
+    const [select3Value, setSelect3Value] = useState(null);
+    const [firstLevelOptions, setFirstLevelOptions] = useState(null);
+    const [secondLevelOptions, setSecondLevelOptions] = useState(null);
+    // État pour suivre l'affichage de la div associée
+    const [secondLevelVisible, setsecondLevelVisible] = useState(false);
+    const [thirdLevelVisible, setThirdLevelVisible] = useState(false);
+    //  const avev la valeur des filtres
+    const [filterValue, setFilterValue] = useState({
+        taxonomy_contact_category_for_filtering: null,
+    });
+
+    // Object { b_start: "0", fullobjects: "1", taxonomy_contact_category_for_filtering: "ol8av3v8bn" }
+
+    // Dans le composant TaxonomyFilter
+    useEffect(() => {
+        if (!isActive) {
+            setsecondLevelVisible(false);
+            setThirdLevelVisible(false);
+            setSelect2Value(null);
+        }
+    }, [isActive]);
+
+    useEffect(() => {
+        if (sub) {
+            const optionsSub1 = sub.map((d) => ({
+                value: d.token,
+                label: d.title,
+                ...(d.sub && { sub: d.sub }),
+            }));
+            setFirstLevelOptions(optionsSub1);
+        }
+    }, [sub]);
+    // Gestionnaire d'événements pour le clic sur le lien
+    const handleLinkClick = () => {
+        // Inverser la valeur de l'état pour afficher ou masquer la div
+        setsecondLevelVisible(!secondLevelVisible);
+        setSelect2Value(null);
+        setThirdLevelVisible(false);
+    };
+
+    // Gestionnaire d'événements pour le changement de valeur dans le premier select
+    const onChangeSub1 = (value, action) => {
+        if (value && value.sub) {
+            const optionsSub2 = value.sub.map((d) => ({
+                value: d.token,
+                label: d.title,
+            }));
+            setSelect2Value(value.label);
+            setSelect3Value(null);
+            setSecondLevelOptions(optionsSub2);
+            setThirdLevelVisible(true);
+            onChange(value, action);
+        } else {
+            setSecondLevelOptions(null);
+        }
+    };
+
+    // Gestionnaire d'événements pour le changement de valeur dans le deuxième select
+    const onChangeSub2 = (value, action) => {
+        setSelect3Value(value.label);
+        onChange(value, action);
+    };
+
+    // send the value to the first level (a link)
+    const handleApply = (value, title) => {
+        setCat((prevCat) => !prevCat);
+        if (!secondLevelVisible) {
+            onChange(
+                { value: value, label: title },
+                { name: "taxonomy_contact_category_for_filtering" }
+            );
+        } else {
+            onChange(null, { name: "taxonomy_contact_category_for_filtering" });
+        }
+    };
+
+    return (
+        <div onClick={onClick}>
+            <div
+                className={
+                    secondLevelVisible ? "dropDownFilter dropDownFilter-active" : "dropDownFilter"
+                }
+            >
+                {/* Lien avec gestionnaire d'événements */}
+                <a
+                    className="sub0"
+                    href="#"
+                    value={title}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        handleLinkClick();
+                        handleApply(token, title); // Pass the correct value to handleApply
+                    }}
+                >
+                    {title}
+                </a>
+
+                {/* Div conditionnellement rendue en fonction de l'état */}
+                {firstLevelOptions && (
+                    <div
+                        className={
+                            secondLevelVisible
+                                ? "sub1 dropDownFilter-visible"
+                                : "sub1 dropDownFilter-invisble"
+                        }
+                    >
+                        <Select
+                            name={"taxonomy_contact_category_for_filtering"}
+                            className="select-custom-class library-facilities"
+                            onChange={onChangeSub1}
+                            options={firstLevelOptions}
+                            value={select2Value}
+                            placeholder={select2Value ? select2Value : "Catégories"}
+                        />
+                    </div>
+                )}
+
+                {/* Div 3 conditionnellement rendue en fonction de l'état */}
+                {secondLevelOptions && (
+                    <div
+                        className={
+                            thirdLevelVisible
+                                ? "sub2 dropDownFilter-visible"
+                                : "sub2 dropDownFilter-invisble"
+                        }
+                    >
+                        <Select
+                            name={"taxonomy_contact_category_for_filtering"}
+                            className="select-custom-class library-facilities"
+                            onChange={onChangeSub2}
+                            options={secondLevelOptions}
+                            value={select3Value}
+                            placeholder={select3Value ? select3Value : "Catégories"}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default TaxonomyFilter;