contentoh-components-library 21.4.89 → 21.4.90

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

@@ -15,6 +15,8 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 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"));
@@ -36,132 +38,222 @@ var _material = require("@mui/material");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var DragAndDropPhases = function DragAndDropPhases(_ref) {
-  var initialItems = _ref.items,
-      initialGroups = _ref.grupos,
-      token = _ref.token;
+  var token = _ref.token;
 
-  var _useState = (0, _react.useState)(initialItems),
+  var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
+      draggedItem = _useState2[0],
+      setDraggedItem = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      draggedItem = _useState4[0],
-      setDraggedItem = _useState4[1];
+      listPhases = _useState4[0],
+      setListPhases = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(items),
+  var _useState5 = (0, _react.useState)([]),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      tempItems = _useState6[0],
-      setTempItems = _useState6[1];
+      tempListPhases = _useState6[0],
+      setTempListPhases = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("user"))),
+  var _useState7 = (0, _react.useState)(""),
       _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];
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
 
-  var _useState13 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
   }),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      modalData = _useState14[0],
-      setModalData = _useState14[1]; // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
-
-
-  {
-    /*const updatePhases = async () => {
-     try {
-       console.log("listPhases:", listPhases);
-       const updateData = {
-         body: {
-           updateReferencesOfNodes: listPhases.map((phase) => ({
-             name:phase.phaseName,
-             isInitialPhase: phase.isInitialPhase,
-             phaseId: phase.phaseId,
-             nextPhaseIfApproved: phase.nextPhaseIfApproved,
-           })),
-         },
-         path: {
-           action: "update",
-         },
-         headers: {
-           Authorization: token,
-         },
-       };
-       console.log("updateData:", updateData);
-        const response = await axios.post(
-         `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-         updateData
-       );
-        // Handle response if needed
-       console.log("Update response:", response.data);
-     } catch (error) {
-       console.error("Error al actualizar fases", error);
-     }
-    };*/
-  }
-
-  var handleInputChange = function handleInputChange(e) {
-    console.log("nuevo nombre", e.target.value);
-    setNewPhaseName(e.target.value);
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      modalData = _useState10[0],
+      setModalData = _useState10[1];
+
+  (0, _react.useEffect)(function () {
+    return loadData();
+  }, []);
+  (0, _react.useEffect)(function () {
+    console.log(inputValue);
+  }, [inputValue]);
+
+  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 AddPhase = /*#__PURE__*/function () {
+  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);
+  };
+
+  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() {
+      var updateData, response;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              try {
-                console.log("fase nueva", newPhaseName);
-                {
-                  /*const body = {
-                   name: phaseName,
-                   retailerGroupsIds: [],
-                   nextPhaseId: null
-                  }
-                  const response = await axios.post(
-                   `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
-                   body,
-                   {
-                     headers: {
-                       Authorization: token,
-                     },
-                   }
-                  );
-                  const createdPhase = response.data.body;
-                  console.log(createdPhase)*/
+              _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
                 }
-              } catch (error) {
-                console.error("Error al agregar fase:", error);
-              }
+              };
+              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 1:
+            case 13:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee);
+      }, _callee, null, [[0, 10]]);
     }));
 
-    return function AddPhase() {
+    return function updatePhases() {
       return _ref2.apply(this, arguments);
     };
   }();
 
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(function (prevInputValue) {
+      var newValue = prevInputValue + value;
+      console.log("currentInputValue", newValue);
+      return newValue;
+    });
+  };
+
+  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:
+              console.log("fase nueva", phaseName);
+              _context2.prev = 1;
+              body = {
+                name: phaseName,
+                retailerGroupsIds: [],
+                nextPhaseId: null
+              };
+              _context2.next = 5;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              response = _context2.sent;
+              createdPhase = response.data.body;
+              console.log(createdPhase);
+              setInputValue("");
+              _context2.next = 14;
+              break;
+
+            case 11:
+              _context2.prev = 11;
+              _context2.t0 = _context2["catch"](1);
+              console.error("Error al agregar fase:", _context2.t0);
+
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 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();
+          }
+        }
+      }, _callee3, null, [[0, 9]]);
+    }));
+
+    return function deletePhase(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
   var handleAddPhaseButton = function handleAddPhaseButton() {
     setModalData({
       show: true,
@@ -182,31 +274,17 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         type: "pink",
         label: "Guardar",
         size: 12,
-        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-          return _regenerator.default.wrap(function _callee2$(_context2) {
-            while (1) {
-              switch (_context2.prev = _context2.next) {
-                case 0:
-                  setModalData(function (prev) {
-                    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-                      show: false
-                    });
-                  });
-                  _context2.next = 3;
-                  return new Promise(function (resolve) {
-                    return setTimeout(resolve, 0);
-                  });
-
-                case 3:
-                  AddPhase();
-
-                case 4:
-                case "end":
-                  return _context2.stop();
-              }
-            }
-          }, _callee2);
-        }))
+        onClick: function onClick() {
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
+          setInputValue(function (prevInputValue) {
+            AddPhase(prevInputValue);
+            return prevInputValue;
+          });
+        }
       }, "btn-Guardar")],
       customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "container-input-name",
