contentoh-components-library 21.4.75 → 21.4.78

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

@@ -9,12 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EditGroup = 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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styles = require("./styles");
@@ -25,20 +29,67 @@ var _ButtonV = require("../../atoms/ButtonV2");
 
 var _trash = _interopRequireDefault(require("../../../assets/images/Icons/trash.svg"));
 
-var _undo = _interopRequireDefault(require("../../../assets/images/Icons/undo.svg"));
+var _edit = _interopRequireDefault(require("../../../assets/images/Icons/edit.svg"));
+
+var _close = _interopRequireDefault(require("../../../assets/images/Icons/close.svg"));
+
+var _save = _interopRequireDefault(require("../../../assets/images/Icons/save.svg"));
 
 var _Modal = require("../../organisms/Modal");
 
+var _axios = _interopRequireDefault(require("axios"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+var reducerGroups = function reducerGroups(state, action) {
+  var values = state.values;
+
+  switch (action.type) {
+    case "init":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: action.payload
+      });
+
+    case "addGroup":
+      values = [].concat((0, _toConsumableArray2.default)(values), [action.group]);
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "updateGroup":
+      values[action.payload.index][action.payload.property] = action.payload.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "deleteGroup":
+      values = values.map(function (item) {
+        return item.groupId !== action.payload.id ? item : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          isDeleted: true
+        });
+      });
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    default:
+      return state;
+  }
+};
+
 var EditGroup = function EditGroup(_ref) {
-  var initialGroups = _ref.groups;
+  var token = _ref.token;
 
-  var _useState = (0, _react.useState)(initialGroups),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       groups = _useState2[0],
       setGroups = _useState2[1];
 
+  var _useReducer = (0, _react.useReducer)(reducerGroups, {}),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       isMoreThanTenGroups = _useState4[0],
@@ -54,178 +105,445 @@ var EditGroup = function EditGroup(_ref) {
       deletingIndex = _useState8[0],
       setDeletingIndex = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)([]),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      showUndoButton = _useState10[0],
-      setShowUndoButton = _useState10[1];
+      deletedRows = _useState10[0],
+      setDeletedRows = _useState10[1];
 
-  var _useState11 = (0, _react.useState)([]),
+  var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      deletedRows = _useState12[0],
-      setDeletedRows = _useState12[1];
+      hoveredIndex = _useState12[0],
+      setHoveredIndex = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isEditingList = _useState14[0],
+      setIsEditingList = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      newGroup = _useState16[0],
+      setNewGroup = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      currentEditIndex = _useState18[0],
+      setCurrentEditIndex = _useState18[1];
 
-  var _useState13 = (0, _react.useState)({
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      inputValue = _useState20[0],
+      setInputValue = _useState20[1];
+
+  var _useState21 = (0, _react.useState)({
     show: false,
-    title: 'Actualización completa',
-    message: '',
-    icon: 'success'
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
   }),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      modalData = _useState14[0],
-      setModalData = _useState14[1];
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      modalData = _useState22[0],
+      setModalData = _useState22[1];
 
+  var modalRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {}, [groups]);
   (0, _react.useEffect)(function () {
-    console.log('Se eliminaron datos');
-  }, [groups]);
-
-  var handleAddGroup = function handleAddGroup() {
-    if (groups.length < 20) {
-      setGroups([].concat((0, _toConsumableArray2.default)(groups), [{
-        text: '',
-        editing: true
-      }]));
-      setIsMoreThanTenGroups(groups.length + 1 > 10);
+    loadData();
+  }, []);
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var response, receivedGroups, groupsArray;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_GROUPS_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
+                }
+              });
+
+            case 3:
+              response = _context.sent;
+              receivedGroups = JSON.parse(response.data.body).groups;
+              groupsArray = [];
+              receivedGroups.forEach(function (_ref3) {
+                var id = _ref3.id,
+                    name = _ref3.name,
+                    retailer_id = _ref3.retailer_id;
+                groupsArray.push({
+                  groupId: id,
+                  groupName: name || null,
+                  retailerId: retailer_id || null
+                });
+              });
+              setGroups(groupsArray);
+              dispatch({
+                type: "init",
+                payload: groupsArray
+              });
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              console.error("Error al obtener grupos:", _context.t0);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 11]]);
+    }));
+
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var AddGroup = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(index, concatenatedValue) {
+      var response, createdGroup;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_GROUPS_ENDPOINT, "/create"), {
+                groupName: concatenatedValue
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context2.sent;
+              createdGroup = response.data.body;
+              dispatch({
+                type: "addGroup",
+                payload: createdGroup
+              });
+              setEditingIndex(null);
+              setInputValue([]);
+              setIsEditingList(function (prevList) {
+                var newList = (0, _toConsumableArray2.default)(prevList);
+                newList[index] = false;
+                return newList;
+              });
+              setCurrentEditIndex(null);
+              loadData();
+              _context2.next = 16;
+              break;
+
+            case 13:
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](0);
+              console.error("Error al agregar grupo:", _context2.t0);
+
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 13]]);
+    }));
+
+    return function AddGroup(_x, _x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var handleUpdateGroup = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(index, groupId, updatedGroupName) {
+      var response, updatedData;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_GROUPS_ENDPOINT, "/update?id=").concat(groupId, "&groupName=").concat(updatedGroupName), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context3.sent;
+              updatedData = response.data.body;
+              dispatch({
+                type: "updateGroup",
+                payload: {
+                  index: index,
+                  property: "groupName",
+                  value: updatedData.groupName
+                }
+              });
+              setEditingIndex(null);
+              setInputValue([]);
+              setIsEditingList(function (prevList) {
+                var newList = (0, _toConsumableArray2.default)(prevList);
+                newList[index] = false;
+                return newList;
+              });
+              setCurrentEditIndex(null);
+              loadData();
+              _context3.next = 16;
+              break;
+
+            case 13:
+              _context3.prev = 13;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al actualizar grupo:", _context3.t0);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 13]]);
+    }));
+
+    return function handleUpdateGroup(_x3, _x4, _x5) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var deleteGroup = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(groupId) {
+      var response;
+      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_GROUPS_ENDPOINT, "/delete?id=").concat(groupId), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context4.sent;
+              dispatch({
+                type: "deleteGroup",
+                payload: {
+                  id: groupId
+                }
+              });
+              loadData();
+              _context4.next = 11;
+              break;
+
+            case 8:
+              _context4.prev = 8;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al borrar grupo:", _context4.t0);
+
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[0, 8]]);
+    }));
+
+    return function deleteGroup(_x6) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var handleEditButtonClick = function handleEditButtonClick(index) {
+    if (isEditingList[index]) {
+      handleSaveChanges(index);
+    } else {
+      setIsEditingList(function (prevList) {
+        var newList = (0, _toConsumableArray2.default)(prevList);
+        newList[index] = true;
+        return newList;
+      });
+      setEditingIndex(index);
+      setInputValue(groups[index].groupName);
+      setNewGroup(groups[index].groupId);
+      setCurrentEditIndex(index);
     }
   };
 
