contentoh-components-library 21.4.89 → 21.4.90

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

@@ -9,23 +9,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Phase = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _styles = require("./styles");
 
-var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
-
 var _material = require("@mui/material");
 
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
 
-var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
+var _axios = _interopRequireDefault(require("axios"));
 
 var _Modal = require("../../organisms/Modal");
 
@@ -33,12 +35,18 @@ var _TextField = require("@mui/material/TextField");
 
 var _GroupSelect = require("../../molecules/GroupSelect");
 
+var _CustomChip = require("../../atoms/CustomChip");
+
+var _CustomSelect = require("../../molecules/CustomSelect");
+
 var _options = _interopRequireDefault(require("../../../assets/images/Icons/options.svg"));
 
-var _DeleteForeverOutlined = _interopRequireDefault(require("@mui/icons-material/DeleteForeverOutlined"));
+var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+//Componentes
+//svg
 var Phase = function Phase(_ref) {
   var id = _ref.id,
       phases = _ref.phases,
@@ -46,7 +54,10 @@ var Phase = function Phase(_ref) {
       nextPhase = _ref.nextPhase,
       groups = _ref.groups,
       onDeletePhase = _ref.onDeletePhase,
-      draggable = _ref.draggable;
+      onDragStart = _ref.onDragStart,
+      onDragOver = _ref.onDragOver,
+      onDragEnd = _ref.onDragEnd,
+      token = _ref.token;
 
   var _useState = (0, _react.useState)(""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -68,155 +79,259 @@ var Phase = function Phase(_ref) {
       showCustomSelect = _useState8[0],
       setShowCustomSelect = _useState8[1];
 
-  var _useState9 = (0, _react.useState)({
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      nextPhaseState = _useState10[0],
+      setNextPhaseState = _useState10[1];
+
+  var open = Boolean(anchorEl);
+
+  var _useState11 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
   }),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      modalData = _useState10[0],
-      setModalData = _useState10[1];
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      modalData = _useState12[0],
+      setModalData = _useState12[1];
 
   var idPhase = id + 1;
 
-  var _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      draggedItem = _useState12[0],
-      setDraggedItem = _useState12[1];
-
   var _useState13 = (0, _react.useState)([]),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       tempItems = _useState14[0],
       setTempItems = _useState14[1];
 
-  var onAdd = function onAdd() {
-    if (selectedValue && !groupsSelected.includes(selectedValue)) {
-      setGroupsSelected(function (prevGroups) {
-        return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
-      });
-      setChips(function (prevChips) {
-        return [].concat((0, _toConsumableArray2.default)(prevChips), [selectedValue]);
-      });
-      setSelectedValue("");
+  (0, _react.useEffect)(function () {
+    var activeGroups = groups.filter(function (group) {
+      return group.groupActive === 1;
+    });
+    var initialChips = activeGroups.map(function (group) {
+      return {
+        id: group.groupId,
+        label: group.groupName
+      };
+    });
+    setChips(initialChips);
+  }, [groups]);
+  (0, _react.useEffect)(function () {
+    var nextPhaseObject = phases.find(function (phase) {
+      return phase.phaseId === nextPhase;
+    });
+
+    if (nextPhaseObject) {
+      setNextPhaseState(nextPhaseObject.phaseName);
+    } else {
+      console.log("Aún no se asigna siguiente fase");
     }
-  };
+  }, [nextPhase, phases]);
+
+  var onAdd = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(idPhase) {
+      var updatedGroups;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(selectedValue && !groupsSelected.includes(selectedValue))) {
+                _context.next = 9;
+                break;
+              }
 
-  var handleDeletePhase = function handleDeletePhase() {
-    onDeletePhase(idPhase);
-  };
+              updatedGroups = groups.map(function (group) {
+                return group.groupName === selectedValue ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+                  groupActive: 1
+                }) : group;
+              });
+              setGroups(updatedGroups); // Actualizar el estado de chips y groupsSelected
+
+              setChips(function (prevChips) {
+                return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+                  id: idPhase,
+                  label: selectedValue
+                }]);
+              });
+              setGroupsSelected(function (prevGroups) {
+                return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
+              });
+              setSelectedValue("");
+              console.log("update", updatedGroups);
+              _context.next = 9;
+              return addGroup(idPhase, updatedGroups);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onAdd(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var addGroup = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseId, groups) {
+      var response;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              console.log("fase y grupos", {
+                phaseId: phaseId,
+                groups: groups
+              });
+              _context2.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), {
+                retailerGroupsIds: {
+                  groups: groups
+                },
+                phaseId: phaseId
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context2.sent;
+              console.log("grupo eliminado correctamente");
+              _context2.next = 11;
+              break;
+
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al eliminar grupo de fase:", _context2.t0);
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 8]]);
+    }));
+
+    return function addGroup(_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
   var handleGroupSelect = function handleGroupSelect(selectedGroup) {
-    setGroupsSelected(function (prevGroups) {
-      return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedGroup]);
-    });
+    if (!chips.find(function (chip) {
+      return chip.label === selectedGroup;
+    })) {
+      setChips(function (prevChips) {
+        return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+          id: prevChips.length,
+          label: selectedGroup
+        }]);
+      });
+    }
+
+    console.log("Se agrego el grupo", selectedGroup);
     setSelectedValue(selectedGroup);
   };
 