@@ -215,27 +293,24 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           className: "input-phases",
           placeholder: "Nombre de fase",
-          value: newPhaseName,
-          onChange: handleInputChange
+          value: inputValue,
+          onChange: function onChange(e) {
+            return handleInputChange(e.target.value);
+          }
         })]
       })
     });
   };
 
-  var handleAcceptModal = function handleAcceptModal(PhaseName) {
-    console.log("nombre", PhaseName);
-    AddPhase(PhaseName);
-  };
-
   var loadData = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var response, phasesData, phasesDataArray;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
+      return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.prev = 0;
-              _context3.next = 3;
+              _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"),
@@ -244,19 +319,19 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               });
 
             case 3:
-              response = _context3.sent;
+              response = _context4.sent;
               phasesData = JSON.parse(response.data.body).data;
               phasesDataArray = [];
-              phasesData.forEach(function (_ref5) {
-                var phaseId = _ref5.phaseId,
-                    phaseName = _ref5.phaseName,
-                    isInitialPhase = _ref5.isInitialPhase,
-                    nextPhaseIfApproved = _ref5.nextPhaseIfApproved,
-                    groups = _ref5.groups;
-                var groupsAssigned = groups.map(function (_ref6) {
-                  var id = _ref6.id,
-                      name = _ref6.name,
-                      active = _ref6.active;
+              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,
@@ -273,36 +348,37 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               });
               console.table("fases Array", phasesDataArray);
               setListPhases(phasesDataArray);
-              _context3.next = 14;
+              setTempListPhases(phasesDataArray);
+              _context4.next = 15;
               break;
 
-            case 11:
-              _context3.prev = 11;
-              _context3.t0 = _context3["catch"](0);
-              console.error("Error al obtener fases:", _context3.t0);
+            case 12:
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al obtener fases:", _context4.t0);
 
-            case 14:
+            case 15:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3, null, [[0, 11]]);
+      }, _callee4, null, [[0, 12]]);
     }));
 
     return function loadData() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 
   var handleDeletePhase = function handleDeletePhase(id) {
-    setListPhases(function (prevListPhases) {
-      return prevListPhases.filter(function (phase) {
-        return phase.id !== id;
-      });
+    var updatedListPhases = (0, _toConsumableArray2.default)(listPhases);
+    var filteredPhases = updatedListPhases.filter(function (phase) {
+      return phase.phaseId !== id;
     });
+    setListPhases(filteredPhases);
     setModalData({
       show: true,
-      className: "modal-delete",
+      className: "modal-delete-phase",
       message: "Fase eliminada correctamente.",
       icon: "successv2",
       buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
@@ -318,15 +394,13 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         }
       }, "btn-Aceptar")]
     });
-  };
-
-  (0, _react.useEffect)(function () {
-    return loadData();
-  }, []); // useEffect(() => {
+    deletePhase(id, filteredPhases);
+  }; // useEffect(() => {
   //   updatePhases(); 
   //   setModalData((prev) => ({ ...prev, show: false }));
   // }, [listPhases]); 
 
+
   var renderPhase = function renderPhase(phase, idx) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
       id: idx,
@@ -335,9 +409,16 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
       nextPhase: phase.nextPhaseIfApproved,
       groups: phase.groupsAssigned,
       onDeletePhase: function onDeletePhase() {
-        return handleDeletePhase(phase.id);
+        return handleDeletePhase(phase.phaseId);
+      },
+      onDragStart: function onDragStart(e) {
+        return _onDragStart(e, idx);
+      },
+      onDragOver: function onDragOver() {
+        return _onDragOver(idx);
       },
-      draggable: true
+      onDragEnd: onDragEnd,
+      token: token
     }, idx);
   };
 
@@ -353,7 +434,9 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         label: "Guardar Cambios",
         size: 12,
         onClick: function onClick() {
-          return setModalData({
+          setListPhases(tempListPhases);
+          updatePhases();
+          setModalData({
             show: true,
             className: "modal-save",
             message: "Cambios aplicados correctamente.",

package/package.json

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

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

@@ -0,0 +1,16 @@
+import { CustomChip } from "./index";
+
+export default {
+  title: "Components/atoms/CustomChip",
+  component: CustomChip,
+  argTypes: {
+  }
+};
+
+const Template = (args) => <CustomChip {...args} />;
+
+export const CustomChipDefault = Template.bind({});
+
+CustomChipDefault.args = {
+  name:"legal"
+}

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

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import { Container } from "./styles";
+import MuiChip from "@mui/material/Chip";
+import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
+
+export const CustomChip = ({ label, onDelete }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <MuiChip
+      label={label}
+      onDelete={onDelete}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      deleteIcon={
+        <DeleteIcon sx={{color:"#B64545!important",fontSize:"14px!important",cursor:"pointer",}}/>
+      }
+      style={{
+        height:"30px",
+        borderRadius: "5px",
+        background: "transparent",
+        border: `1px solid ${isHovered ? "#B64545" : "#F0F0F0"}`,
+        color: `${isHovered ? "#B64545" : "#707070"}`,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+
+`;