Correct diplay and posting of invoices on general + modal. Refactor requiured. BOD-63

client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx

@@ -0,0 +1,66 @@
+import { Select, Row, Col, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+
+//To be used as a form element only.
+const { Option } = Select;
+const InvoiceLineSearchSelect = ({
+  value,
+  onChange,
+  options,
+  onBlur,
+  onSelect,
+}) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      showSearch
+      autoFocus
+      value={option}
+      style={{
+        width: 450,
+      }}
+      onChange={setOption}
+      optionFilterProp="children"
+      onBlur={onBlur}
+      onSelect={onSelect}
+    >
+      <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
+        {t("invoicelines.labels.other")}
+      </Select.Option>
+      {options
+        ? options.map((item) => (
+            <Option
+              key={item.id}
+              value={item.id}
+              cost={item.act_price ? item.act_price : 0}
+              part_type={item.part_type}
+              line_desc={item.line_desc}
+            >
+              <Row justify="center" align="middle">
+                <Col span={12}>{item.line_desc}</Col>
+                <Col span={8}>
+                  <Tag color="blue">{item.oem_partno}</Tag>
+                </Col>
+                <Col span={4}>
+                  <Tag color="green">
+                    <CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
+                  </Tag>
+                </Col>
+              </Row>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default InvoiceLineSearchSelect;