oa-componentbook 0.18.237 → 0.18.239
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.
|
@@ -2,23 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
require("core-js/modules/es.symbol.description.js");
|
|
4
4
|
require("core-js/modules/es.object.assign.js");
|
|
5
|
+
require("core-js/modules/es.weak-map.js");
|
|
5
6
|
Object.defineProperty(exports, "__esModule", {
|
|
6
7
|
value: true
|
|
7
8
|
});
|
|
8
9
|
exports.default = void 0;
|
|
9
|
-
|
|
10
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
11
|
+
require("core-js/modules/es.json.stringify.js");
|
|
12
|
+
require("core-js/modules/es.array.includes.js");
|
|
13
|
+
require("core-js/modules/es.string.includes.js");
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
15
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
16
|
var _antd = require("antd");
|
|
12
|
-
var
|
|
17
|
+
var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
|
|
18
|
+
var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));
|
|
13
19
|
var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
|
|
14
20
|
require("antd/dist/reset.css");
|
|
15
21
|
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
16
22
|
var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
|
|
23
|
+
var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
|
|
24
|
+
var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
|
|
25
|
+
var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
|
|
17
26
|
var _utils = require("../../utils");
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
var _styles = require("./styles");
|
|
28
|
+
const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "noOfColumnToShow", "defaultCardShow"],
|
|
29
|
+
_excluded2 = ["title", "render"];
|
|
21
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
32
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
33
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
34
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
35
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -27,8 +38,6 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
|
|
|
27
38
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
28
39
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
40
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
30
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
|
-
const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td{\n border: none;\n }\n"])));
|
|
32
41
|
function CustomTable(_ref) {
|
|
33
42
|
let {
|
|
34
43
|
columns,
|
|
@@ -38,12 +47,28 @@ function CustomTable(_ref) {
|
|
|
38
47
|
size,
|
|
39
48
|
style,
|
|
40
49
|
tableBorder,
|
|
41
|
-
emptyText
|
|
50
|
+
emptyText,
|
|
51
|
+
noOfColumnToShow,
|
|
52
|
+
defaultCardShow
|
|
42
53
|
} = _ref,
|
|
43
54
|
antDesignProps = _objectWithoutProperties(_ref, _excluded);
|
|
55
|
+
const [viewMore, setViewMore] = (0, _react.useState)([]);
|
|
56
|
+
const [cardShow, setCardShow] = (0, _react.useState)(false);
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
58
|
+
if (window.innerWidth <= 600) {
|
|
59
|
+
if (defaultCardShow) {
|
|
60
|
+
setCardShow(defaultCardShow);
|
|
61
|
+
} else if ((columns === null || columns === void 0 ? void 0 : columns.length) <= 3) {
|
|
62
|
+
setCardShow(false);
|
|
63
|
+
} else {
|
|
64
|
+
setCardShow(true);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, [defaultCardShow, columns === null || columns === void 0 ? void 0 : columns.length, dataSource === null || dataSource === void 0 ? void 0 : dataSource.length]);
|
|
44
68
|
const uppercaseColumns = columns.map(column => {
|
|
45
69
|
const {
|
|
46
|
-
title
|
|
70
|
+
title,
|
|
71
|
+
render: _render
|
|
47
72
|
} = column,
|
|
48
73
|
otherColumnProperties = _objectWithoutProperties(column, _excluded2);
|
|
49
74
|
const titleComponent = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
@@ -51,12 +76,15 @@ function CustomTable(_ref) {
|
|
|
51
76
|
}, title) : title;
|
|
52
77
|
return _objectSpread({
|
|
53
78
|
title: titleComponent,
|
|
54
|
-
render: text => {
|
|
79
|
+
render: (text, record, index) => {
|
|
55
80
|
if ((0, _utils.isString)(text) || (0, _utils.isNumber)(text)) {
|
|
56
81
|
return /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
57
82
|
typography: "type-b2-400"
|
|
58
83
|
}, text);
|
|
59
84
|
}
|
|
85
|
+
if (_render) {
|
|
86
|
+
return _render ? _render(text, record, index) : text;
|
|
87
|
+
}
|
|
60
88
|
return text;
|
|
61
89
|
}
|
|
62
90
|
}, otherColumnProperties);
|
|
@@ -69,7 +97,44 @@ function CustomTable(_ref) {
|
|
|
69
97
|
borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
|
|
70
98
|
borderRadius: tableBorder ? '4px' : '0'
|
|
71
99
|
};
|
|
72
|
-
|
|
100
|
+
function checkAndUpdateArray(arr, num) {
|
|
101
|
+
const index = arr.indexOf(num);
|
|
102
|
+
if (index !== -1) {
|
|
103
|
+
arr.splice(index, 1);
|
|
104
|
+
} else {
|
|
105
|
+
arr.push(num);
|
|
106
|
+
}
|
|
107
|
+
return arr;
|
|
108
|
+
}
|
|
109
|
+
const handleViewMore = (index, row) => {
|
|
110
|
+
const tempViewMore = JSON.parse(JSON.stringify(viewMore));
|
|
111
|
+
setViewMore(checkAndUpdateArray(tempViewMore, index));
|
|
112
|
+
};
|
|
113
|
+
const checkLastElementIsAction = colIndex => {
|
|
114
|
+
var _uppercaseColumns;
|
|
115
|
+
if ((uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns === void 0 || (_uppercaseColumns = _uppercaseColumns.key) === null || _uppercaseColumns === void 0 ? void 0 : _uppercaseColumns.toLowerCase()) === 'action' && colIndex === uppercaseColumns.length - 1) {
|
|
116
|
+
return true;
|
|
117
|
+
}
|
|
118
|
+
return false;
|
|
119
|
+
};
|
|
120
|
+
const getContentToBeRender = (columnsData, row) => {
|
|
121
|
+
if (columnsData !== null && columnsData !== void 0 && columnsData.dataIndex) {
|
|
122
|
+
return row[columnsData === null || columnsData === void 0 ? void 0 : columnsData.dataIndex];
|
|
123
|
+
}
|
|
124
|
+
if ( /*#__PURE__*/(0, _react.isValidElement)(columnsData === null || columnsData === void 0 ? void 0 : columnsData.render(row))) {
|
|
125
|
+
return columnsData === null || columnsData === void 0 ? void 0 : columnsData.render(row);
|
|
126
|
+
}
|
|
127
|
+
return '';
|
|
128
|
+
};
|
|
129
|
+
const CheckMoreView = (0, _react.useMemo)(colIndex => {
|
|
130
|
+
var _uppercaseColumns2;
|
|
131
|
+
let tempNoOfColumnToShow = noOfColumnToShow + 1; // bcz of heading
|
|
132
|
+
if ((uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns2 = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns2 === void 0 || (_uppercaseColumns2 = _uppercaseColumns2.key) === null || _uppercaseColumns2 === void 0 ? void 0 : _uppercaseColumns2.toLowerCase()) === 'action') {
|
|
133
|
+
tempNoOfColumnToShow += 1; // for action column
|
|
134
|
+
}
|
|
135
|
+
return uppercaseColumns.length > tempNoOfColumnToShow;
|
|
136
|
+
}, [uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns.length, noOfColumnToShow]);
|
|
137
|
+
return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, null, !cardShow && /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
|
|
73
138
|
theme: {
|
|
74
139
|
components: {
|
|
75
140
|
Table: {
|
|
@@ -98,7 +163,7 @@ function CustomTable(_ref) {
|
|
|
98
163
|
controlItemBgActive: _ColorVariablesMap.default['--color-secondary-background']
|
|
99
164
|
}
|
|
100
165
|
}
|
|
101
|
-
}, /*#__PURE__*/_react.default.createElement(StyledTable, _extends({
|
|
166
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.StyledTable, _extends({
|
|
102
167
|
style: _objectSpread(_objectSpread({}, tableStyle), style),
|
|
103
168
|
columns: uppercaseColumns,
|
|
104
169
|
dataSource: dataSource,
|
|
@@ -108,7 +173,43 @@ function CustomTable(_ref) {
|
|
|
108
173
|
emptyText
|
|
109
174
|
},
|
|
110
175
|
size: size
|
|
111
|
-
}, antDesignProps)))
|
|
176
|
+
}, antDesignProps))), cardShow && dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((row, rowIndex) => {
|
|
177
|
+
var _uppercaseColumns$, _uppercaseColumns3;
|
|
178
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
179
|
+
key: (0, _utils.getUUID)(),
|
|
180
|
+
className: "cardStyles"
|
|
181
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
182
|
+
className: "srDetails"
|
|
183
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
184
|
+
className: "type-t2-700",
|
|
185
|
+
color: "primary-content"
|
|
186
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns$ = uppercaseColumns[0]) === null || _uppercaseColumns$ === void 0 ? void 0 : _uppercaseColumns$.title, ":", ' '), getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[0], row))), uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns.map((column, colIndex) => {
|
|
187
|
+
if (colIndex === 0 || !viewMore.includes(rowIndex) && colIndex > noOfColumnToShow || checkLastElementIsAction(colIndex, uppercaseColumns)) return null;
|
|
188
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
189
|
+
key: (0, _utils.getUUID)(),
|
|
190
|
+
className: "keyValue"
|
|
191
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, column.title), /*#__PURE__*/_react.default.createElement("strong", null, getContentToBeRender(column, row)));
|
|
192
|
+
}), CheckMoreView && /*#__PURE__*/_react.default.createElement("div", {
|
|
193
|
+
className: "showHideBtn"
|
|
194
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
195
|
+
size: "medium",
|
|
196
|
+
type: "text-only",
|
|
197
|
+
label: viewMore.includes(rowIndex) ? 'View Less' : 'View More',
|
|
198
|
+
iconConfig: {
|
|
199
|
+
icon: viewMore.includes(rowIndex) ? /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
200
|
+
icon: _KeyboardArrowUp.default,
|
|
201
|
+
size: 16
|
|
202
|
+
}) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
203
|
+
icon: _KeyboardArrowDown.default,
|
|
204
|
+
size: 16
|
|
205
|
+
}),
|
|
206
|
+
position: 'right'
|
|
207
|
+
},
|
|
208
|
+
onClick: () => handleViewMore(rowIndex)
|
|
209
|
+
})), (uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns3 = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns3 === void 0 ? void 0 : _uppercaseColumns3.key) === 'action' && /*#__PURE__*/_react.default.createElement("div", {
|
|
210
|
+
className: "footerCta"
|
|
211
|
+
}, getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[uppercaseColumns.length - 1], row)));
|
|
212
|
+
})));
|
|
112
213
|
}
|
|
113
214
|
CustomTable.propTypes = {
|
|
114
215
|
columns: _propTypes.default.array,
|
|
@@ -118,7 +219,9 @@ CustomTable.propTypes = {
|
|
|
118
219
|
size: _propTypes.default.oneOf(['small', 'middle', 'large']),
|
|
119
220
|
style: _propTypes.default.object,
|
|
120
221
|
tableBorder: _propTypes.default.bool,
|
|
121
|
-
emptyText: _propTypes.default.string
|
|
222
|
+
emptyText: _propTypes.default.string,
|
|
223
|
+
noOfColumnToShow: _propTypes.default.number,
|
|
224
|
+
defaultCardShow: _propTypes.default.bool
|
|
122
225
|
};
|
|
123
226
|
CustomTable.defaultProps = {
|
|
124
227
|
dataSource: [],
|
|
@@ -128,6 +231,8 @@ CustomTable.defaultProps = {
|
|
|
128
231
|
size: 'middle',
|
|
129
232
|
style: {},
|
|
130
233
|
tableBorder: true,
|
|
131
|
-
emptyText: 'No Data'
|
|
234
|
+
emptyText: 'No Data',
|
|
235
|
+
noOfColumnToShow: 5,
|
|
236
|
+
defaultCardShow: false
|
|
132
237
|
};
|
|
133
238
|
var _default = exports.default = CustomTable;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.StyledTable = exports.MainContainer = void 0;
|
|
7
|
+
var _antd = require("antd");
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _templateObject, _templateObject2;
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
+
var _default = exports.default = {};
|
|
13
|
+
const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td {\n border: none;\n }\n"])));
|
|
14
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.cardStyles {\n padding: 16px;\n border-radius: 12px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n margin: 0 0 24px;\n }\n .cardStyles:last-child {\n margin: 0;\n }\n .showHideBtn {\n padding: 8px 0 0;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong, .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 16px 0;\n border-top: 1px solid var(--color-divider);\n width: calc(100% + 32px);\n margin: 0 0 0 -16px;\n }\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n"])));
|
|
@@ -27,6 +27,7 @@ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-
|
|
|
27
27
|
var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
|
|
28
28
|
var _styles = require("../oa-widget-spare-part/styles");
|
|
29
29
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
30
|
+
var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
|
|
30
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
32
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
32
33
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -44,11 +45,20 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
44
45
|
onSubmit,
|
|
45
46
|
onClose,
|
|
46
47
|
open,
|
|
47
|
-
selectedItems
|
|
48
|
+
selectedItems,
|
|
49
|
+
disableDiscount,
|
|
50
|
+
disableHsn,
|
|
51
|
+
disableSelected
|
|
48
52
|
} = _ref;
|
|
49
|
-
const [filteredItems, setFilteredItems] = (0, _react.useState)(
|
|
53
|
+
const [filteredItems, setFilteredItems] = (0, _react.useState)([]);
|
|
50
54
|
const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(new Set());
|
|
51
55
|
const [formValues, setFormValues] = (0, _react.useState)({});
|
|
56
|
+
const [searchValue, setSearchValue] = (0, _react.useState)('');
|
|
57
|
+
const notificationRef = (0, _react.useRef)(null);
|
|
58
|
+
const openNotification = parameters => {
|
|
59
|
+
var _notificationRef$curr;
|
|
60
|
+
return notificationRef === null || notificationRef === void 0 || (_notificationRef$curr = notificationRef.current) === null || _notificationRef$curr === void 0 ? void 0 : _notificationRef$curr.openNotification(parameters);
|
|
61
|
+
};
|
|
52
62
|
(0, _react.useEffect)(() => {
|
|
53
63
|
// Pre-fill form values and select the items that are already selected
|
|
54
64
|
const initialFormValues = {};
|
|
@@ -64,12 +74,38 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
64
74
|
setFormValues(initialFormValues);
|
|
65
75
|
setSelectedItemIds(initialSelectedItems);
|
|
66
76
|
}, [selectedItems]);
|
|
77
|
+
(0, _react.useEffect)(() => {
|
|
78
|
+
// Combine selected items at the top followed by other items
|
|
79
|
+
const sortedItems = [...selectedItems.map(item => items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
|
|
80
|
+
setFilteredItems(sortedItems);
|
|
81
|
+
}, [items, selectedItems]);
|
|
82
|
+
(0, _react.useEffect)(() => {
|
|
83
|
+
// Uncheck item if any required field is empty
|
|
84
|
+
const newSelectedItemIds = new Set(selectedItemIds);
|
|
85
|
+
selectedItemIds.forEach(itemId => {
|
|
86
|
+
const fields = formValues[itemId];
|
|
87
|
+
const mandatoryFields = ['cost', 'discount', 'hsnId'].filter(field => {
|
|
88
|
+
if (disableDiscount && field === 'discount') return false;
|
|
89
|
+
if (disableHsn && field === 'hsnId') return false;
|
|
90
|
+
return true;
|
|
91
|
+
});
|
|
92
|
+
const allFieldsFilled = mandatoryFields.every(field => fields && fields[field]);
|
|
93
|
+
if (!allFieldsFilled) {
|
|
94
|
+
newSelectedItemIds.delete(itemId);
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
if (newSelectedItemIds.size !== selectedItemIds.size) {
|
|
98
|
+
setSelectedItemIds(newSelectedItemIds);
|
|
99
|
+
}
|
|
100
|
+
}, [formValues, selectedItemIds, disableDiscount, disableHsn]);
|
|
67
101
|
const handleSearchChange = event => {
|
|
68
102
|
const {
|
|
69
103
|
value
|
|
70
104
|
} = event.target;
|
|
105
|
+
setSearchValue(value);
|
|
71
106
|
if (!value) {
|
|
72
|
-
|
|
107
|
+
const sortedItems = [...selectedItems.map(item => items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
|
|
108
|
+
setFilteredItems(sortedItems);
|
|
73
109
|
} else {
|
|
74
110
|
const val = items.filter(item => item.name.toLowerCase().includes(value.toLowerCase()));
|
|
75
111
|
setFilteredItems(val);
|
|
@@ -78,8 +114,18 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
78
114
|
const onSelectItem = (itemId, event) => {
|
|
79
115
|
event.stopPropagation();
|
|
80
116
|
const fields = formValues[itemId];
|
|
81
|
-
|
|
82
|
-
|
|
117
|
+
const mandatoryFields = ['cost', 'discount', 'hsnId'].filter(field => {
|
|
118
|
+
if (disableDiscount && field === 'discount') return false;
|
|
119
|
+
if (disableHsn && field === 'hsnId') return false;
|
|
120
|
+
return true;
|
|
121
|
+
});
|
|
122
|
+
const allFieldsFilled = mandatoryFields.every(field => fields && fields[field]);
|
|
123
|
+
if (!allFieldsFilled) {
|
|
124
|
+
openNotification({
|
|
125
|
+
title: 'Error',
|
|
126
|
+
description: 'Please fill in all mandatory fields before selecting.',
|
|
127
|
+
type: 'failure'
|
|
128
|
+
});
|
|
83
129
|
return;
|
|
84
130
|
}
|
|
85
131
|
const newSelectedItems = new Set(selectedItemIds);
|
|
@@ -89,6 +135,10 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
89
135
|
newSelectedItems.add(itemId);
|
|
90
136
|
}
|
|
91
137
|
setSelectedItemIds(newSelectedItems);
|
|
138
|
+
setSearchValue(''); // Clear search value on item selection
|
|
139
|
+
// Reset the filtered items to show all items with selected items at the top
|
|
140
|
+
const sortedItems = [...selectedItems.map(item => items.find(i => i.id === item.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
|
|
141
|
+
setFilteredItems(sortedItems);
|
|
92
142
|
};
|
|
93
143
|
const isNumeric = value => /^\d*$/.test(value); // Regular expression to check if the value is numeric
|
|
94
144
|
|
|
@@ -102,18 +152,30 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
102
152
|
});
|
|
103
153
|
setFormValues(updatedFormValues);
|
|
104
154
|
} else {
|
|
105
|
-
|
|
155
|
+
openNotification({
|
|
156
|
+
title: 'Error',
|
|
157
|
+
description: 'Please enter only numeric values.',
|
|
158
|
+
type: 'failure'
|
|
159
|
+
});
|
|
106
160
|
}
|
|
107
161
|
};
|
|
108
162
|
const handleKeyPress = event => {
|
|
109
163
|
if (!/[0-9]/.test(event.key)) {
|
|
110
164
|
event.preventDefault();
|
|
111
|
-
|
|
165
|
+
openNotification({
|
|
166
|
+
title: 'Error',
|
|
167
|
+
description: 'Please enter only numeric values.',
|
|
168
|
+
type: 'failure'
|
|
169
|
+
});
|
|
112
170
|
}
|
|
113
171
|
};
|
|
114
172
|
const handleSubmission = () => {
|
|
115
173
|
if (selectedItemIds.size === 0) {
|
|
116
|
-
|
|
174
|
+
openNotification({
|
|
175
|
+
title: 'Error',
|
|
176
|
+
description: 'Please select at least one scope.',
|
|
177
|
+
type: 'failure'
|
|
178
|
+
});
|
|
117
179
|
return;
|
|
118
180
|
}
|
|
119
181
|
const toSubmit = Array.from(selectedItemIds).reduce((acc, itemId) => {
|
|
@@ -122,6 +184,22 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
122
184
|
}, formValues[itemId]));
|
|
123
185
|
return acc;
|
|
124
186
|
}, []);
|
|
187
|
+
const allFieldsFilled = toSubmit.every(item => {
|
|
188
|
+
const mandatoryFields = ['cost', 'discount', 'hsnId'].filter(field => {
|
|
189
|
+
if (disableDiscount && field === 'discount') return false;
|
|
190
|
+
if (disableHsn && field === 'hsnId') return false;
|
|
191
|
+
return true;
|
|
192
|
+
});
|
|
193
|
+
return mandatoryFields.every(field => item[field]);
|
|
194
|
+
});
|
|
195
|
+
if (!allFieldsFilled) {
|
|
196
|
+
openNotification({
|
|
197
|
+
title: 'Error',
|
|
198
|
+
description: 'Please fill in all mandatory fields before submitting.',
|
|
199
|
+
type: 'failure'
|
|
200
|
+
});
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
125
203
|
onSubmit(toSubmit); // Call the passed onSubmit function with the data to submit
|
|
126
204
|
};
|
|
127
205
|
const defaultOpenKey = filteredItems.length > 0 ? filteredItems[0].id.toString() : null;
|
|
@@ -139,6 +217,7 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
139
217
|
}, /*#__PURE__*/_react.default.createElement(_styles.MainStyles, null, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
|
|
140
218
|
placeholder: "Search spare part",
|
|
141
219
|
onChange: handleSearchChange,
|
|
220
|
+
value: searchValue,
|
|
142
221
|
style: {
|
|
143
222
|
marginBottom: 16
|
|
144
223
|
},
|
|
@@ -148,6 +227,8 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
148
227
|
defaultActiveKey: defaultOpenKey
|
|
149
228
|
}, filteredItems.map(item => {
|
|
150
229
|
var _formValues$item$id, _formValues$item$id2, _formValues$item$id3;
|
|
230
|
+
const isSelected = selectedItemIds.has(item.id);
|
|
231
|
+
const selectedItem = selectedItems.find(i => i.scopeId === item.id);
|
|
151
232
|
return /*#__PURE__*/_react.default.createElement(Panel, {
|
|
152
233
|
header: /*#__PURE__*/_react.default.createElement("div", {
|
|
153
234
|
style: {
|
|
@@ -159,7 +240,8 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
159
240
|
color: "primary-content"
|
|
160
241
|
}, item.name), /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
|
|
161
242
|
onClick: e => onSelectItem(item.id, e),
|
|
162
|
-
checked:
|
|
243
|
+
checked: isSelected,
|
|
244
|
+
disabled: selectedItem ? disableSelected : false,
|
|
163
245
|
style: {
|
|
164
246
|
marginRight: 8
|
|
165
247
|
}
|
|
@@ -179,8 +261,9 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
179
261
|
onKeyPress: handleKeyPress,
|
|
180
262
|
inputMode: "numeric",
|
|
181
263
|
pattern: "[0-9]*",
|
|
182
|
-
value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) || ''
|
|
183
|
-
|
|
264
|
+
value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) || '',
|
|
265
|
+
disabled: selectedItem && disableSelected
|
|
266
|
+
})), !disableDiscount && /*#__PURE__*/_react.default.createElement("div", {
|
|
184
267
|
className: "padding-bottom-32"
|
|
185
268
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
186
269
|
className: "padding-bottom-4"
|
|
@@ -194,8 +277,9 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
194
277
|
onKeyPress: handleKeyPress,
|
|
195
278
|
inputMode: "numeric",
|
|
196
279
|
pattern: "[0-9]*",
|
|
197
|
-
value: ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.discount) || ''
|
|
198
|
-
|
|
280
|
+
value: ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.discount) || '',
|
|
281
|
+
disabled: selectedItem && disableSelected
|
|
282
|
+
})), !disableHsn && /*#__PURE__*/_react.default.createElement("div", {
|
|
199
283
|
className: "padding-bottom-4"
|
|
200
284
|
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
201
285
|
className: "type-b2-400",
|
|
@@ -203,7 +287,8 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
203
287
|
}, "HSN Code")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
|
|
204
288
|
placeholder: "HSN Code",
|
|
205
289
|
onChange: e => onFieldChange(item.id, 'hsnId', e.target.value),
|
|
206
|
-
value: ((_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.hsnId) || ''
|
|
290
|
+
value: ((_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.hsnId) || '',
|
|
291
|
+
disabled: disableHsn || selectedItem && disableSelected
|
|
207
292
|
}));
|
|
208
293
|
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
|
|
209
294
|
description: "Please note that 18% GST will be levied on the price of spare part added. This tax will be included in the total cost of spare parts.",
|
|
@@ -215,13 +300,23 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
215
300
|
}),
|
|
216
301
|
position: 'left'
|
|
217
302
|
}
|
|
218
|
-
})))
|
|
303
|
+
}))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
|
|
304
|
+
ref: notificationRef
|
|
305
|
+
})));
|
|
219
306
|
}
|
|
307
|
+
AddSparePartCollapseWidget.defaultProps = {
|
|
308
|
+
disableDiscount: false,
|
|
309
|
+
disableHsn: false,
|
|
310
|
+
disableSelected: false
|
|
311
|
+
};
|
|
220
312
|
AddSparePartCollapseWidget.propTypes = {
|
|
221
313
|
items: _propTypes.default.array.isRequired,
|
|
222
314
|
onSubmit: _propTypes.default.func.isRequired,
|
|
223
315
|
onClose: _propTypes.default.func.isRequired,
|
|
224
316
|
open: _propTypes.default.bool.isRequired,
|
|
225
|
-
selectedItems: _propTypes.default.array.isRequired
|
|
317
|
+
selectedItems: _propTypes.default.array.isRequired,
|
|
318
|
+
disableDiscount: _propTypes.default.bool,
|
|
319
|
+
disableHsn: _propTypes.default.bool,
|
|
320
|
+
disableSelected: _propTypes.default.bool
|
|
226
321
|
};
|
|
227
322
|
var _default = exports.default = AddSparePartCollapseWidget;
|