contentoh-components-library 21.4.89 → 21.4.90

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

@@ -1,14 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { Container, ContainerIcon } from "./styles";
-import Chip from "@mui/material/Chip";
 import { Button, Menu, MenuItem } from "@mui/material";
 import Select from "@mui/material/Select";
-import add from "../../../assets/images/Icons/addv2.svg";
+import axios from "axios";
+
+//Componentes
 import { Modal } from "../../organisms/Modal";
 import { TextField } from "@mui/material/TextField";
 import { GroupSelect } from "../../molecules/GroupSelect";
+import { CustomChip } from "../../atoms/CustomChip";
+import { CustomSelect } from "../../molecules/CustomSelect";
+
+//svg
 import options from "../../../assets/images/Icons/options.svg";
-import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
+import add from "../../../assets/images/Icons/addv2.svg";
 
 export const Phase = ({
   id,
@@ -17,12 +22,18 @@ export const Phase = ({
   nextPhase,
   groups,
   onDeletePhase,
-  draggable
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  token
 }) => {
   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);
   const [modalData, setModalData] = useState({
     show: false,
     title: "Actualización completa",
@@ -31,35 +42,121 @@ export const Phase = ({
   });
 
   const idPhase = id + 1;
-  const [draggedItem, setDraggedItem] = useState(null);
   const [tempItems, setTempItems] = useState([]);
 
-  const onAdd = () => {
+  useEffect(() => {
+    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");
+    }
+  }, [nextPhase, phases]);
+
+  const onAdd = async (idPhase) => {
     if (selectedValue && !groupsSelected.includes(selectedValue)) {
+      const updatedGroups = groups.map((group) =>
+        group.groupName === selectedValue
+          ? { ...group, groupActive: 1 }
+          : group
+      );
+  
+      setGroups(updatedGroups);
+  
+      // Actualizar el estado de chips y groupsSelected
+      setChips((prevChips) => [
+        ...prevChips,
+        { id: idPhase, label: selectedValue },
+      ]);
+  
       setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
-      setChips((prevChips) => [...prevChips, selectedValue]);
       setSelectedValue("");
+      
+      console.log("update",updatedGroups)
+      await addGroup(idPhase, updatedGroups);
     }
   };
+  
 
-  const handleDeletePhase = () => {
-    onDeletePhase(idPhase);
-  };
+  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 
+          },
+          phaseId
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      )
+      console.log("grupo eliminado correctamente")
+    } catch (error) {
+      console.error("Error al eliminar grupo de fase:", error);
+    } 
+  }
 
   const handleGroupSelect = (selectedGroup) => {
-    setGroupsSelected((prevGroups) => [...prevGroups, selectedGroup]);
+    if (!chips.find((chip) => chip.label === selectedGroup)) {
+      setChips((prevChips) => [
+        ...prevChips,
+        { id: prevChips.length, label: selectedGroup },
+      ]);
+    }
+    console.log("Se agrego el grupo", selectedGroup);
     setSelectedValue(selectedGroup);
   };
 