-  var handleChipDelete = function handleChipDelete(chipToRemove) {
+  var handleChipDelete = function handleChipDelete(phaseId, chipToRemove) {
     setGroupsSelected(function (prevGroups) {
       return prevGroups.filter(function (chip) {
-        return chip !== chipToRemove;
+        return chip.id !== chipToRemove.id;
       });
     });
+    console.log("Se elimino el grupo", chipToRemove.id);
     setChips(function (prevChips) {
       return prevChips.filter(function (chip) {
-        return chip !== chipToRemove;
+        return chip.id !== chipToRemove.id;
       });
     });
+    deleteGroup(phaseId, chipToRemove.id);
   };
 
-  var _React$useState = _react.default.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
-
-  var open = Boolean(anchorEl);
-
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  };
+  var deleteGroup = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(phaseId, groupId) {
+      var response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              console.log("grupo de fase", {
+                phaseId: phaseId,
+                groupId: groupId
+              });
+              _context3.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
+                deleteGroupOfPhase: {
+                  phaseId: phaseId,
+                  groupId: groupId
+                }
+              }, {
+                headers: {
+                  Authorization: token // Authorization: sessionStorage.getItem("jwt"),
 
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
+                }
+              });
 
-  var HoverableChip = function HoverableChip(_ref2) {
-    var label = _ref2.label,
-        onDelete = _ref2.onDelete;
+            case 4:
+              response = _context3.sent;
+              console.log("grupo eliminado correctamente");
+              _context3.next = 11;
+              break;
 
-    var _useState15 = (0, _react.useState)(false),
-        _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-        isHovered = _useState16[0],
-        setIsHovered = _useState16[1];
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al eliminar grupo de fase:", _context3.t0);
 
-    var handleMouseEnter = function handleMouseEnter() {
-      setIsHovered(true);
-    };
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 8]]);
+    }));
 
-    var handleMouseLeave = function handleMouseLeave() {
-      setIsHovered(false);
+    return function deleteGroup(_x4, _x5) {
+      return _ref4.apply(this, arguments);
     };
+  }();
 
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
-      label: label,
-      onDelete: onDelete,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteForeverOutlined.default, {}),
-      style: {
-        borderRadius: "5px",
-        background: "transparent",
-        border: "1px solid ".concat(isHovered ? "#B64545" : "#F0F0F0"),
-        color: "".concat(isHovered ? "#B64545" : "#707070")
-      }
-    });
-  };
-
-  var onDragStartHandler = function 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);
-  };
-
-  var onDragOverHandler = function onDragOverHandler(index) {
-    if (!draggedItem || draggedItem === id) {
-      return;
-    }
-
-    onDragOver(id);
-    setDraggedItem(null);
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
   };
 
