contentoh-components-library 21.4.122 → 21.4.123

package/dist/components/pages/MultipleEdition/MultipleEdition.stories.js

@@ -29,6 +29,7 @@ MultipleEditionDefault.args = {
   articles: [118471, 120898],
   //[216, 238, 239],
   versions: [1, 1],
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmZTVlNWI4YS03N2ZjLTRmNmQtYWY0Yy0yZjVmZmY0ZjQ4ZGUiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImZlNWU1YjhhLTc3ZmMtNGY2ZC1hZjRjLTJmNWZmZjRmNDhkZSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhNDkxNjFjNC0yZTE5LTQ0N2YtYWUwNy1hNTQ3YzU1MTM3NmMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNTk2ODExNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwNTk3MTcxNywiaWF0IjoxNzA1OTY4MTE3LCJlbWFpbCI6InJldGFpbGVybWVyY2hhbnRzY29udGVudG9oQGFsbGZyZWVtYWlsLm5ldCJ9.fAOa4nlswhCyYsznuS2YBPGluqd6ok7V_TR1tdu6v9KBbN0Q5AJQZFVVJz2F4P8629_FAPjKybbz0gkv7-YHu0z7dqwDOIyve4Agr8YCgoPJi4Fw4whzcULBI122IejHZqSE6YnA2Ry6VOnxkBOJRetBu6oYwGUxfLJ5s2wTGkxStzA8VTDp9QH9kFNt2AUR7yyjMmzK3QT9E7Hvi60IjfWQbKBQpkn2VKkb2ClfJFi81LeFV5vmH9a8OiK7PyHvW82ascs-n3QuV8HgByR-Sgl8sX9CjZArmPGxeLNxS3MaYkLpx1vieOJaG2hotXyQXkx2eTNJUAYnnT10Ixskfg" //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjM2FlNjRiMC0yNDcxLTQ1MmQtOGExYi04OGFkNWIxNjRjOWQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNjU0ODk3OCwibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA2NTUyNTc4LCJpYXQiOjE3MDY1NDg5NzgsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.RPiGAf-R2eEqdsfAbKKC7uX57t1JTEIZ3rgJZZNQ6wnJm8hfDKk1aa1fOqGZMDVw_peoq_XyZQWvmsJ8pRexWxO05oLZchn1n_gml6rapq2WqVap1CYyj2k2aBEGJo5CZzWGFp8VVXn9nl9pm8AsFjjfCAQGFaKB_5iMeNCPYt_vXXQ-LAOwkjzoAP6ujmlpJMVMsXoCaabWH7t5Z8akNO0eS0KAscL5EPDl_MmjqV_2PeBXl1KYAU-uJbdSG1xRiSV_nqJ23B4TAkERDfouCfd3ysLMrlRxkcsQd9xOvrt9fQMlrJqrCuf6RoD12pgqSRIxk_cOa4NFm6SKwCwR" //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmZTVlNWI4YS03N2ZjLTRmNmQtYWY0Yy0yZjVmZmY0ZjQ4ZGUiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImZlNWU1YjhhLTc3ZmMtNGY2ZC1hZjRjLTJmNWZmZjRmNDhkZSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhNDkxNjFjNC0yZTE5LTQ0N2YtYWUwNy1hNTQ3YzU1MTM3NmMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNTk2ODExNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwNTk3MTcxNywiaWF0IjoxNzA1OTY4MTE3LCJlbWFpbCI6InJldGFpbGVybWVyY2hhbnRzY29udGVudG9oQGFsbGZyZWVtYWlsLm5ldCJ9.fAOa4nlswhCyYsznuS2YBPGluqd6ok7V_TR1tdu6v9KBbN0Q5AJQZFVVJz2F4P8629_FAPjKybbz0gkv7-YHu0z7dqwDOIyve4Agr8YCgoPJi4Fw4whzcULBI122IejHZqSE6YnA2Ry6VOnxkBOJRetBu6oYwGUxfLJ5s2wTGkxStzA8VTDp9QH9kFNt2AUR7yyjMmzK3QT9E7Hvi60IjfWQbKBQpkn2VKkb2ClfJFi81LeFV5vmH9a8OiK7PyHvW82ascs-n3QuV8HgByR-Sgl8sX9CjZArmPGxeLNxS3MaYkLpx1vieOJaG2hotXyQXkx2eTNJUAYnnT10Ixskfg"
+  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
 
 };

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

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MEdition = void 0;
+exports.MultipleEdition = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -47,7 +47,7 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var MEdition = function MEdition(_ref) {
+var MultipleEdition = function MultipleEdition(_ref) {
   var articles = _ref.articles,
       versions = _ref.versions,
       onClose = _ref.onClose,
@@ -72,20 +72,30 @@ var MEdition = function MEdition(_ref) {
       attributesReviewed = _useState6[0],
       setAttributesReviewed = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)([]),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      showRejectModal = _useState8[0],
-      setShowRejectModal = _useState8[1];
+      descriptionsReviewed = _useState8[0],
+      setDescriptionsReviewed = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)([]),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      showValidationPanel = _useState10[0],
-      setShowValidationPanel = _useState10[1];
+      imagesReviewed = _useState10[0],
+      setImagesReviewed = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(""),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      message = _useState12[0],
-      setMessage = _useState12[1];
+      showRejectModal = _useState12[0],
+      setShowRejectModal = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      showValidationPanel = _useState14[0],
+      setShowValidationPanel = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(""),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      message = _useState16[0],
+      setMessage = _useState16[1];
 
   var closeValidationPanel = function closeValidationPanel(e) {
     if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
@@ -94,13 +104,13 @@ var MEdition = function MEdition(_ref) {
     }
   };
 
-  var _useState13 = (0, _react.useState)({
+  var _useState17 = (0, _react.useState)({
     columns: [],
     data: []
   }),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      currentData = _useState14[0],
-      setCurrentData = _useState14[1];
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      currentData = _useState18[0],
+      setCurrentData = _useState18[1];
 
   var _useReducer = (0, _react.useReducer)(_utils.dataReducer, {
     description: {
@@ -117,10 +127,10 @@ var MEdition = function MEdition(_ref) {
       dataServices = _useReducer2[0],
       setDataServices = _useReducer2[1];
 
-  var _useState15 = (0, _react.useState)(),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      modalFromTable = _useState16[0],
-      setModalFromTable = _useState16[1];
+  var _useState19 = (0, _react.useState)(),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      modalFromTable = _useState20[0],
+      setModalFromTable = _useState20[1];
 
   var _useReducer3 = (0, _react.useReducer)(_utils.modalReducer, {
     showModal: false
@@ -137,7 +147,7 @@ var MEdition = function MEdition(_ref) {
     callbackToInitData();
   }, []);
   (0, _react.useEffect)(function () {
-    var _setDataColumns = (0, _utils.setDataColumns)(section, dataServices[section], token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, setMessage, showValidationPanel, attributeSelected, attributesReviewed),
+    var _setDataColumns = (0, _utils.setDataColumns)(section, dataServices[section], token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, setMessage, showValidationPanel, attributeSelected, attributesReviewed, descriptionsReviewed, imagesReviewed),
         _setDataColumns2 = (0, _slicedToArray2.default)(_setDataColumns, 2),
         columns = _setDataColumns2[0],
         data = _setDataColumns2[1];
@@ -146,7 +156,7 @@ var MEdition = function MEdition(_ref) {
       columns: columns,
       data: data
     });
-  }, [section, dataServices, attributeSelected, showValidationPanel, attributesReviewed]);
+  }, [section, dataServices, attributeSelected, showValidationPanel, attributesReviewed, descriptionsReviewed, imagesReviewed]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "tabs",
@@ -205,17 +215,44 @@ var MEdition = function MEdition(_ref) {
                     type: "comment",
                     value: body === null || body === void 0 ? void 0 : body.replace(/<.*?\/?>/gm, "")
                   }];
-                  index = attributesReviewed.findIndex(function (e) {
-                    return e.articleId === attributeSelected.articleId && e.attributeId === attributeSelected.attributeId && e.versionId === attributeSelected.versionId;
-                  });
-                  attributesReviewed[index].isApproved = false;
-                  attributesReviewed[index].isReviewed = true;
+
+                  if (section == "description" || section == "datasheet") {
+                    if (section == "datasheet") {
+                      index = attributesReviewed.findIndex(function (e) {
+                        return e.articleId === attributeSelected.articleId && e.attributeId === attributeSelected.attributeId && e.versionId === attributeSelected.versionId;
+                      });
+                      attributesReviewed[index].isApproved = false;
+                      attributesReviewed[index].isReviewed = true;
+                      attributesReviewed[index].comment = comment[0].value;
+                    }
+
+                    if (section == "description") {
+                      index = descriptionsReviewed.findIndex(function (e) {
+                        return e.articleId === attributeSelected.articleId && e.attributeId === attributeSelected.attributeId && e.versionId === attributeSelected.versionId;
+                      });
+                      descriptionsReviewed[index].isApproved = false;
+                      descriptionsReviewed[index].isReviewed = true;
+                      descriptionsReviewed[index].comment = comment[0].value;
+                      console.log(descriptionsReviewed[index]);
+                    }
+
+                    document.getElementById("button_" + attributeSelected.articleId + "_" + attributeSelected.attributeId + "_" + attributeSelected.versionId).src = _rejectIcon.default;
+                  }
+
+                  if (section == "images") {
+                    index = imagesReviewed.findIndex(function (e) {
+                      return e.articleId === attributeSelected.articleId && e.imageId === attributeSelected.attributeId && e.versionId === attributeSelected.versionId;
+                    });
+                    imagesReviewed[index].isApproved = false;
+                    imagesReviewed[index].isReviewed = true;
+                    imagesReviewed[index].comment = comment[0].value;
+                    console.log(imagesReviewed[index]);
+                  }
+
                   document.getElementById("button_" + attributeSelected.articleId + "_" + attributeSelected.attributeId + "_" + attributeSelected.versionId).src = _rejectIcon.default;
-                  attributesReviewed[index].comment = comment[0].value;
-                  console.log(attributesReviewed[index]);
                   setShowRejectModal(false);
 
-                case 9:
+                case 6:
                 case "end":
                   return _context.stop();
               }
@@ -240,4 +277,4 @@ var MEdition = function MEdition(_ref) {
   });
 };
 
-exports.MEdition = MEdition;
+exports.MultipleEdition = MultipleEdition;

package/dist/components/pages/MultipleEdition/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: -10%;\n    z-index: 100;\n  }\n\n  .validation-option {\n    width: 15%;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  input{\n    \n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: -10%;\n    left: 50px;\n    z-index: 100;\n  }\n\n  .validation-button{\n    width: 30px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  .validation-option {\n    width: 82px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    left: 7px;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  input{\n    \n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
 }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2);

package/dist/components/pages/MultipleEdition/utils.js

@@ -250,7 +250,7 @@ function _initData() {
   return _initData.apply(this, arguments);
 }
 
-function setDataColumns(section, dataService, token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, setMessage, showValidationPanel, attributeSelected, attributesReviewed) {
+function setDataColumns(section, dataService, token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, setMessage, showValidationPanel, attributeSelected, attributesReviewed, descriptionsReviewed, imagesReviewed) {
   var data = dataService.data,
       rules = dataService.rules;
   var columns = [].concat(columnsBase);
@@ -293,8 +293,13 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
           columns.push({
             Header: "Cadena",
             accessor: "retailer".concat(ret.id),
-            width: "100px",
-            style: styleRetailer
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: "retailer".concat(ret.id, "-save"),
+            width: "60px",
+            style: styleSaveButtonCol
           });
         }
 
@@ -307,13 +312,56 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             columns.push({
               Header: rules[imgId],
               accessor: "img".concat(imgId),
-              width: "115px",
+              width: "170px",
               style: styleData
             });
           }
         });
+        var saveAvailable = imagesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).every(function (e) {
+          return e.isReviewed === true;
+        });
+
+        if (imagesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).length == 0) {
+          saveAvailable = false;
+        }
+
+        currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          onClick: function onClick() {
+            var articlesImagesUpdateBody = [];
+            var articleImages = imagesReviewed.filter(function (e) {
+              return e.articleId === item.id && e.versionId === item.version;
+            });
+            articleImages.forEach(function (articleImage) {
+              articlesImagesUpdateBody.push({
+                articleId: articleImage.articleId,
+                versionId: articleImage.versionId,
+                attributeId: articleImage.imageId,
+                value: articleImage.srcdb,
+                isApproved: articleImage.isApproved,
+                comment: articleImage.comment
+              });
+            });
+            console.log(articlesImagesUpdateBody);
+            updateArticleData(item.version, item.id, articlesImagesUpdateBody, token, setMessage, section);
+          },
+          className: "validation-option",
+          disabled: !saveAvailable,
+          children: [saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhite.default,
+            alt: "guardar"
+          }), " ", !saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhiteGray.default,
+            alt: "guardar"
+          }), " "]
+        });
+        console.log(images);
         Object.values(images).forEach(function (_ref) {
           var value = _ref.value,
+              isApproved = _ref.isApproved,
               imageId = _ref.imageId;
           var props = {
             name: rules[imageId],
@@ -325,7 +373,78 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             setModal: setModal,
             token: token
           };
-          currentData["img".concat(imageId)] = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageVisor.ImageVisor, (0, _objectSpread3.default)({}, props));
+          if (!imagesReviewed.find(function (e) {
+            return e.articleId == item.id && e.imageId == imageId && e.versionId == item.version;
+          })) imagesReviewed.push({
+            articleId: item.id,
+            imageId: imageId,
+            versionId: item.version,
+            isApproved: isApproved ? isApproved : false,
+            isReviewed: isApproved != null ? true : false,
+            comment: "",
+            srcdb: value ? value.src : ""
+          });
+          var index = imagesReviewed.findIndex(function (e) {
+            return e.articleId === item.id && e.imageId === imageId && e.versionId === item.version;
+          });
+          currentData["img".concat(imageId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              onClick: function onClick() {
+                setShowValidationPanel(true);
+                setAttributeSelected({
+                  articleId: item.id,
+                  attributeId: imageId,
+                  versionId: item.version
+                });
+              },
+              className: "validation-button",
+              children: [imagesReviewed[index].isReviewed && imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _acceptIcon.default,
+                alt: "accept button"
+              }), " ", imagesReviewed[index].isReviewed && !imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              }), " ", !imagesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              })]
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === imageId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-container",
+              style: {
+                left: "70px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  imagesReviewed[index].isApproved = true;
+                  imagesReviewed[index].isReviewed = true; //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
+
+                  setShowValidationPanel(false);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _acceptIcon.default,
+                  alt: "accept button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Validar "
+                }), " "]
+              }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  setShowValidationPanel(false);
+                  setShowRejectModal(true);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _rejectIcon.default,
+                  alt: "reject button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Rechazar "
+                }), " "]
+              }), " "]
+            }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageVisor.ImageVisor, (0, _objectSpread3.default)({}, props))]
+          });
         });
       });
     }
