contentoh-components-library 21.4.74 → 21.4.75

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragAndDropPhases = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
@@ -19,16 +25,24 @@ var _styles = require("./styles");
 
 var _Phase = require("../../molecules/Phase");
 
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _Modal = require("../Modal");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _GeneralInputv = require("../../atoms/GeneralInputv2");
+
+var _checkv = _interopRequireDefault(require("../../../assets/images/Icons/checkv2.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var DragAndDropPhases = function DragAndDropPhases() {
-  var _useState = (0, _react.useState)([{
-    grupos: ["Impuestos", "Legal"]
-  }, {
-    grupos: ["Legal", "Jefe comercial"]
-  }, {
-    grupos: ["Finanzas", "Datos maestros"]
-  }]),
+var DragAndDropPhases = function DragAndDropPhases(_ref) {
+  var initialItems = _ref.items,
+      initialGroups = _ref.grupos,
+      token = _ref.token;
+
+  var _useState = (0, _react.useState)(initialItems),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       items = _useState2[0],
       setItems = _useState2[1];
@@ -43,14 +57,39 @@ var DragAndDropPhases = function DragAndDropPhases() {
       tempItems = _useState6[0],
       setTempItems = _useState6[1];
 
-  var _onDragStart = function onDragStart(e, idx) {
+  var _useState7 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("user"))),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      user = _useState8[0],
+      setUser = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      listPhases = _useState10[0],
+      setListPhases = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      newPhaseName = _useState12[0],
+      setNewPhaseName = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
+  }),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
+
+  var onDragStart = function onDragStart(e, idx) {
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/html", e.target.parentNode);
     e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
     setDraggedItem(items[idx]);
   };
 
-  var _onDragOver = function onDragOver(index) {
+  var onDragOver = function onDragOver(index) {
     if (!draggedItem) {
       return;
     }
@@ -80,30 +119,221 @@ var DragAndDropPhases = function DragAndDropPhases() {
     setDraggedItem(null);
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: tempItems.map(function (item, idx) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: "item",
-          onDragOver: function onDragOver() {
-            return _onDragOver(idx);
+  (0, _react.useEffect)(function () {
+    console.log("nuevo", newPhaseName);
+  }, [newPhaseName]);
+
+  var handleAddPhase = function handleAddPhase() {
+    setModalData({
+      show: true,
+      title: "Agregar fase de revisión",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
+        onClick: function onClick() {
+          handleAcceptModal();
+        }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Guardar",
+        size: 12,
+        onClick: function onClick() {
+          handleAcceptModal();
+        }
+      }, "btn-Guardar")],
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "container-input-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Las fases nuevas siempre se agregan al final.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Puedes ordenar las fases arrastr\xE1ndolas."]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInputv.GeneralInputv2, {
+          inputType: "text",
+          inputName: "input-phase-name",
+          inputId: 0,
+          inputValue: newPhaseName,
+          inputOnChange: function inputOnChange(e) {
+            return setNewPhaseName(e.target.value);
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "drag",
-            draggable: true,
-            onDragStart: function onDragStart(e) {
-              return _onDragStart(e, idx);
-            },
-            onDragEnd: onDragEnd,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
-              id: idx + 1,
-              grupos: item.grupos,
-              phases: tempItems
-            })
-          })
-        }, idx);
+          inputPlaceholder: "Nombre de fase"
+        })]
+      })
+    });
+  };
+
+  var handleAcceptModal = function handleAcceptModal() {
+    var newPhaseData = {
+      id: listPhases.length + 1,
+      phaseName: newPhaseName,
+      // Utiliza el nuevo nombre de la fase
+      groupsAssigned: []
+    };
+    setListPhases(function (prevListPhases) {
+      var updatedListPhases = [].concat((0, _toConsumableArray2.default)(prevListPhases), [newPhaseData]);
+      console.log("actualizada", updatedListPhases);
+      return updatedListPhases;
+    });
+    setModalData(function (prev) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+        show: false
+      });
+    });
+  };
+
+  var getPhases = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var response, phasesData, phasesDataArray;
+      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_PHASES_ENDPOINT, "/get"), {}, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context.sent;
+              // console.log("response", response);
+              phasesData = JSON.parse(response.data.body).data;
+              phasesDataArray = [];
+              phasesData.forEach(function (_ref3) {
+                var phaseId = _ref3.phaseId,
+                    phaseName = _ref3.phaseName,
+                    isInitialPhase = _ref3.isInitialPhase,
+                    nextPhaseIfApproved = _ref3.nextPhaseIfApproved,
+                    groups = _ref3.groups;
+                var groupsAssigned = groups.map(function (_ref4) {
+                  var id = _ref4.id,
+                      name = _ref4.name,
+                      active = _ref4.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);
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              console.error("Error fetching fases:", _context.t0);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+
+    return function getPhases() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleDeletePhase = function handleDeletePhase(id) {
+    setListPhases(function (prevListPhases) {
+      return prevListPhases.filter(function (phase) {
+        return phase.id !== id;
+      });
+    });
+    setModalData({
+      show: true,
+      className: "modal-delete",
+      message: "Fase eliminada correctamente.",
+      icon: "successv2",
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }, "btn-Aceptar")]
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    return getPhases();
+  }, []);
+  (0, _react.useEffect)(function () {// console.log("fases lista", listPhases);
+  }, [listPhases]);
+
+  var renderPhase = function renderPhase(idx, phase) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+      id: idx,
+      phases: listPhases,
+      phaseName: phase.phaseName,
+      nextPhase: phase.nextPhaseIfApproved,
+      groups: phase.groupsAssigned,
+      onDeletePhase: handleDeletePhase
+    }, idx);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "button-phase",
+        onClick: handleAddPhase,
+        children: "Agregar fase de revisi\xF3n"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        className: "button-save",
+        type: "pink",
+        label: "Guardar Cambios",
+        size: 12,
+        onClick: function onClick() {
+          return setModalData({
+            show: true,
+            className: "modal-save",
+            message: "Cambios aplicados correctamente.",
+            icon: "successv2",
+            buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+              type: "pink",
+              label: "Aceptar",
+              size: 12,
+              onClick: function onClick() {
+                setModalData(function (prev) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                    show: false
+                  });
+                });
+              }
+            }, "btn-Aceptar")]
+          });
+        }
+      }, "btn-Guardar")]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: listPhases.map(function (phase, idx) {
+        return renderPhase(idx, phase, handleDeletePhase);
       })
