contentoh-components-library 21.4.124 → 21.4.126

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

@@ -0,0 +1,351 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+//styles
+import { Container } from "./styles";
+//components
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Checkbox from "@mui/material/Checkbox";
+import ListItemText from "@mui/material/ListItemText";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import { EditGroup } from "../../organisms/EditGroup";
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../ButtonV2";
+
+//svg
+import searchIcon from "../../../assets/images/Icons/search.svg";
+import settings from "../../../assets/images/Icons/settings.svg";
+
+export const Multiselect = ({
+  arrayData,
+  userId,
+  token,
+  showSearchBar,
+  placeHolder = "Buscar grupo",
+  textButton = "Editar grupos",
+}) => {
+  const [filters, setFilters] = useState([]);
+  const [selectValues, setSelectValues] = useState([]);
+  const [text, setText] = useState("");
+  const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
+  const [isItemListVisible, setIsItemListVisible] = useState(true);
+  const currentUser = arrayData.find((user) => user.idUser === userId);
+  const { idUser, groups } = currentUser || {};
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [modalData, setModalData] = useState({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
+
+const loadUserGroups = (updatedValues) => {
+  if (updatedValues && updatedValues.length > 0) {
+    setSelectValues((prevValues) => ({
+      ...prevValues,
+      [idUser]: updatedValues.map((groupInfo) => groupInfo.groupName),
+    }));
+  } else {
+    const hasUserContentGroup1 = groups.some((group) => group.userContentGroup === 1);
+
+    if (hasUserContentGroup1) {
+      const initialSelectedValues =
+        groups
+          .filter((group) => group.userContentGroup === 1)
+          .map((group) => group.groupName) || [];
+      setSelectValues((prevValues) => ({
+        ...prevValues,
+        [idUser]: initialSelectedValues,
+      }));
+    } else {
+      setSelectValues((prevValues) => ({
+        ...prevValues,
+        [idUser]: ["Sin grupos asignados"],
+      }));
+    }
+  }
+
+  setFilters(groups ? groups : []);
+};
+  
+  useEffect(() => {
+    loadUserGroups(); 
+  }, [idUser, groups]);
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+  const handleChange = (userId) => (event) => {
+    const {
+      target: { value },
+    } = event;
+    const filteredArrayCopy = [...filters];
+  
+    const updatedValues = groups.map((group) => {
+      const isSelected = value.includes(group.groupName);
+      return {
+        ...group,
+        userContentGroup: isSelected ? 1 : 0,
+      };
+    });
+    setSelectedItems(updatedValues.filter((group) => group.userContentGroup === 1).map((group) => group.groupName));
+  
+    setSelectValues((prevValues) => ({
+      ...prevValues,
+      [userId]: updatedValues
+        .filter((group) => group.userContentGroup === 1)
+        .map((group) => group.groupName),
+    }));
+
+    const changes = updatedValues.reduce((result, group, index) => {
+      if (group.userContentGroup !== filteredArrayCopy[index].userContentGroup) {
+        result.push({
+          groupId: group.groupId,
+          userContentGroup: group.userContentGroup,
+        });
+      }
+      return result;
+    }, []);
+  
+    const updatedGroups = changes.filter((change) => change.userContentGroup === 1).map((change) => change.groupId);
+    const deletedGroups = changes.filter((change) => change.userContentGroup === 0).map((change) => change.groupId);
+    if (updatedGroups.length > 0) {
+      updateGroup(updatedGroups);
+    }
+  
+    if (deletedGroups.length > 0) {
+      deleteGroup(deletedGroups);
+    }
+  };
+  
+  
+  
+
+  //actualiza los grupos seleccionados
+  const updateGroup = async (groupsIds) => {
+    try {
+      const body = {
+        userIds:[userId],
+        groupsIds,
+      };
+      const response = await axios.post(
+        `${process.env.REACT_APP_USERS_ONBOARDING_ENDPOINT}/update`,
+        body,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      console.log("grupo actualizado correctamente", response.data.body);
+    } catch (error) {
+      console.error("Error al cambiar grupos de usuarios:", error);
+    }
+  };
+
+    //Elimina todos los grupos de usuarios seleccionados
+    const deleteGroup = async (groups) => {
+      try {
+        const body = {
+          userIds:[userId],
+          groupsIds:groups,
+        };
+        const response = await axios.post(
+          `${process.env.REACT_APP_USERS_ONBOARDING_ENDPOINT}/delete`,
+          body,
+          {
+            headers: {
+              Authorization: sessionStorage.getItem("jwt"),
+            },
+          }
+        );
+        console.log("borrado correctamente", response.data.body);
+      } catch (error) {
+        console.error("Error al eliminar grupos de usuarios:", error);
+      }
+    };
+
+  useEffect(() => {}, [selectValues]);
+
+  useEffect(() => {
+    let filteredArray = groups?.slice() || [];
+    const normalizedText = text.trim().toLowerCase();
+
+    if (normalizedText.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.groupName?.toLowerCase().includes(normalizedText)
+      );
+    }
+    setFilters(filteredArray);
+    console.log("filteredArray:", filteredArray);
+  }, [text]);
+
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: "auto",
+        display: isItemListVisible ? "block" : "none",
+        left: "1013px",
+      },
+    },
+  };
+
+  return (
+    <Container>
+      {currentUser && (
+        <Select
+          labelId={`demo-multiple-checkbox-label-${idUser}`}
+          id={`demo-multiple-checkbox-${idUser}`}
+          multiple
+          value={selectValues[idUser] || []}
+          onChange={handleChange(idUser)}
+          input={
+            <OutlinedInput
+              sx={{
+                width: "80%",
+                height: "34px",
+                paddingBottom: "1px solid #F0F0F0",
+              }}
+            />
+          }
+          renderValue={(selected) => selected.join(", ")}
+          MenuProps={MenuProps}
+          sx={{
+            width: "80%",
+            height: "24px",
+            "& div": {
+              color: "#707070",
+              fontSize: "12px",
+            },
+          }}
+        >
+          {showSearchBar && (
+            <MenuItem
+              sx={{
+                maxHeight: "34px",
+                paddingLeft: "10px",
+                "& .search-bar-filter": {
+                  display: "flex",
+                  gap: "10px",
+                  input: {
+                    border: "none",
+                    background: "transparent",
+                    "::placeholder": {
+                      fontSize: "12px",
+                      color: "#CBCBCB",
+                    },
+                    ":focus-visible, :hover": {
+                      border: "none",
+                      background: "transparent",
+                      outline: "none",
+                    },
+                  },
+                  ":focus-visible, :hover": {
+                    background: "transparent",
+                  },
+                },
+              }}
+            >
+              <div className="search-bar-filter">
+                <img src={searchIcon} alt="search icon" />
+                <input
+                  type="text"
+                  placeholder={placeHolder}
+                  value={text}
+                  onChange={onChange}
+                />
+              </div>
+            </MenuItem>
+          )}
+          {groups &&
+            groups
+              .filter((group) => group.groupId !== "Sin id" && group.groupName !== "No tiene grupo asignado")
+              .map((group) => (
+                <MenuItem
+                  key={group.groupId}
+                  value={group.groupName}
+                  sx={{
+                    paddingLeft: "0px",
+                    maxHeight: "34px",
+                    ":focus-visible, :hover": {
+                      border: "none",
+                      background: "transparent",
+                    },
+                  }}
+                >
+                  <Checkbox
+                     checked={selectValues[idUser]?.includes(group.groupName)}                
+                    sx={{
+                      maxHeight: "34px",
+                      "&.Mui-checked": {
+                        color: "#85BC5B",
+                      },
+                      "input, svg": {
+                        maxWidth: "12px",
+                        maxHeight: "12px",
+                      },
+                    }}
+                  />
+                  <ListItemText
+                    primary={group.groupName}
+                    sx={{
+                      span: { fontSize: "12px", color: "#000000" },
+                      "input, svg": {
+                        maxWidth: "12px",
+                        maxHeight: "12px",
+                      },
+                    }}
+                  />
+                </MenuItem>
+              ))}
+          <MenuItem
+            sx={{
+              minHeight: "34px",
+              paddingLeft: "10px",
+              ".btn-edit-group": {
+                color: "#E33AA9",
+                border: "none",
+                background: "transparent",
+                display: "flex",
+                gap: "10px",
+                alignItems: "center",
+              },
+              ":focus-visible, :hover": {
+                border: "none",
+                background: "transparent",
+              },
+            }}
+          >
+            <button
+              className="btn-edit-group"
+              onClick={() => {
+                setIsItemListVisible(false);
+                setIsEditGroupVisible(true);
+              }}
+            >
+              <img src={settings} className="icon" alt="search icon" />
+              {textButton}
+            </button>
+          </MenuItem>
+        </Select>
+      )}
+      <EditGroup
+        token={token}
+        show={isEditGroupVisible}
+        onClose={() => {
+          setIsEditGroupVisible(false);
+          setIsItemListVisible(true);
+        }}
+      />
+       <Modal
+          {...modalData}
+          onClickBtnDefault={() =>
+            setModalData((prev) => ({ ...prev, show: false }))
+          }
+        ></Modal>
+    </Container>
+  );
+};

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

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    min-width:200px;
+    max-height:34px;
+    .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;
+        }
+      }
+
+      img.icon{
+        width: 15px;
+          height: 15px;
+      }
+
+      .modal-save .contentModal {
+        max-width:200px;
+      }
+`;

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

@@ -0,0 +1,19 @@
+import { NumberMandatory } from ".";
+
+export default {
+  title: "Components/atoms/NumberMandatory",
+  component: NumberMandatory,
+  argTypes: {
+  },
+};
+
+export const Template = (args) => <NumberMandatory {...args} />;
+
+const NumberMandatoryDefault = Template.bind({});
+
+NumberMandatoryDefault.args = {
+  description_small:"Descripción del campo",
+  required:true, 
+  number:4, 
+  typeImage:"Obligatorio"
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TooltipLight } from "../TooltipLight";
+import { Container } from "./styles";
+
+export const NumberMandatory = ({ required, number, typeImage, typeSingle }) => {
+  return (
+    <Container>
+      <TooltipLight
+        description_small={`Este producto necesita ${number} ${number === 1 ? 'imagen' : 'imágenes'} ${number === 1 ? typeSingle : typeImage} para esta cadena.`}
+        required={required}
+      ></TooltipLight>
+      <span>{number}</span>
+      <span> {number === 1 ? 'imagen' : 'imágenes'} {number === 1 ? typeSingle : typeImage}</span>
+    </Container>
+  );
+};

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display:flex;
+  gap:5px;
+  span {
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { ObservationFlag } from "./index";
+
+export default {
+  title: "Components/atoms/ObservationFlag",
+  component: ObservationFlag,
+  argTypes: {
+    observation: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ObservationFlag {...args} />;
+
+export const PriorityFlagDefault = Template.bind({});
+
+PriorityFlagDefault.args = {
+  observation: "no observation",
+};

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

@@ -0,0 +1,167 @@
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import { Container, Observation, Content, ServTab, SaveButton } from "./styles";
+import { Tooltip } from "../Tooltip";
+import without from "../../../assets/images/flags/noPriority.svg";
+import high from "../../../assets/images/flags/highPriority.svg";
+import medium from "../../../assets/images/flags/mediumPriority.svg";
+import low from "../../../assets/images/flags/lowPriority.svg";
+import saveIconpink from "../../../assets/images/generalButton/saveIconpink.svg";
+import { Modal } from "../../organisms/Modal";
+
+export const ObservationFlag = ({
+  observation,
+  contentObservation,
+  dataProduct,
+  isObservationVisible, toggleObservation,
+  // handleClickOutside,
+  hideObservation
+}) => {
+  const PriorityFlags = {
+    ["none"]: without,
+    ["low"]: low,
+    ["medium"]: medium,
+    ["high"]: high,
+  };
+
+  //const [isObservationVisible, setObservationVisible] = useState(false);
+  const [material, setMaterial] = useState(contentObservation || "");
+  const [currentObservation, setCurrentObservation] = useState(observation);
+
+  const [showModal, setShowModal] = useState(false);
+  const [modalData, setModalData] = useState({});
+
+  const textareaRef = useRef(null);
+  // const toggleObservation = () => {
+  //   setObservationVisible(!isObservationVisible);
+  // };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        isObservationVisible &&
+        !event.target.closest(".Observation") &&
+        !event.target.closest(".Container")
+      ) {
+        setObservationVisible(false);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible]);
+  // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible, handleClickOutside]);
+  
+  useEffect(() => {
+    setMaterial(contentObservation || "");
+  }, [contentObservation]); 
+
+  useEffect(() => {
+    setCurrentObservation(observation);
+  }, [observation]);
+
+  const saveRequest = async () => {
+    let dataToSend = {
+      orderId: parseInt(dataProduct.orderId),
+      articleId: dataProduct.article.id_article,
+      observation: textareaRef.current.value,
+    };
+
+    try {
+      const response = await axios.put(
+        process.env.REACT_APP_UPDATE_OBSERVATION,
+        dataToSend
+      );
+
+      const succesResponse = {
+        status: true,
+        message: "Información guardada correctamente",
+        detail: "",
+        img: true,
+      };
+      const errorResponse = {
+        status: false,
+        message: "Error al guardar la información",
+        detail: "",
+        img: false,
+      };
+
+      setShowModal(true);
+      setModalData(
+        response.data.statusCode === 200 ? succesResponse : errorResponse
+      );
+      setCurrentObservation(material !== "" ? "high" : "low");
+      hideObservation(); 
+      return response;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return (
+    <>
+      <Container>
+        <img
+          src={PriorityFlags[currentObservation]}
+          alt={observation}
+          style={{ cursor: "pointer" }}
+          onClick={toggleObservation}
+        />
+        {isObservationVisible && (
+          <Observation
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}
+            className="Observation"
+          >
+            <ServTab
+              onClick={(evt) => {
+                evt.stopPropagation();
+              }}
+              className="close-Container"
+            >
+              <div>
+                <span>Material completo</span>
+              </div>
+
+              <div className="flex">
+                <textarea
+                  ref={textareaRef}
+                  name="textarea"
+                  rows="10"
+                  cols="50"
+                  style={{ color: "black", padding: "5px" }}
+                  value={material}
+                  onChange={(e) => setMaterial(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+
+              <SaveButton
+                onClick={(evt) => {
+                  evt.stopPropagation();
+                  saveRequest();
+                }}
+              >
+                <img src={saveIconpink} alt="Guardar" />
+              </SaveButton>
+            </ServTab>
+          </Observation>
+        )}
+      </Container>
+
+      {showModal && (
+        <Modal
+          show={showModal}
+          title={modalData.title}
+          message={modalData.message}
+          onClickBtnDefault={(event) => setShowModal(false)}
+        />
+      )}
+    </>
+  );
+};