@@ -379,7 +498,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
                 comment: articleAttribute.comment
               });
             });
-            updateArticleData(item.version, item.id, articlesAtributesUpdateBody, token, setMessage);
+            updateArticleData(item.version, item.id, articlesAtributesUpdateBody, token, setMessage, section);
           },
           className: "validation-option",
           disabled: !saveAvailable,
@@ -431,7 +550,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
                   versionId: item.version
                 });
               },
-              className: "validation-option",
+              className: "validation-button",
               children: [attributesReviewed[index].isReviewed && attributesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                 id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
                 src: _acceptIcon.default,
@@ -447,6 +566,9 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
               })]
             }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "buttons-container",
+              style: {
+                left: "35px"
+              },
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                 onClick: function onClick() {
                   attributesReviewed[index].isApproved = true;
@@ -487,9 +609,26 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
           columns.push({
             Header: "Cadena",
             accessor: "retailer".concat(ret.id),
-            width: "100px",
-            style: styleRetailer
+            width: "100px"
           });
+          columns.push({
+            Header: "",
+            accessor: "retailer".concat(ret.id, "-save"),
+            width: "60px",
+            style: styleSaveButtonCol
+          });
+        }
+
+        var saveAvailable = descriptionsReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).every(function (e) {
+          return e.isReviewed === true;
+        });
+
+        if (descriptionsReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).length == 0) {
+          saveAvailable = false;
         }
 
         currentData["retailer".concat(ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
@@ -506,16 +645,115 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             });
           }
         });
