contentoh-components-library 21.4.94 → 21.4.96

package/dist/components/atoms/ObservationFlag/index.js

@@ -62,24 +62,21 @@ var ObservationFlag = function ObservationFlag(_ref) {
       currentObservation = _useState6[0],
       setCurrentObservation = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      modalView = _useState8[0],
-      setModalView = _useState8[1];
+      showModal = _useState8[0],
+      setShowModal = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)({}),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      showModal = _useState10[0],
-      setShowModal = _useState10[1];
-
-  var _useState11 = (0, _react.useState)({}),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      modalData = _useState12[0],
-      setModalData = _useState12[1];
+      modalData = _useState10[0],
+      setModalData = _useState10[1];
 
   var textareaRef = (0, _react.useRef)(null);
 
   var toggleObservation = function toggleObservation() {
+    console.log("VENTANA");
+    evt.stopPropagation();
     setObservationVisible(!isObservationVisible);
   };
 

package/dist/components/atoms/ObservationFlag/styles.js

@@ -17,7 +17,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 exports.Container = Container;
 
-var Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n"])));
+var Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n  z-index: 10000;\n"])));
 
 exports.Observation = Observation;
 

package/dist/components/molecules/GridItem/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,6 +25,10 @@ var _RatingStars = require("../../atoms/RatingStars");
 
 var _CheckBox = require("../../atoms/CheckBox");
 
+var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
+
+var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GridItem = function GridItem(_ref) {
@@ -42,7 +48,9 @@ var GridItem = function GridItem(_ref) {
       _gridElement$status = gridElement.status,
       status = _gridElement$status === void 0 ? [] : _gridElement$status,
       _gridElement$catalogs = gridElement.catalogs,
-      catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs;
+      catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs,
+      _gridElement$observat = gridElement.observations,
+      observations = _gridElement$observat === void 0 ? [] : _gridElement$observat;
 
   var getSrvName = function getSrvName(srv) {
     switch (srv) {
@@ -92,9 +100,19 @@ var GridItem = function GridItem(_ref) {
           children: item.value
         }, i);
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "status-slider",
-      children: status === null || status === void 0 ? void 0 : status.map(function (_ref2) {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("figure", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          style: {
+            height: 15,
+            width: 15,
+            objectFit: "scale-down"
+          },
+          src: product.observations !== null && product.observations !== "" ? _highPriority.default : _lowPriority.default,
+          alt: ""
+        })
+      }), status === null || status === void 0 ? void 0 : status.map(function (_ref2) {
         var title = _ref2.title,
             value = _ref2.value,
             percent = _ref2.percent;
@@ -112,7 +130,7 @@ var GridItem = function GridItem(_ref) {
             progressBarType: value
           })]
         });
