contentoh-components-library 21.4.115 → 21.4.116

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

@@ -31,10 +31,6 @@ var _Modal = require("../Modal");
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _checkv = _interopRequireDefault(require("../../../assets/images/Icons/checkv2.svg"));
-
-var _material = require("@mui/material");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var DragAndDropPhases = function DragAndDropPhases(_ref) {
@@ -55,38 +51,47 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
       tempListPhases = _useState6[0],
       setTempListPhases = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(""),
+  var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      newPhaseName = _useState8[0],
-      setNewPhaseName = _useState8[1];
+      search = _useState8[0],
+      setSearch = _useState8[1];
 
   var _useState9 = (0, _react.useState)(""),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      inputValue = _useState10[0],
-      setInputValue = _useState10[1];
+      newPhaseName = _useState10[0],
+      setNewPhaseName = _useState10[1];
 
-  var _useState11 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      inputValue = _useState12[0],
+      setInputValue = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
   }),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      modalData = _useState12[0],
-      setModalData = _useState12[1];
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalData = _useState14[0],
+      setModalData = _useState14[1];
 
+  var newPhaseNameRef = (0, _react.useRef)("");
   (0, _react.useEffect)(function () {
     return loadData();
   }, []);
-  var newPhaseNameRef = (0, _react.useRef)("");
-  (0, _react.useEffect)(function () {
-    newPhaseNameRef.current = newPhaseName;
-  }, [newPhaseName]);
   (0, _react.useEffect)(function () {
     setNewPhaseName(function (prev) {
       return prev + inputValue;
     });
   }, [inputValue]);
+  (0, _react.useEffect)(function () {
+    newPhaseNameRef.current = search;
+  }, [newPhaseName]);
+
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
+  };
 
   var onDragStart = function onDragStart(e, id) {
     e.dataTransfer.effectAllowed = "move";
@@ -119,7 +124,6 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              console.log("listPhases:", listPhases);
               updateData = {
                 updateReferencesOfNodes: listPhases.map(function (phase) {
                   return {
@@ -133,31 +137,30 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
                   Authorization: token
                 }
               };
-              console.log("updateData:", updateData);
-              _context.next = 6;
+              _context.next = 4;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), updateData, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 6:
+            case 4:
               response = _context.sent;
-              console.log("Update response:", response.data);
-              _context.next = 13;
+              console.log("Update response:", response.body.data);
+              _context.next = 11;
               break;
 
-            case 10:
-              _context.prev = 10;
+            case 8:
+              _context.prev = 8;
               _context.t0 = _context["catch"](0);
               console.error("Error al actualizar fases", _context.t0);
 
-            case 13:
+            case 11:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee, null, [[0, 8]]);
     }));
 
     return function updatePhases() {
@@ -165,12 +168,8 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
     };
   }();
 
-  var handleInputChange = function handleInputChange(e) {
-    setInputValue(e.target.value);
-  };
-
   var addPhase = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseName) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(search) {
       var body, response, createdPhase;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -178,7 +177,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
             case 0:
               _context2.prev = 0;
               body = {
-                name: phaseName,
+                name: search,
                 retailerGroupsIds: [],
                 nextPhaseId: null
               };
@@ -193,22 +192,23 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               response = _context2.sent;
               createdPhase = response.data.body;
               console.log(createdPhase);
+              setSearch();
               setInputValue("");
               loadData();
-              _context2.next = 14;
+              _context2.next = 15;
               break;
 
-            case 11:
-              _context2.prev = 11;
+            case 12:
+              _context2.prev = 12;
               _context2.t0 = _context2["catch"](0);
               console.error("Error al agregar fase:", _context2.t0);
 
-            case 14:
+            case 15:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 11]]);
+      }, _callee2, null, [[0, 12]]);
     }));
 
     return function addPhase(_x) {
@@ -224,9 +224,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
           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;
+              _context3.next = 3;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
                 updateReferencesOfNodes: phases,
                 deletePhase: id
@@ -236,23 +234,23 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
                 }
               });
 
-            case 5:
+            case 3:
               response = _context3.sent;
               loadData();
