contentoh-components-library 21.5.3 → 21.5.5

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

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

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