contentoh-components-library 21.5.3 → 21.5.4

package/src/components/molecules/GalleryElementv2/styles.js

@@ -0,0 +1,119 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  &.grid-gallery {
+    position: relative;
+    width: 179px;
+    border-radius: 3px;
+    overflow: hidden;
+
+    .buttons-container {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .image-container {
+      border: 1px solid #f0eef2;
+
+      .information-container {
+        background-color: ${GlobalColors.s2};
+        display: flex;
+        justify-content: space-between;
+        padding: 0 2px;
+
+        p {
+          font-family: ${FontFamily.Lato};
+          color: ${GlobalColors.s4};
+          font-size: 11px;
+          line-height: 17px;
+        }
+      }
+    }
+  }
+
+  &.row-gallery {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom:1px solid ${GlobalColors.gray_light};
+
+    .buttons-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .image-container {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      .information-container {
+        display: flex;
+        flex: 1;
+
+        p {
+          font-family: ${FontFamily.Lato};
+          color: ${GlobalColors.gray};
+          font-size: 12px;
+          line-height: 17px;
+          text-align: center;
+
+          &.highlighted-data {
+            font-family: ${FontFamily.AvenirNext};
+            color: ${GlobalColors.s5};
+            background-color: ${GlobalColors.s2};
+            border-radius: 3px;
+            font-weight: 600;
+            font-size: 11px;
+            line-height: 18px;
+            padding: 0 10px;
+          }
+
+          &:nth-child(1) {
+            //min-width: calc(20% - 76px);
+            //flex: 1 0 20%;
+            min-width: 22%;
+          }
+
+          &:nth-child(2),
+          &:nth-child(3) {
+            text-align: center;
+          }
+          &:nth-child(2) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(3) {
+            max-width: 60px;
+            min-width: 60px;
+          }
+          /* &:nth-child(4) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(5) {
+            max-width: 80px;
+            min-width: 80px;
+          } */
+        }
+
+        & > * {
+          flex: 1;
+          padding: 5px;
+        }
+      }
+    }
+  }
+
+  &.audit-class{
+    border: 1px solid #8a6caa;
+    background-color: #ededfc;
+  }
+`;

package/src/components/molecules/GalleryHeader/index.js

@@ -21,6 +21,7 @@ export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
       <p className="">Tipo de toma</p>
       <p className="">Tipo de imagen</p>
       <p className="">Tipo de empaque</p>
+      <p className="">Estatus</p>
     </Container>
   );
 };

package/src/components/molecules/GalleryHeaderv2/GalleryHeaderv2.stories.js

@@ -0,0 +1,10 @@
+import { GalleryHeaderv2 } from ".";
+
+export default {
+  title: "Components/molecules/GalleryHeaderv2",
+  component: GalleryHeaderv2,
+};
+
+const Template = (args) => <GalleryHeaderv2 {...args} />;
+export const GalleryHeaderv2Default = Template.bind({});
+GalleryHeaderv2Default.args = {};

package/src/components/molecules/GalleryHeaderv2/index.js

@@ -0,0 +1,25 @@
+import { Container } from "./styles";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const GalleryHeaderv2 = ({ setCheckAll, setSelectedImages, shotThd }) => {
+  const checkAll = (e) => {
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
+    setCheckAll(e.target.checked);
+    if (!e.target.checked) setSelectedImages([]);
+  };
+  return (
+    <Container>
+      <div>
+        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
+      </div>
+      <p className="image-header">Imagen</p>
+      <p className="image-name">Nombre</p>
+      <p className="image-size">Tamaño</p>
+      <p className="image-format">Formato</p>
+      <p className="">Tipo de toma</p>
+      <p className="">Tipo de imagen</p>
+      <p className="">Tipo de empaque</p>
+    </Container>
+  );
+};

package/src/components/molecules/GalleryHeaderv2/styles.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  padding: 10px 20px;
+  align-items: center;
+  border-radius:5px 5px 0 0;
+  background:${GlobalColors.purple};
+
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.white};
+    flex: 1;
+    text-align: center;
+   
+
+    &.value-header {
+      max-width: 60px;
+    }
+
+    &.image-header {
+      max-width: 60px;
+    }
+
+    &.image-name {
+      min-width: 20%;
+    }
+
+    &.image-format {
+      max-width: 60px;
+    }
+
+    &.image-size {
+      max-width: 90px;
+    }
+
+    &.image-identifier {
+      max-width: 80px;
+    }
+  }
+`;

package/src/components/molecules/GroupSelect/GroupSelect.stories.js

@@ -0,0 +1,35 @@
+import { GroupSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
+
+export default {
+  title: "Components/molecules/GroupSelect",
+  component: GroupSelect,
+};
+
+const Template = (args) => <GroupSelect {...args} />;
+export const GroupSelectDefault = Template.bind({});
+GroupSelectDefault.args = {
+  // selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [
+    {
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
+    },
+  ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
+};

package/src/components/molecules/GroupSelect/SelectItem.js

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const SelecItem = ({
+  option,
+  customSelectId,
+  setParameterArray,
+  activeFilters,
+  setActiveFilters,
+  onClickItem,
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const [chkGlobal, setChkGlobal] = useState(false);
+  return (
+    <div className="option-container" key={customSelectId + option.id}>
+      <div className="main-item">
+        <CheckBox
+          id={"main-item-" + option.id}
+          label={option.name}
+          typeColor="purple"
+          onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
+            const subOptions = option.subOptions;
+            const filtersCopy = { ...activeFilters };
+            if (subOptions) {
+              setChkGlobal(e.target.checked);
+              if (e.target.checked) {
+                subOptions.forEach((element) => {
+                  if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
+                  filtersCopy[option.name][element.name] = 1;
+                });
+                setParameterArray((current) => [
+                  ...current,
+                  ...subOptions.map((element) => element.id),
+                ]);
+              } else {
+                setParameterArray((current) =>
+                  current.filter(
+                    (item) => !subOptions.map((opt) => opt.id).includes(item)
+                  )
+                );
+                delete filtersCopy[option.name];
+              }
+            } else {
+              if (e.target.checked) {
+                filtersCopy[option.name] = 1;
+                setParameterArray((current) => [...current, option.id]);
+              } else {
+                delete filtersCopy[option.name];
+                setParameterArray((current) =>
+                  current.filter((item) => option.id !== item)
+                );
+              }
+            }
+            setActiveFilters(filtersCopy);
+          }}
+          defaultChecked={activeFilters[option.name]}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-menu">
+          {option?.subOptions?.map((sub) => (
+            <div
+              className="sub-filter"
+              key={customSelectId + "-" + option.id + "-" + sub.id}
+            >
+              <CheckBox
+                id={"sub-item-" + sub.id}
+                label={sub.name}
+                defaultChecked={
+                  activeFilters[option.name] &&
+                  activeFilters[option.name][sub.name]
+                }
+                onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
+                  if (e.target.checked) {
+                    setParameterArray((current) =>
+                      [...current, sub.id].sort((a, b) => a - b)
+                    );
+                  } else {
+                    setParameterArray((current) =>
+                      current.filter((item) => sub.id !== item)
+                    );
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/GroupSelect/index.js

@@ -0,0 +1,190 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { Calendar } from "../../organisms/Calendar";
+import { CustomSelectItem } from "../../atoms/CustomSelectItem";
+import add from "../../../assets/images/Icons/addv2.svg";
+
+export const GroupSelect = ({
+  options,
+  showSearchBar,
+  placeHolder = "Buscar departamento",
+  selectLabel = "",
+  customSelectId = "defaultSelectId",
+  defaultOption,
+  parameterArray,
+  setParameterArray,
+  onClickItem,
+  customOptions,
+  isSingleSelect = false,
+}) => {
+  const [filters, setFilters] = useState([]);
+  const [showList, setShowList] = useCloseModal(customSelectId);
+  const [text, setText] = useState("");
+  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [activeFilters, setActiveFilters] = useState({});
+  const [filtersString, setFiltersString] = useState(selectLabel);
+  const [filtersCounter, setFiltersCounter] = useState(0);
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const diff = today.getDate() - today.getDay();
+    const start = new Date(today.setDate(diff));
+    const end = new Date();
+    setStartDate(start);
+    setEndDate(end);
+    const obj = {};
+    options.forEach((o) => {
+      const { name, isSelected, subOptions } = o;
+      if (isSelected) obj[name] = {};
+      subOptions?.forEach((so) => {
+        const { name: nameSO, isSelected: isSelectedSO } = so;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
+
+  const onChangeDatePicker = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end)
+      setParameterArray((current) => {
+        return {
+          ...current,
+          startDate: `${start.getFullYear()}-${
+            start.getMonth() + 1
+          }-${start.getDate()}`,
+          endDate: `${end.getFullYear()}-${
+            end.getMonth() + 1
+          }-${end.getDate()}`,
+        };
+      });
+  };
+
+  useEffect(() => {
+    let filteredArray = options?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+    setFilters(filteredArray);
+  }, [text]);
+
+  useEffect(async () => {
+    let newFiltersString = selectLabel;
+    let counter = 0;
+    const filtersArray = Object.keys(activeFilters);
+    filtersArray.length &&
+      filtersArray.forEach((key, index) => {
+        if (index === 0) newFiltersString = key;
+        else {
+          counter++;
+        }
+      });
+    setFiltersCounter(counter);
+    setFiltersString(newFiltersString);
+  }, [activeFilters]);
+
+  return (
+    <Container
+      id={customSelectId}
+      selectLabel={selectLabel}
+      filterActive={
+        Object.keys(activeFilters).length > 0 ||
+        (customSelectId === "dates-select" &&
+          filtersString !== "Todo el tiempo")
+      }
+    >
+      <div className="button-list" onClick={() => setShowList(!showList)}>
+        <p>{filtersString} </p>
+        <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
+        <img src={add} alt="Favorite" width={"20px"} />
+      </div>
+      {showList &&
+        (customOptions ? (
+          customOptions
+        ) : (
+          <div className="select-container">
+            {showSearchBar && (
+              <div className="search-bar-filter">
+                <img src={searchIcon} alt="search icon" />
+                <input
+                  type="text"
+                  placeholder={placeHolder}
+                  value={text}
+                  onChange={onChange}
+                />
+              </div>
+            )}
+            {defaultOption && (
+              <div
+                className="default-option"
+                onClick={() => {
+                  setParameterArray && setParameterArray([]);
+                  setActiveFilters({});
+                  setShowList(false);
+                  setFiltersString(selectLabel);
+                  setFiltersCounter(0);
+                }}
+              >
+                <p>{defaultOption}</p>
+              </div>
+            )}
+            <div className="filters-container">
+              {filters?.map((option) =>
+                isSingleSelect ? (
+                  <div
+                    className="dates-select-item"
+                    key={customSelectId + option.id}
+                    onClick={() => {
+                      option.function
+                        ? option.function(setShowDatePicker)
+                        : setShowDatePicker(true);
+                      setFiltersString(option.name);
+                    }}
+                  >
+                    <p>{option.name}</p>
+                  </div>
+                ) : (
+                  <CustomSelectItem
+                    className={"main-option"}
+                    key={customSelectId + option.id}
+                    option={option}
+                    customSelectId={customSelectId}
+                    setParameterArray={setParameterArray}
+                    activeFilters={activeFilters}
+                    globalFilters={activeFilters}
+                    parameterArray={parameterArray}
+                    setActiveFilters={setActiveFilters}
+                    onClickItem={onClickItem}
+                    route={option.name}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        ))}
+      {showDatePicker && (
+        <Calendar
+          onChange={onChangeDatePicker}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
+    </Container>
+  );
+};

package/src/components/molecules/GroupSelect/styles.js

@@ -0,0 +1,124 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  position: relative;
+
+  .button-list {
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 12px;
+    display: flex;
+    width:30px;
+    height:30px;
+    padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "7px 7px")};
+    justify-content: space-between;
+    border-radius: 50px;
+    background-color: ${({ filterActive }) =>
+      filterActive ? "#F7F7FC" : "#fff"};
+    border: 1px solid ${GlobalColors.magenta_s2};
+    cursor: pointer;
+
+    & > p {
+      max-width: 140px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+    img{
+      width:14px;
+      height:14px;
+    }
+  }
+
+  .select-container {
+    box-shadow: 0px 2px 4px #00000040;
+    border-radius: 5px;
+    background-color: #fff;
+    padding-bottom: 10px;
+    position: absolute;
+    z-index: 10;
+    .search-bar-filter {
+      display: flex;
+      align-items: center;
+      border: 1px solid #f0f0f0;
+      padding-left: 10px;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+
+      input {
+        background-color: transparent;
+        padding: 10px 10px;
+        outline: none;
+        border: none;
+      }
+    }
+    .default-option {
+      padding-top: 5px;
+      cursor: pointer;
+      padding: 5px 10px;
+      color: #817393;
+      font-family: Avenir Next;
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 21px;
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+    .filters-container {
+      overflow: auto;
+      max-height: 500px;
+      .option-container,
+      .default-option {
+        cursor: pointer;
+        padding: 5px 10px;
+        .main-item {
+          display: flex;
+          justify-content: space-between;
+
+          .arrow-item {
+            transform: rotate(-90deg);
+            cursor: pointer;
+            font-size: 10px;
+          }
+        }
+        .sub-menu {
+          margin-top: 10px;
+          padding-left: 20px;
+          .sub-filter {
+            & + * {
+              margin-top: 10px;
+            }
+          }
+        }
+
+        &:hover {
+          background-color: #f0f0f0;
+        }
+        label {
+          white-space: nowrap;
+        }
+      }
+
+      .dates-select-item {
+        cursor: pointer;
+        padding: 5px 10px;
+        color: #817393;
+        font-family: Avenir Next;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 21px;
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+`;