contentoh-components-library 21.5.35 → 21.5.37

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

@@ -1,391 +1,391 @@
-import React, { useState, useEffect } from "react";
-import { Container, ContainerIcon } from "./styles";
-import { Button, Menu, MenuItem } from "@mui/material";
-import Select from "@mui/material/Select";
-import axios from "axios";
-
-//Componentes
-import { Modal } from "../../organisms/Modal";
-import { CustomChip } from "../../atoms/CustomChip";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-
-//svg
-import options from "../../../assets/images/Icons/options.svg";
-import { AddGroup } from "../AddGroup";
-
-export const Phase = ({
-  key,
-  id,
-  phaseId,
-  phases,
-  phaseName,
-  nextPhase,
-  groups,
-  onDeletePhase,
-  token,
-  showMenu=true,
-  showButtonChip=true,
-}) => {
-  const [selectedValue, setSelectedValue] = useState([]);
-  const [chips, setChips] = useState([]);
-  const [groupsSelected, setGroupsSelected] = useState([]);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [nextPhaseState, setNextPhaseState] = useState("");
-  const [tempChips, setTempChips] = useState([]);
-  const open = Boolean(anchorEl);
-  const [modalData, setModalData] = useState({
-    show: false,
-    title: "Actualización completa",
-    message: "",
-    icon: "success",
-  });
-
-  const ITEM_HEIGHT = 48;
-  const ITEM_PADDING_TOP = 8;
-  const MenuProps = {
-    PaperProps: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  };
-
-  const loadData = async() => {
-    const activeGroups = groups.filter((group) => group.groupActive === 1);
-    const initialChips = activeGroups.map((group) => ({
-      id: group.groupId,
-      label: group.groupName,
-    }));
-    setChips(initialChips);
-
-    const nextPhaseObject = phases.find((phase) => phase.phaseId === nextPhase);
-    if (nextPhaseObject) {
-      setNextPhaseState(nextPhaseObject.phaseName);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, [groups]);
-
-  useEffect(() => {
-    loadData();
-  }, [nextPhase, phases]);
-
-  useEffect(() => {
-    handleGroupSelect();
-  }, [groupsSelected]);
-
-
-  useEffect(() => {
-    handleNextPhaseSelect();
-  }, [selectedValue]);
-
-  //agregar fase
-  const onAdd = async (phaseId) => {
-    if (selectedValue && !groupsSelected.includes(selectedValue)) {
-      const updatedGroups = groups.map((group) =>
-        group.groupName === selectedValue ? { ...group, groupActive: 1 } : group
-      );
-      setTempChips((prevChips) => [
-        ...prevChips,
-        { id: phaseId, label: selectedValue },
-      ]);
-  
-      setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
-      setSelectedValue("");
-      loadData();
-    }
-  };
-
-  //agregar grupo a fase
-  const addGroup = async (phaseId, groups) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        {
-          retailerGroupsIds: groups,
-          phaseId,
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log(response.data.body)
-      loadData();
-    } catch (error) {
-      console.error("Error al agregar grupo a fase:", error);
-    }
-  };
-
-  //actualiza siguiente fase
-  const updateNextPhase = async (phaseId, newNextPhase) => {
-    try {
-      console.log("fase y grupos", { phaseId, newNextPhase });
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        {
-          nextPhaseId: newNextPhase,
-          phaseId,
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log(response.data.body);
-    } catch (error) {
-      console.error("Error al actualizar grupo de fase:", error);
-    }
-  };
-
-  const handleGroupSelect = async () => {
-    for (const groupId of groupsSelected) {
-      const matchingGroup = groups.find((group) => group.groupId === groupId);
-      if (matchingGroup) {
-        if (!tempChips.find((chip) => chip.key === matchingGroup.groupId)) {
-          setTempChips((prevChips) => [
-            ...prevChips,
-            { id: matchingGroup.groupId, label: matchingGroup.groupName },
-          ]);
-        }
-        await addGroup(phaseId, [groupId]); 
-      }
-    }
-  };
-
-
-  const handleNextPhaseSelect = () => {
-    if (selectedValue.length > 0) {
-      const Id = selectedValue[0];
-      const matchingPhase = phases.find((phase) => phase.phaseId === Id);
-      if (matchingPhase) {
-        checkAvailablePhase(phaseId, matchingPhase.phaseId);
-      }
-    }
-  };
-
-
-  //checa si llega una fase que se tiene en otro lado 
-  const checkAvailablePhase = (phaseId, newNextPhase) => {
-    const isNextPhaseUsed = phases.some(phase => phase.nextPhaseIfApproved === newNextPhase);
-  
-    if (isNextPhaseUsed) {
-      setModalData({
-        show: true,
-        className: "modal-next-phase",
-        message: `La fase ${newNextPhase} ya está siendo utilizada como siguiente fase en otra fase.`,
-        icon: "info",
-        customComponent: (
-          <div className="container-input-name">
-            <p>La fase anterior se borrará</p>
-            <p>¿Estás seguro?</p>
-          </div>
-        ),
-        buttons: [
-          <ButtonV2
-          key="btn-Cancelar"
-          type="white"
-          label="Cancelar"
-          size={12}
-          onClick={() => {
-            setModalData((prev) => ({ ...prev, show: false }))
-          }}
-        />,
-          <ButtonV2
-            key="btn-Aceptar"
-            type="pink"
-            label="Aceptar"
-            size={12}
-            onClick={() => {
-              setModalData((prev) => ({ ...prev, show: false }));
-            }}
-          />,
-        ],
-      })
-    } else {
-      // Si la fase no está siendo utilizada, se actualizar la siguiente fase
-      updateNextPhase(phaseId, newNextPhase);
-    }
-  };
-
-  //eliminar chip
-  const handleChipDelete = async(phaseId, chipToRemove) => {
-    setGroupsSelected((prevGroups) =>
-      prevGroups.filter((chip) => chip.id !== chipToRemove.id)
-    );
-    setChips((prevChips) =>
-      prevChips.filter((chip) => chip.id !== chipToRemove.id)
-    );
-    setTempChips((prevChips) =>
-    prevChips.filter((chip) => chip.id !== chipToRemove.id)
-  );
-    await deleteGroup(phaseId, chipToRemove.id);
-  };
-
-  //eliminar grupo de fase
-  const deleteGroup = async (phaseId, groupId) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
-        {
-          deleteGroupOfPhase: {
-            phaseId,
-            groupId,
-          },
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log("grupo eliminado correctamente");
-      loadData();
-      setTempChips((prevChips) =>
-      prevChips.filter((chip) => chip.id !== groupId)
-    );
-    } catch (error) {
-      console.error("Error al eliminar grupo de fase:", error);
-    }
-  };
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <Container>
-      <div key={key} className="header-phase">
-        <h2>
-          Fase {id} - {phaseName}
-        </h2>
-        <div className="text-button-container">
-          <div className="phase-sel">
-            <p className="text-phase">Siguiente Fase </p>
-            <Select
-              value={
-                selectedValue.length > 0
-                  ? selectedValue[0]
-                  : nextPhaseState
-                  ? nextPhaseState
-                  : ""
-              }
-              placeholder={`Fase`}
-              onChange={(e) => {
-                const selectedPhase = phases.find(
-                  (phase) => phase.phaseName === e.target.value
-                );
-                setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
-              }}
-              sx={{
-                minWidth: "100px",
-                height: "24px",
-                background: "#F7F7FC",
-                borderRadius: "5px",
-                fontSize: "12px",
-              }}
-              MenuProps={{
-                PaperProps: {
-                  style: {
-                    background: "#F7F7FC",
-                  },
-                },
-              }}
-            >
-              {phases.map((phase) => (
-                <MenuItem
-                  key={phase.phaseId}
-                  value={phase.phaseName}
-                  sx={{
-                    fontSize: "12px",
-                    color: "#262626",
-                    minHeight: "auto",
-                  }}
-                >
-                  {phase.phaseName}
-                </MenuItem>
-              ))}
-            </Select>
-            {showMenu && (
-              <>
-                <Button
-                  id="basic-button"
-                  aria-controls={open ? "basic-menu" : undefined}
-                  aria-haspopup="true"
-                  aria-expanded={open ? "true" : undefined}
-                  onClick={(e) => handleClick(e)}
-                >
-                  <img src={options} alt="" />
-                </Button>
-                <Menu
-                  id="basic-menu"
-                  anchorEl={anchorEl}
-                  open={open}
-                  onClose={handleClose}
-                  MenuListProps={{
-                    "aria-labelledby": "basic-button",
-                  }}
-                  sx={{
-                    ul: {
-                      paddingTop: "0px",
-                      paddingBottom: "0px",
-                    },
-                  }}
-                >
-                  <MenuItem
-                    onClick={() => onDeletePhase(id)}
-                    sx={{
-                      fontSize: "12px",
-                      color: "#262626",
-                      minHeight: "auto",
-                    }}
-                  >
-                    Eliminar Fase
-                  </MenuItem>
-                </Menu>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="attributes-container">
-        {chips.map((chip) => (
-          <CustomChip
-            key={chip.id}
-            label={chip.label}
-            onDelete={() => handleChipDelete(phaseId, chip)}
-            showDelete={showButtonChip}
-          />
-        ))}
-        {showButtonChip && <AddGroup
-        id={`add-group-select-${phaseId}`}
-        items={groups
-          .filter((group) => group.groupActive === 0)
-          .map((group) => ({
-            value: group.groupId,
-            label: group.groupName,
-          }))}
-          defaultOption="Todos los grupos"
-          placeholder="Buscar grupo"
-          onChange={(selectedItems) => {
-            setGroupsSelected(selectedItems);
-          }}
-          />}
-      </div>
-      <Modal
-        {...modalData}
-        onClickBtnDefault={() =>
-          setModalData((prev) => ({ ...prev, show: false }))
-        }
-      />
-    </Container>
-  );
-};
+import React, { useState, useEffect } from "react";
+import { Container, ContainerIcon } from "./styles";
+import { Button, Menu, MenuItem } from "@mui/material";
+import Select from "@mui/material/Select";
+import axios from "axios";
+
+//Componentes
+import { Modal } from "../../organisms/Modal";
+import { CustomChip } from "../../atoms/CustomChip";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+//svg
+import options from "../../../assets/images/Icons/options.svg";
+import { AddGroup } from "../AddGroup";
+
+export const Phase = ({
+  key,
+  id,
+  phaseId,
+  phases,
+  phaseName,
+  nextPhase,
+  groups,
+  onDeletePhase,
+  token,
+  showMenu=true,
+  showButtonChip=true,
+}) => {
+  const [selectedValue, setSelectedValue] = useState([]);
+  const [chips, setChips] = useState([]);
+  const [groupsSelected, setGroupsSelected] = useState([]);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [nextPhaseState, setNextPhaseState] = useState("");
+  const [tempChips, setTempChips] = useState([]);
+  const open = Boolean(anchorEl);
+  const [modalData, setModalData] = useState({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
+
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const loadData = async() => {
+    const activeGroups = groups.filter((group) => group.groupActive === 1);
+    const initialChips = activeGroups.map((group) => ({
+      id: group.groupId,
+      label: group.groupName,
+    }));
+    setChips(initialChips);
+
+    const nextPhaseObject = phases.find((phase) => phase.phaseId === nextPhase);
+    if (nextPhaseObject) {
+      setNextPhaseState(nextPhaseObject.phaseName);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [groups]);
+
+  useEffect(() => {
+    loadData();
+  }, [nextPhase, phases]);
+
+  useEffect(() => {
+    handleGroupSelect();
+  }, [groupsSelected]);
+
+
+  useEffect(() => {
+    handleNextPhaseSelect();
+  }, [selectedValue]);
+
+  //agregar fase
+  const onAdd = async (phaseId) => {
+    if (selectedValue && !groupsSelected.includes(selectedValue)) {
+      const updatedGroups = groups.map((group) =>
+        group.groupName === selectedValue ? { ...group, groupActive: 1 } : group
+      );
+      setTempChips((prevChips) => [
+        ...prevChips,
+        { id: phaseId, label: selectedValue },
+      ]);
+  
+      setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
+      setSelectedValue("");
+      loadData();
+    }
+  };
+
+  //agregar grupo a fase
+  const addGroup = async (phaseId, groups) => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
+        {
+          retailerGroupsIds: groups,
+          phaseId,
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      console.log(response.data.body)
+      loadData();
+    } catch (error) {
+      console.error("Error al agregar grupo a fase:", error);
+    }
+  };
+
+  //actualiza siguiente fase
+  const updateNextPhase = async (phaseId, newNextPhase) => {
+    try {
+      console.log("fase y grupos", { phaseId, newNextPhase });
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
+        {
+          nextPhaseId: newNextPhase,
+          phaseId,
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      console.log(response.data.body);
+    } catch (error) {
+      console.error("Error al actualizar grupo de fase:", error);
+    }
+  };
+
+  const handleGroupSelect = async () => {
+    for (const groupId of groupsSelected) {
+      const matchingGroup = groups.find((group) => group.groupId === groupId);
+      if (matchingGroup) {
+        if (!tempChips.find((chip) => chip.key === matchingGroup.groupId)) {
+          setTempChips((prevChips) => [
+            ...prevChips,
+            { id: matchingGroup.groupId, label: matchingGroup.groupName },
+          ]);
+        }
+        await addGroup(phaseId, [groupId]); 
+      }
+    }
+  };
+
+
+  const handleNextPhaseSelect = () => {
+    if (selectedValue.length > 0) {
+      const Id = selectedValue[0];
+      const matchingPhase = phases.find((phase) => phase.phaseId === Id);
+      if (matchingPhase) {
+        checkAvailablePhase(phaseId, matchingPhase.phaseId);
+      }
+    }
+  };
+
+
+  //checa si llega una fase que se tiene en otro lado 
+  const checkAvailablePhase = (phaseId, newNextPhase) => {
+    const isNextPhaseUsed = phases.some(phase => phase.nextPhaseIfApproved === newNextPhase);
+  
+    if (isNextPhaseUsed) {
+      setModalData({
+        show: true,
+        className: "modal-next-phase",
+        message: `La fase ${newNextPhase} ya está siendo utilizada como siguiente fase en otra fase.`,
+        icon: "info",
+        customComponent: (
+          <div className="container-input-name">
+            <p>La fase anterior se borrará</p>
+            <p>¿Estás seguro?</p>
+          </div>
+        ),
+        buttons: [
+          <ButtonV2
+          key="btn-Cancelar"
+          type="white"
+          label="Cancelar"
+          size={12}
+          onClick={() => {
+            setModalData((prev) => ({ ...prev, show: false }))
+          }}
+        />,
+          <ButtonV2
+            key="btn-Aceptar"
+            type="pink"
+            label="Aceptar"
+            size={12}
+            onClick={() => {
+              setModalData((prev) => ({ ...prev, show: false }));
+            }}
+          />,
+        ],
+      })
+    } else {
+      // Si la fase no está siendo utilizada, se actualizar la siguiente fase
+      updateNextPhase(phaseId, newNextPhase);
+    }
+  };
+
+  //eliminar chip
+  const handleChipDelete = async(phaseId, chipToRemove) => {
+    setGroupsSelected((prevGroups) =>
+      prevGroups.filter((chip) => chip.id !== chipToRemove.id)
+    );
+    setChips((prevChips) =>
+      prevChips.filter((chip) => chip.id !== chipToRemove.id)
+    );
+    setTempChips((prevChips) =>
+    prevChips.filter((chip) => chip.id !== chipToRemove.id)
+  );
+    await deleteGroup(phaseId, chipToRemove.id);
+  };
+
+  //eliminar grupo de fase
+  const deleteGroup = async (phaseId, groupId) => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
+        {
+          deleteGroupOfPhase: {
+            phaseId,
+            groupId,
+          },
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      console.log("grupo eliminado correctamente");
+      loadData();
+      setTempChips((prevChips) =>
+      prevChips.filter((chip) => chip.id !== groupId)
+    );
+    } catch (error) {
+      console.error("Error al eliminar grupo de fase:", error);
+    }
+  };
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Container>
+      <div key={key} className="header-phase">
+        <h2>
+          Fase {id} - {phaseName}
+        </h2>
+        <div className="text-button-container">
+          <div className="phase-sel">
+            <p className="text-phase">Siguiente Fase </p>
+            <Select
+              value={
+                selectedValue.length > 0
+                  ? selectedValue[0]
+                  : nextPhaseState
+                  ? nextPhaseState
+                  : ""
+              }
+              placeholder={`Fase`}
+              onChange={(e) => {
+                const selectedPhase = phases.find(
+                  (phase) => phase.phaseName === e.target.value
+                );
+                setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
+              }}
+              sx={{
+                minWidth: "100px",
+                height: "24px",
+                background: "#F7F7FC",
+                borderRadius: "5px",
+                fontSize: "12px",
+              }}
+              MenuProps={{
+                PaperProps: {
+                  style: {
+                    background: "#F7F7FC",
+                  },
+                },
+              }}
+            >
+              {phases.map((phase) => (
+                <MenuItem
+                  key={phase.phaseId}
+                  value={phase.phaseName}
+                  sx={{
+                    fontSize: "12px",
+                    color: "#262626",
+                    minHeight: "auto",
+                  }}
+                >
+                  {phase.phaseName}
+                </MenuItem>
+              ))}
+            </Select>
+            {showMenu && (
+              <>
+                <Button
+                  id="basic-button"
+                  aria-controls={open ? "basic-menu" : undefined}
+                  aria-haspopup="true"
+                  aria-expanded={open ? "true" : undefined}
+                  onClick={(e) => handleClick(e)}
+                >
+                  <img src={options} alt="" />
+                </Button>
+                <Menu
+                  id="basic-menu"
+                  anchorEl={anchorEl}
+                  open={open}
+                  onClose={handleClose}
+                  MenuListProps={{
+                    "aria-labelledby": "basic-button",
+                  }}
+                  sx={{
+                    ul: {
+                      paddingTop: "0px",
+                      paddingBottom: "0px",
+                    },
+                  }}
+                >
+                  <MenuItem
+                    onClick={() => onDeletePhase(id)}
+                    sx={{
+                      fontSize: "12px",
+                      color: "#262626",
+                      minHeight: "auto",
+                    }}
+                  >
+                    Eliminar Fase
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="attributes-container">
+        {chips.map((chip) => (
+          <CustomChip
+            key={chip.id}
+            label={chip.label}
+            onDelete={() => handleChipDelete(phaseId, chip)}
+            showDelete={showButtonChip}
+          />
+        ))}
+        {showButtonChip && <AddGroup
+        id={`add-group-select-${phaseId}`}
+        items={groups
+          .filter((group) => group.groupActive === 0)
+          .map((group) => ({
+            value: group.groupId,
+            label: group.groupName,
+          }))}
+          defaultOption="Todos los grupos"
+          placeholder="Buscar grupo"
+          onChange={(selectedItems) => {
+            setGroupsSelected(selectedItems);
+          }}
+          />}
+      </div>
+      <Modal
+        {...modalData}
+        onClickBtnDefault={() =>
+          setModalData((prev) => ({ ...prev, show: false }))
+        }
+      />
+    </Container>
+  );
+};