contentoh-components-library 21.2.65 → 21.2.67

package/src/components/atoms/CustomSelectItem/CustomSelectItem.stories.js

@@ -0,0 +1,410 @@
+import { CustomSelectItem } from ".";
+
+export default {
+  title: "Components/atoms/CustomSelectItem",
+  component: CustomSelectItem,
+};
+
+const Template = (args) => <CustomSelectItem {...args} />;
+export const CustomSelectItemDefault = Template.bind({});
+CustomSelectItemDefault.args = {
+  option: {
+    id: 0,
+    name: "Abarrotes",
+    subOptions: [
+      {
+        id: 0,
+        name: "Abarrotes Secos",
+        subOptions: [
+          {
+            id: 4,
+            name: "Alimentos Deshidratados",
+          },
+          {
+            id: 5,
+            name: "Avenas y Granolas",
+          },
+          {
+            id: 6,
+            name: "Azúcar, Endulzantes y Sustitutos",
+          },
+          {
+            id: 7,
+            name: "Café Grano",
+          },
+          {
+            id: 8,
+            name: "Café Soluble",
+          },
+          {
+            id: 9,
+            name: "Cereales y Barras",
+          },
+          {
+            id: 10,
+            name: "Despensas y Canastas",
+          },
+          {
+            id: 11,
+            name: "Frutos Secos",
+          },
+          {
+            id: 12,
+            name: "Galletas",
+          },
+          {
+            id: 13,
+            name: "Harinas y Repostería",
+          },
+          {
+            id: 14,
+            name: "Pan de Caja",
+          },
+          {
+            id: 15,
+            name: "Postres en Polvo",
+          },
+          {
+            id: 16,
+            name: "Saborizantes de Leche",
+          },
+          {
+            id: 17,
+            name: "Sopas y Pastas",
+          },
+          {
+            id: 18,
+            name: "Tortillas Empacadas",
+          },
+        ],
+      },
+      {
+        id: 1,
+        name: "Aceites y Vinagres",
+        subOptions: [
+          {
+            id: 20,
+            name: "Aceite de Oliva",
+          },
+          {
+            id: 21,
+            name: "Aceite en Aerosol",
+          },
+          {
+            id: 22,
+            name: "Aceites y Manteca",
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: "Aderezos, Especias y Sazonadores",
+        subOptions: [
+          {
+            id: 24,
+            name: "Aderezos",
+          },
+          {
+            id: 25,
+            name: "Condimentos y Especias",
+          },
+          {
+            id: 26,
+            name: "Consomés",
+          },
+          {
+            id: 27,
+            name: "Mayonesas",
+          },
+          {
+            id: 28,
+            name: "Purés",
+          },
+          {
+            id: 29,
+            name: "Salsas",
+          },
+        ],
+      },
+      {
+        id: 3,
+        name: "Agua, Jugos y Bebidas",
+        subOptions: [
+          {
+            id: 31,
+            name: "Agua Embotellada",
+          },
+          {
+            id: 32,
+            name: "Bebidas Energizantes",
+          },
+          {
+            id: 33,
+            name: "Bebidas Isotónicas",
+          },
+          {
+            id: 34,
+            name: "Bebidas no Gasificadas",
+          },
+          {
+            id: 35,
+            name: "Bebidas y Concentrados en Polvo",
+          },
+          {
+            id: 36,
+            name: "Café, Té y Saborizantes",
+          },
+          {
+            id: 37,
+            name: "Jarabes para Agua",
+          },
+          {
+            id: 38,
+            name: "Jugos y Néctares",
+          },
+          {
+            id: 39,
+            name: "Refrescos y Sodas",
+          },
+        ],
+      },
+      {
+        id: 4,
+        name: "Botanas, Golosinas y Chocolates",
+        subOptions: [
+          {
+            id: 41,
+            name: "Botanas",
+          },
+          {
+            id: 42,
+            name: "Confitería",
+          },
+          {
+            id: 43,
+            name: "Dulces y Chocolates",
+          },
+          {
+            id: 44,
+            name: "Frituras Empacadas",
+          },
+        ],
+      },
+      {
+        id: 5,
+        name: "Cervezas, Vinos, Licores y Cigarros",
+        subOptions: [
+          {
+            id: 46,
+            name: "Accesorios Vinos",
+          },
+          {
+            id: 47,
+            name: "Aguardientes",
+          },
+          {
+            id: 48,
+            name: "Aperitivos",
+          },
+          {
+            id: 49,
+            name: "Brandy y Coñac",
+          },
+          {
+            id: 50,
+            name: "Cervezas",
+          },
+          {
+            id: 51,
+            name: "Cigarros Y Puros",
+          },
+          {
+            id: 52,
+            name: "Cockteles",
+          },
+          {
+            id: 53,
+            name: "Coolers y Bebidas Preparadas",
+          },
+          {
+            id: 54,
+            name: "Destilados",
+          },
+          {
+            id: 55,
+            name: "Digestivos",
+          },
+          {
+            id: 56,
+            name: "Mezcladores",
+          },
+          {
+            id: 57,
+            name: "Rompopes y Cremas",
+          },
+          {
+            id: 58,
+            name: "Ron",
+          },
+          {
+            id: 59,
+            name: "Tequila",
+          },
+          {
+            id: 60,
+            name: "Vinos Blancos",
+          },
+          {
+            id: 61,
+            name: "Vinos Espumosos",
+          },
+          {
+            id: 62,
+            name: "Vinos Rosados",
+          },
+          {
+            id: 63,
+            name: "Vinos Tintos",
+          },
+          {
+            id: 64,
+            name: "Vodka y Ginebra",
+          },
+          {
+            id: 65,
+            name: "Whisky",
+          },
+        ],
+      },
+      {
+        id: 6,
+        name: "Enlatados y Conservas",
+        subOptions: [
+          {
+            id: 67,
+            name: "Alimentos Preparados",
+          },
+          {
+            id: 68,
+            name: "Almíbares",
+          },
+          {
+            id: 69,
+            name: "Chiles Enlatados",
+          },
+          {
+            id: 70,
+            name: "Conservas Granel",
+          },
+          {
+            id: 71,
+            name: "Encurtidos",
+          },
+          {
+            id: 72,
+            name: "Frijoles Envasados",
+          },
+          {
+            id: 73,
+            name: "Legumbres Enlatados",
+          },
+          {
+            id: 74,
+            name: "Pescados y Mariscos Enlatados",
+          },
+          {
+            id: 75,
+            name: "Sopas Enlatadas",
+          },
+        ],
+      },
+      {
+        id: 7,
+        name: "Gourmet y Comida de Temporada",
+        subOptions: [
+          {
+            id: 77,
+            name: "Gourmet y Comida de Temporada",
+          },
+        ],
+      },
+      {
+        id: 8,
+        name: "Granos y Semillas",
+        subOptions: [
+          {
+            id: 79,
+            name: "Arroz",
+          },
+          {
+            id: 80,
+            name: "Frijol",
+          },
+          {
+            id: 81,
+            name: "Granos",
+          },
+          {
+            id: 82,
+            name: "Semillas",
+          },
+        ],
+      },
+      {
+        id: 9,
+        name: "Hielo",
+        subOptions: [
+          {
+            id: 84,
+            name: "Hielo",
+          },
+        ],
+      },
+      {
+        id: 10,
+        name: "Lácteos e Infusiones",
+        subOptions: [
+          {
+            id: 86,
+            name: "Condensadas y Evaporadas",
+          },
+          {
+            id: 87,
+            name: "Leche Líquida",
+          },
+          {
+            id: 88,
+            name: "Leche Polvo",
+          },
+          {
+            id: 89,
+            name: "Sustitutos de Crema",
+          },
+          {
+            id: 90,
+            name: "Té e Infusiones",
+          },
+        ],
+      },
+      {
+        id: 11,
+        name: "Untables y Mermeladas",
+        subOptions: [
+          {
+            id: 92,
+            name: "Cajetas y Untables",
+          },
+          {
+            id: 93,
+            name: "Mermeladas y Jaleas",
+          },
+          {
+            id: 94,
+            name: "Mieles",
+          },
+        ],
+      },
+    ],
+  },
+  className: "main-option",
+};

package/src/components/atoms/CustomSelectItem/index.js

@@ -0,0 +1,144 @@
+import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { useState } from "react";
+
+export const CustomSelectItem = ({
+  option,
+  activeFilters = {},
+  parameterArray,
+  globalFilters,
+  setActiveFilters,
+  setParameterArray,
+  className,
+  route = "",
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const filterRoute = route;
+
+  const returnFilterId = (object) => {
+    const { subOptions, id } = object;
+    if (subOptions) return subOptions.map(returnFilterId);
+    else return id;
+  };
+
+  const oneDimensionArray = (arr) => {
+    var array = [];
+    arr.forEach((element) => {
+      if (typeof element == "object") array.push(...oneDimensionArray(element));
+      else array.push(element);
+    });
+    return array;
+  };
+
+  const setFilter = (object, newObject = {}) => {
+    const { subOptions } = object;
+    if (subOptions) {
+      subOptions.forEach((option) => {
+        newObject[option.name] = setFilter(option);
+      });
+      return newObject;
+    } else return (newObject[object.name] = 1);
+  };
+
+  const createFilter = (rout, option, filters) => {
+    const levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+    if (levelsArray.length === 1) {
+      return { [levelsArray[0]]: setFilter(option) };
+    } else if (levelsArray.length === 2) {
+      const newObject = {};
+      newObject[levelsArray[1]] = { ...filters };
+      newObject[levelsArray[1]][levelsArray[0]] = {
+        ...setFilter(option),
+      };
+      return { ...newObject };
+    } else if (levelsArray.length === 3) {
+      let newObject = globalFilters;
+      if (newObject[levelsArray[2]]) {
+        newObject[levelsArray[2]][levelsArray[1]] = {
+          ...newObject[levelsArray[2]][levelsArray[1]],
+          ...filters,
+        };
+      } else {
+        newObject = {
+          [levelsArray[2]]: { [levelsArray[1]]: { ...filters } },
+        };
+      }
+      newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]] = 1;
+      return { ...newObject };
+    }
+  };
+
+  const deleteFilter = (rout) => {
+    const levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+    const newObject = { ...globalFilters };
+    if (levelsArray.length === 1) delete newObject[levelsArray[0]];
+    else if (levelsArray.length === 2)
+      delete newObject[levelsArray[1]][levelsArray[0]];
+    else if (levelsArray.length === 3)
+      delete newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]];
+    return newObject;
+  };
+
+  const onChangeChk = (e, object) => {
+    let idsFilter = returnFilterId(object);
+    if (typeof idsFilter === "object") {
+      idsFilter = oneDimensionArray(idsFilter);
+    } else {
+      idsFilter = [idsFilter];
+    }
+    let tempArray = parameterArray.slice();
+    if (e.target.checked) {
+      const newFilter = createFilter(route, option, activeFilters);
+      tempArray.push(...idsFilter);
+      setActiveFilters((current) => {
+        return {
+          ...current,
+          ...newFilter,
+        };
+      });
+    } else {
+      tempArray = tempArray.filter((element) => !idsFilter.includes(element));
+      const remainFilters = deleteFilter(route, globalFilters);
+      setActiveFilters((current) => remainFilters);
+    }
+    setParameterArray(tempArray);
+  };
+
+  return (
+    <Container mainDivClass={className}>
+      <div className={className}>
+        <CheckBox
+          id={"main-item-" + option.name}
+          label={option.name}
+          defaultChecked={activeFilters[option.name]}
+          onChange={(e) => onChangeChk(e, option)}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-options">
+          {option.subOptions.map((subOption, index) => (
+            <CustomSelectItem
+              key={index + "-" + subOption.name}
+              option={subOption}
+              className={"sub-option"}
+              route={`${filterRoute}|${subOption.name}`}
+              activeFilters={activeFilters[option.name]}
+              parameterArray={parameterArray}
+              globalFilters={globalFilters}
+              setActiveFilters={setActiveFilters}
+              setParameterArray={setParameterArray}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

package/src/components/atoms/CustomSelectItem/styles.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & > .${(props) => props.mainDivClass} {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    .arrow-item {
+      transform: rotate(-90deg);
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    &:hover {
+      background-color: #f0f0f0;
+    }
+
+    input {
+      & + label {
+        cursor: pointer;
+      }
+    }
+  }
+  .sub-options {
+    & > * {
+      padding-left: 15px;
+    }
+  }
+`;

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

@@ -4,7 +4,7 @@ import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
 import { useCloseModal } from "../../../global-files/customHooks";
 import { SelecItem } from "./SelectItem";
 import { Calendar } from "../../organisms/Calendar";
-import { formatDate } from "../../pages/Dashboard/dashboardUtils";
+import { CustomSelectItem } from "../../atoms/CustomSelectItem";
 
 export const CustomSelect = ({
   options,
@@ -13,6 +13,7 @@ export const CustomSelect = ({
   selectLabel = "",
   customSelectId = "defaultSelectId",
   defaultOption,
+  parameterArray,
   setParameterArray,
   onClickItem,
   icon,
@@ -84,7 +85,7 @@ export const CustomSelect = ({
     setFilters(filteredArray);
   }, [text]);
 
-  useEffect(() => {
+  useEffect(async () => {
     let newFiltersString = selectLabel;
     let counter = 0;
     const filtersArray = Object.keys(activeFilters);
@@ -164,14 +165,18 @@ export const CustomSelect = ({
                     <p>{option.name}</p>
                   </div>
                 ) : (
-                  <SelecItem
+                  <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}
                   />
                 )
               )}

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

@@ -11,8 +11,6 @@ export const Container = styled.div`
     font-size: 13px;
     display: flex;
     padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
-    //padding: 10px 15px;
-    //padding: 5px 5px;
     justify-content: space-between;
     border-radius: 50px;
     background-color: ${({ filterActive }) =>

package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js

@@ -1,7 +1,7 @@
 export const getFullStatus = (status) => {
   switch (status) {
     case "PA":
-      return "Por Asignar";
+      return "Por asignar";
     case "AS":
     case "Assigned":
       return "Asignado";
@@ -10,29 +10,31 @@ export const getFullStatus = (status) => {
       return "Capturando";
     case "IE":
     case "QF":
-      return "Información Enviada";
+      return "Información enviada";
     case "RC":
     case "RF":
-      return "Rechazado Coordinador";
+      return "Rechazado coordinador";
     case "AC":
     case "AF":
-      return "Aprobado Coordinador";
+      return "Aprobado coordinador";
     case "RA":
-      return "Rechazado Auditor";
+      return "Rechazado auditor";
     case "AA":
-      return "Aprobado Auditor";
+      return "Aprobado auditor";
     case "RP":
-      return "Rechazado Proveedor";
+      return "Rechazado proveedor";
     case "AP":
-      return "Aprobado Proveedor";
+      return "Aprobado proveedor";
     case "RCA":
-      return "Rechazado Cadena";
+      return "Rechazado cadena";
     case "ACA":
-      return "Aprobado Cadena";
+      return "Aprobado cadena";
     case "R":
-      return "Por Recibir/Recibido";
+      return "Por recibir/recibido";
     case "Ex":
       return "Exportado";
+    case "NS":
+      return "No solicitado";
   }
 };
 
@@ -69,6 +71,8 @@ export const getStatusColor = (status) => {
       return "#839192";
     case "R":
       return "#D35400";
+    case "NS":
+      return "black";
     case "Ex":
       return "#09CAD8";
     default: