contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,127 +1,266 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragAndDropPhases = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styles = require("./styles");
+
 var _Phase = require("../../molecules/Phase");
+
 var _ButtonV = require("../../atoms/ButtonV2");
+
 var _Modal = require("../Modal");
+
 var _axios = _interopRequireDefault(require("axios"));
+
 var _checkv = _interopRequireDefault(require("../../../assets/images/Icons/checkv2.svg"));
+
 var _material = require("@mui/material");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const DragAndDropPhases = _ref => {
-  let {
-    token
-  } = _ref;
-  const [draggedItem, setDraggedItem] = (0, _react.useState)(null);
-  const [listPhases, setListPhases] = (0, _react.useState)([]);
-  const [tempListPhases, setTempListPhases] = (0, _react.useState)([]);
-  const [newPhaseName, setNewPhaseName] = (0, _react.useState)("");
-  const [inputValue, setInputValue] = (0, _react.useState)("");
-  const [modalData, setModalData] = (0, _react.useState)({
+
+var DragAndDropPhases = function DragAndDropPhases(_ref) {
+  var token = _ref.token;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      draggedItem = _useState2[0],
+      setDraggedItem = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      listPhases = _useState4[0],
+      setListPhases = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      tempListPhases = _useState6[0],
+      setTempListPhases = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      newPhaseName = _useState8[0],
+      setNewPhaseName = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
-  });
-  (0, _react.useEffect)(() => loadData(), []);
-  const newPhaseNameRef = (0, _react.useRef)("");
-  (0, _react.useEffect)(() => {
+  }),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      modalData = _useState12[0],
+      setModalData = _useState12[1];
+
+  (0, _react.useEffect)(function () {
+    return loadData();
+  }, []);
+  var newPhaseNameRef = (0, _react.useRef)("");
+  (0, _react.useEffect)(function () {
     newPhaseNameRef.current = newPhaseName;
   }, [newPhaseName]);
-  (0, _react.useEffect)(() => {
-    setNewPhaseName(prev => prev + inputValue);
+  (0, _react.useEffect)(function () {
+    setNewPhaseName(function (prev) {
+      return prev + inputValue;
+    });
   }, [inputValue]);
-  const onDragStart = (e, id) => {
+
+  var onDragStart = function 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];
+
+  var onDragOver = function onDragOver(index) {
+    var draggedIdx = tempListPhases.findIndex(function (phase) {
+      return phase.phaseId === draggedItem;
+    });
+    var draggedItemData = tempListPhases[draggedIdx];
+    var targetIdx = index;
+    var newTempListPhases = (0, _toConsumableArray2.default)(tempListPhases);
     newTempListPhases.splice(draggedIdx, 1);
     newTempListPhases.splice(targetIdx, 0, draggedItemData);
     setTempListPhases(newTempListPhases);
   };
-  const onDragEnd = () => {
+
+  var onDragEnd = function onDragEnd() {
     setDraggedItem(null);
   };
-  const updatePhases = async () => {
-    try {
-      console.log("listPhases:", listPhases);
-      const updateData = {
-        updateReferencesOfNodes: listPhases.map(phase => ({
-          name: phase.phaseName,
-          isInitialPhase: phase.isInitialPhase,
-          phaseId: phase.phaseId,
-          nextPhaseIfApproved: phase.nextPhaseIfApproved
-        })),
-        headers: {
-          Authorization: token
-        }
-      };
-      console.log("updateData:", updateData);
-      const response = await _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), updateData, {
-        headers: {
-          Authorization: token
+
+  var updatePhases = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var updateData, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              console.log("listPhases:", listPhases);
+              updateData = {
+                updateReferencesOfNodes: listPhases.map(function (phase) {
+                  return {
+                    name: phase.phaseName,
+                    isInitialPhase: phase.isInitialPhase,
+                    phaseId: phase.phaseId,
+                    nextPhaseIfApproved: phase.nextPhaseIfApproved
+                  };
+                }),
+                headers: {
+                  Authorization: token
+                }
+              };
+              console.log("updateData:", updateData);
+              _context.next = 6;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), updateData, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 6:
+              response = _context.sent;
+              console.log("Update response:", response.data);
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al actualizar fases", _context.t0);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
         }
-      });
-      console.log("Update response:", response.data);
-    } catch (error) {
-      console.error("Error al actualizar fases", error);
-    }
-  };
-  const handleInputChange = e => {
+      }, _callee, null, [[0, 10]]);
+    }));
+
+    return function updatePhases() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleInputChange = function handleInputChange(e) {
     setInputValue(e.target.value);
   };
