contentoh-components-library 21.4.93 → 21.4.95
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.
- package/dist/components/atoms/Multiselect/Multiselect.stories.js +1 -1
- package/dist/components/atoms/Multiselect/index.js +1 -1
- package/dist/components/atoms/ObservationFlag/index.js +7 -11
- package/dist/components/molecules/GridItem/index.js +22 -4
- package/dist/components/organisms/VersionSelector/index.js +169 -101
- package/package.json +1 -1
- package/src/components/atoms/Multiselect/Multiselect.stories.js +1 -1
- package/src/components/atoms/Multiselect/index.js +1 -1
- package/src/components/atoms/ObservationFlag/index.js +1 -1
- package/src/components/molecules/GridItem/index.js +26 -2
- package/src/components/organisms/VersionSelector/index.js +100 -100
|
@@ -62,24 +62,20 @@ var ObservationFlag = function ObservationFlag(_ref) {
|
|
|
62
62
|
currentObservation = _useState6[0],
|
|
63
63
|
setCurrentObservation = _useState6[1];
|
|
64
64
|
|
|
65
|
-
var _useState7 = (0, _react.useState)(
|
|
65
|
+
var _useState7 = (0, _react.useState)(false),
|
|
66
66
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
showModal = _useState8[0],
|
|
68
|
+
setShowModal = _useState8[1];
|
|
69
69
|
|
|
70
|
-
var _useState9 = (0, _react.useState)(
|
|
70
|
+
var _useState9 = (0, _react.useState)({}),
|
|
71
71
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
var _useState11 = (0, _react.useState)({}),
|
|
76
|
-
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
77
|
-
modalData = _useState12[0],
|
|
78
|
-
setModalData = _useState12[1];
|
|
72
|
+
modalData = _useState10[0],
|
|
73
|
+
setModalData = _useState10[1];
|
|
79
74
|
|
|
80
75
|
var textareaRef = (0, _react.useRef)(null);
|
|
81
76
|
|
|
82
77
|
var toggleObservation = function toggleObservation() {
|
|
78
|
+
console.log("VENTANA");
|
|
83
79
|
setObservationVisible(!isObservationVisible);
|
|
84
80
|
};
|
|
85
81
|
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
@@ -23,6 +25,10 @@ var _RatingStars = require("../../atoms/RatingStars");
|
|
|
23
25
|
|
|
24
26
|
var _CheckBox = require("../../atoms/CheckBox");
|
|
25
27
|
|
|
28
|
+
var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
|
|
29
|
+
|
|
30
|
+
var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
|
|
31
|
+
|
|
26
32
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
33
|
|
|
28
34
|
var GridItem = function GridItem(_ref) {
|
|
@@ -42,7 +48,9 @@ var GridItem = function GridItem(_ref) {
|
|
|
42
48
|
_gridElement$status = gridElement.status,
|
|
43
49
|
status = _gridElement$status === void 0 ? [] : _gridElement$status,
|
|
44
50
|
_gridElement$catalogs = gridElement.catalogs,
|
|
45
|
-
catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs
|
|
51
|
+
catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs,
|
|
52
|
+
_gridElement$observat = gridElement.observations,
|
|
53
|
+
observations = _gridElement$observat === void 0 ? [] : _gridElement$observat;
|
|
46
54
|
|
|
47
55
|
var getSrvName = function getSrvName(srv) {
|
|
48
56
|
switch (srv) {
|
|
@@ -92,9 +100,19 @@ var GridItem = function GridItem(_ref) {
|
|
|
92
100
|
children: item.value
|
|
93
101
|
}, i);
|
|
94
102
|
})
|
|
95
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
|
103
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
96
104
|
className: "status-slider",
|
|
97
|
-
children:
|
|
105
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("figure", {
|
|
106
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
107
|
+
style: {
|
|
108
|
+
height: 15,
|
|
109
|
+
width: 15,
|
|
110
|
+
objectFit: "scale-down"
|
|
111
|
+
},
|
|
112
|
+
src: product.observations !== null && product.observations !== "" ? _highPriority.default : _lowPriority.default,
|
|
113
|
+
alt: ""
|
|
114
|
+
})
|
|
115
|
+
}), status === null || status === void 0 ? void 0 : status.map(function (_ref2) {
|
|
98
116
|
var title = _ref2.title,
|
|
99
117
|
value = _ref2.value,
|
|
100
118
|
percent = _ref2.percent;
|
|
@@ -112,7 +130,7 @@ var GridItem = function GridItem(_ref) {
|
|
|
112
130
|
progressBarType: value
|
|
113
131
|
})]
|
|
114
132
|
});
|
|
115
|
-
})
|
|
133
|
+
})]
|
|
116
134
|
}), isMerchans ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
117
135
|
className: "cart-and-raiting",
|
|
118
136
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
|
|
@@ -1,101 +1,169 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.VersionSelector = void 0;
|
|
9
|
+
|
|
10
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
11
|
+
|
|
12
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
|
|
18
|
+
var _axios = _interopRequireDefault(require("axios"));
|
|
19
|
+
|
|
20
|
+
var _react = require("react");
|
|
21
|
+
|
|
22
|
+
var _ScreenHeader = require("../../atoms/ScreenHeader");
|
|
23
|
+
|
|
24
|
+
var _GeneralButton = require("../../atoms/GeneralButton");
|
|
25
|
+
|
|
26
|
+
var _addVersion = _interopRequireDefault(require("../../../assets/images/versionSelector/addVersion.svg"));
|
|
27
|
+
|
|
28
|
+
var _closeVersionSelector = _interopRequireDefault(require("../../../assets/images/versionSelector/closeVersionSelector.svg"));
|
|
29
|
+
|
|
30
|
+
var _variables = require("../../../../dist/global-files/variables");
|
|
31
|
+
|
|
32
|
+
var _variables2 = require("../../../global-files/variables");
|
|
33
|
+
|
|
34
|
+
var _VersionItem = require("../../molecules/VersionItem");
|
|
35
|
+
|
|
36
|
+
var _CreateVersion = require("../../organisms/CreateVersion");
|
|
37
|
+
|
|
38
|
+
var _customHooks = require("../../../global-files/customHooks");
|
|
39
|
+
|
|
40
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
41
|
+
|
|
42
|
+
var VersionSelector = function VersionSelector(_ref) {
|
|
43
|
+
var modalId = _ref.modalId,
|
|
44
|
+
articleId = _ref.articleId,
|
|
45
|
+
setVersion = _ref.setVersion,
|
|
46
|
+
companyName = _ref.companyName,
|
|
47
|
+
currentVersion = _ref.currentVersion,
|
|
48
|
+
setShowVersionSelector = _ref.setShowVersionSelector,
|
|
49
|
+
jwt = _ref.jwt;
|
|
50
|
+
|
|
51
|
+
var _useState = (0, _react.useState)([]),
|
|
52
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
53
|
+
versions = _useState2[0],
|
|
54
|
+
setVersions = _useState2[1];
|
|
55
|
+
|
|
56
|
+
var _useCloseModal = (0, _customHooks.useCloseModal)("create-version"),
|
|
57
|
+
_useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
|
|
58
|
+
showCreateVersion = _useCloseModal2[0],
|
|
59
|
+
setShowCreateVersion = _useCloseModal2[1];
|
|
60
|
+
|
|
61
|
+
var _useState3 = (0, _react.useState)(false),
|
|
62
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
63
|
+
reload = _useState4[0],
|
|
64
|
+
setReload = _useState4[1];
|
|
65
|
+
|
|
66
|
+
var loadProductVersions = /*#__PURE__*/function () {
|
|
67
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId) {
|
|
68
|
+
var response, versionList;
|
|
69
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
70
|
+
while (1) {
|
|
71
|
+
switch (_context.prev = _context.next) {
|
|
72
|
+
case 0:
|
|
73
|
+
_context.prev = 0;
|
|
74
|
+
_context.next = 3;
|
|
75
|
+
return _axios.default.get("".concat(process.env.REACT_APP_VERSIONS_ENDPOINT, "?articleId=").concat(articleId, "&provider=true"), {
|
|
76
|
+
headers: {
|
|
77
|
+
Authorization: jwt
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
case 3:
|
|
82
|
+
response = _context.sent;
|
|
83
|
+
versionList = JSON.parse(response.data.body).data;
|
|
84
|
+
setVersions(versionList);
|
|
85
|
+
_context.next = 11;
|
|
86
|
+
break;
|
|
87
|
+
|
|
88
|
+
case 8:
|
|
89
|
+
_context.prev = 8;
|
|
90
|
+
_context.t0 = _context["catch"](0);
|
|
91
|
+
console.log(_context.t0);
|
|
92
|
+
|
|
93
|
+
case 11:
|
|
94
|
+
case "end":
|
|
95
|
+
return _context.stop();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, _callee, null, [[0, 8]]);
|
|
99
|
+
}));
|
|
100
|
+
|
|
101
|
+
return function loadProductVersions(_x) {
|
|
102
|
+
return _ref2.apply(this, arguments);
|
|
103
|
+
};
|
|
104
|
+
}();
|
|
105
|
+
|
|
106
|
+
(0, _react.useEffect)(function () {
|
|
107
|
+
var ac = new AbortController();
|
|
108
|
+
loadProductVersions(articleId);
|
|
109
|
+
return function () {
|
|
110
|
+
setVersions([]);
|
|
111
|
+
setShowCreateVersion(false);
|
|
112
|
+
return function () {
|
|
113
|
+
return ac.abort();
|
|
114
|
+
}; // Abort both fetches on unmount
|
|
115
|
+
};
|
|
116
|
+
}, [reload]);
|
|
117
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
118
|
+
id: modalId,
|
|
119
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
120
|
+
className: "versions-header",
|
|
121
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
|
|
122
|
+
text: "Versión del producto",
|
|
123
|
+
headerType: "input-name-header",
|
|
124
|
+
color: _variables.GlobalColors.white,
|
|
125
|
+
fontFamily: _variables2.FontFamily.Lato
|
|
126
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
127
|
+
className: "buttons-container",
|
|
128
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
|
|
129
|
+
image: _addVersion.default,
|
|
130
|
+
buttonType: "circular-button",
|
|
131
|
+
onClick: function onClick() {
|
|
132
|
+
return setShowCreateVersion(true);
|
|
133
|
+
},
|
|
134
|
+
id: "add-version"
|
|
135
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
|
|
136
|
+
image: _closeVersionSelector.default,
|
|
137
|
+
buttonType: "circular-button",
|
|
138
|
+
onClick: function onClick() {
|
|
139
|
+
return setShowVersionSelector(false);
|
|
140
|
+
},
|
|
141
|
+
id: "close-button"
|
|
142
|
+
})]
|
|
143
|
+
})]
|
|
144
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
145
|
+
className: "versions-container",
|
|
146
|
+
children: versions === null || versions === void 0 ? void 0 : versions.map(function (item) {
|
|
147
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionItem.VersionItem, {
|
|
148
|
+
version: item.version,
|
|
149
|
+
articleStatus: item.article_status,
|
|
150
|
+
currentVersion: item.version === currentVersion,
|
|
151
|
+
productOwner: companyName,
|
|
152
|
+
setVersion: setVersion,
|
|
153
|
+
timestamp: item.timestamp
|
|
154
|
+
}, item.version);
|
|
155
|
+
})
|
|
156
|
+
}), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
|
|
157
|
+
articleId: articleId,
|
|
158
|
+
version: currentVersion,
|
|
159
|
+
versionsList: versions,
|
|
160
|
+
setShowCreateVersion: setShowCreateVersion,
|
|
161
|
+
realoadVersion: function realoadVersion() {
|
|
162
|
+
return setReload(!reload);
|
|
163
|
+
},
|
|
164
|
+
jwt: jwt
|
|
165
|
+
})]
|
|
166
|
+
});
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
exports.VersionSelector = VersionSelector;
|
package/package.json
CHANGED
|
@@ -25,12 +25,12 @@ export const ObservationFlag = ({
|
|
|
25
25
|
const [material, setMaterial] = useState(contentObservation || "");
|
|
26
26
|
const [currentObservation, setCurrentObservation] = useState(observation);
|
|
27
27
|
|
|
28
|
-
const [modalView, setModalView] = useState(null);
|
|
29
28
|
const [showModal, setShowModal] = useState(false);
|
|
30
29
|
const [modalData, setModalData] = useState({});
|
|
31
30
|
|
|
32
31
|
const textareaRef = useRef(null);
|
|
33
32
|
const toggleObservation = () => {
|
|
33
|
+
console.log("VENTANA");
|
|
34
34
|
setObservationVisible(!isObservationVisible);
|
|
35
35
|
};
|
|
36
36
|
useEffect(() => {
|
|
@@ -7,6 +7,8 @@ import { faStar as starIcon } from "@fortawesome/free-regular-svg-icons";
|
|
|
7
7
|
import { faCartPlus as cartIcon } from "@fortawesome/free-solid-svg-icons";
|
|
8
8
|
import { RatingStars } from "../../atoms/RatingStars";
|
|
9
9
|
import { CheckBox } from "../../atoms/CheckBox";
|
|
10
|
+
import high from "../../../assets/images/flags/highPriority.svg";
|
|
11
|
+
import low from "../../../assets/images/flags/lowPriority.svg";
|
|
10
12
|
|
|
11
13
|
export const GridItem = ({
|
|
12
14
|
gridElement = {},
|
|
@@ -18,8 +20,13 @@ export const GridItem = ({
|
|
|
18
20
|
chkChecked,
|
|
19
21
|
index,
|
|
20
22
|
}) => {
|
|
21
|
-
const {
|
|
22
|
-
|
|
23
|
+
const {
|
|
24
|
+
images = [],
|
|
25
|
+
info = [],
|
|
26
|
+
status = [],
|
|
27
|
+
catalogs = {},
|
|
28
|
+
observations = [],
|
|
29
|
+
} = gridElement;
|
|
23
30
|
const getSrvName = (srv) => {
|
|
24
31
|
switch (srv) {
|
|
25
32
|
case "datasheet":
|
|
@@ -53,6 +60,23 @@ export const GridItem = ({
|
|
|
53
60
|
)}
|
|
54
61
|
</div>
|
|
55
62
|
<div className="status-slider">
|
|
63
|
+
{
|
|
64
|
+
<figure>
|
|
65
|
+
<img
|
|
66
|
+
style={{
|
|
67
|
+
height: 15,
|
|
68
|
+
width: 15,
|
|
69
|
+
objectFit: "scale-down",
|
|
70
|
+
}}
|
|
71
|
+
src={
|
|
72
|
+
product.observations !== null && product.observations !== ""
|
|
73
|
+
? high
|
|
74
|
+
: low
|
|
75
|
+
}
|
|
76
|
+
alt={""}
|
|
77
|
+
/>
|
|
78
|
+
</figure>
|
|
79
|
+
}
|
|
56
80
|
{status?.map(({ title, value, percent }) => (
|
|
57
81
|
<div className="status-element">
|
|
58
82
|
{title && (
|
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { Container } from "./styles";
|
|
2
|
+
import axios from "axios";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { ScreenHeader } from "../../atoms/ScreenHeader";
|
|
5
|
+
import { Button } from "../../atoms/GeneralButton";
|
|
6
|
+
import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
|
|
7
|
+
import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
|
|
8
|
+
import { GlobalColors } from "../../../../dist/global-files/variables";
|
|
9
|
+
import { FontFamily } from "../../../global-files/variables";
|
|
10
|
+
import { VersionItem } from "../../molecules/VersionItem";
|
|
11
|
+
import { CreateVersion } from "../../organisms/CreateVersion";
|
|
12
|
+
import { useCloseModal } from "../../../global-files/customHooks";
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
export const VersionSelector = ({
|
|
15
|
+
modalId,
|
|
16
|
+
articleId,
|
|
17
|
+
setVersion,
|
|
18
|
+
companyName,
|
|
19
|
+
currentVersion,
|
|
20
|
+
setShowVersionSelector,
|
|
21
|
+
jwt,
|
|
22
|
+
}) => {
|
|
23
|
+
const [versions, setVersions] = useState([]);
|
|
24
|
+
const [showCreateVersion, setShowCreateVersion] =
|
|
25
|
+
useCloseModal("create-version");
|
|
26
|
+
const [reload, setReload] = useState(false);
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
const loadProductVersions = async (articleId) => {
|
|
29
|
+
try {
|
|
30
|
+
const response = await axios.get(
|
|
31
|
+
`${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
|
|
32
|
+
{
|
|
33
|
+
headers: {
|
|
34
|
+
Authorization: jwt,
|
|
35
|
+
},
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
const versionList = JSON.parse(response.data.body).data;
|
|
40
|
+
setVersions(versionList);
|
|
41
|
+
} catch (error) {
|
|
42
|
+
console.log(error);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
const ac = new AbortController();
|
|
48
|
+
loadProductVersions(articleId);
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
return () => {
|
|
51
|
+
setVersions([]);
|
|
52
|
+
setShowCreateVersion(false);
|
|
53
|
+
return () => ac.abort(); // Abort both fetches on unmount
|
|
54
|
+
};
|
|
55
|
+
}, [reload]);
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
57
|
+
return (
|
|
58
|
+
<Container id={modalId}>
|
|
59
|
+
<div className="versions-header">
|
|
60
|
+
<ScreenHeader
|
|
61
|
+
text={"Versión del producto"}
|
|
62
|
+
headerType={"input-name-header"}
|
|
63
|
+
color={GlobalColors.white}
|
|
64
|
+
fontFamily={FontFamily.Lato}
|
|
65
|
+
/>
|
|
66
|
+
<div className="buttons-container">
|
|
67
|
+
<Button
|
|
68
|
+
image={addVersion}
|
|
69
|
+
buttonType={"circular-button"}
|
|
70
|
+
onClick={() => setShowCreateVersion(true)}
|
|
71
|
+
id="add-version"
|
|
72
|
+
/>
|
|
73
|
+
<Button
|
|
74
|
+
image={closeIcon}
|
|
75
|
+
buttonType={"circular-button"}
|
|
76
|
+
onClick={() => setShowVersionSelector(false)}
|
|
77
|
+
id="close-button"
|
|
78
|
+
/>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div className="versions-container">
|
|
82
|
+
{versions?.map((item) => (
|
|
83
|
+
<VersionItem
|
|
84
|
+
key={item.version}
|
|
85
|
+
version={item.version}
|
|
86
|
+
articleStatus={item.article_status}
|
|
87
|
+
currentVersion={item.version === currentVersion}
|
|
88
|
+
productOwner={companyName}
|
|
89
|
+
setVersion={setVersion}
|
|
90
|
+
timestamp={item.timestamp}
|
|
91
|
+
/>
|
|
92
|
+
))}
|
|
93
|
+
</div>
|
|
94
|
+
{showCreateVersion && (
|
|
95
|
+
<CreateVersion
|
|
96
|
+
articleId={articleId}
|
|
97
|
+
version={currentVersion}
|
|
98
|
+
versionsList={versions}
|
|
99
|
+
setShowCreateVersion={setShowCreateVersion}
|
|
100
|
+
realoadVersion={() => setReload(!reload)}
|
|
101
|
+
jwt={jwt}
|
|
102
|
+
/>
|
|
103
|
+
)}
|
|
104
|
+
</Container>
|
|
105
|
+
);
|
|
106
|
+
};
|