-              _context3.next = 12;
+              _context3.next = 10;
               break;
 
-            case 9:
-              _context3.prev = 9;
+            case 7:
+              _context3.prev = 7;
               _context3.t0 = _context3["catch"](0);
               console.error("Error al eliminar fase:", _context3.t0);
 
-            case 12:
+            case 10:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 9]]);
+      }, _callee3, null, [[0, 7]]);
     }));
 
     return function deletePhase(_x2, _x3) {
@@ -286,7 +284,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               show: false
             });
           });
-          handleSavePhase();
+          handleSavePhase(search);
         }
       }, "btn-Guardar")],
       customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -294,12 +292,14 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         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)("input", {
+          type: "text",
           className: "input-phases",
-          placeholder: "Nombre de fase",
-          value: inputValue,
           onChange: function onChange(e) {
-            return handleInputChange(e);
-          }
+            setSearch(e.target.value);
+            handleInputChange(e);
+          },
+          value: search,
+          placeholder: "Nombre de fase"
         })]
       })
     });
@@ -321,8 +321,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               _context4.next = 3;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
                 headers: {
-                  Authorization: token // Authorization: sessionStorage.getItem("jwt"),
-
+                  Authorization: token
                 }
               });
 
@@ -354,23 +353,22 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
                   groupsAssigned: groupsAssigned
                 });
               });
-              console.table("fases Array", phasesDataArray);
               setListPhases(phasesDataArray);
               setTempListPhases(phasesDataArray);
-              _context4.next = 15;
+              _context4.next = 14;
               break;
 
-            case 12:
-              _context4.prev = 12;
+            case 11:
+              _context4.prev = 11;
               _context4.t0 = _context4["catch"](0);
               console.error("Error al obtener fases:", _context4.t0);
 
-            case 15:
+            case 14:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[0, 12]]);
+      }, _callee4, null, [[0, 11]]);
     }));
 
     return function loadData() {
@@ -403,11 +401,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
       }, "btn-Aceptar")]
     });
     deletePhase(id, filteredPhases);
-  }; // useEffect(() => {
-  //   updatePhases(); 
-  //   setModalData((prev) => ({ ...prev, show: false }));
-  // }, [listPhases]); 
-
+  };
 
   var renderPhase = function renderPhase(phase, idx) {
     if (phase.isInitialPhase === 1) {
@@ -476,6 +470,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
               }
             }, "btn-Aceptar")]
           });
+          loadData();
         }
       }, "btn-Guardar")]
     }), listPhases.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 