+        currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          onClick: function onClick() {
+            var articlesDescriptionsUpdateBody = [];
+            var articleDescriptions = descriptionsReviewed.filter(function (e) {
+              return e.articleId === item.id && e.versionId === item.version;
+            });
+            articleDescriptions.forEach(function (articleDescription) {
+              var value = document.getElementById(articleDescription.articleId + "_" + articleDescription.attributeId + "_" + articleDescription.versionId).value;
+              articlesDescriptionsUpdateBody.push({
+                articleId: articleDescription.articleId,
+                versionId: articleDescription.versionId,
+                attributeId: articleDescription.attributeId,
+                value: value ? value : "",
+                isApproved: articleDescription.isApproved,
+                comment: articleDescription.comment
+              });
+            });
+            updateArticleData(item.version, item.id, articlesDescriptionsUpdateBody, token, setMessage, section);
+          },
+          className: "validation-option",
+          disabled: !saveAvailable,
+          children: [saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhite.default,
+            alt: "guardar"
+          }), " ", !saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhiteGray.default,
+            alt: "guardar"
+          }), " "]
+        });
         Object.values(item.descriptions).forEach(function (des) {
+          console.log(des);
           var props = {
             name: rules[des.attributeId],
+            id: item.id + "_" + des.attributeId + "_" + item.version,
             value: des.value,
             cols: 30,
             rows: 2,
-            readOnly: true
+            readonly: true
           };
+          if (!descriptionsReviewed.find(function (e) {
+            return e.articleId == item.id && e.attributeId == des.attributeId && e.versionId == item.version;
+          })) descriptionsReviewed.push({
+            articleId: item.id,
+            attributeId: des.attributeId,
+            versionId: item.version,
+            isApproved: des.isApproved ? des.isApproved : false,
+            isReviewed: des.isApproved != null ? true : false,
+            comment: ""
+          });
+          var index = descriptionsReviewed.findIndex(function (e) {
+            return e.articleId === item.id && e.attributeId === des.attributeId && e.versionId === item.version;
+          });
           currentData["".concat(des.attributeId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              onClick: function onClick() {
+                setShowValidationPanel(true);
+                setAttributeSelected({
+                  articleId: item.id,
+                  attributeId: des.attributeId,
+                  versionId: item.version
+                });
+              },
+              className: "validation-button",
+              children: [descriptionsReviewed[index].isReviewed && descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _acceptIcon.default,
+                alt: "accept button"
+              }), " ", descriptionsReviewed[index].isReviewed && !descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              }), " ", typeof des.isApproved === "undefined" && !descriptionsReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              })]
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-container",
+              style: {
+                left: "35px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  descriptionsReviewed[index].isApproved = true;
+                  descriptionsReviewed[index].isReviewed = true; //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
+
+                  setShowValidationPanel(false);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _acceptIcon.default,
+                  alt: "accept button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Validar "
+                }), " "]
+              }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  setShowValidationPanel(false);
+                  setShowRejectModal(true);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _rejectIcon.default,
+                  alt: "reject button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Rechazar "
+                }), " "]
+              }), " "]
+            }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
               children: " "
             })), " "]
           });
