contentoh-components-library 21.5.0 → 21.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
15
 
16
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: #fff;\n box-sizing: border-box;\n height: 100%;\n overflow-x: auto;\n width: 100%;\n margin-right: 30px;\n .checkbox_fixed {\n left: 0px;\n position: sticky;\n z-index: 5;\n }\n\n .custom-table {\n border-collapse: collapse;\n box-sizing: border-box;\n width: 100%;\n & > thead {\n top: 0;\n height: 45px;\n position: sticky;\n z-index: 10;\n & > tr {\n background-color: #f7f7fc;\n border-radius: 5px 5px 0px 0px;\n height: 45px;\n }\n }\n & > tbody > tr {\n height: 70px;\n &:last-child {\n border-radius: 0px 0px 5px 5px;\n }\n }\n }\n\n .custom-table th,\n .custom-table td {\n padding: 8px;\n border: 0;\n }\n\n .custom-table th {\n border-radius: 5px 0 0 5px;\n border: 0;\n color: var(--black-main, #262626);\n font-family: Roboto;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-align: left;\n }\n\n .custom-table tr {\n background: var(--white-main, #fff);\n border-bottom: 1px solid var(--grey-light, #f0f0f0);\n border-left: 1px solid var(--grey-light, #f0f0f0);\n border-right: 1px solid var(--grey-light, #f0f0f0);\n & > td {\n color: var(--grey-main, #707070);\n font-family: Roboto;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n gap:5px;\n }\n display: flex;\n align-items: center;\n ", "\n }\n"])), function (_ref) {
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: #fff;\n box-sizing: border-box;\n height: 100%;\n overflow-x: auto;\n width: 100%;\n margin-right: 30px;\n .checkbox_fixed {\n left: 0px;\n position: sticky;\n z-index: 5;\n }\n\n .custom-table {\n border-collapse: collapse;\n box-sizing: border-box;\n width: 100%;\n & > thead {\n top: 0;\n height: 45px;\n position: sticky;\n z-index: 2;\n & > tr {\n background-color: #f7f7fc;\n border-radius: 5px 5px 0px 0px;\n height: 45px;\n }\n }\n & > tbody > tr {\n height: 70px;\n &:last-child {\n border-radius: 0px 0px 5px 5px;\n }\n }\n }\n\n .custom-table th,\n .custom-table td {\n padding: 8px;\n border: 0;\n }\n\n .custom-table th {\n border-radius: 5px 0 0 5px;\n border: 0;\n color: var(--black-main, #262626);\n font-family: Roboto;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n text-align: left;\n }\n\n .custom-table tr {\n background: var(--white-main, #fff);\n border-bottom: 1px solid var(--grey-light, #f0f0f0);\n border-left: 1px solid var(--grey-light, #f0f0f0);\n border-right: 1px solid var(--grey-light, #f0f0f0);\n & > td {\n color: var(--grey-main, #707070);\n font-family: Roboto;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n gap:5px;\n }\n display: flex;\n align-items: center;\n ", "\n }\n"])), function (_ref) {
19
19
  var withCheckbox = _ref.withCheckbox;
20
20
  return withCheckbox && "padding-left: 10px;";
21
21
  });
@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = saveData;
9
8
  exports.deleteImage = deleteImage;
9
+ exports.saveData = saveData;
10
10
 
11
11
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
12
12
 