-      })
+      })]
     }), isMerchans ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "cart-and-raiting",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {

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

@@ -1,101 +1,169 @@
-// import { Container } from "./styles";
-// import axios from "axios";
-// import { useEffect, useState } from "react";
-// import { ScreenHeader } from "../../atoms/ScreenHeader";
-// import { Button } from "../../atoms/GeneralButton";
-// import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-// import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-// import { GlobalColors } from "../../../../dist/global-files/variables";
-// import { FontFamily } from "../../../global-files/variables";
-// import { VersionItem } from "../../molecules/VersionItem";
-// import { CreateVersion } from "../../organisms/CreateVersion";
-// import { useCloseModal } from "../../../global-files/customHooks";
-// export const VersionSelector = ({
-//   modalId,
-//   articleId,
-//   setVersion,
-//   companyName,
-//   currentVersion,
-//   setShowVersionSelector,
-//   jwt,
-// }) => {
-//   const [versions, setVersions] = useState([]);
-//   const [showCreateVersion, setShowCreateVersion] =
-//     useCloseModal("create-version");
-//   const [reload, setReload] = useState(false);
-//   const loadProductVersions = async (articleId) => {
-//     try {
-//       const response = await axios.get(
-//         `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-//         {
-//           headers: {
-//             Authorization: jwt,
-//           },
-//         }
-//       );
-//       const versionList = JSON.parse(response.data.body).data;
-//       setVersions(versionList);
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
-//   useEffect(() => {
-//     const ac = new AbortController();
-//     loadProductVersions(articleId);
-//     return () => {
-//       setVersions([]);
-//       setShowCreateVersion(false);
-//       return () => ac.abort(); // Abort both fetches on unmount
-//     };
-//   }, [reload]);
-//   return (
-//     <Container id={modalId}>
-//       <div className="versions-header">
-//         <ScreenHeader
-//           text={"Versión del producto"}
-//           headerType={"input-name-header"}
-//           color={GlobalColors.white}
-//           fontFamily={FontFamily.Lato}
-//         />
-//         <div className="buttons-container">
-//           <Button
-//             image={addVersion}
-//             buttonType={"circular-button"}
-//             onClick={() => setShowCreateVersion(true)}
-//             id="add-version"
-//           />
-//           <Button
-//             image={closeIcon}
-//             buttonType={"circular-button"}
-//             onClick={() => setShowVersionSelector(false)}
-//             id="close-button"
-//           />
-//         </div>
-//       </div>
-//       <div className="versions-container">
-//         {versions?.map((item) => (
-//           <VersionItem
-//             key={item.version}
-//             version={item.version}
-//             articleStatus={item.article_status}
-//             currentVersion={item.version === currentVersion}
-//             productOwner={companyName}
-//             setVersion={setVersion}
-//             timestamp={item.timestamp}
-//           />
-//         ))}
-//       </div>
-//       {showCreateVersion && (
-//         <CreateVersion
-//           articleId={articleId}
-//           version={currentVersion}
-//           versionsList={versions}
-//           setShowCreateVersion={setShowCreateVersion}
-//           realoadVersion={() => setReload(!reload)}
-//           jwt={jwt}
-//         />
-//       )}
-//     </Container>
-//   );
-// };
-"use strict";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VersionSelector = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _react = require("react");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _addVersion = _interopRequireDefault(require("../../../assets/images/versionSelector/addVersion.svg"));
+
+var _closeVersionSelector = _interopRequireDefault(require("../../../assets/images/versionSelector/closeVersionSelector.svg"));
+
+var _variables = require("../../../../dist/global-files/variables");
+
+var _variables2 = require("../../../global-files/variables");
+
+var _VersionItem = require("../../molecules/VersionItem");
+
+var _CreateVersion = require("../../organisms/CreateVersion");
+
+var _customHooks = require("../../../global-files/customHooks");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var VersionSelector = function VersionSelector(_ref) {
+  var modalId = _ref.modalId,
+      articleId = _ref.articleId,
+      setVersion = _ref.setVersion,
+      companyName = _ref.companyName,
+      currentVersion = _ref.currentVersion,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      jwt = _ref.jwt;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      versions = _useState2[0],
+      setVersions = _useState2[1];
+
+  var _useCloseModal = (0, _customHooks.useCloseModal)("create-version"),
+      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
+      showCreateVersion = _useCloseModal2[0],
+      setShowCreateVersion = _useCloseModal2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      reload = _useState4[0],
+      setReload = _useState4[1];
+
+  var loadProductVersions = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId) {
+      var response, versionList;
+      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.get("".concat(process.env.REACT_APP_VERSIONS_ENDPOINT, "?articleId=").concat(articleId, "&provider=true"), {
+                headers: {
+                  Authorization: jwt
+                }
+              });
+
+            case 3:
+              response = _context.sent;
+              versionList = JSON.parse(response.data.body).data;
+              setVersions(versionList);
+              _context.next = 11;
+              break;
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              console.log(_context.t0);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 8]]);
+    }));
+
+    return function loadProductVersions(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var ac = new AbortController();
+    loadProductVersions(articleId);
+    return function () {
+      setVersions([]);
+      setShowCreateVersion(false);
+      return function () {
+        return ac.abort();
+      }; // Abort both fetches on unmount
+    };
+  }, [reload]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: modalId,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "versions-header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        text: "Versión del producto",
+        headerType: "input-name-header",
+        color: _variables.GlobalColors.white,
+        fontFamily: _variables2.FontFamily.Lato
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "buttons-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+          image: _addVersion.default,
+          buttonType: "circular-button",
+          onClick: function onClick() {
+            return setShowCreateVersion(true);
+          },
+          id: "add-version"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+          image: _closeVersionSelector.default,
+          buttonType: "circular-button",
+          onClick: function onClick() {
+            return setShowVersionSelector(false);
+          },
+          id: "close-button"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "versions-container",
+      children: versions === null || versions === void 0 ? void 0 : versions.map(function (item) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionItem.VersionItem, {
+          version: item.version,
+          articleStatus: item.article_status,
+          currentVersion: item.version === currentVersion,
+          productOwner: companyName,
+          setVersion: setVersion,
+          timestamp: item.timestamp
+        }, item.version);
+      })
+    }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
+      articleId: articleId,
+      version: currentVersion,
+      versionsList: versions,
+      setShowCreateVersion: setShowCreateVersion,
+      realoadVersion: function realoadVersion() {
+        return setReload(!reload);
+      },
+      jwt: jwt
+    })]
+  });
+};
+
+exports.VersionSelector = VersionSelector;

