oa-componentbook 0.18.198 → 0.18.199

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.
Files changed (4) hide show
  1. package/build/global-css/GridLayout.js +1 -1
  2. package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js +102 -62
  3. package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js +44 -13
  4. package/package.json +1 -1
package/build/global-css/GridLayout.js CHANGED
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
21
21
  // TODO: Figure out a way to make this work with storybook.
22
22
  // Can be used to wrap the entire application, to make these styles available to every component
23
23
 
24
- const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
24
+ const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
25
25
  var _default = exports.default = GridLayout;
package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js CHANGED
@@ -17,12 +17,15 @@ var _react = _interopRequireWildcard(require("react"));
17
17
  var _propTypes = _interopRequireDefault(require("prop-types"));
18
18
  var _antd = require("antd");
19
19
  var _icons = require("@ant-design/icons");
20
+ var _ReportProblemOutlined = _interopRequireDefault(require("@material-ui/icons/ReportProblemOutlined"));
20
21
  var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
21
22
  var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
22
23
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
23
24
  var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
25
+ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
24
26
  var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
25
27
  var _styles = require("../oa-widget-spare-part/styles");
28
+ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
26
29
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
30
  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); }
28
31
  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; }
@@ -39,11 +42,27 @@ function AddSparePartCollapseWidget(_ref) {
39
42
  items,
40
43
  onSubmit,
41
44
  onClose,
42
- open
45
+ open,
46
+ selectedItems
43
47
  } = _ref;
44
48
  const [filteredItems, setFilteredItems] = (0, _react.useState)(items);
45
- const [selectedItems, setSelectedItems] = (0, _react.useState)(new Set());
49
+ const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(new Set());
46
50
  const [formValues, setFormValues] = (0, _react.useState)({});