-  const addPhase = async phaseName => {
-    try {
-      const body = {
-        name: phaseName,
-        retailerGroupsIds: [],
-        nextPhaseId: null
-      };
-      const response = await _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
-        headers: {
-          Authorization: token
+
+  var addPhase = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseName) {
+      var body, response, createdPhase;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              body = {
+                name: phaseName,
+                retailerGroupsIds: [],
+                nextPhaseId: null
+              };
+              _context2.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context2.sent;
+              createdPhase = response.data.body;
+              console.log(createdPhase);
+              setInputValue("");
+              loadData();
+              _context2.next = 14;
+              break;
+
+            case 11:
+              _context2.prev = 11;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al agregar fase:", _context2.t0);
+
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
         }
-      });
-      const createdPhase = response.data.body;
-      console.log(createdPhase);
-      setInputValue("");
-      loadData();
-    } 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.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
-        updateReferencesOfNodes: phases,
-        deletePhase: id
-      }, {
-        headers: {
-          Authorization: token
+      }, _callee2, null, [[0, 11]]);
+    }));
+
+    return function addPhase(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var deletePhase = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(id, phases) {
+      var response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              console.log("Lista de fases actualizada", phases);
+              console.log("fase a eliminar", id);
+              _context3.next = 5;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
+                updateReferencesOfNodes: phases,
+                deletePhase: id
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              response = _context3.sent;
+              loadData();
+              _context3.next = 12;
+              break;
+
+            case 9:
+              _context3.prev = 9;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al eliminar fase:", _context3.t0);
+
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
         }
-      });
-      loadData();
-    } catch (error) {
-      console.error("Error al eliminar fase:", error);
-    }
-  };
-  const handleAddPhaseButton = () => {
+      }, _callee3, null, [[0, 9]]);
+    }));
+
+    return function deletePhase(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var handleAddPhaseButton = function handleAddPhaseButton() {
     setModalData({
       show: true,
       className: "modal-add-phase",
@@ -130,21 +269,23 @@ const DragAndDropPhases = _ref => {
         type: "white",
         label: "Cancelar",
         size: 12,
-        onClick: () => {
-          setModalData(prev => ({
-            ...prev,
-            show: false
-          }));
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
         }
       }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         type: "pink",
         label: "Guardar",
         size: 12,
-        onClick: () => {
-          setModalData(prev => ({
-            ...prev,
-            show: false
-          }));
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
           handleSavePhase();
         }
       }, "btn-Guardar")],
@@ -156,63 +297,92 @@ const DragAndDropPhases = _ref => {
           className: "input-phases",
           placeholder: "Nombre de fase",
           value: inputValue,
-          onChange: e => handleInputChange(e)
+          onChange: function onChange(e) {
+            return handleInputChange(e);
+          }
         })]
       })
     });
   };
-  const handleSavePhase = () => {
+
+  var handleSavePhase = function handleSavePhase() {
     addPhase(newPhaseNameRef.current);
     setInputValue("");
   };
-  const loadData = async () => {
-    try {
-      const response = await _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
-        headers: {
-          Authorization: token
-          // Authorization: sessionStorage.getItem("jwt"),
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var response, phasesData, phasesDataArray;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.prev = 0;
+              _context4.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: token // Authorization: sessionStorage.getItem("jwt"),
+
+                }
+              });
+
+            case 3:
+              response = _context4.sent;
+              phasesData = JSON.parse(response.data.body).data;
+              phasesDataArray = [];
+              phasesData.forEach(function (_ref6) {
+                var phaseId = _ref6.phaseId,
+                    phaseName = _ref6.phaseName,
+                    isInitialPhase = _ref6.isInitialPhase,
+                    nextPhaseIfApproved = _ref6.nextPhaseIfApproved,
+                    groups = _ref6.groups;
+                var groupsAssigned = groups.map(function (_ref7) {
+                  var id = _ref7.id,
+                      name = _ref7.name,
+                      active = _ref7.active;
+                  return {
+                    groupId: id,
+                    groupName: name,
+                    groupActive: active
+                  };
+                });
+                phasesDataArray.push({
+                  phaseId: phaseId,
+                  phaseName: phaseName,
+                  isInitialPhase: isInitialPhase,
+                  nextPhaseIfApproved: nextPhaseIfApproved,
+                  groupsAssigned: groupsAssigned
+                });
+              });
+              console.table("fases Array", phasesDataArray);
+              setListPhases(phasesDataArray);
+              setTempListPhases(phasesDataArray);
+              _context4.next = 15;
+              break;
+
+            case 12:
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al obtener fases:", _context4.t0);
+
+            case 15:
+            case "end":
+              return _context4.stop();
+          }
         }
