admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP on invoice enter modal.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-26 17:28:45 -08:00
parent 7d79bb2689
commit afeaeca1a1
8 changed files with 418 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
View File

@@ -1,7 +1,18 @@
import { Modal, Form, Input, Switch, DatePicker, AutoComplete } from "antd";
import {
AutoComplete,
Button,
DatePicker,
Form,
Input,
InputNumber,
Modal,
Switch,
Row,
Col
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ResetForm from "../form-items-formatted/reset-form-item.component";
import InvoiceEnterModalTableComponent from "./invoice-enter-modal.table.component";
export default function InvoiceEnterModalComponent({
visible,
@@ -10,12 +21,15 @@ export default function InvoiceEnterModalComponent({
handleSubmit,
form,
handleRoAutoComplete,
handleRoSelect,
roAutoCompleteOptions,
handleVendorAutoComplete,
vendorAutoCompleteOptions
vendorAutoCompleteOptions,
lineData,
linesState
}) {
const { t } = useTranslation();
const { getFieldDecorator, isFieldsTouched, resetFields } = form;
const { getFieldDecorator, resetFields } = form;
console.log("invoice", invoice);
return (
@@ -33,61 +47,70 @@ export default function InvoiceEnterModalComponent({
onCancel={handleCancel}
destroyOnClose
>
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Form onSubmit={handleSubmit} autoComplete={"off"}>
<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.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}
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",
{}
)(<Input name="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", {})(<DatePicker name="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", {
@@ -95,45 +118,24 @@ export default function InvoiceEnterModalComponent({
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>
{
// <Form.Item label={t("joblines.fields.line_desc")}>
// {getFieldDecorator("line_desc", {
// initialValue: jobLine.line_desc
// })(<Input name="line_desc" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.oem_partno")}>
// {getFieldDecorator("oem_partno", {
// initialValue: jobLine.oem_partno
// })(<Input name="oem_partno" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.part_type")}>
// {getFieldDecorator("part_type", {
// initialValue: jobLine.part_type
// })(<Input name="part_type" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.mod_lbr_ty")}>
// {getFieldDecorator("mod_lbr_ty", {
// initialValue: jobLine.mod_lbr_ty
// })(<Input name="mod_lbr_ty" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.op_code_desc")}>
// {getFieldDecorator("op_code_desc", {
// initialValue: jobLine.op_code_desc
// })(<Input name="op_code_desc" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.mod_lb_hrs")}>
// {getFieldDecorator("mod_lb_hrs", {
// initialValue: jobLine.mod_lb_hrs
// })(<InputNumber name="mod_lb_hrs" />)}
// </Form.Item>
// <Form.Item label={t("joblines.fields.act_price")}>
// {getFieldDecorator("act_price", {
// initialValue: jobLine.act_price
// })(<InputNumber name="act_price" />)}
// </Form.Item>
}
<Row>
<Col span={12}>
<InvoiceEnterModalTableComponent
lineData={lineData}
linesState={linesState}
/>
</Col>
<Col span={12}>Table of added items.</Col>
</Row>
</Form>
</Modal>
);