51
+ (0, _react.useEffect)(() => {
52
+ // Pre-fill form values and select the items that are already selected
53
+ const initialFormValues = {};
54
+ const initialSelectedItems = new Set();
55
+ selectedItems.forEach(item => {
56
+ initialFormValues[item.scopeId] = {
57
+ cost: item.cost || '',
58
+ discount: item.discount || '',
59
+ hsnId: item.hsnId || ''
60
+ };
61
+ initialSelectedItems.add(item.scopeId);
62
+ });
63
+ setFormValues(initialFormValues);
64
+ setSelectedItemIds(initialSelectedItems);
65
+ }, [selectedItems]);
47
66
  const handleSearchChange = event => {
48
67
  const {
49
68
  value
@@ -58,23 +77,23 @@ function AddSparePartCollapseWidget(_ref) {
58
77
  const onSelectItem = (itemId, event) => {
59
78
  event.stopPropagation();
60
79
  const fields = formValues[itemId];
61
- if (!fields || !fields.price || !fields.discount || !fields.hsn) {
80
+ if (!fields || !fields.cost || !fields.discount || !fields.hsnId) {
62
81
  _antd.message.error('Please fill in all fields before selecting.');
63
82
  return;
64
83
  }
65
- const newSelectedItems = new Set(selectedItems);
84
+ const newSelectedItems = new Set(selectedItemIds);
66
85
  if (newSelectedItems.has(itemId)) {
67
86
  newSelectedItems.delete(itemId);
68
87
  } else {
69
88
  newSelectedItems.add(itemId);
70
89
  }
71
- setSelectedItems(newSelectedItems);
90
+ setSelectedItemIds(newSelectedItems);
72
91
  };
73
92
  const isNumeric = value => /^\d*$/.test(value); // Regular expression to check if the value is numeric
74
93
 
75
94
  const onFieldChange = (itemId, field, value) => {
76
- if (isNumeric(value)) {
77
- // Check if the input value is numeric
95
+ if (field === 'hsnId' || isNumeric(value)) {
96
+ // Bypass numeric check for HSN Code
78
97
  const updatedFormValues = _objectSpread(_objectSpread({}, formValues), {}, {
79
98
  [itemId]: _objectSpread(_objectSpread({}, formValues[itemId]), {}, {
80
99
  [field]: value
@@ -92,9 +111,13 @@ function AddSparePartCollapseWidget(_ref) {
92
111
  }
93
112
  };
94
113
  const handleSubmission = () => {
95
- const toSubmit = Array.from(selectedItems).reduce((acc, itemId) => {
114
+ if (selectedItemIds.size === 0) {
115
+ _antd.message.error('Please select at least one scope.');
116
+ return;
117
+ }
118
+ const toSubmit = Array.from(selectedItemIds).reduce((acc, itemId) => {
96
119
  acc.push(_objectSpread({
97
- itemId
120
+ scopeId: itemId
98
121
  }, formValues[itemId]));
99
122
  return acc;
100
123
  }, []);
@@ -122,65 +145,82 @@ function AddSparePartCollapseWidget(_ref) {
122
145
  }), /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
123
146
  accordion: true,
124
147
  defaultActiveKey: defaultOpenKey
125
- }, filteredItems.map(item => /*#__PURE__*/_react.default.createElement(Panel, {
126
- header: /*#__PURE__*/_react.default.createElement("div", {
127
- style: {
128
- display: 'flex',
129
- justifyContent: 'space-between'
130
- }
148
+ }, filteredItems.map(item => {
149
+ var _formValues$item$id, _formValues$item$id2, _formValues$item$id3;
150
+ return /*#__PURE__*/_react.default.createElement(Panel, {
151
+ header: /*#__PURE__*/_react.default.createElement("div", {
152
+ style: {
153
+ display: 'flex',
154
+ justifyContent: 'space-between'
155
+ }
156
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
157
+ className: "type-t2-700",
158
+ color: "primary-content"
159
+ }, item.name), /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
160
+ onClick: e => onSelectItem(item.id, e),
161
+ checked: selectedItemIds.has(item.id),
162
+ style: {
163
+ marginRight: 8
164
+ }
165
+ })),
166
+ key: item.id
167
+ }, /*#__PURE__*/_react.default.createElement("div", {
168
+ className: "padding-bottom-32"
169
+ }, /*#__PURE__*/_react.default.createElement("div", {
170
+ className: "padding-bottom-4"
171
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
172
+ className: "type-b2-400",
173
+ color: "primary-content"
174
+ }, "Spare part price (without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
175
+ prefix: "\u20B9",
176
+ placeholder: "Enter price without GST",
177
+ onChange: e => onFieldChange(item.id, 'cost', e.target.value),
178
+ onKeyPress: handleKeyPress,
179
+ inputMode: "numeric",
180
+ pattern: "[0-9]*",
181
+ value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) || ''
182
+ })), /*#__PURE__*/_react.default.createElement("div", {
183
+ className: "padding-bottom-32"
184
+ }, /*#__PURE__*/_react.default.createElement("div", {
185
+ className: "padding-bottom-4"
131
186
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
132
- className: "type-t2-700",
187
+ className: "type-b2-400",
133
188
  color: "primary-content"
134
- }, item.name), /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
135
- onClick: e => onSelectItem(item.id, e),
136
- checked: selectedItems.has(item.id),
137
- style: {
138
- marginRight: 8
139
- }
140
- })),
141
- key: item.id
142
- }, /*#__PURE__*/_react.default.createElement("div", {
143
- className: "padding-bottom-32"
144
- }, /*#__PURE__*/_react.default.createElement("div", {
145
- className: "padding-bottom-4"
146
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
147
- className: "type-b2-400",
148
- color: "primary-content"
149
- }, "Spare part price (without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
150
- prefix: "\u20B9",
151
- placeholder: "Enter price without GST",
152
- onChange: e => onFieldChange(item.id, 'price', e.target.value),
153
- onKeyPress: handleKeyPress,
154
- inputMode: "numeric",
155
- pattern: "[0-9]*"
156
- })), /*#__PURE__*/_react.default.createElement("div", {
157
- className: "padding-bottom-32"
158
- }, /*#__PURE__*/_react.default.createElement("div", {
159
- className: "padding-bottom-4"
160
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
161
- className: "type-b2-400",
162
- color: "primary-content"
163
- }, "Discount (Without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
164
- prefix: "\u20B9",
165
- placeholder: "Enter discount",
166
- onChange: e => onFieldChange(item.id, 'discount', e.target.value),
167
- onKeyPress: handleKeyPress,
168
- inputMode: "numeric",
169
- pattern: "[0-9]*"
170
- })), /*#__PURE__*/_react.default.createElement("div", {
171
- className: "padding-bottom-4"
172
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
173
- className: "type-b2-400",
174
- color: "primary-content"
175
- }, "HSN Code")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
176
- placeholder: "HSN Code",
177
- onChange: e => onFieldChange(item.id, 'hsn', e.target.value)
178
- })))))));
189
+ }, "Discount (Without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
190
+ prefix: "\u20B9",
191
+ placeholder: "Enter discount",
192
+ onChange: e => onFieldChange(item.id, 'discount', e.target.value),
193
+ onKeyPress: handleKeyPress,
194
+ inputMode: "numeric",
195
+ pattern: "[0-9]*",
196
+ value: ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.discount) || ''
197
+ })), /*#__PURE__*/_react.default.createElement("div", {
198
+ className: "padding-bottom-4"
199
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
200
+ className: "type-b2-400",
201
+ color: "primary-content"
202
+ }, "HSN Code")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
203
+ placeholder: "HSN Code",
204
+ onChange: e => onFieldChange(item.id, 'hsnId', e.target.value),
205
+ value: ((_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.hsnId) || ''
206
+ }));
207
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
208
+ description: "As the device is locked by TVS. Hence no further action can be performed.",
209
+ iconConfig: {
210
+ icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
211
+ color: "negative",
212
+ size: 24,
213
+ icon: _ReportProblemOutlined.default
214
+ }),
215
+ position: 'left'
216
+ }
217
+ })))));
179
218
  }