-  var onDragEndHandler = function onDragEndHandler() {
-    onDragEnd();
-    setDraggedItem(null);
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    onDragStart: onDragStartHandler,
-    onDragOver: onDragOverHandler,
-    onDragEnd: onDragEndHandler,
-    draggable: draggable,
+    onDragStart: onDragStart,
+    onDragOver: onDragOver,
+    onDragEnd: onDragEnd,
+    draggable: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-phase",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
         children: ["Fase ", idPhase, " - ", phaseName]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "text-button-container",
-        children: idPhase === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: "text-phase",
-          children: "Al rechazar en esta fase enviar a proveedor"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "phase-sel",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             className: "text-phase",
             children: "Siguiente Fase "
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-            width: "100px",
-            value: selectedValue !== "" ? selectedValue : nextPhase,
+            value: selectedValue !== "" ? selectedValue : nextPhaseState,
             placeholder: "Fase",
             onChange: function onChange(e) {
               var selectedPhase = phases.find(function (phase) {
@@ -225,11 +340,11 @@ var Phase = function Phase(_ref) {
               setSelectedValue(selectedPhase.nextPhaseIfApproved);
             },
             sx: {
-              width: "auto",
               minWidth: "100px",
               height: "24px",
               background: "#F7F7FC",
-              borderRadius: "5px"
+              borderRadius: "5px",
+              fontSize: "12px"
             },
             MenuProps: {
               PaperProps: {
@@ -242,8 +357,9 @@ var Phase = function Phase(_ref) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
                 value: phase.phaseName,
                 sx: {
-                  fontSize: "10px",
-                  color: "#262626"
+                  fontSize: "12px",
+                  color: "#262626",
+                  minHeight: "auto"
                 },
                 children: phase.phaseName
               }, phase.phaseId);
@@ -253,7 +369,9 @@ var Phase = function Phase(_ref) {
             "aria-controls": open ? "basic-menu" : undefined,
             "aria-haspopup": "true",
             "aria-expanded": open ? "true" : undefined,
-            onClick: handleClick,
+            onClick: function onClick(e) {
+              return handleClick(e);
+            },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
               src: _options.default,
               alt: ""
@@ -266,45 +384,36 @@ var Phase = function Phase(_ref) {
             MenuListProps: {
               "aria-labelledby": "basic-button"
             },
+            sx: {
+              ul: {
+                paddingTop: "0px",
+                paddingBottom: "0px"
+              }
+            },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
               onClick: function onClick() {
                 return onDeletePhase(id);
               },
+              sx: {
+                fontSize: "12px",
+                color: "#262626",
+                minHeight: "auto"
+              },
               children: "Eliminar Fase"
             })
           })]
         })
       })]
-    }, idPhase), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }, idPhase), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "attributes-container",
-      children: [groups.filter(function (group) {
-        return group.groupActive === 1;
-      }).map(function (group, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(HoverableChip, {
-          label: group.groupName,
+      children: chips.map(function (chip) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomChip.CustomChip, {
+          label: chip.label,
           onDelete: function onDelete() {
-            return handleChipDelete(group);
+            return handleChipDelete(idPhase, chip);
           }
-        }, index);
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupSelect.GroupSelect, {
-        options: groups.filter(function (group) {
-          return group.groupActive === 0;
-        }).map(function (group, index) {
-          return {
-            id: index,
-            name: group.groupName
-          };
-        }),
-        showSearchBar: true,
-        icon: _addv.default,
-        placeHolder: "Buscar grupo",
-        customSelectId: "category-select-" + groups.id,
-        defaultOption: "Todos los grupos",
-        parameterArray: groupsSelected,
-        setParameterArray: setGroupsSelected,
-        onSelect: handleGroupSelect,
-        onClickItem: onAdd
-      })]
+        }, chip.id);
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
       onClickBtnDefault: function onClickBtnDefault() {
         return setModalData(function (prev) {

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

@@ -26,28 +26,5 @@ var Template = function Template(args) {
 var DragAndDropPhasesDefault = Template.bind({});
 exports.DragAndDropPhasesDefault = DragAndDropPhasesDefault;
 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"
 };