@@ -43,15 +43,15 @@ function saveData(_x) {
43
43
 
44
44
  function _saveData() {
45
45
  _saveData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(params) {
46
- var section, data, token, callbackToInitData, setModal;
46
+ var section, data, token;
47
47
  return _regenerator.default.wrap(function _callee$(_context) {
48
48
  while (1) {
49
49
  switch (_context.prev = _context.next) {
50
50
  case 0:
51
- section = params.section, data = params.data, token = params.token, callbackToInitData = params.callbackToInitData, setModal = params.setModal;
51
+ section = params.section, data = params.data, token = params.token;
52
52
 
53
53
  if (!(section === "images")) {
54
- _context.next = 7;
54
+ _context.next = 5;
55
55
  break;
56
56
  }
57
57
 
@@ -60,25 +60,14 @@ function _saveData() {
60
60
 
61
61
  case 4:
62
62
  if (!_context.sent) {
63
- _context.next = 7;
63
+ _context.next = 5;
64
64
  break;
65
65
  }
66
66
 
67
- callbackToInitData();
68
- setModal({
69
- type: "saved successfully",
70
- functions: {
71
- setModal: setModal
72
- },
73
- payload: {
74
- service: "imágenes"
75
- }
76
- }); // aquí va modal de que todo salío bien y actualiza la data
77
-
78
- case 7:
79
- return _context.abrupt("return", false);
67
+ case 5:
68
+ return _context.abrupt("return", true);
80
69
 
81
- case 8:
70
+ case 6:
82
71
  case "end":
83
72
  return _context.stop();
84
73
  }
@@ -103,6 +92,7 @@ function _saveImagesData() {
103
92
  articles.data.forEach(function (article) {
104
93
  var images = article.images,
105
94
  version = article.version;
95
+ console.log(images);
106
96
  var imagesToAdd = Object.values(images).filter(function (f) {
107
97
  return f.value && !f.value.src.startsWith("id-");
108
98
  });
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- 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 display: flex;\n flex-direction: column;\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: 0;\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 .validation-option {\n display: flex;\n width: 82px;\n height: 20px;\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: 5px;\n resize: none;\n\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .general-input {\n width: 100%;\n height:27px;\n max-height:100px;\n }\n\n .select-edition-multiple {\n padding: 5px 10px;\n border-radius: 5px;\n gap: 10px;\n border:1px solid ", ";\n border-width: 1px 2px 1px 1px;\n outline: none;\n border-image: initial;\n width: 100%;\n min-height:27px;\n cursor: pointer;\n color: ", ";\n font-size: 12px;\n line-height: 21px;\n overflow:hidden; \n white-space:nowrap; \n text-overflow:ellipsis;\n :focus{\n border:1px solid ", ";\n }\n }\n\n .tooltip {\n position: relative;\n display: inline-block;\n }\n \n .tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: #ffffff;\n color: #000000;\n text-align: center;\n border-radius: 6px;\n position: absolute;\n z-index: 6 important!;\n bottom: 100%;\n left: 20%;\n margin-left: -80px;\n opacity: 0;\n transition: opacity 0.3s;\n box-shadow: 0px 2px 4px 0px #00000040;\n font-family: Roboto;\n font-size: 12px;\n padding: 10px;\n text-align: justify;\n }\n \n\n \n .tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n }\n"])), _variables.GlobalColors.s3, function (_ref) {
18
+ 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 display: flex;\n flex-direction: column;\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: 0;\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 margin-right:5px;\n img {\n & + p {\n margin-left: 7px;\n }\n }\n\n &:hover {\n border-radius: 10px;\n }\n }\n\n .validation-option {\n display: flex;\n width: 82px;\n height: 20px;\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 background: #ffffff !important;\n }\n\n th{\n border-radius: 0 0 0 0 !important;\n padding: 15px !important;\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: 5px;\n resize: none;\n\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .general-input {\n width: 100%;\n height:27px;\n max-height:100px;\n }\n\n .select-edition-multiple {\n padding: 5px 10px;\n border-radius: 5px;\n gap: 10px;\n border:1px solid ", ";\n border-width: 1px 2px 1px 1px;\n outline: none;\n border-image: initial;\n width: 100%;\n min-height:27px;\n cursor: pointer;\n color: ", ";\n font-size: 12px;\n line-height: 21px;\n overflow:hidden; \n white-space:nowrap; \n text-overflow:ellipsis;\n :focus{\n border:1px solid ", ";\n }\n }\n\n .tooltip {\n position: relative;\n display: inline-block;\n }\n \n .tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: #ffffff;\n color: #000000;\n text-align: center;\n border-radius: 6px;\n position: absolute;\n z-index: 6 important!;\n bottom: 100%;\n left: 20%;\n margin-left: -80px;\n opacity: 0;\n transition: opacity 0.3s;\n box-shadow: 0px 2px 4px 0px #00000040;\n font-family: Roboto;\n font-size: 12px;\n padding: 10px;\n text-align: justify;\n }\n \n\n \n .tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n }\n"])), _variables.GlobalColors.s3, function (_ref) {
19
19
  var isRequired = _ref.isRequired;
20
20
  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
21
21
  }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2);
@@ -52,6 +52,10 @@ var _iconsMaterial = require("@mui/icons-material");
52
52
 
53
53
  var _react = _interopRequireWildcard(require("react"));
54
54
 
55
+ var _nullIcon = _interopRequireDefault(require("../../../assets/images/generalButton/nullIcon.svg"));
56
+
57
+ var _Tooltip = require("../../atoms/Tooltip");
58
+
55
59
  var _jsxRuntime = require("react/jsx-runtime");
56
60
 
57
61
  // variables
@@ -150,7 +154,8 @@ function dataReducer(state, action) {
150
154
 
151
155
  var _action$payload = action.payload,
152
156
  articleId = _action$payload.articleId,
153
- imageId = _action$payload.imageId;
157
+ imageId = _action$payload.imageId,
158
+ token = _action$payload.token;
154
159
  var newImageData = state.images.data.slice();
155
160
  var articleIndex = newImageData.findIndex(function (f) {
156
161
  return f.id === articleId;
@@ -159,6 +164,14 @@ function dataReducer(state, action) {
159
164
  newImageData[articleIndex].images[imageId].value = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, action.payload), {}, {
160
165
  id: id
161
166
  });
167
+ var data = newImageData;
168
+ (0, _saveData.saveData)({
169
+ section: "images",
170
+ data: {
171
+ data: data
172
+ },
173
+ token: token
174
+ });
162
175
  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
163
176
  images: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.images), {}, {
164
177
  data: newImageData
@@ -172,7 +185,7 @@ function dataReducer(state, action) {
172
185
  var _action$payload2 = action.payload,
173
186
  _articleId = _action$payload2.articleId,
174
187
  _imageId = _action$payload2.imageId,
175
- token = _action$payload2.token;
188
+ _token = _action$payload2.token;
176
189
 
177
190
  var _newImageData = state.images.data.slice();
178
191
 
@@ -183,14 +196,13 @@ function dataReducer(state, action) {
183
196
  var _id = (_newImageData$_articl = _newImageData[_articleIndex]) === null || _newImageData$_articl === void 0 ? void 0 : (_newImageData$_articl2 = _newImageData$_articl.images[_imageId]) === null || _newImageData$_articl2 === void 0 ? void 0 : (_newImageData$_articl3 = _newImageData$_articl2.value) === null || _newImageData$_articl3 === void 0 ? void 0 : _newImageData$_articl3.id;
184
197
 
185
198
  (_newImageData$_articl4 = _newImageData[_articleIndex]) === null || _newImageData$_articl4 === void 0 ? true : (_newImageData$_articl5 = _newImageData$_articl4.images[_imageId]) === null || _newImageData$_articl5 === void 0 ? true : delete _newImageData$_articl5.value;
186
- console.log(_newImageData[_articleIndex]);
187
- var data = {
199
+ var _data = {
188
200
  articleId: _articleId,
189
201
  deleteImages: [{
190
202
  id: _id
191
203
  }]
192
204
  };
193
- (0, _saveData.deleteImage)(data, _newImageData[_articleIndex].version, token);
205
+ (0, _saveData.deleteImage)(_data, _newImageData[_articleIndex].version, _token);
194
206
  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
195
207
  images: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.images), {}, {
196
208
  data: _newImageData
@@ -274,6 +286,13 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
274
286
  display: "flex",
275
287
  justifyContent: "center"
276
288
  };
289
+ var styleApprovalAttributes = {
290
+ textAlign: "center",
291
+ display: "flex",
292
+ justifyContent: "center",
293
+ border: "1px solid #ECDD1D",
294
+ background: "#ECDD1D"
295
+ };
277
296
  var retailersAdded = {
278
297
  id: [],
279
298
  attr: []
@@ -323,17 +342,15 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
323
342
  });
324
343
  }
325
344
  });
326
- var saveAvailable = imagesReviewed.filter(function (e) {
327
- return e.articleId === item.id;
328
- }).every(function (e) {
329
- return e.isReviewed === true;
330
- });
331
-
332
- if (imagesReviewed.filter(function (e) {
333
- return e.articleId === item.id;
334
- }).length == 0) {
335
- saveAvailable = false;
336
- }
345
+ var saveAvailable = true;
346
+ /**var saveAvailable = imagesReviewed
347
+ .filter((e) => e.articleId === item.id)
348
+ .every((e) => e.isReviewed === true);
349
+ if (
350
+ imagesReviewed.filter((e) => e.articleId === item.id).length == 0
351
+ ) {
352
+ saveAvailable = false;
353
+ }**/
337
354
 
338
355
  currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
339
356
  onClick: function onClick() {
@@ -393,62 +410,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
393
410
  return e.articleId === item.id && e.imageId === imageId && e.versionId === item.version;
394
411
  });
395
412
  currentData["img".concat(imageId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
396
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
397
- onClick: function onClick() {
398
- setShowValidationPanel(true);
399
- setAttributeSelected({
400
- articleId: item.id,
401
- attributeId: imageId,
402
- versionId: item.version
403
- });
404
- },
405
- className: "validation-button",
406
- children: [imagesReviewed[index].isReviewed && imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
407
- id: "button_" + item.id + "_" + imageId + "_" + item.version,
408
- src: _acceptIcon.default,
409
- alt: "accept button"
410
- }), " ", imagesReviewed[index].isReviewed && !imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
411
- id: "button_" + item.id + "_" + imageId + "_" + item.version,
412
- src: _rejectIcon.default,
413
- alt: "reject button"
414
- }), " ", !imagesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
415
- id: "button_" + item.id + "_" + imageId + "_" + item.version,
416
- src: _rejectIcon.default,
417
- alt: "reject button"
418
- })]
419
- }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === imageId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
420
- className: "buttons-container",
421
- style: {
422
- left: "70px"
423
- },
424
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
425
- onClick: function onClick() {
426
- imagesReviewed[index].isApproved = true;
427
- imagesReviewed[index].isReviewed = true; //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
428
-
429
- setShowValidationPanel(false);
430
- },
431
- className: "validation-option",
432
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
433
- src: _acceptIcon.default,
434
- alt: "accept button"
435
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
436
- children: " Validar "
437
- }), " "]
438
- }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
439
- onClick: function onClick() {
440
- setShowValidationPanel(false);
441
- setShowRejectModal(true);
442
- },
443
- className: "validation-option",
444
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
445
- src: _rejectIcon.default,
446
- alt: "reject button"
447
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
448
- children: " Rechazar "
449
- }), " "]
450
- }), " "]
451
- }), " ", comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
413
+ children: [comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
452
414
  class: "tooltip",
453
415
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageVisor.ImageVisor, (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
454
416
  class: "tooltiptext",
@@ -506,13 +468,19 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
506
468
  var articleAttributes = attributesReviewed.filter(function (e) {
507
469
  return e.articleId === item.id && e.versionId === item.version;
508
470
  });
471
+ var value;
509
472
  articleAttributes.forEach(function (articleAttribute) {
510
- var value = document.getElementById(articleAttribute.articleId + "_" + articleAttribute.attributeId + "_" + articleAttribute.versionId).value;
473
+ if (articleAttribute.attributeId == 6700 || articleAttribute.attributeId == 6701) {
474
+ value = document.getElementById(articleAttribute.articleId + "_" + articleAttribute.attributeId + "_" + articleAttribute.versionId).checked;
475
+ } else {
476
+ value = document.getElementById(articleAttribute.articleId + "_" + articleAttribute.attributeId + "_" + articleAttribute.versionId).value;
477
+ }
478
+
511
479
  articlesAtributesUpdateBody.push({
512
480
  articleId: articleAttribute.articleId,
513
481
  versionId: articleAttribute.versionId,
514
482
  attributeId: articleAttribute.attributeId,
515
- value: value ? value : "",
483
+ value: value != undefined ? value : "",
516
484
  isApproved: articleAttribute.isApproved,
517
485
  comment: articleAttribute.comment
518
486
  });
@@ -536,7 +504,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
536
504
  Header: rules[attributeId].name,
537
505
  accessor: "".concat(attributeId + "-" + ret.id),
538
506
  width: "200px",
539
- style: styleData,
507
+ style: attributeId == 6700 || attributeId == 6701 ? styleApprovalAttributes : styleData,
540
508
  description: rules[attributeId].description
541
509
  });
542
510
  }
@@ -582,7 +550,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
582
550
  var inputComponent;
583
551
 
584
552
  if (des.option_list.length > 0) {
585
- inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
553
+ inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
586
554
  id: item.id + "_" + rules[des.attributeId].attributeId + "_" + item.version,
587
555
  name: item.id + "-" + rules[des.attributeId].attributeId + "-" + item.version,
588
556
  className: "select-edition-multiple",
@@ -590,12 +558,17 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
590
558
  onChange: function onChange(e) {
591
559
  handleChangeOptions(des.attributeId, e.target.value);
592
560
  },
593
- children: des.option_list.map(function (option, index) {
561
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
562
+ value: "",
563
+ selected: true,
564
+ disabled: true,
565
+ children: "Selecciona una opci\xF3n"
566
+ }), des.option_list.map(function (option, index) {
594
567
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
595
568
  value: option,
596
569
  children: option
597
570
  }, index);
598
- })
571
+ })]
599
572
  });