180
219
  AddSparePartCollapseWidget.propTypes = {
181
220
  items: _propTypes.default.array.isRequired,
182
221
  onSubmit: _propTypes.default.func.isRequired,
183
222
  onClose: _propTypes.default.func.isRequired,
184
- open: _propTypes.default.bool.isRequired
223
+ open: _propTypes.default.bool.isRequired,
224
+ selectedItems: _propTypes.default.array.isRequired
185
225
  };
186
226
  var _default = exports.default = AddSparePartCollapseWidget;
package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js CHANGED
@@ -8,13 +8,22 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _antd = require("antd");
10
10
  var _icons = require("@ant-design/icons");
11
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
13
+ var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
14
+ var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
15
+ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
16
+ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
17
+ var _templateObject;
11
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
20
  const {
13
21
  Panel
14
22
  } = _antd.Collapse;
15
23
  const {
16
24
  Text
17
- } = _antd.Typography;
25
+ } = _Typography.default;
26
+ const StyledContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n .text-only-size{\n justify-content: left;\n }\n"])));
18
27
  function SparePartsCollapseWidget(_ref) {
19
28
  let {
20
29
  data,
@@ -25,9 +34,18 @@ function SparePartsCollapseWidget(_ref) {
25
34
  style: {
26
35
  display: 'flex',
27
36
  justifyContent: 'space-between',
28
- alignItems: 'center'
37
+ gap: '16px'
29
38
  }
30
- }, /*#__PURE__*/_react.default.createElement(Text, null, item.label), /*#__PURE__*/_react.default.createElement(Text, null, item.value)));
39
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
40
+ className: "type-b2-400",
41
+ color: "primary-content"
42
+ }, item.label), /*#__PURE__*/_react.default.createElement(_Typography.default, {
43
+ className: "type-button-500",
44
+ color: "primary-content",
45
+ style: {
46
+ whiteSpace: 'nowrap'
47
+ }
48
+ }, item.value)));
31
49
  const handleKeyDown = (e, index) => {
32
50
  if (e.key === 'Enter' || e.key === ' ') {
33
51
  // Handling Enter or Space key
@@ -38,24 +56,37 @@ function SparePartsCollapseWidget(_ref) {
38
56
  return /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
39
57
  accordion: true
40
58
  }, data.map((panel, index) => /*#__PURE__*/_react.default.createElement(Panel, {
41
- header: panel.title,
59
+ header: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
60
+ className: "type-t2-700",
61
+ color: "primary-content"
62
+ }, panel.title), /*#__PURE__*/_react.default.createElement("div", {
63
+ className: "padding-top-4"
64
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
65
+ className: "type-b2-400",
66
+ color: "secondary-content"
67
+ }), "Hello")),
42
68
  key: panel.id,
69
+ className: "ascCollapse",
43
70
  extra: /*#__PURE__*/_react.default.createElement("div", {
44
71
  onClick: e => e.stopPropagation(),
45
72
  onKeyDown: e => handleKeyDown(e, index),
46
73
  role: "button",
47
74
  tabIndex: 0
48
- }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
49
- icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null),
75
+ }, /*#__PURE__*/_react.default.createElement("div", {
76
+ className: "gappingIcons"
77
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
78
+ icon: _Edit.default,
79
+ color: "primary",
80
+ size: 24,
81
+ type: "text"
82
+ }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
83
+ icon: _DeleteForever.default,
84
+ color: "negative",
85
+ size: 24,
50
86
  onClick: () => onDelete(panel),
51
87
  type: "text"
52
- }))
53
- }, /*#__PURE__*/_react.default.createElement("div", {
54
- style: {
55
- paddingLeft: 24,
56
- paddingRight: 24
57
- }
58
- }, generateItemRows(panel.items, index)))));
88
+ })))
89
+ }, /*#__PURE__*/_react.default.createElement(StyledContainer, null, generateItemRows(panel.items, index)))));
59
90
  }
60
91
  SparePartsCollapseWidget.propTypes = {
61
92
  data: _propTypes.default.array.isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.198",
3
+ "version": "0.18.199",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",