-      });
-      const phasesData = JSON.parse(response.data.body).data;
-      const phasesDataArray = [];
-      phasesData.forEach(_ref2 => {
-        let {
-          phaseId,
-          phaseName,
-          isInitialPhase,
-          nextPhaseIfApproved,
-          groups
-        } = _ref2;
-        const groupsAssigned = groups.map(_ref3 => {
-          let {
-            id,
-            name,
-            active
-          } = _ref3;
-          return {
-            groupId: id,
-            groupName: name,
-            groupActive: active
-          };
-        });
-        phasesDataArray.push({
-          phaseId,
-          phaseName,
-          isInitialPhase,
-          nextPhaseIfApproved,
-          groupsAssigned
-        });
-      });
-      console.table("fases Array", phasesDataArray);
-      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);
+      }, _callee4, null, [[0, 12]]);
+    }));
+
+    return function loadData() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var handleDeletePhase = function handleDeletePhase(id) {
+    var updatedListPhases = (0, _toConsumableArray2.default)(listPhases);
+    var filteredPhases = updatedListPhases.filter(function (phase) {
+      return phase.phaseId !== id;
+    });
     setListPhases(filteredPhases);
     setModalData({
       show: true,
@@ -223,23 +393,23 @@ const DragAndDropPhases = _ref => {
         type: "pink",
         label: "Aceptar",
         size: 12,
-        onClick: () => {
-          setModalData(prev => ({
-            ...prev,
-            show: false
-          }));
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
         }
       }, "btn-Aceptar")]
     });
     deletePhase(id, filteredPhases);
-  };
-
-  // useEffect(() => {
+  }; // useEffect(() => {
   //   updatePhases(); 
   //   setModalData((prev) => ({ ...prev, show: false }));
   // }, [listPhases]); 
 
-  const renderPhase = (phase, idx) => {
+
+  var renderPhase = function renderPhase(phase, idx) {
     if (phase.isInitialPhase === 1) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
         id: idx,
@@ -248,7 +418,9 @@ const DragAndDropPhases = _ref => {
         phaseName: phase.phaseName,
         nextPhase: phase.nextPhaseIfApproved,
         groups: phase.groupsAssigned,
-        onDeletePhase: () => handleDeletePhase(phase.phaseId),
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        },
         token: token,
         showMenu: false,
         showButtonChip: false
@@ -261,8 +433,9 @@ const DragAndDropPhases = _ref => {
         phaseName: phase.phaseName,
         nextPhase: phase.nextPhaseIfApproved,
         groups: phase.groupsAssigned,
-        onDeletePhase: () => handleDeletePhase(phase.phaseId)
-        // onDragStart={(e) => onDragStart(e, idx)}
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        } // onDragStart={(e) => onDragStart(e, idx)}
         // onDragOver={() => onDragOver(idx)}
         // onDragEnd={onDragEnd}
         ,
@@ -270,6 +443,7 @@ const DragAndDropPhases = _ref => {
       }, phase.phaseId);
     }
   };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -281,7 +455,7 @@ const DragAndDropPhases = _ref => {
         type: "pink",
         label: "Guardar Cambios",
         size: 12,
-        onClick: () => {
+        onClick: function onClick() {
           setListPhases(tempListPhases);
           updatePhases();
           setModalData({
@@ -293,30 +467,36 @@ const DragAndDropPhases = _ref => {
               type: "pink",
               label: "Aceptar",
               size: 12,
-              onClick: () => {
-                setModalData(prev => ({
-                  ...prev,
-                  show: false
-                }));
+              onClick: function onClick() {
+                setModalData(function (prev) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                    show: false
+                  });
+                });
               }
             }, "btn-Aceptar")]
           });
         }
       }, "btn-Guardar")]
     }), listPhases.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: listPhases.map((phase, idx) => renderPhase(phase, idx))
+      children: listPhases.map(function (phase, idx) {
+        return renderPhase(phase, idx);
+      })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "no-phases-container",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: "Parece que aun no tienes fases disponibles."
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
-      ...modalData,
-      onClickBtnDefault: () => setModalData(prev => ({
-        ...prev,
-        show: false
-      }))
-    })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
+      onClickBtnDefault: function onClickBtnDefault() {
+        return setModalData(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    }))]
   });
 };
+
 exports.DragAndDropPhases = DragAndDropPhases;