contentoh-components-library 21.4.91 → 21.4.93

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

@@ -57,34 +57,45 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
 
   var _useState7 = (0, _react.useState)(""),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
+      newPhaseName = _useState8[0],
+      setNewPhaseName = _useState8[1];
 
-  var _useState9 = (0, _react.useState)({
+  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"
   }),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      modalData = _useState10[0],
-      setModalData = _useState10[1];
+      _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)(function () {
-    console.log(inputValue);
+    setNewPhaseName(function (prev) {
+      return prev + inputValue;
+    });
   }, [inputValue]);
 
-  var _onDragStart = function 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);
   };
 
-  var _onDragOver = function onDragOver(index) {
+  var onDragOver = function onDragOver(index) {
     var draggedIdx = tempListPhases.findIndex(function (phase) {
       return phase.phaseId === draggedItem;
     });
@@ -98,8 +109,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
 
   var onDragEnd = function onDragEnd() {
     setDraggedItem(null);
-  }; // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
-
+  };
 
   var updatePhases = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -155,15 +165,11 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
     };
   }();
 
-  var handleInputChange = function handleInputChange(value) {
-    setInputValue(function (prevInputValue) {
-      var newValue = prevInputValue + value;
-      console.log("currentInputValue", newValue);
-      return newValue;
-    });
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
   };
 
-  var AddPhase = /*#__PURE__*/function () {
+  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) {
@@ -186,26 +192,28 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
 
             case 5:
               response = _context2.sent;
+              console.log("body", body);
               createdPhase = response.data.body;
               console.log(createdPhase);
               setInputValue("");
-              _context2.next = 14;
+              loadData();
+              _context2.next = 16;
               break;
 
-            case 11:
-              _context2.prev = 11;
+            case 13:
+              _context2.prev = 13;
               _context2.t0 = _context2["catch"](1);
               console.error("Error al agregar fase:", _context2.t0);
 
-            case 14:
+            case 16:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[1, 11]]);
+      }, _callee2, null, [[1, 13]]);
     }));
 
-    return function AddPhase(_x) {
+    return function addPhase(_x) {
       return _ref3.apply(this, arguments);
     };
   }();
@@ -280,10 +288,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               show: false
             });
           });
-          setInputValue(function (prevInputValue) {
-            AddPhase(prevInputValue);
-            return prevInputValue;
-          });
+          handleSavePhase();
         }
       }, "btn-Guardar")],
       customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -295,13 +300,18 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
           placeholder: "Nombre de fase",
           value: inputValue,
           onChange: function onChange(e) {
-            return handleInputChange(e.target.value);
+            return handleInputChange(e);
           }
         })]
       })
     });
   };
 
+  var handleSavePhase = function handleSavePhase() {
+    addPhase(newPhaseNameRef.current);
+    setInputValue("");
+  };
+
   var loadData = /*#__PURE__*/function () {
     var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var response, phasesData, phasesDataArray;
@@ -404,22 +414,19 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
   var renderPhase = function renderPhase(phase, idx) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
       id: idx,
+      phaseId: phase.phaseId,
       phases: listPhases,
       phaseName: phase.phaseName,
       nextPhase: phase.nextPhaseIfApproved,
       groups: phase.groupsAssigned,
       onDeletePhase: function onDeletePhase() {
         return handleDeletePhase(phase.phaseId);
-      },
-      onDragStart: function onDragStart(e) {
-        return _onDragStart(e, idx);
-      },
-      onDragOver: function onDragOver() {
-        return _onDragOver(idx);
-      },
-      onDragEnd: onDragEnd,
+      } // onDragStart={(e) => onDragStart(e, idx)}
+      // onDragOver={() => onDragOver(idx)}
+      // onDragEnd={onDragEnd}
+      ,
       token: token
-    }, idx);
+    }, phase.phaseId);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
@@ -456,10 +463,15 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
           });
         }
       }, "btn-Guardar")]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    }), listPhases.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
       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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
       onClickBtnDefault: function onClickBtnDefault() {
         return setModalData(function (prev) {

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-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    .input-phases{\n      width:100%;\n      height: 30px;\n      padding: 8px 10px;\n      border-radius: 5px;\n      border: 1px solid ", ";\n      ::placeholder {\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: #CBCBCB;\n      }\n    }\n  }\n  .modal-add-phase {\n    .contentModal{\n      min-width:310px;\n    }\n    header .label-title{\n      text-align: left;\n    }\n    .container-buttons{\n      justify-content: flex-end;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoRegular);
+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    .input-phases{\n      width:100%;\n      height: 30px;\n      padding: 8px 10px;\n      border-radius: 5px;\n      border: 1px solid ", ";\n      ::placeholder {\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: #CBCBCB;\n      }\n    }\n  }\n  .modal-add-phase {\n    .contentModal{\n      min-width:310px;\n    }\n    header .label-title{\n      text-align: left;\n    }\n    .container-buttons{\n      justify-content: flex-end;\n    }\n  }\n  .no-phases-container {\n    display: flex;\n    flex-direction:column;\n    gap:10px;\n    align-items: center;\n    border-radius:10px;\n    border:1px solid ", ";\n    padding:10px 15px;\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto);
 
 exports.Container = Container;
 

package/dist/components/pages/RetailerProductEdition/index.js

@@ -843,7 +843,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     setActivePercentage((_retailers$ = retailers[0]) === null || _retailers$ === void 0 ? void 0 : _retailers$.percentage);
   }, [percentages]);
   (0, _react.useEffect)(function () {
-    //getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
+    (0, _utils.getInputsData)(services, activeRetailer, setDatasheets, setDescriptions);
     auditableVersion && loadAuditableData();
     setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
     (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && setImages({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.91",
+  "version": "21.4.93",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/CustomChip/index.js

@@ -3,7 +3,7 @@ import { Container } from "./styles";
 import MuiChip from "@mui/material/Chip";
 import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
 
-export const CustomChip = ({ label, onDelete }) => {
+export const CustomChip = ({ key, label, onDelete }) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const handleMouseEnter = () => {
@@ -16,6 +16,7 @@ export const CustomChip = ({ label, onDelete }) => {
 
   return (
     <MuiChip
+      key={key}
       label={label}
       onDelete={onDelete}
       onMouseEnter={handleMouseEnter}