From 6e0d9da2576aa3bc0e2747ba9bf3a6b3f74244c1 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Fri, 28 Feb 2020 15:55:31 -0800 Subject: [PATCH] STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues. --- .../email-overlay/email-overlay.component.jsx | 2 +- .../email-overlay/email-overlay.container.jsx | 14 +- .../invoice-add-line-button.component.jsx | 26 +-- .../invoice-enter-modal.component.jsx | 180 +++++++------- .../invoice-enter-modal.container.jsx | 148 +++++------- .../job-lines-upsert-modal.component.jsx | 71 +++--- .../job-lines-upsert-modal.container.jsx | 110 ++++----- .../jobs-detail-claims.component.jsx | 58 ++--- .../jobs-detail-dates.component.jsx | 117 +++++----- .../jobs-detail-financial.component.jsx | 220 +++++++----------- .../jobs-detail-header.component.jsx | 64 ++--- .../jobs-detail-insurance.component.jsx | 185 ++++++--------- .../owner-detail-form.component.jsx | 120 ++++------ .../owner-detail-form.container.jsx | 48 ++-- .../profile-my/profile-my.component.jsx | 105 +++++---- .../shop-employees-form.component.jsx | 181 +++++++------- .../shop-employees.container.jsx | 102 ++++---- .../sign-in-form/sign-in-form.component.jsx | 143 +++++------- .../vehicle-detail-form.component.jsx | 2 +- .../vehicle-detail-form.container.jsx | 44 ++-- .../vendors-form/vendors-form.container.jsx | 94 ++++---- client/src/graphql/jobs.queries.js | 1 + .../jobs-detail.page.component.jsx | 93 +++++--- .../jobs-detail.page.container.jsx | 56 ++--- 24 files changed, 986 insertions(+), 1198 deletions(-) diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx index 956ae7d69..a2e10aa37 100644 --- a/client/src/components/email-overlay/email-overlay.component.jsx +++ b/client/src/components/email-overlay/email-overlay.component.jsx @@ -3,7 +3,7 @@ import { Input } from "antd"; import CKEditor from "@ckeditor/ckeditor5-react"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; -export default function SendEmailButtonComponent({ +export default function EmailOverlayComponent({ messageOptions, handleConfigChange, handleHtmlChange diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx index 264452077..1730176e4 100644 --- a/client/src/components/email-overlay/email-overlay.container.jsx +++ b/client/src/components/email-overlay/email-overlay.container.jsx @@ -7,7 +7,10 @@ import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { toggleEmailOverlayVisible } from "../../redux/email/email.actions"; -import { selectEmailConfig, selectEmailVisible } from "../../redux/email/email.selectors.js"; +import { + selectEmailConfig, + selectEmailVisible +} from "../../redux/email/email.selectors.js"; import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import EmailOverlayComponent from "./email-overlay.component"; @@ -21,7 +24,11 @@ const mapDispatchToProps = dispatch => ({ export default connect( mapStateToProps, mapDispatchToProps -)(function SendEmail({ emailConfig, modalVisible, toggleEmailOverlayVisible }) { +)(function EmailOveralContainer({ + emailConfig, + modalVisible, + toggleEmailOverlayVisible +}) { const { t } = useTranslation(); const [messageOptions, setMessageOptions] = useState( emailConfig.messageOptions @@ -88,7 +95,8 @@ export default connect( visible={modalVisible} width={"80%"} onOk={handleOk} - onCancel={() => toggleEmailOverlayVisible()}> + onCancel={() => toggleEmailOverlayVisible()} + > - - {getFieldDecorator("line_desc", { - initialValue: jobLine.line_desc - })()} + + - - {getFieldDecorator("oem_partno", { - initialValue: jobLine.oem_partno - })()} + + - - {getFieldDecorator("retail", { initialValue: jobLine.act_price })( - - )} + + - - {getFieldDecorator("actual", { - initialValue: jobLine.act_price * (discount ? 1 - discount : 1) - })()} + + - {} DISC: {discount} diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx index 5c1620fb2..125486e30 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx @@ -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 ( - -
+ +
- - {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") - } - ] - })( - - )} + + - - {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") - } - ] - })( - - )} + +
- - {getFieldDecorator("invoice_number", { - rules: [ - { required: true, message: t("general.validation.required") } - ] - })()} + + - - {getFieldDecorator("date", { - rules: [ - { required: true, message: t("general.validation.required") } - ] - })()} + + - - {getFieldDecorator("is_credit_memo", { - initialValue: false, - valuePropName: "checked" - })()} + + - - {getFieldDecorator("total", { - rules: [ - { required: true, message: t("general.validation.required") } - ] - })()} + +
@@ -140,7 +148,7 @@ export default function InvoiceEnterModalComponent({ Table of added items. ); - -
+ {" "} + ); } diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx index e43da0f00..689b63fbb 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx @@ -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 ( { 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); diff --git a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx index aa87ea5f4..6e0909cb4 100644 --- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx +++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx @@ -1,19 +1,20 @@ -import { Modal, Form, Input, InputNumber } from "antd"; -import React from "react"; +import { Form, Input, InputNumber, Modal } from "antd"; +import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import ResetForm from "../form-items-formatted/reset-form-item.component"; export default function JobLinesUpsertModalComponent({ visible, jobLine, - handleOk, handleCancel, - handleSubmit, - form + handleFinish }) { const { t } = useTranslation(); - const { getFieldDecorator, isFieldsTouched, resetFields } = form; + const [form] = Form.useForm(); + useEffect(() => { + form.resetFields(); + }, [visible, form]); + console.log("jobLine", jobLine); return ( - {isFieldsTouched() ? : null} -
- - {getFieldDecorator("line_desc", { - initialValue: jobLine.line_desc - })()} + + + - - {getFieldDecorator("oem_partno", { - initialValue: jobLine.oem_partno - })()} + + - - {getFieldDecorator("part_type", { - initialValue: jobLine.part_type - })()} + + - - {getFieldDecorator("mod_lbr_ty", { - initialValue: jobLine.mod_lbr_ty - })()} + + - - {getFieldDecorator("op_code_desc", { - initialValue: jobLine.op_code_desc - })()} + + - - {getFieldDecorator("mod_lb_hrs", { - initialValue: jobLine.mod_lb_hrs - })()} + + - - {getFieldDecorator("act_price", { - initialValue: jobLine.act_price - })()} + +
diff --git a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx index fa1b732db..eb3fdc369 100644 --- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx +++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx @@ -1,13 +1,10 @@ -import { Form, notification } from "antd"; +import { notification } from "antd"; import React from "react"; import { useMutation } from "react-apollo"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { - INSERT_NEW_JOB_LINE, - UPDATE_JOB_LINE -} from "../../graphql/jobs-lines.queries"; +import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries"; import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { selectJobLineEditModal } from "../../redux/modals/modals.selectors"; import JobLinesUpdsertModal from "./job-lines-upsert-modal.component"; @@ -21,70 +18,56 @@ const mapDispatchToProps = dispatch => ({ function JobLinesUpsertModalContainer({ jobLineEditModal, - toggleModalVisible, - form + toggleModalVisible }) { const { t } = useTranslation(); const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE); const [updateJobLine] = useMutation(UPDATE_JOB_LINE); - const handleSubmit = e => { - e.preventDefault(); - - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("joblines.errors.validation"), - description: err.message - }); - } - if (!err) { - 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 - }) - }); - }); + const handleFinish = values => { + 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 = () => { @@ -95,9 +78,8 @@ function JobLinesUpsertModalContainer({ ); } @@ -105,6 +87,4 @@ function JobLinesUpsertModalContainer({ export default connect( mapStateToProps, mapDispatchToProps -)( - Form.create({ name: "JobsDetailPageContainer" })(JobLinesUpsertModalContainer) -); +)(JobLinesUpsertModalContainer); diff --git a/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx b/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx index 1c8323b4f..0e5078cb3 100644 --- a/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx +++ b/client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx @@ -1,24 +1,17 @@ import { Form, Input, Switch } from "antd"; -import React, { useContext } from "react"; +import React from "react"; import { useTranslation } from "react-i18next"; -import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context"; export default function JobsDetailClaims({ job }) { - const form = useContext(JobDetailFormContext); - const { getFieldDecorator } = form; const { t } = useTranslation(); return (
- - {getFieldDecorator("csr", { - initialValue: job.csr - })()} + + - - {getFieldDecorator("loss_desc", { - initialValue: job.loss_desc - })()} + + TODO How to handle different taxes and marking them as exempt? { @@ -28,36 +21,27 @@ export default function JobsDetailClaims({ job }) { // })()} // } - - {getFieldDecorator("po_number", { - initialValue: job.po_number - })()} + + - - {getFieldDecorator("unit_number", { - initialValue: job.unit_number - })()} + + - - {getFieldDecorator("special_coverage_policy", { - initialValue: job.special_coverage_policy, - valuePropName: "checked" - })()} + + - - {getFieldDecorator("kmin", { - initialValue: job.kmin - })()} + + - - {getFieldDecorator("kmout", { - initialValue: job.kmout - })()} + + - - {getFieldDecorator("referral_source", { - initialValue: job.referral_source - })()} + +
); diff --git a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx index f33f6652e..e2c033f05 100644 --- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx +++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx @@ -1,89 +1,78 @@ import { DatePicker, Form } from "antd"; -import moment from "moment"; -import React, { useContext } from "react"; +import React from "react"; import { useTranslation } from "react-i18next"; -import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context"; export default function JobsDetailDatesComponent({ job }) { - const form = useContext(JobDetailFormContext); - const { getFieldDecorator } = form; const { t } = useTranslation(); + // initialValue: job.loss_date ? moment(job.loss_date) : null + // initialValue: job.date_estimated ? moment(job.date_estimated) : null + // initialValue: job.date_open ? moment(job.date_open) : null + // initialValue: job.date_scheduled ? moment(job.date_scheduled) : null + // initialValue: job.scheduled_in ? moment(job.scheduled_in) : null + // initialValue: job.actual_in ? moment(job.actual_in) : null + // initialValue: job.scheduled_completion ? moment(job.scheduled_completion) : null + // initialValue: job.actual_completion ? moment(job.actual_completion) : null + // initialValue: job.scheduled_delivery ? moment(job.scheduled_delivery) : null + // initialValue: job.actual_delivery ? moment(job.actual_delivery) : null + // initialValue: job.date_invoiced ? moment(job.date_invoiced) : null + // initialValue: job.date_closed ? moment(job.date_closed) : null + // initialValue: job.date_exported ? moment(job.date_exported) : null + return (
- - {getFieldDecorator("loss_date", { - initialValue: job.loss_date ? moment(job.loss_date) : null - })()} + + - DAMAGE {JSON.stringify(job.area_of_damage)} CAA # seems not correct based on field mapping Class seems not correct based on field mapping - - {getFieldDecorator("date_estimated", { - initialValue: job.date_estimated ? moment(job.date_estimated) : null - })()} + + - - {getFieldDecorator("date_open", { - initialValue: job.date_open ? moment(job.date_open) : null - })()} + + - - {getFieldDecorator("date_scheduled", { - initialValue: job.date_scheduled ? moment(job.date_scheduled) : null - })()} + + - - {getFieldDecorator("scheduled_in", { - initialValue: job.scheduled_in ? moment(job.scheduled_in) : null - })()} + + - - {getFieldDecorator("actual_in", { - initialValue: job.actual_in ? moment(job.actual_in) : null - })()} + + - - {getFieldDecorator("scheduled_completion", { - initialValue: job.scheduled_completion - ? moment(job.scheduled_completion) - : null - })()} + + - - {getFieldDecorator("actual_completion", { - initialValue: job.actual_completion - ? moment(job.actual_completion) - : null - })()} + + - - {getFieldDecorator("scheduled_delivery", { - initialValue: job.scheduled_delivery - ? moment(job.scheduled_delivery) - : null - })()} + + - - {getFieldDecorator("actual_delivery", { - initialValue: job.actual_delivery ? moment(job.actual_delivery) : null - })()} + + - - {getFieldDecorator("date_invoiced", { - initialValue: job.date_invoiced ? moment(job.date_invoiced) : null - })()} + + - - {getFieldDecorator("date_closed", { - initialValue: job.date_closed ? moment(job.date_closed) : null - })()} + + - - {getFieldDecorator("date_exported", { - initialValue: job.date_exported ? moment(job.date_exported) : null - })()} + +
); diff --git a/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx b/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx index 0bd919542..bbba78b5e 100644 --- a/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx +++ b/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx @@ -1,181 +1,131 @@ -import { Form, Input, InputNumber, Divider } from "antd"; -import React, { useContext } from "react"; +import { Divider, Form, Input, InputNumber } from "antd"; +import React from "react"; import { useTranslation } from "react-i18next"; -import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context"; export default function JobsDetailFinancials({ job }) { - const form = useContext(JobDetailFormContext); - const { getFieldDecorator } = form; const { t } = useTranslation(); return (
- - {getFieldDecorator("ded_amt", { - initialValue: job.ded_amt - })()} + + - - {getFieldDecorator("ded_status", { - initialValue: job.ded_status - })()} + + - - {getFieldDecorator("depreciation_taxes", { - initialValue: job.depreciation_taxes - })()} + + TODO This is equivalent of GST payable. - - {getFieldDecorator("federal_tax_payable", { - initialValue: job.federal_tax_payable - })()} + + TODO equivalent of other customer amount - - {getFieldDecorator("other_amount_payable", { - initialValue: job.other_amount_payable - })()} + + - - {getFieldDecorator("towing_payable", { - initialValue: job.towing_payable - })()} + + - - {getFieldDecorator("storage_payable", { - initialValue: job.storage_payable - })()} + + - - {getFieldDecorator("adjustment_bottom_line", { - initialValue: job.adjustment_bottom_line - })()} + + Totals Table - - {getFieldDecorator("labor_rate_desc", { - initialValue: job.labor_rate_desc - })()} + + - - {getFieldDecorator("rate_lab", { - initialValue: job.rate_lab - })()} + + - - {getFieldDecorator("rate_lad", { - initialValue: job.rate_lad - })()} + + - - {getFieldDecorator("rate_lae", { - initialValue: job.rate_lae - })()} + + - - {getFieldDecorator("rate_lar", { - initialValue: job.rate_lar - })()} + + - - {getFieldDecorator("rate_las", { - initialValue: job.rate_las - })()} + + - - {getFieldDecorator("rate_laf", { - initialValue: job.rate_laf - })()} + + - - {getFieldDecorator("rate_lam", { - initialValue: job.rate_lam - })()} + + - - {getFieldDecorator("rate_lag", { - initialValue: job.rate_lag - })()} + + Note //TODO Remove ATP rate? - - {getFieldDecorator("rate_atp", { - initialValue: job.rate_atp - })()} + + - - {getFieldDecorator("rate_lau", { - initialValue: job.rate_lau - })()} + + - - {getFieldDecorator("rate_la1", { - initialValue: job.rate_la1 - })()} + + - - {getFieldDecorator("rate_la2", { - initialValue: job.rate_la2 - })()} + + - - {getFieldDecorator("rate_la3", { - initialValue: job.rate_la3 - })()} + + - - {getFieldDecorator("rate_la4", { - initialValue: job.rate_la4 - })()} + + - - {getFieldDecorator("rate_mapa", { - initialValue: job.rate_mapa - })()} + + - - {getFieldDecorator("rate_mash", { - initialValue: job.rate_mash - })()} + + - - {getFieldDecorator("rate_mahw", { - initialValue: job.rate_mahw - })()} + + - - {getFieldDecorator("rate_ma2s", { - initialValue: job.rate_ma2s - })()} + + - - {getFieldDecorator("rate_ma3s", { - initialValue: job.rate_ma3s - })()} + + - - {getFieldDecorator("rate_mabl", { - initialValue: job.rate_mabl - })()} + + - - {getFieldDecorator("rate_macs", { - initialValue: job.rate_macs - })()} + + - - {getFieldDecorator("rate_matd", { - initialValue: job.rate_matd - })()} + + + + + - -{getFieldDecorator("rate_laa", { -initialValue: job.rate_laa -})()} - -
); } diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx index e5eba130f..3d485359f 100644 --- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx +++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx @@ -5,13 +5,12 @@ import { Checkbox, Descriptions, Dropdown, - Menu, notification, PageHeader, Tag } from "antd"; -import {DownCircleFilled} from "@ant-design/icons"; +import { DownCircleFilled } from "@ant-design/icons"; import React from "react"; import { useTranslation } from "react-i18next"; import Moment from "react-moment"; @@ -34,7 +33,7 @@ export default connect( job, mutationConvertJob, refetch, - handleSubmit, + handleFinish, scheduleModalState, bodyshop, updateJobStatus @@ -44,7 +43,7 @@ export default connect( const tombstoneTitle = (
- + {`${t("jobs.fields.ro_number")} ${ job.ro_number ? job.ro_number : t("general.labels.na") }`} @@ -55,7 +54,8 @@ export default connect( { updateJobStatus(e.key); - }}> + }} + > {bodyshop.md_ro_statuses.statuses.map(item => ( {item} ))} @@ -63,23 +63,24 @@ export default connect( ); const menuExtra = [ - + , - + , , - ]; @@ -111,9 +109,9 @@ export default connect( title={tombstoneTitle} //subTitle={tombstoneSubtitle} tags={ - - {job.status ? {job.status} : null} - + + {job.status ? {job.status} : null} + {job.owner ? ( {`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln || @@ -123,7 +121,7 @@ export default connect( t("jobs.errors.noowner") )} - + {job.vehicle ? ( {job.vehicle.v_model_yr || t("general.labels.na")}{" "} @@ -137,27 +135,37 @@ export default connect( } - extra={menuExtra}> - - + extra={menuExtra} + > + + {job.clm_total} - + ##NO BINDING YET## - + - + {job.scheduled_completion ? ( - {job.scheduled_completion} + {job.scheduled_completion} ) : null} - + {job.service_car} diff --git a/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx b/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx index 4dc589973..4c79e57db 100644 --- a/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx +++ b/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx @@ -1,146 +1,115 @@ -import { Divider, Form, Input, DatePicker } from "antd"; -import React, { useContext } from "react"; +import { DatePicker, Divider, Form, Input } from "antd"; +import React from "react"; import { useTranslation } from "react-i18next"; -import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context"; import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemPhone from "../form-items-formatted/phone-form-item.component"; -import moment from "moment"; -export default function JobsDetailInsurance({ job }) { - const form = useContext(JobDetailFormContext); - const { getFieldDecorator, getFieldValue } = form; +export default function JobsDetailInsurance({ job, form }) { + const { getFieldValue } = form; const { t } = useTranslation(); - + //initialValue: job.loss_date ? moment(job.loss_date) : null + console.log("job", job); return (
- - {getFieldDecorator("ins_co_id", { - initialValue: job.ins_co_id - })()} + + - - {getFieldDecorator("policy_no", { - initialValue: job.policy_no - })()} + + - - {getFieldDecorator("clm_no", { - initialValue: job.clm_no - })()} + + - - {getFieldDecorator("regie_number", { - initialValue: job.regie_number - })()} + + TODO: missing KOL field??? - - {getFieldDecorator("loss_date", { - initialValue: job.loss_date ? moment(job.loss_date) : null - })()} + + DAMAGE {JSON.stringify(job.area_of_damage)} CAA # seems not correct based on field mapping Class seems not correct based on field mapping - - {getFieldDecorator("ins_co_nm", { - initialValue: job.ins_co_nm - })()} + + - - {getFieldDecorator("ins_addr1", { - initialValue: job.ins_addr1 - })()} + + - - {getFieldDecorator("ins_city", { - initialValue: job.ins_city - })()} + + - - {getFieldDecorator("ins_ct_ln", { - initialValue: job.ins_ct_ln - })()} + + - - {getFieldDecorator("ins_ct_fn", { - initialValue: job.ins_ct_fn - })()} + + - - {getFieldDecorator("ins_ph1", { - initialValue: job.ins_ph1 - })()} + + - - {getFieldDecorator("ins_ea", { - initialValue: job.ins_ea, - rules: [ - { - type: "email", - message: "This is not a valid email address." - } - ] - })()} + + Appraiser Info - - {getFieldDecorator("est_co_nm", { - initialValue: job.est_co_nm - })()} + + - - {getFieldDecorator("est_ct_fn", { - initialValue: job.est_ct_fn - })()} + + - - {getFieldDecorator("est_ct_ln", { - initialValue: job.est_ct_ln - })()} + + TODO: Field is pay date but title is inspection date. Likely incorrect? - - {getFieldDecorator("pay_date", { - initialValue: job.pay_date - })()} + + - - {getFieldDecorator("est_ph1", { - initialValue: job.est_ph1 - })()} + + - - {getFieldDecorator("est_ea", { - initialValue: job.est_ea, - rules: [ - { - type: "email", - message: "This is not a valid email address." - } - ] - })()} + + - - {getFieldDecorator("selling_dealer", { - initialValue: job.selling_dealer - })()} + + - - {getFieldDecorator("servicing_dealer", { - initialValue: job.servicing_dealer - })()} + + - - {getFieldDecorator("selling_dealer_contact", { - initialValue: job.selling_dealer_contact - })()} + + - - {getFieldDecorator("servicing_dealer_contact", { - initialValue: job.servicing_dealer_contact - })()} + + TODO: Adding servicing/selling dealer contact info?
diff --git a/client/src/components/owner-detail-form/owner-detail-form.component.jsx b/client/src/components/owner-detail-form/owner-detail-form.component.jsx index 37eb40385..9dc1477a8 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx @@ -5,99 +5,77 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemPhone from "../form-items-formatted/phone-form-item.component"; import ResetForm from "../form-items-formatted/reset-form-item.component"; -export default function OwnerDetailFormComponent({ form, owner }) { +export default function OwnerDetailFormComponent({ form }) { const { t } = useTranslation(); - const { - isFieldsTouched, - resetFields, - getFieldDecorator, - getFieldValue - } = form; - + const { isFieldsTouched, resetFields, getFieldValue } = form; + console.log("isFieldsTouched([], true)", isFieldsTouched([], true)); return (
- {isFieldsTouched() ? : null} + + {isFieldsTouched([], true) ? ( + + ) : null} - - {getFieldDecorator("ownr_ln", { - initialValue: owner.ownr_ln - })()} + + - - {getFieldDecorator("ownr_fn", { - initialValue: owner.ownr_fn - })()} + + - - {getFieldDecorator("allow_text_message", { - initialValue: owner.allow_text_message, - valuePropName: "checked" - })()} + + - - {getFieldDecorator("ownr_addr1", { - initialValue: owner.ownr_addr1 - })()} + + - - {getFieldDecorator("ownr_addr2", { - initialValue: owner.ownr_addr2 - })()} + + - - {getFieldDecorator("ownr_city", { - initialValue: owner.ownr_city - })()} + + - - {getFieldDecorator("ownr_ctry", { - initialValue: owner.ownr_ctry - })()} + + - {" "} - - {getFieldDecorator("ownr_ea", { - initialValue: owner.ownr_ea, - rules: [ - { - type: "email", - message: "This is not a valid email address." - } - ] - })( - - )} + + - - {getFieldDecorator("ownr_ph1", { - initialValue: owner.ownr_ph1 - })()} + + - - {getFieldDecorator("ownr_st", { - initialValue: owner.ownr_st - })()} + + - - {getFieldDecorator("ownr_zip", { - initialValue: owner.ownr_zip - })()} + + - - {getFieldDecorator("preferred_contact", { - initialValue: owner.preferred_contact - })()} + + - - {getFieldDecorator("ownr_title", { - initialValue: owner.ownr_title - })()} + + diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx index 375e78d4a..cdd923392 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx @@ -5,42 +5,34 @@ import { useTranslation } from "react-i18next"; import { UPDATE_OWNER } from "../../graphql/owners.queries"; import OwnerDetailFormComponent from "./owner-detail-form.component"; -function OwnerDetailFormContainer({ form, owner, refetch }) { +function OwnerDetailFormContainer({ owner, refetch }) { const { t } = useTranslation(); + const [form] = Form.useForm(); const [updateOwner] = useMutation(UPDATE_OWNER); - const handleSubmit = e => { - e.preventDefault(); - - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("owners.errors.validationtitle"), - description: t("owners.errors.validation") - }); - } - if (!err) { - updateOwner({ - variables: { ownerId: owner.id, owner: values } - }).then(r => { - notification["success"]({ - message: t("owners.successes.save") - }); - //TODO Better way to reset the field decorators? - if (refetch) refetch().then(); - form.resetFields(); - }); - } + const handleFinish = values => { + updateOwner({ + variables: { ownerId: owner.id, owner: values } + }).then(r => { + notification["success"]({ + message: t("owners.successes.save") + }); + //TODO Better way to reset the field decorators? + if (refetch) refetch().then(); + // resetFields(); }); }; return ( -
- + + ); } -export default Form.create({ name: "OwnerDetailFormContainer" })( - OwnerDetailFormContainer -); +export default OwnerDetailFormContainer; diff --git a/client/src/components/profile-my/profile-my.component.jsx b/client/src/components/profile-my/profile-my.component.jsx index 1269ec3ec..4b388eab0 100644 --- a/client/src/components/profile-my/profile-my.component.jsx +++ b/client/src/components/profile-my/profile-my.component.jsx @@ -16,61 +16,60 @@ const mapDispatchToProps = dispatch => ({ export default connect( mapStateToProps, mapDispatchToProps -)( - Form.create({ name: "ProfileMyComponentForm" })(function ProfileMyComponent({ - currentUser, - form, - updateUserDetails - }) { - const { isFieldsTouched, resetFields, getFieldDecorator } = form; - const { t } = useTranslation(); +)(function ProfileMyComponent({ + currentUser, - const handleSubmit = e => { - e.preventDefault(); + updateUserDetails +}) { + const [form] = Form.useForm(); + const { isFieldsTouched, resetFields } = form; + const { t } = useTranslation(); - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("jobs.errors.validationtitle"), - description: t("jobs.errors.validation") - }); - } - if (!err) { - console.log("values", values); - updateUserDetails({ - displayName: values.displayname, - photoURL: values.photoURL - }); - } - }); - }; + const handleSubmit = e => { + e.preventDefault(); - return ( -
- {isFieldsTouched() ? : null} + form.validateFieldsAndScroll((err, values) => { + if (err) { + notification["error"]({ + message: t("jobs.errors.validationtitle"), + description: t("jobs.errors.validation") + }); + } + if (!err) { + console.log("values", values); + updateUserDetails({ + displayName: values.displayname, + photoURL: values.photoURL + }); + } + }); + }; -
- - {getFieldDecorator("displayname", { - initialValue: currentUser.displayName, - rules: [{ required: true }] - })()} - - - {getFieldDecorator("photoURL", { - initialValue: currentUser.photoURL - })()} - + return ( +
+ {isFieldsTouched() ? : null} - - -
- ); - }) -); +
+ + ) + + + + + + +
+
+ ); +}); diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx index cf7abfab7..1d99fc545 100644 --- a/client/src/components/shop-employees/shop-employees-form.component.jsx +++ b/client/src/components/shop-employees/shop-employees-form.component.jsx @@ -6,106 +6,125 @@ import { useTranslation } from "react-i18next"; export default function ShopEmployeesFormComponent({ form, selectedEmployee, - handleSubmit + handleFinish }) { const { t } = useTranslation(); - const { getFieldDecorator } = form; + if (!selectedEmployee) return "//TODO No employee selected."; + return ( -
+ - - {getFieldDecorator("first_name", { - initialValue: selectedEmployee.first_name, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + - - {getFieldDecorator("last_name", { - initialValue: selectedEmployee.last_name, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + - - {getFieldDecorator("employee_number", { - initialValue: selectedEmployee.employee_number, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + - - {getFieldDecorator("active", { - initialValue: selectedEmployee.active, - valuePropName: "checked" - })()} + + - - {getFieldDecorator("flat_rate", { - initialValue: selectedEmployee.flat_rate, - valuePropName: "checked" - })()} + + - - {getFieldDecorator("hire_date", { - initialValue: selectedEmployee.hire_date - ? moment(selectedEmployee.hire_date) - : null, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + - - {getFieldDecorator("termination_date", { - initialValue: selectedEmployee.termination_date - ? moment(selectedEmployee.termination_date) - : null - })()} + + { //TODO Make this a picklist. } - - {getFieldDecorator("cost_center", { - initialValue: selectedEmployee.cost_center, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + - - {getFieldDecorator("base_rate", { - initialValue: selectedEmployee.base_rate, - rules: [ - { - required: true, - message: t("general.validation.required") - } - ] - })()} + + ); diff --git a/client/src/components/shop-employees/shop-employees.container.jsx b/client/src/components/shop-employees/shop-employees.container.jsx index fc65e05cb..4a5e37fa8 100644 --- a/client/src/components/shop-employees/shop-employees.container.jsx +++ b/client/src/components/shop-employees/shop-employees.container.jsx @@ -4,17 +4,22 @@ import { useMutation, useQuery } from "react-apollo"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { DELETE_EMPLOYEE, INSERT_EMPLOYEES, QUERY_EMPLOYEES, UPDATE_EMPLOYEE } from "../../graphql/employees.queries"; +import { + DELETE_EMPLOYEE, + INSERT_EMPLOYEES, + QUERY_EMPLOYEES, + UPDATE_EMPLOYEE +} from "../../graphql/employees.queries"; import { selectBodyshop } from "../../redux/user/user.selectors"; import AlertComponent from "../alert/alert.component"; import ShopEmployeeComponent from "./shop-employees.component"; - const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -function ShopEmployeesContainer({ form, bodyshop }) { +function ShopEmployeesContainer({ bodyshop }) { + const [form] = Form.useForm(); const { t } = useTranslation(); const employeeState = useState(null); const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, { @@ -41,63 +46,49 @@ function ShopEmployeesContainer({ form, bodyshop }) { }); }; - const handleSubmit = e => { - e.preventDefault(); - - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("employees.errors.validationtitle"), - description: t("employees.errors.validation") - }); - } - if (!err) { - if (employeeState[0].id) { - //Update a record. - updateEmployee({ - variables: { id: employeeState[0].id, employee: values } - }) - .then(r => { - notification["success"]({ - message: t("employees.successes.save") - }); - //TODO Better way to reset the field decorators? - employeeState[1](null); - refetch().then(r => form.resetFields()); - }) - .catch(error => { - notification["error"]({ - message: t("employees.errors.save") - }); - }); - } else { - //New record, insert it. - insertEmployees({ - variables: { employees: [{ ...values, shopid: bodyshop.id }] } - }).then(r => { - notification["success"]({ - message: t("employees.successes.save") - }); - //TODO Better way to reset the field decorators? - employeeState[1](null); - refetch() - .then(r => form.resetFields()) - .catch(error => { - notification["error"]({ - message: t("employees.errors.save") - }); - }); + const handleFinish = values => { + if (employeeState[0].id) { + //Update a record. + updateEmployee({ + variables: { id: employeeState[0].id, employee: values } + }) + .then(r => { + notification["success"]({ + message: t("employees.successes.save") }); - } - } - }); + //TODO Better way to reset the field decorators? + employeeState[1](null); + refetch().then(r => form.resetFields()); + }) + .catch(error => { + notification["error"]({ + message: t("employees.errors.save") + }); + }); + } else { + //New record, insert it. + insertEmployees({ + variables: { employees: [{ ...values, shopid: bodyshop.id }] } + }).then(r => { + notification["success"]({ + message: t("employees.successes.save") + }); + //TODO Better way to reset the field decorators? + employeeState[1](null); + refetch().catch(error => { + notification["error"]({ + message: t("employees.errors.save") + }); + }); + }); + } }; if (error) return ; return ( ); } -export default connect( - mapStateToProps, - null -)(Form.create({ name: "ShopEmployeesContainer" })(ShopEmployeesContainer)); +export default connect(mapStateToProps, null)(ShopEmployeesContainer); diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx index 1b55d700c..5dc7075d0 100644 --- a/client/src/components/sign-in-form/sign-in-form.component.jsx +++ b/client/src/components/sign-in-form/sign-in-form.component.jsx @@ -26,89 +26,74 @@ const mapDispatchToProps = dispatch => ({ export default connect( mapStateToProps, mapDispatchToProps -)( - Form.create({ name: "sign_in" })(function SignInComponent({ - form, - emailSignInStart, - currentUser, - signInError - }) { - const apolloClient = useApolloClient(); +)(function SignInComponent({ emailSignInStart, currentUser, signInError }) { + const apolloClient = useApolloClient(); - const handleSubmit = e => { - e.preventDefault(); - form.validateFields(async (err, values) => { - if (!err) { - const { email, password } = values; - emailSignInStart(email, password); - //Try to do the login using a saga here. + const handleFinish = values => { + console.log("Login"); + + const { email, password } = values; + emailSignInStart(email, password); + //Try to do the login using a saga here. + }; + + if (currentUser.authorized === true) { + apolloClient + .mutate({ + mutation: UPSERT_USER, + variables: { + authEmail: currentUser.email, + authToken: currentUser.uid } + }) + .then() + .catch(error => { + console.log("User login upsert error.", error); }); - }; + } - if (currentUser.authorized === true) { - apolloClient - .mutate({ - mutation: UPSERT_USER, - variables: { - authEmail: currentUser.email, - authToken: currentUser.uid - } - }) - .then() - .catch(error => { - console.log("User login upsert error.", error); - }); - } + return ( +
+ {currentUser.authorized === true ? : null} - const { getFieldDecorator } = form; - return ( -
- {currentUser.authorized === true ? : null} + Bodyshop.app - Bodyshop.app +
+ + + + + } + type="password" + placeholder="Password" + /> + - - - {getFieldDecorator("email", { - rules: [ - { - type: "email", - message: "Please enter a valid email." - }, - { - required: true, - message: "Please your email." - } - ] - })()} - - - {getFieldDecorator("password", { - rules: [ - { required: true, message: "Please enter your password." } - ] - })( - } - type="password" - placeholder="Password" - /> - )} - - -
Forgot password
- - - {signInError ?
{signInError.message}
: null} -
-
- ); - }) -); +
Forgot password
+ + + {signInError ?
{signInError.message}
: null} + +
+ ); +}); diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx index 8f5a369c7..2cfcaad00 100644 --- a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx +++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx @@ -1,4 +1,4 @@ -import { Button, DatePicker, Form, Input, Row, Col } from "antd"; +import { Button, Col, DatePicker, Form, Input, Row } from "antd"; import moment from "moment"; import React from "react"; import { useTranslation } from "react-i18next"; diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx index ec0a7fb70..3e49762ac 100644 --- a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx +++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx @@ -5,42 +5,30 @@ import VehicleDetailFormComponent from "./vehicle-detail-form.component"; import { useTranslation } from "react-i18next"; import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries"; -function VehicleDetailFormContainer({ form, vehicle, refetch }) { +function VehicleDetailFormContainer({ vehicle, refetch }) { const { t } = useTranslation(); const [updateVehicle] = useMutation(UPDATE_VEHICLE); + const [form] = Form.useForm(); + const { resetFields } = form; - const handleSubmit = e => { - e.preventDefault(); - - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("vehicles.errors.validationtitle"), - description: t("vehicles.errors.validation") - }); - } - if (!err) { - updateVehicle({ - variables: { vehId: vehicle.id, vehicle: values } - }).then(r => { - notification["success"]({ - message: t("vehicles.successes.save") - }); - //TODO Better way to reset the field decorators? - if (refetch) refetch().then(); - form.resetFields(); - }); - } + const handleFinish = values => { + updateVehicle({ + variables: { vehId: vehicle.id, vehicle: values } + }).then(r => { + notification["success"]({ + message: t("vehicles.successes.save") + }); + //TODO Better way to reset the field decorators? + if (refetch) refetch().then(); + resetFields(); }); }; return ( -
- + + ); } -export default Form.create({ name: "VehicleDetailFormContainer" })( - VehicleDetailFormContainer -); +export default VehicleDetailFormContainer; diff --git a/client/src/components/vendors-form/vendors-form.container.jsx b/client/src/components/vendors-form/vendors-form.container.jsx index 04a034dcc..f2911b937 100644 --- a/client/src/components/vendors-form/vendors-form.container.jsx +++ b/client/src/components/vendors-form/vendors-form.container.jsx @@ -19,7 +19,8 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop }); -function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) { +function VendorsFormContainer({ vendorId, refetch, bodyshop }) { + const [form] = Form.useForm(); const { t } = useTranslation(); const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, { variables: { id: vendorId }, @@ -45,61 +46,49 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) { }); }; - const handleSubmit = e => { - e.preventDefault(); - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("jobs.errors.validationtitle"), - description: t("jobs.errors.validation") + const handleFinish = values => { + delete values.keys; + if (vendorId) { + //It's a vendor to update. + updateVendor({ + variables: { id: vendorId, vendor: values } + }) + .then(r => { + notification["success"]({ + message: t("vendors.successes.saved") + }); + //TODO Better way to reset the field decorators? + if (refetch) refetch().then(r => form.resetFields()); + }) + .catch(error => { + notification["error"]({ + message: t("vendors.errors.saving") + }); }); - } - if (!err) { - console.log("Received values of form: ", values); - delete values.keys; - if (vendorId) { - //It's a vendor to update. - updateVendor({ - variables: { id: vendorId, vendor: values } - }) - .then(r => { - notification["success"]({ - message: t("vendors.successes.saved") - }); - //TODO Better way to reset the field decorators? - if (refetch) refetch().then(r => form.resetFields()); - }) - .catch(error => { - notification["error"]({ - message: t("vendors.errors.saving") - }); - }); - } else { - //It's a new vendor to insert. - insertvendor({ - variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] } - }) - .then(r => { - notification["success"]({ - message: t("vendors.successes.saved") - }); - //TODO Better way to reset the field decorators? - if (refetch) refetch().then(r => form.resetFields()); - }) - .catch(error => { - notification["error"]({ - message: t("vendors.errors.saving") - }); - }); - } - } - }); + } else { + //It's a new vendor to insert. + insertvendor({ + variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] } + }) + .then(r => { + notification["success"]({ + message: t("vendors.successes.saved") + }); + //TODO Better way to reset the field decorators? + if (refetch) refetch().then(r => form.resetFields()); + }) + .catch(error => { + notification["error"]({ + message: t("vendors.errors.saving") + }); + }); + } }; if (loading) return ; if (error) return ; return ( -
+ {data ? ( ); } -export default connect( - mapStateToProps, - null -)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer)); +export default connect(mapStateToProps, null)(VendorsFormContainer); diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js index f402d6278..a707d5b38 100644 --- a/client/src/graphql/jobs.queries.js +++ b/client/src/graphql/jobs.queries.js @@ -94,6 +94,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql` export const GET_JOB_BY_PK = gql` query GET_JOB_BY_PK($id: uuid!) { jobs_by_pk(id: $id) { + updated_at service_car csr loss_desc diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx index 04c47631e..9518a6822 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx +++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx @@ -1,21 +1,9 @@ -import { Form, Tabs } from "antd"; -import { - BarsOutlined, - DollarCircleOutlined, - ToolFilled, - CalendarFilled, - FileImageFilled -} from "@ant-design/icons"; -import Icon from "@ant-design/icons"; -import React, { lazy, Suspense, useContext } from "react"; +import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons"; +import { Form, notification, Tabs } from "antd"; +import moment from "moment"; +import React, { lazy, Suspense } from "react"; import { useTranslation } from "react-i18next"; -import { - FaHardHat, - FaInfo, - FaRegStickyNote, - FaShieldAlt -} from "react-icons/fa"; -import ResetForm from "../../components/form-items-formatted/reset-form-item.component"; +import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa"; //import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container"; //import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component"; //import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component"; @@ -28,8 +16,6 @@ import ResetForm from "../../components/form-items-formatted/reset-form-item.com //import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container"; //import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; -import JobDetailFormContext from "./jobs-detail.page.context"; -import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container"; const JobsLinesContainer = lazy(() => import("../../components/job-detail-lines/job-lines.container") @@ -70,6 +56,9 @@ const JobLineUpsertModalContainer = lazy(() => const EnterInvoiceModalContainer = lazy(() => import("../../components/invoice-enter-modal/invoice-enter-modal.container") ); +const JobsDetailPliContainer = lazy(() => + import("../../components/jobs-detail-pli/jobs-detail-pli.container") +); export default function JobsDetailPage({ job, @@ -81,8 +70,7 @@ export default function JobsDetailPage({ updateJobStatus }) { const { t } = useTranslation(); - - const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext); + const [form] = Form.useForm(); const formItemLayout = { labelCol: { @@ -95,6 +83,17 @@ export default function JobsDetailPage({ } }; + const handleFinish = values => { + mutationUpdateJob({ + variables: { jobId: job.id, job: values } + }).then(r => { + notification["success"]({ + message: t("jobs.successes.savetitle") + }); + refetch().then(r => form.resetFields()); + }); + }; + return ( } @@ -108,7 +107,45 @@ export default function JobsDetailPage({ - + console.log("a,b", a, b)} + name="JobDetailForm" + onFinish={handleFinish} + {...formItemLayout} + autoComplete={"off"} + initialValues={{ + ...job, + loss_date: job.loss_date ? moment(job.loss_date) : null, + date_estimated: job.date_estimated + ? moment(job.date_estimated) + : null, + date_open: job.date_open ? moment(job.date_open) : null, + date_scheduled: job.date_scheduled + ? moment(job.date_scheduled) + : null, + scheduled_in: job.scheduled_in ? moment(job.scheduled_in) : null, + actual_in: job.actual_in ? moment(job.actual_in) : null, + scheduled_completion: job.scheduled_completion + ? moment(job.scheduled_completion) + : null, + actual_completion: job.actual_completion + ? moment(job.actual_completion) + : null, + scheduled_delivery: job.scheduled_delivery + ? moment(job.scheduled_delivery) + : null, + actual_delivery: job.actual_delivery + ? moment(job.actual_delivery) + : null, + date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null, + date_closed: job.date_closed ? moment(job.date_closed) : null, + date_exported: job.date_exported ? moment(job.date_exported) : null + }} + > + + + - - {isFieldsTouched() ? : null} - - @@ -142,9 +175,8 @@ export default function JobsDetailPage({ } key="insurance" > - + - @@ -156,7 +188,6 @@ export default function JobsDetailPage({ > - @@ -168,7 +199,6 @@ export default function JobsDetailPage({ > - @@ -180,7 +210,6 @@ export default function JobsDetailPage({ > - @@ -192,7 +221,6 @@ export default function JobsDetailPage({ > Labor - @@ -204,7 +232,6 @@ export default function JobsDetailPage({ > } - diff --git a/client/src/pages/jobs-detail/jobs-detail.page.container.jsx b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx index b564728a0..9c526c4df 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.container.jsx +++ b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx @@ -1,4 +1,4 @@ -import { Form, notification } from "antd"; +import { notification } from "antd"; import React, { useEffect, useState } from "react"; import { useMutation, useQuery } from "react-apollo"; import { useTranslation } from "react-i18next"; @@ -11,9 +11,8 @@ import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries"; import JobsDetailPage from "./jobs-detail.page.component"; -import JobDetailFormContext from "./jobs-detail.page.context"; -function JobsDetailPageContainer({ match, form }) { +function JobsDetailPageContainer({ match }) { const { jobId } = match.params; const { t } = useTranslation(); @@ -52,49 +51,20 @@ function JobsDetailPageContainer({ match, form }) { }); }, [loading, data, t, error]); - const handleSubmit = e => { - e.preventDefault(); - - form.validateFieldsAndScroll((err, values) => { - if (err) { - notification["error"]({ - message: t("jobs.errors.validationtitle"), - description: t("jobs.errors.validation") - }); - } - if (!err) { - mutationUpdateJob({ - variables: { jobId: data.jobs_by_pk.id, job: values } - }).then(r => { - notification["success"]({ - message: t("jobs.successes.savetitle") - }); - refetch().then(r => form.resetFields()); - }); - } - }); - }; - if (loading) return ; - if (error) return ; + if (error) return ; return data.jobs_by_pk ? ( - - - + ) : ( - + ); } -export default Form.create({ name: "JobsDetailPageContainer" })( - JobsDetailPageContainer -); +export default JobsDetailPageContainer;