STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.
This commit is contained in:
Patrick Fic
@@ -18,8 +18,8 @@ export default function InvoiceEnterModalComponent({
|
||||
visible,
|
||||
invoice,
|
||||
handleCancel,
|
||||
handleSubmit,
|
||||
form,
|
||||
handleFinish,
|
||||
|
||||
handleRoAutoComplete,
|
||||
handleRoSelect,
|
||||
roAutoCompleteOptions,
|
||||
@@ -31,101 +31,109 @@ export default function InvoiceEnterModalComponent({
|
||||
vendor
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { getFieldDecorator, resetFields } = form;
|
||||
const [form] = Form.useForm();
|
||||
const { resetFields } = form;
|
||||
//Default Values to be set in form.
|
||||
// {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
|
||||
// initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
|
||||
|
||||
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"}>
|
||||
<Form onFinish={handleFinish} autoComplete={"off"} form={form}>
|
||||
<Modal
|
||||
title={
|
||||
invoice && invoice.id
|
||||
? t("invoices.labels.edit")
|
||||
: t("invoices.labels.new")
|
||||
}
|
||||
width={"90%"}
|
||||
visible={visible}
|
||||
okText={t("general.labels.save")}
|
||||
onOk={handleFinish}
|
||||
okButtonProps={{ htmlType: "submit" }}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<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
|
||||
name="jobid"
|
||||
label={t("invoices.fields.ro_number")}
|
||||
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
|
||||
options={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
|
||||
label={t("invoices.fields.vendor")}
|
||||
name="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
|
||||
options={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
|
||||
label={t("invoices.fields.invoice_number")}
|
||||
name="invoice_number"
|
||||
rule={[
|
||||
{ required: true, message: t("general.validation.required") }
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("invoices.fields.date")}>
|
||||
{getFieldDecorator("date", {
|
||||
rules: [
|
||||
{ required: true, message: t("general.validation.required") }
|
||||
]
|
||||
})(<DatePicker name="date" />)}
|
||||
<Form.Item
|
||||
label={t("invoices.fields.date")}
|
||||
name="date"
|
||||
rule={[
|
||||
{ required: true, message: t("general.validation.required") }
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</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
|
||||
label={t("invoices.fields.is_credit_memo")}
|
||||
name="is_credit_memo"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</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
|
||||
label={t("invoices.fields.total")}
|
||||
name="total"
|
||||
rule={[
|
||||
{ required: true, message: t("general.validation.required") }
|
||||
]}
|
||||
>
|
||||
<InputNumber precision={2} min={0} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Row>
|
||||
@@ -140,7 +148,7 @@ export default function InvoiceEnterModalComponent({
|
||||
<Col span={12}>Table of added items.</Col>
|
||||
</Row>
|
||||
);
|
||||
</Form>
|
||||
</Modal>
|
||||
</Modal>{" "}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import { Form, notification } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useQuery, useLazyQuery } from "react-apollo";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLazyQuery, useQuery } from "react-apollo";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
|
||||
import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
|
||||
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
|
||||
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
||||
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
|
||||
import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
|
||||
import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
invoiceEnterModal: selectInvoiceEnterModal,
|
||||
@@ -23,10 +21,9 @@ const mapDispatchToProps = dispatch => ({
|
||||
function InvoiceEnterModalContainer({
|
||||
invoiceEnterModal,
|
||||
toggleModalVisible,
|
||||
form,
|
||||
bodyshop
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
// const { t } = useTranslation();
|
||||
const linesState = useState([]);
|
||||
const roSearchState = useState({ text: "", selectedId: null });
|
||||
const [roSearch, setRoSearch] = roSearchState;
|
||||
@@ -67,100 +64,81 @@ function InvoiceEnterModalContainer({
|
||||
if (roSearch.selectedId) {
|
||||
if (!called) loadLines();
|
||||
}
|
||||
const handleRoSelect = v => {
|
||||
setRoSearch({ ...roSearch, selectedId: v });
|
||||
const handleRoSelect = (value, obj) => {
|
||||
setRoSearch({ ...roSearch, selectedId: obj.id });
|
||||
};
|
||||
|
||||
const handleVendorSelect = v => {
|
||||
setVendorSearch({ ...vendorSearch, selectedId: v });
|
||||
const handleVendorSelect = (value, obj) => {
|
||||
setVendorSearch({ ...vendorSearch, selectedId: obj.id });
|
||||
};
|
||||
|
||||
const handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
form.validateFieldsAndScroll((err, values) => {
|
||||
if (err) {
|
||||
notification["error"]({
|
||||
message: t("invoices.errors.validation"),
|
||||
description: err.message
|
||||
});
|
||||
}
|
||||
if (!err) {
|
||||
console.log("values", values);
|
||||
alert("Closing this modal.");
|
||||
toggleModalVisible();
|
||||
// if (!jobLineEditModal.context.id) {
|
||||
// insertJobLine({
|
||||
// variables: {
|
||||
// lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
|
||||
// }
|
||||
// })
|
||||
// .then(r => {
|
||||
// if (jobLineEditModal.actions.refetch)
|
||||
// jobLineEditModal.actions.refetch();
|
||||
// toggleModalVisible();
|
||||
// notification["success"]({
|
||||
// message: t("joblines.successes.created")
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// notification["error"]({
|
||||
// message: t("joblines.errors.creating", {
|
||||
// message: error.message
|
||||
// })
|
||||
// });
|
||||
// });
|
||||
// } else {
|
||||
// updateJobLine({
|
||||
// variables: {
|
||||
// lineId: jobLineEditModal.context.id,
|
||||
// line: values
|
||||
// }
|
||||
// })
|
||||
// .then(r => {
|
||||
// notification["success"]({
|
||||
// message: t("joblines.successes.updated")
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// notification["success"]({
|
||||
// message: t("joblines.errors.updating", {
|
||||
// message: error.message
|
||||
// })
|
||||
// });
|
||||
// });
|
||||
// if (jobLineEditModal.actions.refetch)
|
||||
// jobLineEditModal.actions.refetch();
|
||||
// toggleModalVisible();
|
||||
// }
|
||||
}
|
||||
});
|
||||
const handleFinish = values => {
|
||||
alert("Closing this modal.");
|
||||
toggleModalVisible();
|
||||
// if (!jobLineEditModal.context.id) {
|
||||
// insertJobLine({
|
||||
// variables: {
|
||||
// lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
|
||||
// }
|
||||
// })
|
||||
// .then(r => {
|
||||
// if (jobLineEditModal.actions.refetch)
|
||||
// jobLineEditModal.actions.refetch();
|
||||
// toggleModalVisible();
|
||||
// notification["success"]({
|
||||
// message: t("joblines.successes.created")
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// notification["error"]({
|
||||
// message: t("joblines.errors.creating", {
|
||||
// message: error.message
|
||||
// })
|
||||
// });
|
||||
// });
|
||||
// } else {
|
||||
// updateJobLine({
|
||||
// variables: {
|
||||
// lineId: jobLineEditModal.context.id,
|
||||
// line: values
|
||||
// }
|
||||
// })
|
||||
// .then(r => {
|
||||
// notification["success"]({
|
||||
// message: t("joblines.successes.updated")
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// notification["success"]({
|
||||
// message: t("joblines.errors.updating", {
|
||||
// message: error.message
|
||||
// })
|
||||
// });
|
||||
// });
|
||||
// if (jobLineEditModal.actions.refetch)
|
||||
// jobLineEditModal.actions.refetch();
|
||||
// toggleModalVisible();
|
||||
// }
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
toggleModalVisible();
|
||||
};
|
||||
|
||||
console.log(
|
||||
"c",
|
||||
VendorAutoCompleteData?.vendors.filter(
|
||||
v => v.id === vendorSearch.selectedId
|
||||
)
|
||||
);
|
||||
return (
|
||||
<InvoiceEnterModalComponent
|
||||
visible={invoiceEnterModal.visible}
|
||||
invoice={invoiceEnterModal.context}
|
||||
handleSubmit={handleSubmit}
|
||||
handleFinish={handleFinish}
|
||||
handleCancel={handleCancel}
|
||||
form={form}
|
||||
handleRoAutoComplete={handleRoAutoComplete}
|
||||
handleRoSelect={handleRoSelect}
|
||||
roAutoCompleteOptions={
|
||||
RoAutoCompleteData
|
||||
? RoAutoCompleteData.jobs.reduce((acc, value) => {
|
||||
acc.push({
|
||||
value: value.id,
|
||||
text: `${value.ro_number || ""} | ${value.ownr_ln ||
|
||||
id: value.id,
|
||||
value: `${value.ro_number || ""} | ${value.ownr_ln ||
|
||||
""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
|
||||
""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
|
||||
.v_model_desc || ""}`
|
||||
@@ -175,8 +153,8 @@ function InvoiceEnterModalContainer({
|
||||
VendorAutoCompleteData
|
||||
? VendorAutoCompleteData.vendors.reduce((acc, value) => {
|
||||
acc.push({
|
||||
value: value.id,
|
||||
text: `${value.name || ""}`
|
||||
id: value.id,
|
||||
value: `${value.name || ""}`
|
||||
});
|
||||
return acc;
|
||||
}, [])
|
||||
@@ -198,8 +176,4 @@ function InvoiceEnterModalContainer({
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
Form.create({ name: "InvoiceEnterModalContainer" })(
|
||||
InvoiceEnterModalContainer
|
||||
)
|
||||
);
|
||||
)(InvoiceEnterModalContainer);
|
||||
|
||||
Reference in New Issue
Block a user