-  var handleEditGroup = function handleEditGroup(index) {
-    setEditingIndex(index);
-  };
+  var handleDeleteButtonClick = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(groupId) {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return deleteGroup(groupId);
+
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    return function handleDeleteButtonClick(_x7) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
 
-  var handleDeleteGroup = function handleDeleteGroup(index) {
-    setDeletingIndex(index);
-    var updatedGroups = groups.map(function (group, i) {
-      return i === index ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
-        isDeleted: true
-      }) : group;
+  var handleInputChange = function handleInputChange(value, index) {
+    setInputValue(function (prevInputValue) {
+      return prevInputValue + value;
     });
-    setGroups(updatedGroups);
-    setDeletedRows(function (prev) {
-      return [].concat((0, _toConsumableArray2.default)(prev), [index]);
+    setGroups(function (prevGroups) {
+      var updatedGroups = (0, _toConsumableArray2.default)(prevGroups);
+
+      if (index !== undefined) {
+        updatedGroups[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, updatedGroups[index]), {}, {
+          groupName: value
+        });
+      }
+
+      return updatedGroups;
     });
-    setShowUndoButton(true);
   };
 
-  var handleUndoEdit = function handleUndoEdit(index) {
-    setDeletingIndex(null);
-    var updatedGroups = groups.map(function (group, i) {
-      return i === index ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
-        isDeleted: false
-      }) : group;
+  var handleAddButtonClick = function handleAddButtonClick() {
+    var isAnyGroupEditing = isEditingList.some(function (editing) {
+      return editing;
     });
-    setGroups(updatedGroups);
-    setDeletedRows(function (prev) {
-      return prev.filter(function (rowIndex) {
-        return rowIndex !== index;
+
+    if (!isAnyGroupEditing && groups.length < 20) {
+      setIsEditingList(function (prevList) {
+        var newList = (0, _toConsumableArray2.default)(prevList);
+        newList[groups.length] = true;
+        return newList;
       });
-    });
-    setShowUndoButton(false);
+      setEditingIndex(groups.length);
+      var nuevoGrupo = {
+        groupName: inputValue,
+        isEditing: true
+      };
+      setGroups([].concat((0, _toConsumableArray2.default)(groups), [nuevoGrupo]));
+      setIsMoreThanTenGroups(groups.length + 1 > 10);
+      setNewGroup(undefined);
+      setCurrentEditIndex(groups.length);
+    }
   };
 
-  var handleSaveChanges = function handleSaveChanges() {
-    var updatedGroups = groups.filter(function (group, index) {
-      return !deletedRows.includes(index);
-    });
-    setGroups(updatedGroups);
-    setModalData({
-      show: true,
-      className: 'modal-save',
-      message: 'El cambio de grupo fue aplicado correctamente a los usuarios seleccionados.',
-      icon: 'success',
-      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-        type: "pink",
-        label: "Aceptar",
-        size: 12,
-        onClick: function onClick() {
-          return setModalData(function (prev) {
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-              show: false
-            });
-          });
-        }
-      }, "btn-Aceptar")]
-    });
-    console.log('Guardando cambios:', groups);
-    setShowUndoButton(false);
-    setEditingIndex(null);
+  var handleSaveChanges = function handleSaveChanges(index) {
+    var concatenatedValue = groups[index].groupName;
+
+    if (newGroup !== undefined) {
+      handleUpdateGroup(index, newGroup, concatenatedValue);
+    } else {
+      AddGroup(index, concatenatedValue);
+    }
   };
 
-  var handleInputChange = function handleInputChange(index, value) {
-    var updatedGroups = (0, _toConsumableArray2.default)(groups);
-    updatedGroups[index].text = value;
-    setGroups(updatedGroups);
+  var handleCloseModal = function handleCloseModal(e) {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      setEditingIndex(null);
+    }
   };
 
+  (0, _react.useEffect)(function () {
+    document.addEventListener("mousedown", handleCloseModal);
+    return function () {
+      document.removeEventListener("mousedown", handleCloseModal);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    ref: modalRef,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "contentModal",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-        className: "title-edit",
-        children: "Editar grupos"
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          className: "title-edit",
+          children: "Editar grupos"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          className: "circular-button close-button",
+          onClick: handleCloseModal(e),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _close.default,
+            alt: "close icon"
+          })
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "details-edit",
         children: "Agrega, edita y borra. Luego guarda los cambios."
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(isMoreThanTenGroups ? 'table-groups-max' : 'table-groups-edit'),
+        className: "".concat(isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"),
         children: groups.map(function (group, index) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.GroupRow, {
             editing: editingIndex === index,
-            hasText: Boolean(group.text),
             deleting: deletingIndex === index,
-            onClick: function onClick() {
-              return handleEditGroup(index);
+            onMouseEnter: function onMouseEnter() {
+              return setHoveredIndex(index);
+            },
+            onMouseLeave: function onMouseLeave() {
+              return setHoveredIndex(null);
             },
-            isDeleted: group.isDeleted,
+            className: "group-row ".concat(isEditingList[index] ? "editing" : ""),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              className: "input-group ".concat(group.isDeleted ? 'deleted' : 'original'),
-              value: group.text,
+              className: "input-group",
+              placeholder: "Escribe el nombre del grupo",
+              value: index !== undefined ? group.groupName : inputValue,
               onChange: function onChange(e) {
-                return handleInputChange(index, e.target.value);
-              }
-            }, index), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-              className: "circular-button",
-              onClick: function onClick() {
-                handleDeleteGroup(index);
+                return handleInputChange(e.target.value, index);
               },
-              style: {
-                display: showUndoButton && deletingIndex === index ? 'none' : 'block'
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: _trash.default,
-                alt: "trash icon"
-              })
-            }), editingIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-              className: "circular-button",
+              disabled: !isEditingList[index],
+              autoFocus: isEditingList[index] && editingIndex === index
+            }, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              className: "circular-button save-button visible",
               onClick: function onClick() {
-                return handleUndoEdit(index);
-              },
-              style: {
-                display: showUndoButton && deletingIndex === index ? 'block' : 'none'
+                return handleSaveChanges(index);
               },
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: _undo.default,
-                alt: "undo icon"
+                src: _save.default,
+                alt: "save update icon"
               })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                className: "circular-button edit-button ".concat(hoveredIndex === index ? "visible" : ""),
+                onClick: function onClick() {
+                  return handleEditButtonClick(index);
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _edit.default,
+                  alt: "edit icon"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                className: "circular-button delete-button ".concat(hoveredIndex === index ? "visible" : ""),
+                onClick: function onClick() {
+                  return handleDeleteButtonClick(group.groupId);
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _trash.default,
+                  alt: "trash icon"
+                })
+              })]
             })]
-          }, index);
+          }, group.groupId);
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "container-save-add",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           className: "button-add",
           onClick: function onClick() {
-            return handleAddGroup();
+            return handleAddButtonClick();
           },
           children: "+ Agregar Grupo"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-          type: "pink",
-          borderType: "oval",
-          label: "Guardar",
-          size: 12,
-          onClick: function onClick() {
-            return handleSaveChanges();
-          }
-        }, "btn-guardar")]
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
         onClickBtnDefault: function onClickBtnDefault() {
           return setModalData(function (prev) {