contentoh-components-library 21.4.122 → 21.4.124

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

@@ -1,351 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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)}
-        />
-      )}
-    </>
-  );
-};