@@ -618,7 +856,7 @@ function modalReducer(state, action) {
   return state;
 }
 
-function updateArticleData(_x9, _x10, _x11, _x12, _x13) {
+function updateArticleData(_x9, _x10, _x11, _x12, _x13, _x14) {
   return _updateArticleData.apply(this, arguments);
 }
 /**
@@ -652,46 +890,68 @@ function updateArticleData(_x9, _x10, _x11, _x12, _x13) {
 
 
 function _updateArticleData() {
-  _updateArticleData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(version, articleId, attributes, token, setMessage) {
+  _updateArticleData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(version, articleId, attributes, token, setMessage, section) {
     var body, params, res;
     return _regenerator.default.wrap(function _callee5$(_context5) {
       while (1) {
         switch (_context5.prev = _context5.next) {
           case 0:
-            body = {
-              articleId: articleId,
-              articleData: attributes
-            };
-            params = "?datasheet=true&version=".concat(version);
-            _context5.prev = 2;
-            _context5.next = 5;
+            body = {};
+            params = "";
+
+            if (section != "images") {
+              body = {
+                articleId: articleId,
+                articleData: attributes
+              };
+              params = "?".concat(section, "=true&version=").concat(version);
+            } else {
+              body = {
+                articleId: articleId,
+                onboardingImagesData: attributes
+              };
+              params = "?image=true&version=".concat(version);
+            }
+
+            console.log(params);
+            console.log(body);
+            _context5.prev = 5;
+            _context5.next = 8;
             return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT) + params, body, {
               headers: {
                 Authorization: token
               }
             });
 
-          case 5:
+          case 8:
             res = _context5.sent;
 
-            if (res.data.statusCode === 200) {
-              setMessage("Atributos guardados con éxito");
+            if (res.data.statusCode === 200 && section == "description") {
+              setMessage("Descripciones de los productos guardados con éxito");
             }
 
-            _context5.next = 12;
+            if (res.data.statusCode === 200 && section == "datasheet") {
+              setMessage("Atributos de los productos guardados con éxito");
+            }
+
+            if (res.data.statusCode === 200 && section == "images") {
+              setMessage("Imágenes de los productos guardados con éxito");
+            }
+
+            _context5.next = 17;
             break;
 
-          case 9:
-            _context5.prev = 9;
-            _context5.t0 = _context5["catch"](2);
+          case 14:
+            _context5.prev = 14;
+            _context5.t0 = _context5["catch"](5);
             console.log(_context5.t0);
 
-          case 12:
+          case 17:
           case "end":
             return _context5.stop();
         }
       }
-    }, _callee5, null, [[2, 9]]);
+    }, _callee5, null, [[5, 14]]);
   }));
   return _updateArticleData.apply(this, arguments);
 }

package/package.json

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