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

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,227 @@
+.r-result-filter-container {
+  @media screen and (min-width:1200px) {
+    position: sticky;
+  }
+  z-index: 1;
+  background: #fff;
+  &: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, .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, .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;

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;
+    }
+}