-    })
+    }), /*#__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
+          });
+        });
+      }
+    }))]
   });
 };
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.Header = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
@@ -13,8 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _variables = require("../../../global-files/variables");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\nwidth:100%;\nul{\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  gap:10px;\n}\n  .item{\n    display:flex;\n    width:100%;\n  }\n  .drag{\n    width:100%;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\nflex-direction: column;\ngap:20px;\nwidth:100%;\nul{\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  gap:10px;\n}\n  .item{\n    display:flex;\n    width:100%;\n  }\n  .drag{\n    width:100%;\n  }\n  .container-input-name{\n    p{\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 14px;\n      letter-spacing: 0em;\n      text-align: left;\n      color: ", ";\n      margin-bottom:15px;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray);
 
-exports.Container = Container;
+exports.Container = Container;
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width:100%;\n  display: flex;\n  justify-content: space-between;\n  margin-top:10px;\n  .button-phase {\n    cursor: pointer;\n    padding: 9px 18px;\n    background-color: #ffffff;\n    border-radius: 30px;\n    font-family: RobotoMedium, sans-serif;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 12px;\n    line-height: 14px;\n    border: none;\n    color: #e33aa9;\n    border:1px solid #e33aa9;\n  }\n  .button-save {\n    cursor: pointer;\n    font-family: RobotoMedium, sans-serif;\n    font-style: normal;\n    font-weight: 500;\n    border: none;\n    button{\n      padding: 9px 18px;\n    }\n  }\n  .modal-save{\n    width:20%;\n    background:transparent;\n  }\n"])));
+
+exports.Header = Header;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditGroupDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/EditGroup",
+  component: _index.EditGroup
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EditGroup, (0, _objectSpread2.default)({}, args));
+};
+
+var EditGroupDefault = Template.bind({});
+exports.EditGroupDefault = EditGroupDefault;
+EditGroupDefault.args = {
+  groups: [{
+    text: 'Impuestos',
+    editing: false
+  }, {
+    text: 'Legal',
+    editing: false
+  }, {
+    text: 'Datos Maestros',
+    editing: false
+  }]
+};

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

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditGroup = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+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 _material = require("@mui/material");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _trash = _interopRequireDefault(require("../../../assets/images/Icons/trash.svg"));
+
+var _undo = _interopRequireDefault(require("../../../assets/images/Icons/undo.svg"));
+
+var _Modal = require("../../organisms/Modal");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var EditGroup = function EditGroup(_ref) {
+  var initialGroups = _ref.groups;
+
+  var _useState = (0, _react.useState)(initialGroups),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      groups = _useState2[0],
+      setGroups = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isMoreThanTenGroups = _useState4[0],
+      setIsMoreThanTenGroups = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      editingIndex = _useState6[0],
+      setEditingIndex = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      deletingIndex = _useState8[0],
+      setDeletingIndex = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      showUndoButton = _useState10[0],
+      setShowUndoButton = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      deletedRows = _useState12[0],
+      setDeletedRows = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
+    show: false,
+    title: 'Actualización completa',
+    message: '',
+    icon: 'success'
+  }),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
+
+  (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);
+    }
+  };
+
+  var handleEditGroup = function handleEditGroup(index) {
+    setEditingIndex(index);
+  };
+
+  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;
+    });
+    setGroups(updatedGroups);
+    setDeletedRows(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(prev), [index]);
+    });
+    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;
+    });
+    setGroups(updatedGroups);
+    setDeletedRows(function (prev) {
+      return prev.filter(function (rowIndex) {
+        return rowIndex !== index;
+      });
+    });
+    setShowUndoButton(false);
+  };
+
+  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 handleInputChange = function handleInputChange(index, value) {
+    var updatedGroups = (0, _toConsumableArray2.default)(groups);
+    updatedGroups[index].text = value;
+    setGroups(updatedGroups);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "contentModal",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "title-edit",
+        children: "Editar grupos"
+      }), /*#__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'),
+        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);
+            },
+            isDeleted: group.isDeleted,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              className: "input-group ".concat(group.isDeleted ? 'deleted' : 'original'),
+              value: group.text,
+              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);
+              },
+              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",
+              onClick: function onClick() {
+                return handleUndoEdit(index);
+              },
+              style: {
+                display: showUndoButton && deletingIndex === index ? 'block' : 'none'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _undo.default,
+                alt: "undo icon"
+              })
+            })]
+          }, index);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "container-save-add",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          className: "button-add",
+          onClick: function onClick() {
+            return handleAddGroup();
+          },
+          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) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+        }
+      }))]
+    })
+  });
+};
+
+exports.EditGroup = EditGroup;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupRow = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    border: 1px solid ", ";\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n  }\n\n  .title-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n  }\n\n  .details-edit {\n    width: 100%;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    margin: 5px 0 10px;\n  }\n  .container-save-add {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .button-add {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0em;\n    text-align: left;\n    color: ", ";\n    text-transform: capitalize;\n    border: none;\n  }\n  .table-groups-edit {\n    width: 100%;\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  .table-groups-max{\n    min-width: 288px;\n    border: 1px solid ", ";\n    border-radius: 5px;\n    display:grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .modal-save {\n    .contentModal {\n      width: 25%;\n    }\n  }\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
+
+exports.Container = Container;
+
+var GroupRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 34px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px;\n  letter-spacing: 0em;\n  text-align: left;\n  text-decoration: none;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  input {\n    background: ", ";\n    color: ", ";\n    text-decoration: ", ";\n    border: 0;\n    padding: 5px 20px;\n  }\n\n  input:focus {\n    border: 0;\n  }\n"])), function (_ref) {
+  var isDeleted = _ref.isDeleted;
+  return isDeleted ? "#FF7373" : "transparent";
+}, _variables.GlobalColors.gray_light, function (_ref2) {
+  var isDeleted = _ref2.isDeleted;
+  return isDeleted ? "#FF7373" : "transparent";
+}, function (_ref3) {
+  var isDeleted = _ref3.isDeleted;
+  return isDeleted ? _variables.GlobalColors.white : _variables.GlobalColors.gray;
+}, function (_ref4) {
+  var isDeleted = _ref4.isDeleted;
+  return isDeleted ? "line-through" : "none";
+});
+
+exports.GroupRow = GroupRow;