contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,336 +1,336 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Container, Header } from "./styles";
-import { Phase } from "../../molecules/Phase";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { Modal } from "../Modal";
-import axios from "axios";
-
-export const DragAndDropPhases = ({ token }) => {
-  const [draggedItem, setDraggedItem] = useState(null);
-  const [listPhases, setListPhases]= useState([]);
-  const [tempListPhases, setTempListPhases] = useState([]); 
-  const [search, setSearch] = useState();
-  const [newPhaseName, setNewPhaseName] = useState("");
-  const [inputValue, setInputValue] = useState("");
-  const [modalData, setModalData] = useState({ 
-    show: false,
-    title: "Actualización completa",
-    message: "",
-    icon: "success",
-  });
-  const newPhaseNameRef = useRef("");
-
-  useEffect(() => loadData(),[]);
-
-  useEffect(() => {
-    setNewPhaseName((prev) => prev + inputValue);
-  }, [inputValue]);
-
-  useEffect(() => {
-    newPhaseNameRef.current = search;
-  }, [newPhaseName]);
-
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
-  };
-  
-
-  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);
-  };
-
-  const updatePhases = async () => {
-    try {
-      const updateData = {
-          updateReferencesOfNodes: listPhases.map((phase) => ({
-            name:phase.phaseName,
-            isInitialPhase: phase.isInitialPhase,
-            phaseId: phase.phaseId,
-            nextPhaseIfApproved: phase.nextPhaseIfApproved,
-          }))
-      };
-
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        updateData,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log("Update response:", response.body.data);
-      loadData();
-    } catch (error) {
-      console.error("Error al actualizar fases", error);
-    }
-  };
-
-  const addPhase = async(search) => {
-    try {
-      const body = {
-        name: search,
-        retailerGroupsIds: [],
-        nextPhaseId: null
-      }
-     const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
-        body,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      const createdPhase = response.data.body;
-      console.log(createdPhase)
-      setSearch();
-      setInputValue("");
-      loadData();
-    } catch (error) {
-      console.error("Error al agregar fase:", error);
-    }
-  }
-
-  const deletePhase = async(id, phases) => {
-    try {
-      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,
-      className:"modal-add-phase",
-      title:"Agregar fase de revisión",
-      buttons: [
-        <ButtonV2
-        key="btn-Cancelar"
-        type="white"
-        label="Cancelar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }))
-        }}
-      />,
-      <ButtonV2
-        key="btn-Guardar"
-        type="pink"
-        label="Guardar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }));
-          handleSavePhase(search);
-        }}
-      />
-      ],
-      customComponent: (
-        <div className="container-input-name">
-          <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
-           <input
-            type="text"
-            className="input-phases"
-            onChange={(e) => {
-              setSearch(e.target.value);
-              handleInputChange(e);
-            }}
-            value={search}
-            placeholder="Nombre de fase"
-          ></input>
-        </div>
-      ),
-    });
-  };
-
-  const handleSavePhase = () => {
-    addPhase(newPhaseNameRef.current);
-    setInputValue("");
-  };
-
-  const loadData = async () => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/get`,
-        {},
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      const phasesData = JSON.parse(response.data.body).data;
-      const phasesDataArray = [];
-  
-      phasesData.forEach(({ phaseId, phaseName, isInitialPhase, nextPhaseIfApproved, groups }) => {
-        const groupsAssigned = groups.map(({ id, name, active }) => ({
-          groupId: id,
-          groupName: name,
-          groupActive: active,
-        }));
-  
-        phasesDataArray.push({
-          phaseId,
-          phaseName,
-          isInitialPhase,
-          nextPhaseIfApproved,
-          groupsAssigned,
-        });
-      });
-      setListPhases(phasesDataArray);
-      setTempListPhases(phasesDataArray);
-    } catch (error) {
-      console.error("Error al obtener fases:", error);
-    } 
-  };
-
-const handleDeletePhase = (id) => {
-  const updatedListPhases = [...listPhases];
-
-  const filteredPhases = updatedListPhases.filter((phase) => phase.phaseId !== id);
-  setListPhases(filteredPhases);
-  setModalData({
-    show: true,
-    className: "modal-delete-phase",
-    message: "Fase eliminada correctamente.",
-    icon: "successv2",
-    buttons: [
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }));
-        }}
-      />,
-    ],
-  });
-  deletePhase(id, filteredPhases)
-};
-
-const renderPhase = (phase, idx) => {
-  if (phase.isInitialPhase===1){
-    return (
-      <Phase
-        key={phase.phaseId}
-        id={idx}
-        phaseId={phase.phaseId}
-        phases={listPhases}
-        phaseName={phase.phaseName}
-        nextPhase={phase.nextPhaseIfApproved}
-        groups={phase.groupsAssigned}
-        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
-        token={token}
-        showMenu={false}
-        showButtonChip={false}
-      />
-    );
-  }else{
-    return (
-      <Phase
-        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}
-        token={token}
-      />
-    );
-  }
-  
-};
-
-
-  return (
-    <Container>
-      <Header>
-        <button className="button-phase" onClick={handleAddPhaseButton}>
-          Agregar fase de revisión
-        </button>
-        <ButtonV2
-          key="btn-Guardar"
-          className="button-save"
-          type="pink"
-          label="Guardar Cambios"
-          size={12}
-          onClick={() => {
-            setListPhases(tempListPhases)
-            updatePhases();
-            setModalData({
-              show: true,
-              className: "modal-save",
-              message: "Cambios aplicados correctamente.",
-              icon: "successv2",
-              buttons: [
-                <ButtonV2
-                  key="btn-Aceptar"
-                  type="pink"
-                  label="Aceptar"
-                  size={12}
-                  onClick={() => {
-                    setModalData((prev) => ({ ...prev, show: false }));
-                  }}
-                />,
-              ],
-            })
-            loadData();
-          }}
-        ></ButtonV2>
-      </Header>
-      {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={() =>
-          setModalData((prev) => ({ ...prev, show: false }))
-        }
-      ></Modal>
-    </Container>
-  );
-};
+import React, { useState, useEffect, useRef } from "react";
+import { Container, Header } from "./styles";
+import { Phase } from "../../molecules/Phase";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { Modal } from "../Modal";
+import axios from "axios";
+
+export const DragAndDropPhases = ({ token }) => {
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [listPhases, setListPhases]= useState([]);
+  const [tempListPhases, setTempListPhases] = useState([]); 
+  const [search, setSearch] = useState();
+  const [newPhaseName, setNewPhaseName] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [modalData, setModalData] = useState({ 
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
+  const newPhaseNameRef = useRef("");
+
+  useEffect(() => loadData(),[]);
+
+  useEffect(() => {
+    setNewPhaseName((prev) => prev + inputValue);
+  }, [inputValue]);
+
+  useEffect(() => {
+    newPhaseNameRef.current = search;
+  }, [newPhaseName]);
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  
+
+  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);
+  };
+
+  const updatePhases = async () => {
+    try {
+      const updateData = {
+          updateReferencesOfNodes: listPhases.map((phase) => ({
+            name:phase.phaseName,
+            isInitialPhase: phase.isInitialPhase,
+            phaseId: phase.phaseId,
+            nextPhaseIfApproved: phase.nextPhaseIfApproved,
+          }))
+      };
+
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
+        updateData,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      console.log("Update response:", response.body.data);
+      loadData();
+    } catch (error) {
+      console.error("Error al actualizar fases", error);
+    }
+  };
+
+  const addPhase = async(search) => {
+    try {
+      const body = {
+        name: search,
+        retailerGroupsIds: [],
+        nextPhaseId: null
+      }
+     const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
+        body,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      const createdPhase = response.data.body;
+      console.log(createdPhase)
+      setSearch();
+      setInputValue("");
+      loadData();
+    } catch (error) {
+      console.error("Error al agregar fase:", error);
+    }
+  }
+
+  const deletePhase = async(id, phases) => {
+    try {
+      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,
+      className:"modal-add-phase",
+      title:"Agregar fase de revisión",
+      buttons: [
+        <ButtonV2
+        key="btn-Cancelar"
+        type="white"
+        label="Cancelar"
+        size={12}
+        onClick={() => {
+          setModalData((prev) => ({ ...prev, show: false }))
+        }}
+      />,
+      <ButtonV2
+        key="btn-Guardar"
+        type="pink"
+        label="Guardar"
+        size={12}
+        onClick={() => {
+          setModalData((prev) => ({ ...prev, show: false }));
+          handleSavePhase(search);
+        }}
+      />
+      ],
+      customComponent: (
+        <div className="container-input-name">
+          <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
+           <input
+            type="text"
+            className="input-phases"
+            onChange={(e) => {
+              setSearch(e.target.value);
+              handleInputChange(e);
+            }}
+            value={search}
+            placeholder="Nombre de fase"
+          ></input>
+        </div>
+      ),
+    });
+  };
+
+  const handleSavePhase = () => {
+    addPhase(newPhaseNameRef.current);
+    setInputValue("");
+  };
+
+  const loadData = async () => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/get`,
+        {},
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      const phasesData = JSON.parse(response.data.body).data;
+      const phasesDataArray = [];
+  
+      phasesData.forEach(({ phaseId, phaseName, isInitialPhase, nextPhaseIfApproved, groups }) => {
+        const groupsAssigned = groups.map(({ id, name, active }) => ({
+          groupId: id,
+          groupName: name,
+          groupActive: active,
+        }));
+  
+        phasesDataArray.push({
+          phaseId,
+          phaseName,
+          isInitialPhase,
+          nextPhaseIfApproved,
+          groupsAssigned,
+        });
+      });
+      setListPhases(phasesDataArray);
+      setTempListPhases(phasesDataArray);
+    } catch (error) {
+      console.error("Error al obtener fases:", error);
+    } 
+  };
+
+const handleDeletePhase = (id) => {
+  const updatedListPhases = [...listPhases];
+
+  const filteredPhases = updatedListPhases.filter((phase) => phase.phaseId !== id);
+  setListPhases(filteredPhases);
+  setModalData({
+    show: true,
+    className: "modal-delete-phase",
+    message: "Fase eliminada correctamente.",
+    icon: "successv2",
+    buttons: [
+      <ButtonV2
+        key="btn-Aceptar"
+        type="pink"
+        label="Aceptar"
+        size={12}
+        onClick={() => {
+          setModalData((prev) => ({ ...prev, show: false }));
+        }}
+      />,
+    ],
+  });
+  deletePhase(id, filteredPhases)
+};
+
+const renderPhase = (phase, idx) => {
+  if (phase.isInitialPhase===1){
+    return (
+      <Phase
+        key={phase.phaseId}
+        id={idx}
+        phaseId={phase.phaseId}
+        phases={listPhases}
+        phaseName={phase.phaseName}
+        nextPhase={phase.nextPhaseIfApproved}
+        groups={phase.groupsAssigned}
+        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
+        token={token}
+        showMenu={false}
+        showButtonChip={false}
+      />
+    );
+  }else{
+    return (
+      <Phase
+        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}
+        token={token}
+      />
+    );
+  }
+  
+};
+
+
+  return (
+    <Container>
+      <Header>
+        <button className="button-phase" onClick={handleAddPhaseButton}>
+          Agregar fase de revisión
+        </button>
+        <ButtonV2
+          key="btn-Guardar"
+          className="button-save"
+          type="pink"
+          label="Guardar Cambios"
+          size={12}
+          onClick={() => {
+            setListPhases(tempListPhases)
+            updatePhases();
+            setModalData({
+              show: true,
+              className: "modal-save",
+              message: "Cambios aplicados correctamente.",
+              icon: "successv2",
+              buttons: [
+                <ButtonV2
+                  key="btn-Aceptar"
+                  type="pink"
+                  label="Aceptar"
+                  size={12}
+                  onClick={() => {
+                    setModalData((prev) => ({ ...prev, show: false }));
+                  }}
+                />,
+              ],
+            })
+            loadData();
+          }}
+        ></ButtonV2>
+      </Header>
+      {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={() =>
+          setModalData((prev) => ({ ...prev, show: false }))
+        }
+      ></Modal>
+    </Container>
+  );
+};