Refactored to use invoice form for modal + detail edit page. BOD-634

client/src/components/invoice-form/invoice-form.component.jsx

@@ -0,0 +1,131 @@
+import { DatePicker, Form, Input, Switch } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import InvoiceFormLines from "./invoice-form.lines.component";
+
+export default function InvoiceFormComponent({
+  form,
+  roAutoCompleteOptions,
+  vendorAutoCompleteOptions,
+  lineData,
+  responsibilityCenters,
+  loadLines,
+  hideVendor,
+}) {
+  const { t } = useTranslation();
+
+  const [discount, setDiscount] = useState(0);
+
+  const handleVendorSelect = (props, opt) => {
+    setDiscount(opt.discount);
+  };
+
+  return (
+    <div>
+      <div style={{ display: "flex" }}>
+        <Form.Item
+          name="jobid"
+          label={t("invoices.fields.ro_number")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <JobSearchSelect
+            options={roAutoCompleteOptions}
+            onBlur={() => {
+              if (form.getFieldValue("jobid") !== null) {
+                loadLines({ variables: { id: form.getFieldValue("jobid") } });
+              }
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.vendor")}
+          name="vendorid"
+          style={{ display: hideVendor ? "none" : null }}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <VendorSearchSelect
+            options={vendorAutoCompleteOptions}
+            onSelect={handleVendorSelect}
+          />
+        </Form.Item>
+      </div>
+      <div style={{ display: "flex" }}>
+        <Form.Item
+          label={t("invoices.fields.invoice_number")}
+          name="invoice_number"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.date")}
+          name="date"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <DatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.is_credit_memo")}
+          name="is_credit_memo"
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.total")}
+          name="total"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <CurrencyInput />
+        </Form.Item>
+      </div>
+      <InvoiceFormLines
+        lineData={lineData}
+        discount={discount}
+        form={form}
+        responsibilityCenters={responsibilityCenters}
+      />
+
+      <Form.Item name="upload" label="Upload">
+        <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
+      </Form.Item>
+
+      <button
+        onClick={() => {
+          console.log(form.getFieldsValue());
+        }}
+      >
+        Get Field Values
+      </button>
+    </div>
+  );
+}