STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

This commit is contained in:
Patrick Fic
2020-02-28 15:55:31 -08:00
parent 93be1417be
commit 6e0d9da257
24 changed files with 986 additions and 1198 deletions

View File

@@ -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);