package/package.json

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

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

@@ -25,12 +25,13 @@ export const ObservationFlag = ({
   const [material, setMaterial] = useState(contentObservation || "");
   const [currentObservation, setCurrentObservation] = useState(observation);
 
-  const [modalView, setModalView] = useState(null);
   const [showModal, setShowModal] = useState(false);
   const [modalData, setModalData] = useState({});
 
   const textareaRef = useRef(null);
   const toggleObservation = () => {
+    console.log("VENTANA");
+    evt.stopPropagation();
     setObservationVisible(!isObservationVisible);
   };
   useEffect(() => {

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

@@ -9,6 +9,7 @@ export const Observation = styled.div`
   position: relative;
   /* height: 100%;
   width: 100%; */
+  z-index: 10000;
 `;
 
 export const Content = styled.div`

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

@@ -7,6 +7,8 @@ import { faStar as starIcon } from "@fortawesome/free-regular-svg-icons";
 import { faCartPlus as cartIcon } from "@fortawesome/free-solid-svg-icons";
 import { RatingStars } from "../../atoms/RatingStars";
 import { CheckBox } from "../../atoms/CheckBox";
+import high from "../../../assets/images/flags/highPriority.svg";
+import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const GridItem = ({
   gridElement = {},
@@ -18,8 +20,13 @@ export const GridItem = ({
   chkChecked,
   index,
 }) => {
-  const { images = [], info = [], status = [], catalogs = {} } = gridElement;
-
+  const {
+    images = [],
+    info = [],
+    status = [],
+    catalogs = {},
+    observations = [],
+  } = gridElement;
   const getSrvName = (srv) => {
     switch (srv) {
       case "datasheet":
@@ -53,6 +60,23 @@ export const GridItem = ({
         )}
       </div>
       <div className="status-slider">
+        {
+          <figure>
+            <img
+              style={{
+                height: 15,
+                width: 15,
+                objectFit: "scale-down",
+              }}
+              src={
+                product.observations !== null && product.observations !== ""
+                  ? high
+                  : low
+              }
+              alt={""}
+            />
+          </figure>
+        }
         {status?.map(({ title, value, percent }) => (
           <div className="status-element">
             {title && (

package/src/components/organisms/VersionSelector/index.js

@@ -1,106 +1,106 @@
-// import { Container } from "./styles";
-// import axios from "axios";
-// import { useEffect, useState } from "react";
-// import { ScreenHeader } from "../../atoms/ScreenHeader";
-// import { Button } from "../../atoms/GeneralButton";
-// import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-// import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-// import { GlobalColors } from "../../../../dist/global-files/variables";
-// import { FontFamily } from "../../../global-files/variables";
-// import { VersionItem } from "../../molecules/VersionItem";
-// import { CreateVersion } from "../../organisms/CreateVersion";
-// import { useCloseModal } from "../../../global-files/customHooks";
+import { Container } from "./styles";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Button } from "../../atoms/GeneralButton";
+import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { GlobalColors } from "../../../../dist/global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+import { VersionItem } from "../../molecules/VersionItem";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
 
-// export const VersionSelector = ({
-//   modalId,
-//   articleId,
-//   setVersion,
-//   companyName,
-//   currentVersion,
-//   setShowVersionSelector,
-//   jwt,
-// }) => {
-//   const [versions, setVersions] = useState([]);
-//   const [showCreateVersion, setShowCreateVersion] =
-//     useCloseModal("create-version");
-//   const [reload, setReload] = useState(false);
+export const VersionSelector = ({
+  modalId,
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowVersionSelector,
+  jwt,
+}) => {
+  const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
 
-//   const loadProductVersions = async (articleId) => {
-//     try {
-//       const response = await axios.get(
-//         `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-//         {
-//           headers: {
-//             Authorization: jwt,
-//           },
-//         }
-//       );
+  const loadProductVersions = async (articleId) => {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+        {
+          headers: {
+            Authorization: jwt,
+          },
+        }
+      );
 
-//       const versionList = JSON.parse(response.data.body).data;
-//       setVersions(versionList);
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
+      const versionList = JSON.parse(response.data.body).data;
+      setVersions(versionList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
-//   useEffect(() => {
-//     const ac = new AbortController();
-//     loadProductVersions(articleId);
+  useEffect(() => {
+    const ac = new AbortController();
+    loadProductVersions(articleId);
 
-//     return () => {
-//       setVersions([]);
-//       setShowCreateVersion(false);
-//       return () => ac.abort(); // Abort both fetches on unmount
-//     };
-//   }, [reload]);
+    return () => {
+      setVersions([]);
+      setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
+    };
+  }, [reload]);
 
-//   return (
-//     <Container id={modalId}>
-//       <div className="versions-header">
-//         <ScreenHeader
-//           text={"Versión del producto"}
-//           headerType={"input-name-header"}
-//           color={GlobalColors.white}
-//           fontFamily={FontFamily.Lato}
-//         />
-//         <div className="buttons-container">
-//           <Button
-//             image={addVersion}
-//             buttonType={"circular-button"}
-//             onClick={() => setShowCreateVersion(true)}
-//             id="add-version"
-//           />
-//           <Button
-//             image={closeIcon}
-//             buttonType={"circular-button"}
-//             onClick={() => setShowVersionSelector(false)}
-//             id="close-button"
-//           />
-//         </div>
-//       </div>
-//       <div className="versions-container">
-//         {versions?.map((item) => (
-//           <VersionItem
-//             key={item.version}
-//             version={item.version}
-//             articleStatus={item.article_status}
-//             currentVersion={item.version === currentVersion}
-//             productOwner={companyName}
-//             setVersion={setVersion}
-//             timestamp={item.timestamp}
-//           />
-//         ))}
-//       </div>
-//       {showCreateVersion && (
-//         <CreateVersion
-//           articleId={articleId}
-//           version={currentVersion}
-//           versionsList={versions}
-//           setShowCreateVersion={setShowCreateVersion}
-//           realoadVersion={() => setReload(!reload)}
-//           jwt={jwt}
-//         />
-//       )}
-//     </Container>
-//   );
-// };
+  return (
+    <Container id={modalId}>
+      <div className="versions-header">
+        <ScreenHeader
+          text={"Versión del producto"}
+          headerType={"input-name-header"}
+          color={GlobalColors.white}
+          fontFamily={FontFamily.Lato}
+        />
+        <div className="buttons-container">
+          <Button
+            image={addVersion}
+            buttonType={"circular-button"}
+            onClick={() => setShowCreateVersion(true)}
+            id="add-version"
+          />
+          <Button
+            image={closeIcon}
+            buttonType={"circular-button"}
+            onClick={() => setShowVersionSelector(false)}
+            id="close-button"
+          />
+        </div>
+      </div>
+      <div className="versions-container">
+        {versions?.map((item) => (
+          <VersionItem
+            key={item.version}
+            version={item.version}
+            articleStatus={item.article_status}
+            currentVersion={item.version === currentVersion}
+            productOwner={companyName}
+            setVersion={setVersion}
+            timestamp={item.timestamp}
+          />
+        ))}
+      </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
+    </Container>
+  );
+};