oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js

@@ -0,0 +1,461 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.parse-float.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _styles = require("../oa-widget-spare-part/styles");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _styles2 = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+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; }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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); }
+const {
+  Panel
+} = _antd.Collapse;
+
+/**
+ * A collapsible widget for adding spare parts.
+ *
+ * This component allows users to add spare parts, including specifying the cost, discount, and HSN code for each part.
+ * It provides functionality for searching, selecting, and submitting spare parts.
+ * The component also handles notifications and validations for the added spare part information.
+ */
+function AddSparePartCollapseWidget(_ref) {
+  let {
+    items,
+    onSubmit,
+    onClose,
+    open,
+    selectedItems,
+    disableDiscount,
+    disableHsn
+  } = _ref;
+  const [filteredItems, setFilteredItems] = (0, _react.useState)([]);
+  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(new Set());
+  const [formValues, setFormValues] = (0, _react.useState)({});
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [activeKey, setActiveKey] = (0, _react.useState)([]);
+  const notificationRef = (0, _react.useRef)(null);
+  const itemRefs = (0, _react.useRef)({});
+  const openNotification = parameters => {
+    var _notificationRef$curr;
+    return notificationRef === null || notificationRef === void 0 || (_notificationRef$curr = notificationRef.current) === null || _notificationRef$curr === void 0 ? void 0 : _notificationRef$curr.openNotification(parameters);
+  };
+  (0, _react.useEffect)(() => {
+    const initialFormValues = {};
+    const initialSelectedItems = new Set();
+    selectedItems.forEach(item => {
+      initialFormValues[item.scopeId] = {
+        cost: item.cost !== null && item.cost !== undefined ? item.cost : '',
+        discount: item.discount !== null && item.discount !== undefined ? item.discount : '',
+        hsnId: item.hsnId || ''
+      };
+      initialSelectedItems.add(item.scopeId);
+    });
+    setFormValues(initialFormValues);
+    setSelectedItemIds(initialSelectedItems);
+    setActiveKey(Array.from(initialSelectedItems).map(String)); // Set initially selected items as active keys
+  }, [selectedItems]);
+  (0, _react.useEffect)(() => {
+    var _selectedItems$map$fi, _items$filter;
+    const sortedItems = [...((_selectedItems$map$fi = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => items && items.find(i => i.id === item.scopeId)).filter(Boolean)) !== null && _selectedItems$map$fi !== void 0 ? _selectedItems$map$fi : []), ...((_items$filter = items === null || items === void 0 ? void 0 : items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))) !== null && _items$filter !== void 0 ? _items$filter : [])];
+    setFilteredItems(sortedItems);
+  }, [items, selectedItems]);
+
+  /**
+   * Handles changes in the search input.
+   *
+   * When the search input value is cleared, it resets the filtered items to the original list of items.
+   * When the search input value is not empty, it filters the items based on the search value.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event - The event triggered by changing the search input value.
+   */
+  const handleSearchChange = event => {
+    const {
+      value
+    } = event.target;
+    setSearchValue(value);
+    if (!value) {
+      const sortedItems = [...selectedItems.map(selectedItem => items && items.find(i => i.id === selectedItem.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
+      setFilteredItems(sortedItems);
+    } else {
+      const val = items.filter(item => item.name.toLowerCase().includes(value.toLowerCase()));
+      setFilteredItems(val);
+    }
+  };
+
+  /**
+   * Handles item selection/deselection.
+   *
+   * When an item is selected, it adds the item to the set of selected items and expands only the newly selected item's panel.
+   * When an item is deselected, it removes the item from the set of selected items and collapses all panels.
+   *
+   * It also clears the search value on item selection.
+   *
+   * @param {number} itemId - The ID of the item to be selected/deselected.
+   */
+  const onSelectItem = itemId => {
+    const newSelectedItems = new Set(selectedItemIds);
+    if (newSelectedItems.has(itemId)) {
+      newSelectedItems.delete(itemId);
+      setActiveKey([]); // Collapse all panels when an item is deselected
+    } else {
+      newSelectedItems.add(itemId);
+      setActiveKey([String(itemId)]); // Expand only the newly selected item's panel
+    }
+    setSelectedItemIds(newSelectedItems);
+    setSearchValue(''); // Clear search value on item selection
+
+    const sortedItems = [...selectedItems.map(selectedItem => items && items.find(i => i.id === selectedItem.scopeId)).filter(Boolean), ...items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))];
+    setFilteredItems(sortedItems);
+    setTimeout(() => {
+      if (itemRefs.current[itemId]) {
+        itemRefs.current[itemId].scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }, 0);
+  };
+
+  /**
+   * Checks if a given value is numeric.
+   *
+   * This function verifies if the provided value is a numeric string,
+   * optionally allowing two decimal places. An empty string is also
+   * considered valid, allowing for clearing inputs.
+   *
+   * @param {string} value - The value to check.
+   * @returns {boolean} - Returns true if the value is numeric or empty, otherwise false.
+   */
+
+  const isNumeric = value => {
+    if (value === '') return true;
+    return /^\d+(\.\d{0,2})?$/.test(value);
+  };
+
+  /**
+   * Handles changes in the fields of the items.
+   *
+   * When a field of an item is changed, it updates the form values with the new value.
+   * It also checks if the entered value is numeric and if not, it displays an error notification.
+   *
+   * @param {number} itemId - The ID of the item to update.
+   * @param {string} field - The name of the field to update.
+   * @param {string|number} value - The new value of the field.
+   */
+  const onFieldChange = (itemId, field, value) => {
+    if (field === 'hsnId' || (field === 'discount' || field === 'cost') && isNumeric(value)) {
+      if (field === 'discount') {
+        var _formValues$itemId;
+        if (parseInt((_formValues$itemId = formValues[itemId]) === null || _formValues$itemId === void 0 ? void 0 : _formValues$itemId.cost, 10) < parseInt(value, 10)) {
+          openNotification({
+            title: 'Error',
+            description: 'Discount cannot be greater than Cost.',
+            type: 'failure'
+          });
+          return;
+        }
+      }
+      const updatedFormValues = _objectSpread(_objectSpread({}, formValues), {}, {
+        [itemId]: _objectSpread(_objectSpread({}, formValues[itemId]), {}, {
+          [field]: value
+        })
+      });
+      setFormValues(updatedFormValues);
+    } else {
+      // openNotification({
+      //   title: 'Error',
+      //   description: 'Please enter only numeric values 146.',
+      //   type: 'failure',
+      // });
+    }
+  };
+
+  /**
+   * Handles key presses on numeric fields.
+   *
+   * When a non-numeric key is pressed, it prevents the default action and displays an error notification.
+   *
+   * @param {React.KeyboardEvent} event - The event triggered by the key press.
+   */
+  const handleKeyPress = event => {
+    if (!/[\d.]/.test(event.key) || event.key === '.' && event.target.value.includes('.')) {
+      event.preventDefault();
+      openNotification({
+        title: 'Error',
+        description: 'Please enter only numeric values.',
+        type: 'failure'
+      });
+    }
+  };
+  const handlePaste = e => {
+    var _e$clipboardData$getD, _e$clipboardData;
+    const pastedData = (_e$clipboardData$getD = e === null || e === void 0 || (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 || (_e$clipboardData = _e$clipboardData.getData('Text')) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.trim()) !== null && _e$clipboardData$getD !== void 0 ? _e$clipboardData$getD : '';
+
+    // Allow only numbers with optional decimal part (up to 2 digits after .)
+    const validDecimalPattern = /^\d+(\.\d{0,2})?$/;
+    if (!validDecimalPattern.test(pastedData)) {
+      e.preventDefault();
+      openNotification({
+        title: 'Invalid Paste',
+        description: 'Only numeric values with up to 2 decimal places are allowed.',
+        type: 'failure'
+      });
+    }
+  };
+
+  /**
+   * Handles the submission of the spare parts information.
+   *
+   * First, it checks if at least one scope is selected. If not, it displays an error notification.
+   * Then, it constructs the data to submit by combining the selected scope IDs with the corresponding form values.
+   * It also checks if all mandatory fields are filled. If not, it displays an error notification.
+   * Finally, it calls the passed onSubmit function with the data to submit.
+   */
+  const handleSubmission = () => {
+    if (selectedItemIds.size === 0) {
+      openNotification({
+        title: 'Error',
+        description: 'Please select at least one scope.',
+        type: 'failure'
+      });
+      return;
+    }
+    const toSubmit = Array.from(selectedItemIds).reduce((acc, itemId) => {
+      acc.push(_objectSpread({
+        scopeId: itemId
+      }, formValues[itemId]));
+      return acc;
+    }, []);
+    const allFieldsFilled = toSubmit.every(item => {
+      const mandatoryFields = ['cost', 'discount', 'hsnId'].filter(field => {
+        if (disableDiscount && field === 'discount') return false;
+        if (disableHsn && field === 'hsnId') return false;
+        return true;
+      });
+      return mandatoryFields.every(field => item[field] !== '' && item[field] !== null && item[field] !== undefined);
+    });
+    if (!allFieldsFilled) {
+      openNotification({
+        title: 'Error',
+        description: 'Details missing! Please check and complete all spare part information',
+        type: 'failure'
+      });
+      return;
+    }
+    toSubmit.every(item => {
+      const cost = parseFloat(item.cost);
+      const discount = parseFloat(item.discount);
+      const field = items.find(f => f.id === item.scopeId);
+      const fieldName = field ? field.name : "ScopeId ".concat(item.scopeId);
+      if (discount > cost) {
+        openNotification({
+          title: 'Error',
+          description: "Discount cannot be greater than cost for ".concat(fieldName),
+          type: 'failure'
+        });
+        return false;
+      }
+      return true;
+    });
+    onSubmit(toSubmit);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    buttonConfig: [{
+      callback: handleSubmission,
+      label: 'Save',
+      type: 'primary',
+      htmlType: 'submit'
+    }],
+    onClose: onClose,
+    open: open,
+    title: "Add spare part",
+    width: 480,
+    className: "paddingBot"
+  }, /*#__PURE__*/_react.default.createElement(_styles.MainStyles, null, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    placeholder: "Search spare part",
+    onChange: handleSearchChange,
+    value: searchValue,
+    style: {
+      marginBottom: 16
+    },
+    prefix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)
+  }), /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    accordion: true,
+    activeKey: activeKey,
+    onChange: setActiveKey
+  }, filteredItems.map(item => {
+    var _formValues$item$id, _formValues$item$id2, _formValues$item$id3, _formValues$item$id4, _formValues$item$id5, _formValues$item$id6, _formValues$item$id7;
+    const isSelected = selectedItemIds.has(item.id);
+    const selectedItem = selectedItems && selectedItems.find(i => i.scopeId === item.id);
+    const isItemDisabled = selectedItem ? selectedItem.disableSelected : false;
+    return /*#__PURE__*/_react.default.createElement(Panel, {
+      header: /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        className: "type-t2-700",
+        color: "primary-content"
+      }, item.name), /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+        onClick: e => {
+          e.stopPropagation(); // Prevent event propagation to the panel
+          onSelectItem(item.id);
+        },
+        checked: isSelected,
+        disabled: isItemDisabled,
+        style: {
+          marginRight: 8
+        },
+        tabIndex: 0 // Make checkbox focusable
+        ,
+        role: "button" // Add ARIA role
+        ,
+        onKeyDown: e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault(); // Prevent default scroll behavior
+            onSelectItem(item.id);
+          }
+        }
+      })),
+      key: item.id,
+      ref: el => {
+        itemRefs.current[item.id] = el;
+      } // Store a ref to the panel
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-bottom-32",
+      onClick: e => e.stopPropagation(),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-bottom-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "primary-content"
+    }, "Spare part price (without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+      prefix: "\u20B9",
+      placeholder: "Enter price without GST",
+      onChange: e => onFieldChange(item.id, 'cost', e.target.value),
+      onKeyPress: handleKeyPress,
+      onPaste: handlePaste,
+      inputMode: "numeric",
+      pattern: "[0-9]+(\\.[0-9]{0,2})?",
+      value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) !== null && ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.cost) !== undefined ? (_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.cost : '',
+      disabled: isItemDisabled
+    })), !disableDiscount && /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-bottom-32",
+      onClick: e => e.stopPropagation(),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-bottom-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "primary-content"
+    }, "Discount (Without GST)")), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+      prefix: "\u20B9",
+      placeholder: "Enter discount",
+      onChange: e => onFieldChange(item.id, 'discount', e.target.value),
+      onKeyPress: handleKeyPress,
+      onPaste: handlePaste,
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      value: ((_formValues$item$id4 = formValues[item.id]) === null || _formValues$item$id4 === void 0 ? void 0 : _formValues$item$id4.discount) !== null && ((_formValues$item$id5 = formValues[item.id]) === null || _formValues$item$id5 === void 0 ? void 0 : _formValues$item$id5.discount) !== undefined ? (_formValues$item$id6 = formValues[item.id]) === null || _formValues$item$id6 === void 0 ? void 0 : _formValues$item$id6.discount : '',
+      disabled: isItemDisabled
+    })), !disableHsn && /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-bottom-4",
+      onClick: e => e.stopPropagation(),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "primary-content"
+    }, "HSN Code")), !disableHsn && /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+      placeholder: "HSN Code",
+      onChange: e => onFieldChange(item.id, 'hsnId', e.target.value),
+      value: ((_formValues$item$id7 = formValues[item.id]) === null || _formValues$item$id7 === void 0 ? void 0 : _formValues$item$id7.hsnId) || '',
+      disabled: isItemDisabled || disableHsn,
+      onClick: e => e.stopPropagation()
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_styles2.StickyInfo, null, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    description: "Note: 18% GST will be levied on the added spare part price.",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "warning",
+        size: 24,
+        icon: _InfoOutlined.default
+      }),
+      position: 'left'
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  })));
+}
+AddSparePartCollapseWidget.defaultProps = {
+  disableDiscount: false,
+  disableHsn: false
+};
+AddSparePartCollapseWidget.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.number.isRequired,
+    name: _propTypes.default.string.isRequired
+  })).isRequired,
+  onSubmit: _propTypes.default.func.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  open: _propTypes.default.bool.isRequired,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    scopeId: _propTypes.default.number.isRequired,
+    cost: _propTypes.default.string,
+    discount: _propTypes.default.string,
+    hsnId: _propTypes.default.string,
+    disableSelected: _propTypes.default.bool
+  })).isRequired,
+  disableDiscount: _propTypes.default.bool,
+  disableHsn: _propTypes.default.bool
+};
+var _default = exports.default = AddSparePartCollapseWidget;