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

import {
  AutoComplete,
  Button,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Switch,
  Row,
  Col
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import InvoiceEnterModalTableComponent from "./invoice-enter-modal.table.component";

export default function InvoiceEnterModalComponent({
  visible,
  invoice,
  handleCancel,
  handleSubmit,
  form,
  handleRoAutoComplete,
  handleRoSelect,
  roAutoCompleteOptions,
  handleVendorAutoComplete,
  handleVendorSelect,
  vendorAutoCompleteOptions,
  lineData,
  linesState,
  vendor
}) {
  const { t } = useTranslation();
  const { getFieldDecorator, resetFields } = form;
  
  return (
    <Modal
      title={
        invoice && invoice.id
          ? 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
    >
      <Form onSubmit={handleSubmit} autoComplete={"off"}>
        <div style={{ display: "flex" }}>
          <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
                style={{ width: "300px" }}
                onSelect={handleRoSelect}
                backfill
              />
            )}
          </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}
                onSelect={handleVendorSelect}
                style={{ width: "300px" }}
                onSearch={handleVendorAutoComplete}
                backfill
              />
            )}
          </Form.Item>
          <Button onClick={() => resetFields()}>
            {t("general.actions.reset")}
          </Button>
        </div>
        <div style={{ display: "flex" }}>
          <Form.Item label={t("invoices.fields.invoice_number")}>
            {getFieldDecorator("invoice_number", {
              rules: [
                { required: true, message: t("general.validation.required") }
              ]
            })(<Input name="invoice_number" />)}
          </Form.Item>
          <Form.Item label={t("invoices.fields.date")}>
            {getFieldDecorator("date", {
              rules: [
                { required: true, message: t("general.validation.required") }
              ]
            })(<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>
          <Form.Item label={t("invoices.fields.total")}>
            {getFieldDecorator("total", {
              rules: [
                { required: true, message: t("general.validation.required") }
              ]
            })(<InputNumber precision={2} min={0} name="total" />)}
          </Form.Item>
        </div>

        <Row>
          <Col span={12}>
            <InvoiceEnterModalTableComponent
              lineData={lineData}
              linesState={linesState}
              form={form}
              vendor={vendor}
            />
          </Col>
          <Col span={12}>Table of added items.</Col>
        </Row>
      </Form>
    </Modal>
  );
}