600
573
  } else {
601
574
  inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props));
@@ -629,16 +602,32 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
629
602
  id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
630
603
  src: _acceptIcon.default,
631
604
  alt: "accept button"
632
- }), " ", attributesReviewed[index].isReviewed && !attributesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
633
- id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
634
- src: _rejectIcon.default,
635
- alt: "reject button"
636
- }), " ", typeof des.isApproved === "undefined" && !attributesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
637
- id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
638
- src: _rejectIcon.default,
639
- alt: "reject button"
605
+ }), attributesReviewed[index].isReviewed && !attributesReviewed[index].isApproved &&
606
+ /*#__PURE__*/
607
+
608
+ /**<Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>**/
609
+ (0, _jsxRuntime.jsx)("div", {
610
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
611
+ id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
612
+ src: _rejectIcon.default,
613
+ alt: "reject icon"
614
+ })
615
+ })
616
+ /*</Tooltip>*/
617
+ , typeof des.isApproved === "undefined" && !attributesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
618
+ position: "topCenter",
619
+ componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
620
+ children: "Debes aprobar o rechazar para continuar"
621
+ }),
622
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
623
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
624
+ id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
625
+ src: _nullIcon.default,
626
+ alt: "null button"
627
+ })
628
+ })
640
629
  })]
641
- }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
630
+ }), showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
642
631
  className: "buttons-container",
