Added vendor and RO search to enter invoice modal.

client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

@@ -1,4 +1,4 @@
-import { Modal, Form, Input, InputNumber } from "antd";
+import { Modal, Form, Input, Switch, DatePicker, AutoComplete } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ResetForm from "../form-items-formatted/reset-form-item.component";
@@ -8,26 +8,95 @@ export default function InvoiceEnterModalComponent({
   invoice,
   handleCancel,
   handleSubmit,
-  form
+  form,
+  handleRoAutoComplete,
+  roAutoCompleteOptions,
+  handleVendorAutoComplete,
+  vendorAutoCompleteOptions
 }) {
   const { t } = useTranslation();
   const { getFieldDecorator, isFieldsTouched, resetFields } = form;
 
+  console.log("invoice", invoice);
   return (
     <Modal
       title={
         invoice && invoice.id
-          ? t("invoice.labels.edit")
-          : t("invoice.labels.new")
+          ? t("invoices.labels.edit")
+          : t("invoices.labels.new")
       }
+      width={"90%"}
       visible={visible}
       okText={t("general.labels.save")}
       onOk={handleSubmit}
+      okButtonProps={{ htmlType: "submit" }}
       onCancel={handleCancel}
+      destroyOnClose
     >
       {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
       <Form onSubmit={handleSubmit} autoComplete={"off"}>
-        {JSON.stringify(invoice)}
+        <Form.Item label={t("invoices.fields.ro_number")}>
+          {getFieldDecorator("jobid", {
+            rules: [
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidro")
+              }
+            ]
+          })(
+            <AutoComplete
+              name="ro_number"
+              dataSource={roAutoCompleteOptions}
+              onSearch={handleRoAutoComplete}
+              autoFocus
+              backfill={true}
+              onBlur={props => {
+                console.log("props", props);
+              }}
+            />
+          )}
+        </Form.Item>
+        <Form.Item label={t("invoices.fields.vendor")}>
+          {getFieldDecorator("vendorid", {
+            rules: [
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidvendor")
+              }
+            ]
+          })(
+            <AutoComplete
+              name="vendor_id"
+              dataSource={vendorAutoCompleteOptions}
+              onSearch={handleVendorAutoComplete}
+              backfill
+            />
+          )}
+        </Form.Item>
+        <div style={{ display: "flex" }}>
+          <Form.Item label={t("invoices.fields.invoice_number")}>
+            {getFieldDecorator(
+              "invoice_number",
+              {}
+            )(<Input name="invoice_number" />)}
+          </Form.Item>
+          <Form.Item label={t("invoices.fields.date")}>
+            {getFieldDecorator("date", {})(<DatePicker name="date" />)}
+          </Form.Item>
+          <Form.Item label={t("invoices.fields.is_credit_memo")}>
+            {getFieldDecorator("is_credit_memo", {
+              initialValue: false,
+              valuePropName: "checked"
+            })(<Switch name="is_credit_memo" />)}
+          </Form.Item>
+        </div>
+
         {
           //     <Form.Item label={t("joblines.fields.line_desc")}>
           //     {getFieldDecorator("line_desc", {