contentoh-components-library 21.5.2 → 21.5.3

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

@@ -1,364 +0,0 @@
-import { Multiselect } from "./index";
-
-export default {
-  title: "Components/atoms/Multiselect",
-  component: Multiselect,
-  argTypes: {
-   
-  },
-};
-
-const Template = (args) => <Multiselect {...args} />;
-
-export const MultiselectDefault = Template.bind({});
-
-MultiselectDefault.args = {
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
-  showSearchBar:true,
-  arrayData:[
-    {
-        "idUser": 380,
-        "userName": "Flujo Dos",
-        "userEmail": "cadenaradioshackflujouno@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 381,
-        "userName": "Flujo Tres",
-        "userEmail": "cadenaradioshackflujodos@allfreemail.net",
-        "groups": [
-            {
-                "groupId": "Sin id",
-                "groupName": "No tiene grupo asignado",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 385,
-        "userName": "Flujo Cuatro",
-        "userEmail": "cadenaradioshackflujotres@AllFreeMail.net",
-        "groups": [
-            {
-                "groupId": "Sin id",
-                "groupName": "No tiene grupo asignado",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 387,
-        "userName": "Compras",
-        "userEmail": "comprasradioshack@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 388,
-        "userName": "Jefe",
-        "userEmail": "jefecomercial@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 389,
-        "userName": "Planogramas",
-        "userEmail": "planogramas@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 390,
-        "userName": "Impuestos",
-        "userEmail": "impuestos@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 391,
-        "userName": "Ecommerce",
-        "userEmail": "ecommerce@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 0
-            }
-        ]
-    },
-    {
-        "idUser": 392,
-        "userName": "Datos",
-        "userEmail": "datosmaestros@allfreemail.net",
-        "groups": [
-            {
-                "groupId": 69,
-                "groupName": "Datos Maestros",
-                "userContentGroup": 1
-            },
-            {
-                "groupId": 60,
-                "groupName": "Compras",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 65,
-                "groupName": "Jefe Comercial",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 66,
-                "groupName": "Planogramas",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 67,
-                "groupName": "Impuestos",
-                "userContentGroup": 0
-            },
-            {
-                "groupId": 68,
-                "groupName": "eCommerce",
-                "userContentGroup": 0
-            }
-        ]
-    }
-],
-  userId:380,
-};

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