contentoh-components-library 21.4.92 → 21.4.94

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

@@ -10,27 +10,26 @@ import { TextField } from "@mui/material/TextField";
 import { GroupSelect } from "../../molecules/GroupSelect";
 import { CustomChip } from "../../atoms/CustomChip";
 import { CustomSelect } from "../../molecules/CustomSelect";
+import { ButtonV2 } from "../../atoms/ButtonV2";
 
 //svg
 import options from "../../../assets/images/Icons/options.svg";
 import add from "../../../assets/images/Icons/addv2.svg";
 
 export const Phase = ({
+  key,
   id,
+  phaseId,
   phases,
   phaseName,
   nextPhase,
   groups,
   onDeletePhase,
-  onDragStart,
-  onDragOver,
-  onDragEnd,
-  token
+  token,
 }) => {
-  const [selectedValue, setSelectedValue] = useState("");
+  const [selectedValue, setSelectedValue] = useState([]);
   const [chips, setChips] = useState([]);
   const [groupsSelected, setGroupsSelected] = useState([]);
-  const [showCustomSelect, setShowCustomSelect] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [nextPhaseState, setNextPhaseState] = useState("");
   const open = Boolean(anchorEl);
@@ -41,88 +40,190 @@ export const Phase = ({
     icon: "success",
   });
 
-  const idPhase = id + 1;
-  const [tempItems, setTempItems] = useState([]);
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
 
-  useEffect(() => {
+  const loadData = async() => {
     const activeGroups = groups.filter((group) => group.groupActive === 1);
     const initialChips = activeGroups.map((group) => ({
       id: group.groupId,
       label: group.groupName,
     }));
-
     setChips(initialChips);
-  }, [groups]);
 
-  useEffect(() => {
     const nextPhaseObject = phases.find((phase) => phase.phaseId === nextPhase);
     if (nextPhaseObject) {
       setNextPhaseState(nextPhaseObject.phaseName);
-    } else {
-      console.log("Aún no se asigna siguiente fase");
     }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [groups]);
+
+  useEffect(() => {
+    loadData();
   }, [nextPhase, phases]);
 
-  const onAdd = async (idPhase) => {
+  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
+        group.groupName === selectedValue ? { ...group, groupActive: 1 } : group
       );
-  
-      setGroups(updatedGroups);
-  
+
       // Actualizar el estado de chips y groupsSelected
       setChips((prevChips) => [
         ...prevChips,
-        { id: idPhase, label: selectedValue },
+        { id: phaseId, label: selectedValue },
       ]);
-  
+
       setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
       setSelectedValue("");
-      
-      console.log("update",updatedGroups)
-      await addGroup(idPhase, updatedGroups);
+
+      console.log("update", updatedGroups);
+      loadData();
     }
   };
-  
 
-  const addGroup = async(phaseId, groups) => {
+  //agregar grupo a fase
+  const addGroup = async (phaseId, groups) => {
     try {
-      console.log("fase y grupos",{phaseId, groups});
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
         {
-          retailerGroupsIds: { 
-            groups 
+          retailerGroupsIds: groups,
+          phaseId,
+        },
+        {
+          headers: {
+            Authorization: token,
           },
-          phaseId
+        }
+      );
+      console.log("response", response.data.body)
+      console.log("grupo agregado correctamente");
+      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("grupo eliminado correctamente")
+      );
+      console.log("response", response.data.body);
+      console.log("grupo agregado correctamente");
     } catch (error) {
-      console.error("Error al eliminar grupo de fase:", error);
-    } 
-  }
+      console.error("Error al actualizar grupo de fase:", error);
+    }
+  };
 