643
632
  style: {
644
633
  left: "35px"
@@ -707,17 +696,15 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
707
696
  });
708
697
  }
709
698
 
710
- var saveAvailable = descriptionsReviewed.filter(function (e) {
711
- return e.articleId === item.id;
712
- }).every(function (e) {
713
- return e.isReviewed === true;
714
- });
715
-
716
- if (descriptionsReviewed.filter(function (e) {
717
- return e.articleId === item.id;
718
- }).length == 0) {
719
- saveAvailable = false;
720
- }
699
+ var saveAvailable = true;
700
+ /**var saveAvailable = descriptionsReviewed
701
+ .filter((e) => e.articleId === item.id)
702
+ .every((e) => e.isReviewed === true);
703
+ if (
704
+ descriptionsReviewed.filter((e) => e.articleId === item.id).length == 0
705
+ ) {
706
+ saveAvailable = false;
707
+ }**/
721
708
 
722
709
  currentData["retailer".concat(ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
723
710
  children: [" ", ret.name, " "]
@@ -785,61 +772,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
785
772
  return e.articleId === item.id && e.attributeId === des.attributeId && e.versionId === item.version;
786
773
  });
787
774
  currentData["".concat(des.attributeId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
788
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
789
- onClick: function onClick() {
790
- setShowValidationPanel(true);
791
- setAttributeSelected({
792
- articleId: item.id,
793
- attributeId: des.attributeId,
794
- versionId: item.version
795
- });
796
- },
797
- className: "validation-button",
798
- children: [descriptionsReviewed[index].isReviewed && descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
799
- id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
800
- src: _acceptIcon.default,
801
- alt: "accept button"
802
- }), " ", descriptionsReviewed[index].isReviewed && !descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
803
- id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
804
- src: _rejectIcon.default,
805
- alt: "reject button"
806
- }), " ", typeof des.isApproved === "undefined" && !descriptionsReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
807
- id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
808
- src: _rejectIcon.default,
809
- alt: "reject button"
810
- })]
811
- }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
812
- className: "buttons-container",
813
- style: {
814
- left: "35px"
815
- },
816
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
817
- onClick: function onClick() {
818
- descriptionsReviewed[index].isApproved = true;
819
- descriptionsReviewed[index].isReviewed = true;
820
- setShowValidationPanel(false);
821
- },
822
- className: "validation-option",
823
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
824
- src: _acceptIcon.default,
825
- alt: "accept button"
826
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
827
- children: " Validar "
828
- }), " "]
829
- }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
830
- onClick: function onClick() {
831
- setShowValidationPanel(false);
832
- setShowRejectModal(true);
833
- },
834
- className: "validation-option",
835
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
836
- src: _rejectIcon.default,
837
- alt: "reject button"
838
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
839
- children: " Rechazar "
840
- }), " "]
841
- }), " "]
842
- }), " ", des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
775
+ children: [des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
843
776
  class: "tooltip",
844
777
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
845
778
  class: "tooltiptext",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.5.0",
3
+ "version": "21.5.2",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
@@ -21,7 +21,7 @@ export const Container = styled.div`
21
21
  top: 0;
22
22
  height: 45px;
23
23
  position: sticky;
24
- z-index: 10;
24
+ z-index: 2;
25
25
  & > tr {
26
26
  background-color: #f7f7fc;
27
27
  border-radius: 5px 5px 0px 0px;
@@ -15,26 +15,27 @@ const myBucket = new AWS.S3({
15
15
  region: REGION,
16
16
  });
17
17
 
18
- export default async function saveData(params) {
19
- const { section, data, token, callbackToInitData, setModal } = params;
18
+ export async function saveData(params) {
19
+ const { section, data, token } = params;
20
20
  if (section === "images") {
21
21
  if (await saveImagesData(data, token)) {
22
- callbackToInitData();
23
- setModal({
22
+ //callbackToInitData();
23
+ /**setModal({
24
24
  type: "saved successfully",
25
25
  functions: { setModal },
26
26
  payload: { service: "imágenes" },
27
- });
27
+ });**/
28
28
  // aquí va modal de que todo salío bien y actualiza la data
29
29
  }
30
30
  }
31
- return false;
31
+ return true;
32
32
  }
33
33
 
34
34
  async function saveImagesData(articles, token) {
35
35
  const imagesToUpdate = [];
36
36
  articles.data.forEach((article) => {
37
37
  const { images, version } = article;
38
+ console.log(images);
38
39
  const imagesToAdd = Object.values(images).filter(
39
40
  (f) => f.value && !f.value.src.startsWith("id-")
40
41
  );
@@ -63,7 +63,7 @@ export const Container = styled.div`
63
63
  font-size: 13px;
64
64
  line-height: 18px;
65
65
  background-color: white;
66
-
66
+ margin-right:5px;
67
67
  img {
68
68
  & + p {
69
69
  margin-left: 7px;
@@ -106,6 +106,12 @@ export const Container = styled.div`
106
106
 
107
107
  td{
108
108
  margin:0;
109
+ background: #ffffff !important;
110
+ }
111
+
112
+ th{
113
+ border-radius: 0 0 0 0 !important;
114
+ padding: 15px !important;
109
115
  }
110
116
 
111
117
  textarea {
@@ -1,7 +1,7 @@
1
1
  import axios from "axios";
2
2
  import { ImageVisor } from "../../organisms/ImageVisor";
3
3
  import { ButtonV2 } from "../../atoms/ButtonV2";
4
- import { deleteImage } from "./saveData";
4
+ import { deleteImage, saveData} from "./saveData";
5
5
  import { Container, Input, InputBase, TextField } from "@mui/material";
6
6
  import { ValidationPanel } from "../../atoms/ValidationPanel";
7
7
  import { TagAndInput } from "../../molecules/TagAndInput";
@@ -12,6 +12,8 @@ import saveWhite from "../../../assets/images/Icons/save-white.svg";
12
12
  import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
13
13
  import { DockSharp } from "@mui/icons-material";
14
14
  import React, { useState } from 'react';
15
+ import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
16
+ import { Tooltip } from "../../atoms/Tooltip";
15
17
 
16
18
  // variables
17
19
  export const optionsSelect = [
@@ -94,7 +96,7 @@ export function dataReducer(state, action) {
94
96
  return action.payload;
95
97
  }
96
98
  if (action.type === "updateImage") {
97
- const { articleId, imageId } = action.payload;
99
+ const { articleId, imageId ,token } = action.payload;
98
100
  const newImageData = state.images.data.slice();
99
101
  const articleIndex = newImageData.findIndex((f) => f.id === articleId);
100
102
  const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
@@ -102,6 +104,8 @@ export function dataReducer(state, action) {
102
104
  ...action.payload,
103
105
  id,
104
106
  };
107
+ const data = newImageData;
108
+ saveData({section:"images", data: {data}, token: token});
105
109
  return {
106
110
  ...state,
107
111
  images: {
@@ -116,7 +120,6 @@ export function dataReducer(state, action) {
116
120
  const articleIndex = newImageData.findIndex((f) => f.id === articleId);
117
121
  const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
118
122
  delete newImageData[articleIndex]?.images[imageId]?.value;
119
- console.log(newImageData[articleIndex]);
120
123
  const data = {
121
124
  articleId,
122
125
  deleteImages: [
@@ -209,6 +212,14 @@ export function setDataColumns(
209
212
  justifyContent: "center",
210
213
  };
211
214
 
215
+ const styleApprovalAttributes = {
216
+ textAlign: "center",
217
+ display: "flex",
218
+ justifyContent: "center",
219
+ border: "1px solid #ECDD1D",
220
+ background: "#ECDD1D"
221
+ };
222
+
212
223
  const retailersAdded = {
213
224
  id: [],
214
225
  attr: [],
@@ -253,14 +264,15 @@ export function setDataColumns(
253
264
  });
254
265
  }
255
266
  });
256
- var saveAvailable = imagesReviewed
267
+ var saveAvailable=true;
268
+ /**var saveAvailable = imagesReviewed
257
269
  .filter((e) => e.articleId === item.id)
258
270
  .every((e) => e.isReviewed === true);
259
271
  if (
260
272
  imagesReviewed.filter((e) => e.articleId === item.id).length == 0
261
273
  ) {
262
274
  saveAvailable = false;
263
- }
275
+ }**/
264
276
  currentData[`retailer${ret.id}-save`] = (
265
277
  <button
266
278
  onClick={() => {
@@ -331,7 +343,7 @@ export function setDataColumns(
331
343
  );
332
344
  currentData[`img${imageId}`] =
333
345
  <>
334
- <button
346
+ {/**<button
335
347
  onClick={() => {
336
348
  setShowValidationPanel(true);
337
349
  setAttributeSelected({
@@ -416,7 +428,7 @@ export function setDataColumns(
416
428
  <p> Rechazar </p>{" "}
417
429
  </button>{" "}
418
430
  </div>
419
- )}{" "}
431
+ )}{" "**/}
420
432
  {comment && <div class="tooltip">
421
433
  <ImageVisor {...props}/>
422
434
  <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
@@ -460,19 +472,31 @@ export function setDataColumns(
460
472
  var articleAttributes = attributesReviewed.filter(
461
473
  (e) => e.articleId === item.id && e.versionId === item.version
462
474
  );
475
+ var value;
463
476
  articleAttributes.forEach((articleAttribute) => {
464
- const value = document.getElementById(
465
- articleAttribute.articleId +
466
- "_" +
467
- articleAttribute.attributeId +
468
- "_" +
469
- articleAttribute.versionId
470
- ).value;
477
+ if(articleAttribute.attributeId==6700 || articleAttribute.attributeId==6701){
478
+ value= document.getElementById(
479
+ articleAttribute.articleId +
480
+ "_" +
481
+ articleAttribute.attributeId +
482
+ "_" +
483
+ articleAttribute.versionId
484
+ ).checked;
485
+ }
486
+ else{
487
+ value = document.getElementById(
488
+ articleAttribute.articleId +
489
+ "_" +
490
+ articleAttribute.attributeId +
491
+ "_" +
492
+ articleAttribute.versionId
493
+ ).value;
494
+ }
471
495
  articlesAtributesUpdateBody.push({
472
496
  articleId: articleAttribute.articleId,
473
497
  versionId: articleAttribute.versionId,
474
498
  attributeId: articleAttribute.attributeId,
475
- value: value ? value : "",
499
+ value: value!=undefined ? value : "",
476
500
  isApproved: articleAttribute.isApproved,
477
501
  comment: articleAttribute.comment,
478
502
  });
@@ -500,7 +524,7 @@ export function setDataColumns(
500
524
  Header: rules[attributeId].name,
501
525
  accessor: `${attributeId + "-" + ret.id}`,
502
526
  width: "200px",
503
- style: styleData,
527
+ style: (attributeId==6700 || attributeId==6701) ? styleApprovalAttributes : styleData,
504
528
  description: rules[attributeId].description,
505
529
  });
506
530
  }
@@ -573,6 +597,7 @@ export function setDataColumns(
573
597
  handleChangeOptions(des.attributeId, e.target.value)}
574
598
  }
575
599
  >
600
+ <option value="" selected disabled>Selecciona una opción</option>
576
601
  {des.option_list.map((option, index) => (
577
602
  <option key={index} value={option}>
578
603
  {option}
@@ -634,38 +659,47 @@ export function setDataColumns(
634
659
  src={acceptIcon}
635
660
  alt="accept button"
636
661
  />
637
- )}{" "}
662
+ )}
638
663
  {attributesReviewed[index].isReviewed &&
639
664
  !attributesReviewed[index].isApproved && (
640
- <img
641
- id={
642
- "button_" +
643
- item.id +
644
- "_" +
645
- des.attributeId +
646
- "_" +
647
- item.version
648
- }
649
- src={rejectIcon}
650
- alt="reject button"
651
- />
652
- )}{" "}
665
+ /**<Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>**/
666
+ <div>
667
+ <img
668
+ id={
669
+ "button_" +
670
+ item.id +
671
+ "_" +
672
+ des.attributeId +
673
+ "_" +
674
+ item.version
675
+ }
676
+ src={rejectIcon}
677
+ alt="reject icon"
678
+ />
679
+ </div>
680
+ /*</Tooltip>*/
681
+ )}
653
682
  {typeof des.isApproved === "undefined" &&
654
683
  !attributesReviewed[index].isReviewed && (
655
- <img
656
- id={
657
- "button_" +
658
- item.id +
659
- "_" +
660
- des.attributeId +
661
- "_" +
662
- item.version
663
- }
664
- src={rejectIcon}
665
- alt="reject button"
666
- />
684
+ <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
685
+ <div>
686
+ <img
687
+ id={
688
+ "button_" +
689
+ item.id +
690
+ "_" +
691
+ des.attributeId +
692
+ "_" +
693
+ item.version
694
+ }
695
+ src={nullIcon}
696
+ alt="null button"
697
+ />
698
+ </div>
699
+ </Tooltip>
700
+
667
701
  )}
668
- </button>{" "}
702
+ </button>
669
703
  {showValidationPanel &&
670
704
  attributeSelected.articleId === item.id &&
671
705
  attributeSelected.attributeId === des.attributeId &&
@@ -723,14 +757,15 @@ export function setDataColumns(
723
757
  style: styleSaveButtonCol,
724
758
  });
725
759
  }
726
- var saveAvailable = descriptionsReviewed
760
+ var saveAvailable=true;
761
+ /**var saveAvailable = descriptionsReviewed
727
762
  .filter((e) => e.articleId === item.id)
728
763
  .every((e) => e.isReviewed === true);
729
764
  if (
730
765
  descriptionsReviewed.filter((e) => e.articleId === item.id).length == 0
731
766
  ) {
732
767
  saveAvailable = false;
733
- }
768
+ }**/
734
769
  currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
735
770
  ret.descriptions.forEach((descriptionId) => {
736
771
  if (!retailersAdded.attr.includes(`${descriptionId}`)) {
@@ -817,7 +852,7 @@ export function setDataColumns(
817
852
  );
818
853
  currentData[`${des.attributeId}`] = (
819
854
  <>
820
- <button
855
+ {/**<button
821
856
  onClick={() => {
822
857
  setShowValidationPanel(true);
823
858
  setAttributeSelected({
@@ -901,7 +936,7 @@ export function setDataColumns(
901
936
  <p> Rechazar </p>{" "}
902
937
  </button>{" "}
903
938
  </div>
904
- )}{" "}
939
+ )}{" "}**/}
905
940
  {des.comment && <div class="tooltip">
906
941
  <textarea {...props}></textarea>
907
942
  <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>