-export const TabSection = ({ label, active, onClick }) => {
+export const TabSection = ({ label, active, onClick}) => {
   return (
     <Container className={active && "active"} onClick={onClick}>
       <p>{label}</p>

package/src/components/molecules/AddGroup/AddGroup.stories.js

@@ -0,0 +1,15 @@
+import { AddGroup } from "./index";
+
+
+export default {
+    title: "Components/molecules/AddGroup",
+    component: AddGroup,
+};
+
+const Template = (args) => <AddGroup {...args}/>;
+
+export const AddGroupDefault = Template.bind({});
+
+AddGroupDefault.args = {
+    image: bags,    
+};

package/src/components/molecules/AddGroup/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import { Container } from "./styles.js";
+import searchIcon from "../../../assets/images/Icons/search.svg";
+import add from "../../../assets/images/Icons/addv2.svg";
+
+export const AddGroup = ({
+  id,
+  items = [],
+  value = [],
+  defaultSearch = "",
+  defaultOption = "",
+  onChange,
+  placeholder = "",
+}) => {
+  const [itemsSelected, setItemsSelected] = useState(value);
+  const [search, setSearch] = useState(defaultSearch);
+  const [containerVisible, setContainerVisible] = useState(false);
+  const itemsFiltered = (() => {
+    if (!search) return items;
+
+    return items.filter((item) =>
+      item.label.toLowerCase().includes(search.toLowerCase())
+    );
+  })();
+
+  useEffect(() => {
+    onChange && onChange(itemsSelected);
+  }, [itemsSelected]);
+
+  return (
+    <Container id={id}>
+      <button
+        className="custom-select"
+        onClick={() => setContainerVisible(!containerVisible)}
+      >
+        <img src={add} className="add-icon" alt="add icon" />
+      </button>
+      {containerVisible && (
+      <div className="container-def">
+        <div className="search-bar">
+          <img src={searchIcon} className="search-icon" alt="search icon" />
+          <input
+            type="text"
+            className="search"
+            onChange={(e) => {
+              setSearch(e.target.value);
+            }}
+            value={search}
+            placeholder={placeholder}
+          ></input>
+        </div>
+        <p className="default-option">{defaultOption}</p>
+        {itemsFiltered.map((item, i) => {
+          return (
+            <div className="container-options">
+              <div key={i} className="options">
+                <input
+                  id="custom-check"
+                  className="custom-check"
+                  type="checkbox"
+                  checked={itemsSelected.includes(item.value)}
+                  onChange={(e) => {
+                    setItemsSelected((prev) => {
+                      const existItem = prev.find((e) => e === item.value);
+
+                      if (existItem) {
+                        return [...prev].filter((e) => e !== item.value);
+                      }
+
+                      return [...prev, item.value];
+                    });
+                  }}
+                />
+                <label htmlFor="" className="texto">
+                  {item.label}
+                </label>
+              </div>
+            </div>
+          );
+        })}
+      </div>)}
+    </Container>
+  );
+};

package/src/components/molecules/AddGroup/styles.js

@@ -0,0 +1,141 @@
+import styled from "styled-components";
+import checked from "../../../assets/images/checkBox/checkverde.svg";
+
+export const Container = styled.div`
+  .container-def {
+    margin-top: 10px;
+    box-shadow: 0px 2px 4px #00000040;
+    border-radius: 5px;
+    background-color: #fff;
+    padding-bottom: 10px;
+    position: absolute;
+    z-index: 10;
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .custom-select {
+    ont-family: RobotoRegular,sans-serif;
+    font-size: 12px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    width: 30px;
+    height: 30px;
+    padding: 7px 7px;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    border-radius: 50px;
+    background-color: #fff;
+    border: 1px solid #E33AA9;
+    cursor: pointer;
+  }
+
+  .search-bar{
+    display: flex;
+    align-items: center;
+    padding: 0px 5px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .search {
+    border: none;
+    height: 34px;
+    padding: 5px 10px;
+    color: #707070;
+  }
+  .search::placeholder {
+    display: inline;
+    color: #707070;
+    font-family: Avenir Next;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 15px;
+  }
+
+  .container-options {
+    padding: 5px;
+  }
+
+  .default-option {
+    cursor: pointer;
+    padding: 10px 10px 5px;
+    color: #817393;
+    font-family: Avenir Next;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 15px;
+  }
+
+  .options {
+    height: 24px;
+    gap: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .custom-check {
+    border: 3px solid red;
+    background-color: #D9D9D9;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 300px;
+    height: 300px;
+    appearance: none;
+    display: inline-block;
+    vertical-align: middle;
+    background-origin: border-box;
+    padding: 0;
+    user-select: none;
+    flex-shrink: 0;
+    border-radius: 3px;
+  }
+
+  .custom-check {
+    cursor: pointer;
+    background-color: #D9D9D9;
+    width: 16px;
+    height: 16px;
+    appearance: none;
+    border: 1px solid #cbcbcb;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .custom-check:checked {
+    background-color: #FFFFFF;
+    border: none;
+    background-image: url(${checked});
+  }
+
+  .custom-check:focus {
+    border-color: rgb(198, 198, 198);
+  }
+
+  .custom-check:disabled {
+    background-color: rgb(198, 198, 198);
+    background-image: none;
+  }
+
+  .custom-check:disabled:checked {
+    background-color: rgb(198, 198, 198);
+    background-image: url(${checked});
+  }
+
+  .texto {
+    display: inline;
+    color: #817393;
+    font-family: Avenir Next;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 15px;
+  }
+
+  .add-icon{
+    width:13px;
+    height: 13px;
+  }
+`;