-  const handleGroupSelect = (selectedGroup) => {
-    if (!chips.find((chip) => chip.label === selectedGroup)) {
-      setChips((prevChips) => [
-        ...prevChips,
-        { id: prevChips.length, label: selectedGroup },
-      ]);
+  const handleGroupSelect = () => {
+    groupsSelected.forEach((groupId) => {
+      const matchingGroup = groups.find((group) => group.groupId === groupId);
+      if (matchingGroup) {
+        if (!chips.find((chip) => chip.key === matchingGroup.groupId)) {
+          setChips((prevChips) => [
+            ...prevChips,
+            { id: matchingGroup.groupId, 
+              label: matchingGroup.groupName },
+          ]);
+        }
+        addGroup(phaseId,groupsSelected)
+      }
+    });
+  };
+
+
+  const handleNextPhaseSelect = () => {
+    if (selectedValue.length > 0) {
+      const Id = selectedValue[0];
+      console.log("phaseId",Id)
+      const matchingPhase = phases.find((phase) => phase.phaseId === Id);
+      console.log("matchingPhase",matchingPhase)
+      if (matchingPhase) {
+        checkAvailablePhase(phaseId, matchingPhase.phaseId);
+      }
     }
-    console.log("Se agrego el grupo", selectedGroup);
-    setSelectedValue(selectedGroup);
   };
 
-  const handleChipDelete = (phaseId,chipToRemove) => {
+
+  //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 = (phaseId, chipToRemove) => {
     setGroupsSelected((prevGroups) =>
       prevGroups.filter((chip) => chip.id !== chipToRemove.id)
     );
@@ -133,16 +234,17 @@ export const Phase = ({
     deleteGroup(phaseId, chipToRemove.id);
   };
 
-  const deleteGroup = async(phaseId, groupId) => {
+  //eliminar grupo de fase
+  const deleteGroup = async (phaseId, groupId) => {
     try {
-      console.log("grupo de fase",{phaseId, groupId});
+      console.log("grupo de fase", { phaseId, groupId });
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
         {
-          deleteGroupOfPhase: { 
-            phaseId, 
-            groupId 
-          }
+          deleteGroupOfPhase: {
+            phaseId,
+            groupId,
+          },
         },
         {
           headers: {
@@ -151,11 +253,11 @@ export const Phase = ({
           },
         }
       );
-      console.log("grupo eliminado correctamente")
+      console.log("grupo eliminado correctamente");
     } catch (error) {
       console.error("Error al eliminar grupo de fase:", error);
-    } 
-  }
+    }
+  };
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -165,89 +267,90 @@ export const Phase = ({
   };
 
   return (
-    <Container
-      onDragStart={onDragStart}
-      onDragOver={onDragOver}
-      onDragEnd={onDragEnd}
-      draggable
-    >
-      <div key={idPhase} className="header-phase">
+    <Container>
+      <div key={key} className="header-phase">
         <h2>
-          Fase {idPhase} - {phaseName}
+          Fase {phaseId} - {phaseName}
         </h2>
         <div className="text-button-container">
-            <div className="phase-sel">
-              <p className="text-phase">Siguiente Fase </p>
-              <Select
-                value={selectedValue !== "" ? selectedValue : nextPhaseState}
-                placeholder={`Fase`}
-                onChange={(e) => {
-                  const selectedPhase = phases.find(
-                    (phase) => phase.phaseName === e.target.value
-                  );
-                  setSelectedValue(selectedPhase.nextPhaseIfApproved);
-                }}
-                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>
-              <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",
+          <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
-                  onClick={() => onDeletePhase(id)}
-                  sx={{ fontSize: "12px", color: "#262626", minHeight: "auto" }}
+                  key={phase.phaseId}
+                  value={phase.phaseName}
+                  sx={{
+                    fontSize: "12px",
+                    color: "#262626",
+                    minHeight: "auto",
+                  }}
                 >
-                  Eliminar Fase
+                  {phase.phaseName}
                 </MenuItem>
-              </Menu>
-            </div>
+              ))}
+            </Select>
+            <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">
@@ -255,14 +358,15 @@ export const Phase = ({
           <CustomChip
             key={chip.id}
             label={chip.label}
-            onDelete={() => handleChipDelete(idPhase,chip)}
+            onDelete={() => handleChipDelete(phaseId, chip)}
           />
         ))}
-        {/*<GroupSelect
+      
+      <GroupSelect
           options={groups
             .filter((group) => group.groupActive === 0)
-            .map((group, index) => ({
-              id: index,
+            .map((group) => ({
+              id: group.groupId,
               name: group.groupName,
             }))}
           showSearchBar
@@ -273,25 +377,9 @@ export const Phase = ({
           defaultOption={"Todos los grupos"}
           parameterArray={groupsSelected}
           setParameterArray={setGroupsSelected}
-          onSelect={handleGroupSelect}
-          onClickItem={()=>onAdd(idPhase)}
-        />*/}
-
-        {/*  <CustomSelect
-               options={groups
-                .filter((group) => group.groupActive === 0)
-                .map((group, index) => ({
-                  id: index,
-                  name: group.groupName,
-                }))}
-              showSearchBar
-              icon={add}
-              placeHolder={"Buscar grupo"}
-              customSelectId={"group-select"}
-              defaultOption={"Todos los grupos"}
-              parameterArray={groupsSelected}
-              setParameterArray={setGroupsSelected}
-            />*/}
+          onClickItem={()=>{
+            handleGroupSelect()}}
+        />
       </div>
       <Modal
         {...modalData}

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

@@ -64,6 +64,12 @@ export const Container = styled.div`
     cursor: pointer;
   }
 }
+.modal-next-phase .contentModal {
+  max-width: 250px;
+  .container-input-name p{
+    text-align:center;
+  }
+}
 `;
 
 export const ContainerIcon = styled.div`

package/src/components/organisms/DragAndDropPhases/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Container, Header } from "./styles";
 import { Phase } from "../../molecules/Phase";
 import { ButtonV2 } from "../../atoms/ButtonV2";
@@ -11,6 +11,7 @@ export const DragAndDropPhases = ({ token}) => {
   const [draggedItem, setDraggedItem] = useState(null);
   const [listPhases, setListPhases]= useState([]);
   const [tempListPhases, setTempListPhases] = useState([]); 
+  const [newPhaseName, setNewPhaseName] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [modalData, setModalData] = useState({ 
     show: false,
@@ -21,8 +22,14 @@ export const DragAndDropPhases = ({ token}) => {
 
   useEffect(() => loadData(),[]);
 
+  const newPhaseNameRef = useRef("");
+
+  useEffect(() => {
+    newPhaseNameRef.current = newPhaseName;
+  }, [newPhaseName]);
+
   useEffect(() => {
-    console.log(inputValue)
+    setNewPhaseName((prev) => prev + inputValue);
   }, [inputValue]);
 
   const onDragStart = (e, id) => {
@@ -50,10 +57,6 @@ export const DragAndDropPhases = ({ token}) => {
     setDraggedItem(null);
   };
 
-  // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
-
-
-  
   const updatePhases = async () => {
     try {
       console.log("listPhases:", listPhases);
@@ -85,16 +88,11 @@ export const DragAndDropPhases = ({ token}) => {
     }
   };
 
-
-  const handleInputChange = (value) => {
-    setInputValue((prevInputValue) => {
-      const newValue = prevInputValue + value;
-      console.log("currentInputValue", newValue);
-      return newValue;
-    });
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
   };
 
-  const AddPhase = async(phaseName) => {
+  const addPhase = async(phaseName) => {
     console.log("fase nueva", phaseName);
     try {
       const body = {
@@ -111,9 +109,11 @@ export const DragAndDropPhases = ({ token}) => {
           },
         }
       );
+      console.log("body", body)
       const createdPhase = response.data.body;
       console.log(createdPhase)
       setInputValue("");
+      loadData();
     } catch (error) {
       console.error("Error al agregar fase:", error);
     }
@@ -163,27 +163,29 @@ export const DragAndDropPhases = ({ token}) => {
         size={12}
         onClick={() => {
           setModalData((prev) => ({ ...prev, show: false }));
-          setInputValue((prevInputValue) => {
-            AddPhase(prevInputValue);
-            return prevInputValue;
-          });
+          handleSavePhase();
         }}
       />
       ],
       customComponent: (
         <div className="container-input-name">
           <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
-         <input
+          <input
             className={`input-phases`}
             placeholder="Nombre de fase"
             value={inputValue}
-            onChange={(e)=>handleInputChange(e.target.value)}
+            onChange={(e) => handleInputChange(e)}
           />
         </div>
       ),
     });
   };
 
+  const handleSavePhase = () => {
+    addPhase(newPhaseNameRef.current);
+    setInputValue("");
+  };
+
   const loadData = async () => {
     try {
       const response = await axios.post(
@@ -258,16 +260,17 @@ const handleDeletePhase = (id) => {
 const renderPhase = (phase, idx) => {
   return (
     <Phase
-      key={idx}
+      key={phase.phaseId}
       id={idx}
+      phaseId={phase.phaseId}
       phases={listPhases}
       phaseName={phase.phaseName}
       nextPhase={phase.nextPhaseIfApproved}
       groups={phase.groupsAssigned}
       onDeletePhase={() => handleDeletePhase(phase.phaseId)}
-      onDragStart={(e) => onDragStart(e, idx)}
-      onDragOver={() => onDragOver(idx)}
-      onDragEnd={onDragEnd}
+      // onDragStart={(e) => onDragStart(e, idx)}
+      // onDragOver={() => onDragOver(idx)}
+      // onDragEnd={onDragEnd}
       token={token}
     />
   );
@@ -309,9 +312,13 @@ const renderPhase = (phase, idx) => {
           }}
         ></ButtonV2>
       </Header>
-      <ul>
-        {listPhases.map((phase, idx) => renderPhase(phase, idx))}
-      </ul>
+      {listPhases.length > 0 ? (
+        <ul>{listPhases.map((phase, idx) => renderPhase(phase, idx))}</ul>
+      ) : (
+        <div className="no-phases-container">
+          <p>Parece que aun no tienes fases disponibles.</p>
+        </div>
+      )}
       <Modal
         {...modalData}
         onClickBtnDefault={() =>

package/src/components/organisms/DragAndDropPhases/styles.js

@@ -58,6 +58,17 @@ ul{
       justify-content: flex-end;
     }
   }
+  .no-phases-container {
+    display: flex;
+    flex-direction:column;
+    gap:10px;
+    align-items: center;
+    border-radius:10px;
+    border:1px solid ${GlobalColors.gray_light};
+    padding:10px 15px;
+    font-family:${FontFamily.Roboto}, sans-serif;
+    font-size:12px;
+  }
 `;
 
 export const Header = styled.div`