-  const handleChipDelete = (chipToRemove) => {
+  const handleChipDelete = (phaseId,chipToRemove) => {
     setGroupsSelected((prevGroups) =>
-      prevGroups.filter((chip) => chip !== chipToRemove)
+      prevGroups.filter((chip) => chip.id !== chipToRemove.id)
     );
-    setChips((prevChips) => prevChips.filter((chip) => chip !== chipToRemove));
+    console.log("Se elimino el grupo", chipToRemove.id);
+    setChips((prevChips) =>
+      prevChips.filter((chip) => chip.id !== chipToRemove.id)
+    );
+    deleteGroup(phaseId, chipToRemove.id);
   };
 
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
+  const deleteGroup = async(phaseId, groupId) => {
+    try {
+      console.log("grupo de fase",{phaseId, groupId});
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
+        {
+          deleteGroupOfPhase: { 
+            phaseId, 
+            groupId 
+          }
+        },
+        {
+          headers: {
+            Authorization: token,
+            // Authorization: sessionStorage.getItem("jwt"),
+          },
+        }
+      );
+      console.log("grupo eliminado correctamente")
+    } catch (error) {
+      console.error("Error al eliminar grupo de fase:", error);
+    } 
+  }
+
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -67,78 +164,22 @@ export const Phase = ({
     setAnchorEl(null);
   };
 
-  const HoverableChip = ({ label, onDelete }) => {
-    const [isHovered, setIsHovered] = useState(false);
-
-    const handleMouseEnter = () => {
-      setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-      setIsHovered(false);
-    };
-
-    return (
-      <Chip
-        label={label}
-        onDelete={onDelete}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        deleteIcon={<DeleteIcon />}
-        style={{
-          borderRadius: "5px",
-          background: "transparent",
-          border: `1px solid ${isHovered ? "#B64545" : "#F0F0F0"}`,
-          color: `${isHovered ? "#B64545" : "#707070"}`,
-        }}
-      />
-    );
-  };
-
-  const onDragStartHandler = (e) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(id);
-    onDragStart(e, id);
-  };
-
-  const onDragOverHandler = (index) => {
-    if (!draggedItem || draggedItem === id) {
-      return;
-    }
-
-    onDragOver(id);
-    setDraggedItem(null);
-  };
-
-  const onDragEndHandler = () => {
-    onDragEnd();
-    setDraggedItem(null);
-  };
-
   return (
     <Container
-    onDragStart={onDragStartHandler}
-      onDragOver={onDragOverHandler}
-      onDragEnd={onDragEndHandler}
-      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+      draggable
     >
       <div key={idPhase} className="header-phase">
         <h2>
           Fase {idPhase} - {phaseName}
         </h2>
         <div className="text-button-container">
-          {idPhase === 1 ? (
-            <p className="text-phase">
-              Al rechazar en esta fase enviar a proveedor
-            </p>
-          ) : (
             <div className="phase-sel">
               <p className="text-phase">Siguiente Fase </p>
               <Select
-              width="100px"
-              value={selectedValue !== "" ? selectedValue : nextPhase}
+                value={selectedValue !== "" ? selectedValue : nextPhaseState}
                 placeholder={`Fase`}
                 onChange={(e) => {
                   const selectedPhase = phases.find(
@@ -146,7 +187,13 @@ export const Phase = ({
                   );
                   setSelectedValue(selectedPhase.nextPhaseIfApproved);
                 }}
-                sx={{width: "auto",minWidth:"100px", height: "24px", background:"#F7F7FC", borderRadius:"5px"}}
+                sx={{
+                  minWidth: "100px",
+                  height: "24px",
+                  background: "#F7F7FC",
+                  borderRadius: "5px",
+                  fontSize:"12px",
+                }}
                 MenuProps={{
                   PaperProps: {
                     style: {
@@ -156,7 +203,15 @@ export const Phase = ({
                 }}
               >
                 {phases.map((phase) => (
-                  <MenuItem key={phase.phaseId} value={phase.phaseName} sx={{fontSize:"10px", color:"#262626"}}>
+                  <MenuItem
+                    key={phase.phaseId}
+                    value={phase.phaseName}
+                    sx={{
+                      fontSize: "12px",
+                      color: "#262626",
+                      minHeight: "auto",
+                    }}
+                  >
                     {phase.phaseName}
                   </MenuItem>
                 ))}
@@ -166,7 +221,7 @@ export const Phase = ({
                 aria-controls={open ? "basic-menu" : undefined}
                 aria-haspopup="true"
                 aria-expanded={open ? "true" : undefined}
-                onClick={handleClick}
+                onClick={(e) => handleClick(e)}
               >
                 <img src={options} alt="" />
               </Button>
@@ -178,45 +233,66 @@ export const Phase = ({
                 MenuListProps={{
                   "aria-labelledby": "basic-button",
                 }}
+                sx={{
+                  ul: {
+                    paddingTop: "0px",
+                    paddingBottom: "0px",
+                  },
+                }}
               >
-                <MenuItem onClick={() => onDeletePhase(id)}>
+                <MenuItem
+                  onClick={() => onDeletePhase(id)}
+                  sx={{ fontSize: "12px", color: "#262626", minHeight: "auto" }}
+                >
                   Eliminar Fase
                 </MenuItem>
               </Menu>
             </div>
-          )}
         </div>
       </div>
-
       <div className="attributes-container">
-        {groups
-          .filter((group) => group.groupActive === 1)
-          .map((group, index) => (
-            <HoverableChip
-              key={index}
-              label={group.groupName}
-              onDelete={() => handleChipDelete(group)}
-            />
-          ))}
-        <GroupSelect
+        {chips.map((chip) => (
+          <CustomChip
+            key={chip.id}
+            label={chip.label}
+            onDelete={() => handleChipDelete(idPhase,chip)}
+          />
+        ))}
+        {/*<GroupSelect
           options={groups
             .filter((group) => group.groupActive === 0)
             .map((group, index) => ({
               id: index,
               name: group.groupName,
             }))}
-          showSearchBar={true}
+          showSearchBar
+          isSingleSelect={false}
           icon={add}
           placeHolder={"Buscar grupo"}
-          customSelectId={"category-select-" + groups.id}
+          customSelectId={"category-select-" + groups.groupId}
           defaultOption={"Todos los grupos"}
           parameterArray={groupsSelected}
           setParameterArray={setGroupsSelected}
           onSelect={handleGroupSelect}
-          onClickItem={onAdd}
-        />
-      </div>
+          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}
+            />*/}
+      </div>
       <Modal
         {...modalData}
         onClickBtnDefault={() =>

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

@@ -9,32 +9,5 @@ const Template = (args) => <DragAndDropPhases {...args} />;
 
 export const DragAndDropPhasesDefault = Template.bind({});
 DragAndDropPhasesDefault.args = {
-  items :[
-    { grupos: ["Impuestos", "Legal"] },
-    { grupos: ["Legal", "Jefe comercial"] },
-    { grupos: ["Finanzas", "Datos maestros"] },
-  ],
-  grupos: [
-    {
-      id:1,
-      name:"Impuestos", 
-    },
-    {
-      id:2,
-      name:"Legal",
-    },
-    {
-      id:3,
-      name:"Jefe comercial"
-    },
-    {
-      id:4,
-      name:"Finanzas"
-    },
-    {
-      id:5,
-      name:"Datos maestros"
-    } 
-  ],
   token:"eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwZjQyNDdkZi1mMDJmLTRjYjgtOTA5YS1lNjI2NDlkMzQ3ODIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBmNDI0N2RmLWYwMmYtNGNiOC05MDlhLWU2MjY0OWQzNDc4MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzMTJjMzkzOC0yODFlLTRjZTMtOGQwMC1lNDJmMDJhMjliNDkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMTgwNDA2MywibmFtZSI6IlByb3ZlZWRvciBVbm8gUmFkaW9zaGFjayIsInBob25lX251bWJlciI6Iis1MjEyMzQ1Njc4OTgiLCJleHAiOjE3MDE4MDc2NjIsImlhdCI6MTcwMTgwNDA2MywiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrdW5vQGFsbGZyZWVtYWlsLm5ldCJ9.TlytxDFcBq6dMXaDGqIQ2Dr3P81JQgIJ2k8DgfVKvHmmJAyfj5hZcdaWPBCW_qXT_93HtXje2fmQuyTJeN4pL_AXkEEQJsi6Ye-8ipteb616OFLLm8AkMV7NmxyYn59yfY9bPoWmanTjicONFNtL_SOACebXUI4c1uZtFmMWMvAR29l_89uj3e5J-ZrS1PQn36Eid66LYtV7lBsKAn3JJeftDiXx750AHERXjoXdzHwjJttm4jmMZ4LJPk8efuvZWdPhcgXJ-4CuvWNbjxCmFiDkxSjFK_qLix73HtoCLWee-FJElqxW2ZjTflOiRZknmt2M-7kQj4FzhgEK3n6jyg"
 }

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

@@ -7,13 +7,11 @@ import axios from "axios";
 import successV2 from "../../../assets/images/Icons/checkv2.svg";
 import { Input } from "@mui/material";
 
-export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, token}) => {
-  const [items, setItems] = useState(initialItems);
+export const DragAndDropPhases = ({ token}) => {
   const [draggedItem, setDraggedItem] = useState(null);
-  const [tempItems, setTempItems] = useState(items);
-  const [user, setUser] = useState(JSON.parse(sessionStorage.getItem("user")));
   const [listPhases, setListPhases]= useState([]);
-  const [newPhaseName, setNewPhaseName] = useState("");
+  const [tempListPhases, setTempListPhases] = useState([]); 
+  const [inputValue, setInputValue] = useState("");
   const [modalData, setModalData] = useState({ 
     show: false,
     title: "Actualización completa",
@@ -21,25 +19,51 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
     icon: "success",
   });
 
+  useEffect(() => loadData(),[]);
+
+  useEffect(() => {
+    console.log(inputValue)
+  }, [inputValue]);
+
+  const onDragStart = (e, id) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+  };
+
+  const onDragOver = (index) => {
+    const draggedIdx = tempListPhases.findIndex(
+      (phase) => phase.phaseId === draggedItem
+    );
+    const draggedItemData = tempListPhases[draggedIdx];
+    const targetIdx = index;
+    const newTempListPhases = [...tempListPhases];
+    newTempListPhases.splice(draggedIdx, 1);
+    newTempListPhases.splice(targetIdx, 0, draggedItemData);
+    setTempListPhases(newTempListPhases);
+
+  };
+  
+
+  const onDragEnd = () => {
+    setDraggedItem(null);
+  };
+
   // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
 
 
   
-  {/*const updatePhases = async () => {
+  const updatePhases = async () => {
     try {
       console.log("listPhases:", listPhases);
       const updateData = {
-        body: {
           updateReferencesOfNodes: listPhases.map((phase) => ({
             name:phase.phaseName,
             isInitialPhase: phase.isInitialPhase,
             phaseId: phase.phaseId,
             nextPhaseIfApproved: phase.nextPhaseIfApproved,
           })),
-        },
-        path: {
-          action: "update",
-        },
         headers: {
           Authorization: token,
         },
@@ -48,26 +72,32 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
 
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        updateData
+        updateData,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
       );
-
-      // Handle response if needed
       console.log("Update response:", response.data);
     } catch (error) {
       console.error("Error al actualizar fases", error);
     }
-  };*/}
+  };
 
 
-  const handleInputChange = (e) => {
-    console.log("nuevo nombre",e.target.value)
-    setNewPhaseName(e.target.value);
+  const handleInputChange = (value) => {
+    setInputValue((prevInputValue) => {
+      const newValue = prevInputValue + value;
+      console.log("currentInputValue", newValue);
+      return newValue;
+    });
   };
 
-  const AddPhase = async() => {
+  const AddPhase = async(phaseName) => {
+    console.log("fase nueva", phaseName);
     try {
-      console.log("fase nueva", newPhaseName);
-      {/*const body = {
+      const body = {
         name: phaseName,
         retailerGroupsIds: [],
         nextPhaseId: null
@@ -82,12 +112,35 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
         }
       );
       const createdPhase = response.data.body;
-      console.log(createdPhase)*/}
+      console.log(createdPhase)
+      setInputValue("");
     } catch (error) {
       console.error("Error al agregar fase:", error);
     }
   }
 
+  const deletePhase = async(id, phases) => {
+    try {
+      console.log("Lista de fases actualizada",phases);
+      console.log("fase a eliminar", id)
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
+        {
+          updateReferencesOfNodes:phases,
+          deletePhase:id
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      loadData();
+    } catch (error) {
+      console.error("Error al eliminar fase:", error);
+    } 
+  }
+
   const handleAddPhaseButton = () => {
     setModalData({
       show: true,
@@ -108,10 +161,12 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
         type="pink"
         label="Guardar"
         size={12}
-        onClick={async () => {
+        onClick={() => {
           setModalData((prev) => ({ ...prev, show: false }));
-          await new Promise((resolve) => setTimeout(resolve, 0));
-          AddPhase();
+          setInputValue((prevInputValue) => {
+            AddPhase(prevInputValue);
+            return prevInputValue;
+          });
         }}
       />
       ],
@@ -121,19 +176,14 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
          <input
             className={`input-phases`}
             placeholder="Nombre de fase"
-            value={newPhaseName}
-            onChange={handleInputChange}
+            value={inputValue}
+            onChange={(e)=>handleInputChange(e.target.value)}
           />
         </div>
       ),
     });
   };
 
-  const handleAcceptModal = (PhaseName) => {
-    console.log("nombre",PhaseName)
-    AddPhase(PhaseName);
-  }
-
   const loadData = async () => {
     try {
       const response = await axios.post(
@@ -169,18 +219,20 @@ export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, t
   
       console.table("fases Array", phasesDataArray);
       setListPhases(phasesDataArray);
+      setTempListPhases(phasesDataArray);
     } catch (error) {
       console.error("Error al obtener fases:", error);
     } 
   };
 
 const handleDeletePhase = (id) => {
-  setListPhases((prevListPhases) =>
-    prevListPhases.filter((phase) => phase.id !== id)
-  );
+  const updatedListPhases = [...listPhases];
+
+  const filteredPhases = updatedListPhases.filter((phase) => phase.phaseId !== id);
+  setListPhases(filteredPhases);
   setModalData({
     show: true,
-    className: "modal-delete",
+    className: "modal-delete-phase",
     message: "Fase eliminada correctamente.",
     icon: "successv2",
     buttons: [
@@ -195,10 +247,9 @@ const handleDeletePhase = (id) => {
       />,
     ],
   });
+  deletePhase(id, filteredPhases)
 };
 
-useEffect(() => loadData(),[]);
-
 // useEffect(() => {
 //   updatePhases(); 
 //   setModalData((prev) => ({ ...prev, show: false }));
@@ -213,8 +264,11 @@ const renderPhase = (phase, idx) => {
       phaseName={phase.phaseName}
       nextPhase={phase.nextPhaseIfApproved}
       groups={phase.groupsAssigned}
-      onDeletePhase={() => handleDeletePhase(phase.id)}
-        draggable
+      onDeletePhase={() => handleDeletePhase(phase.phaseId)}
+      onDragStart={(e) => onDragStart(e, idx)}
+      onDragOver={() => onDragOver(idx)}
+      onDragEnd={onDragEnd}
+      token={token}
     />
   );
 };
@@ -232,7 +286,9 @@ const renderPhase = (phase, idx) => {
           type="pink"
           label="Guardar Cambios"
           size={12}
-          onClick={() =>
+          onClick={() => {
+            setListPhases(tempListPhases)
+            updatePhases();
             setModalData({
               show: true,
               className: "modal-save",
@@ -250,7 +306,7 @@ const renderPhase = (phase, idx) => {
                 />,
               ],
             })
-          }
+          }}
         ></ButtonV2>
       </Header>
       <ul>