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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/email-overlay/email-overlay.component.jsx
View File

@@ -3,7 +3,7 @@ import { Input } from "antd";
import CKEditor from "@ckeditor/ckeditor5-react"; import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
export default function SendEmailButtonComponent({ export default function EmailOverlayComponent({
messageOptions, messageOptions,
handleConfigChange, handleConfigChange,
handleHtmlChange handleHtmlChange

14
client/src/components/email-overlay/email-overlay.container.jsx
View File

@@ -7,7 +7,10 @@ import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { toggleEmailOverlayVisible } from "../../redux/email/email.actions"; 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 LoadingSpinner from "../loading-spinner/loading-spinner.component";
import EmailOverlayComponent from "./email-overlay.component"; import EmailOverlayComponent from "./email-overlay.component";
@@ -21,7 +24,11 @@ const mapDispatchToProps = dispatch => ({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(function SendEmail({ emailConfig, modalVisible, toggleEmailOverlayVisible }) { )(function EmailOveralContainer({
emailConfig,
modalVisible,
toggleEmailOverlayVisible
}) {
const { t } = useTranslation(); const { t } = useTranslation();
const [messageOptions, setMessageOptions] = useState( const [messageOptions, setMessageOptions] = useState(
emailConfig.messageOptions emailConfig.messageOptions
@@ -88,7 +95,8 @@ export default connect(
visible={modalVisible} visible={modalVisible}
width={"80%"} width={"80%"}
onOk={handleOk} onOk={handleOk}
onCancel={() => toggleEmailOverlayVisible()}> onCancel={() => toggleEmailOverlayVisible()}
>
<LoadingSpinner loading={loading}> <LoadingSpinner loading={loading}>
<EmailOverlayComponent <EmailOverlayComponent
handleConfigChange={handleConfigChange} handleConfigChange={handleConfigChange}

26
client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx
View File

@@ -12,31 +12,21 @@ export default function InvoiceAddLineButton({
}) { }) {
const [visibility, setVisibility] = useState(false); const [visibility, setVisibility] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const { getFieldDecorator } = form;
const popContent = ( const popContent = (
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Form.Item label={t("joblines.fields.line_desc")}> <Form.Item name="line_desc" label={t("joblines.fields.line_desc")}>
{getFieldDecorator("line_desc", { <Input />
initialValue: jobLine.line_desc
})(<Input name="line_desc" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.oem_partno")}> <Form.Item name="oem_partno" label={t("joblines.fields.oem_partno")}>
{getFieldDecorator("oem_partno", { <Input />
initialValue: jobLine.oem_partno
})(<Input name="oem_partno" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("invoicelines.fields.retail")}> <Form.Item name="retail" label={t("invoicelines.fields.retail")}>
{getFieldDecorator("retail", { initialValue: jobLine.act_price })( <InputNumber precision={2} />
<InputNumber precision={2} name="retail" />
)}
</Form.Item> </Form.Item>
<Form.Item label={t("invoicelines.fields.actual")}> <Form.Item name="actual" label={t("invoicelines.fields.actual")}>
{getFieldDecorator("actual", { <InputNumber precision={2} />
initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
})(<InputNumber precision={2} name="actual" />)}
</Form.Item> </Form.Item>
{}
DISC: {discount} DISC: {discount}
<Button onClick={() => setVisibility(false)}>X</Button> <Button onClick={() => setVisibility(false)}>X</Button>
</div> </div>

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

@@ -18,8 +18,8 @@ export default function InvoiceEnterModalComponent({
visible, visible,
invoice, invoice,
handleCancel, handleCancel,
handleSubmit, handleFinish,
form,
handleRoAutoComplete, handleRoAutoComplete,
handleRoSelect, handleRoSelect,
roAutoCompleteOptions, roAutoCompleteOptions,
@@ -31,101 +31,109 @@ export default function InvoiceEnterModalComponent({
vendor vendor
}) { }) {
const { t } = useTranslation(); 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 ( return (
<Modal <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
title={ <Modal
invoice && invoice.id title={
? t("invoices.labels.edit") invoice && invoice.id
: t("invoices.labels.new") ? t("invoices.labels.edit")
} : t("invoices.labels.new")
width={"90%"} }
visible={visible} width={"90%"}
okText={t("general.labels.save")} visible={visible}
onOk={handleSubmit} okText={t("general.labels.save")}
okButtonProps={{ htmlType: "submit" }} onOk={handleFinish}
onCancel={handleCancel} okButtonProps={{ htmlType: "submit" }}
destroyOnClose onCancel={handleCancel}
> >
<Form onSubmit={handleSubmit} autoComplete={"off"}>
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Form.Item label={t("invoices.fields.ro_number")}> <Form.Item
{getFieldDecorator("jobid", { name="jobid"
rules: [ label={t("invoices.fields.ro_number")}
{ rules={[
required: true, {
pattern: new RegExp( required: true,
"[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}" 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") ),
} message: t("invoices.errors.invalidro")
] }
})( ]}
<AutoComplete >
name="ro_number" <AutoComplete
dataSource={roAutoCompleteOptions} options={roAutoCompleteOptions}
onSearch={handleRoAutoComplete} onSearch={handleRoAutoComplete}
autoFocus autoFocus
style={{ width: "300px" }} style={{ width: "300px" }}
onSelect={handleRoSelect} onSelect={handleRoSelect}
backfill backfill
/> />
)}
</Form.Item> </Form.Item>
<Form.Item label={t("invoices.fields.vendor")}> <Form.Item
{getFieldDecorator("vendorid", { label={t("invoices.fields.vendor")}
rules: [ name="vendorid"
{ rules={[
required: true, {
pattern: new RegExp( required: true,
"[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}" 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") ),
} message: t("invoices.errors.invalidvendor")
] }
})( ]}
<AutoComplete >
name="vendor_id" <AutoComplete
dataSource={vendorAutoCompleteOptions} options={vendorAutoCompleteOptions}
onSelect={handleVendorSelect} onSelect={handleVendorSelect}
style={{ width: "300px" }} style={{ width: "300px" }}
onSearch={handleVendorAutoComplete} onSearch={handleVendorAutoComplete}
backfill backfill
/> />
)}
</Form.Item> </Form.Item>
<Button onClick={() => resetFields()}> <Button onClick={() => resetFields()}>
{t("general.actions.reset")} {t("general.actions.reset")}
</Button> </Button>
</div> </div>
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Form.Item label={t("invoices.fields.invoice_number")}> <Form.Item
{getFieldDecorator("invoice_number", { label={t("invoices.fields.invoice_number")}
rules: [ name="invoice_number"
{ required: true, message: t("general.validation.required") } rule={[
] { required: true, message: t("general.validation.required") }
})(<Input name="invoice_number" />)} ]}
>
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("invoices.fields.date")}> <Form.Item
{getFieldDecorator("date", { label={t("invoices.fields.date")}
rules: [ name="date"
{ required: true, message: t("general.validation.required") } rule={[
] { required: true, message: t("general.validation.required") }
})(<DatePicker name="date" />)} ]}
>
<DatePicker />
</Form.Item> </Form.Item>
<Form.Item label={t("invoices.fields.is_credit_memo")}> <Form.Item
{getFieldDecorator("is_credit_memo", { label={t("invoices.fields.is_credit_memo")}
initialValue: false, name="is_credit_memo"
valuePropName: "checked" valuePropName="checked"
})(<Switch name="is_credit_memo" />)} >
<Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("invoices.fields.total")}> <Form.Item
{getFieldDecorator("total", { label={t("invoices.fields.total")}
rules: [ name="total"
{ required: true, message: t("general.validation.required") } rule={[
] { required: true, message: t("general.validation.required") }
})(<InputNumber precision={2} min={0} name="total" />)} ]}
>
<InputNumber precision={2} min={0} />
</Form.Item> </Form.Item>
</div> </div>
<Row> <Row>
@@ -140,7 +148,7 @@ export default function InvoiceEnterModalComponent({
<Col span={12}>Table of added items.</Col> <Col span={12}>Table of added items.</Col>
</Row> </Row>
); );
</Form> </Modal>{" "}
</Modal> </Form>
); );
} }

148
client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
View File

@@ -1,16 +1,14 @@
import { Form, notification } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useQuery, useLazyQuery } from "react-apollo"; import { useLazyQuery, useQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; 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_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries"; import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors"; import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
import { selectBodyshop } from "../../redux/user/user.selectors"; 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({ const mapStateToProps = createStructuredSelector({
invoiceEnterModal: selectInvoiceEnterModal, invoiceEnterModal: selectInvoiceEnterModal,
@@ -23,10 +21,9 @@ const mapDispatchToProps = dispatch => ({
function InvoiceEnterModalContainer({ function InvoiceEnterModalContainer({
invoiceEnterModal, invoiceEnterModal,
toggleModalVisible, toggleModalVisible,
form,
bodyshop bodyshop
}) { }) {
const { t } = useTranslation(); // const { t } = useTranslation();
const linesState = useState([]); const linesState = useState([]);
const roSearchState = useState({ text: "", selectedId: null }); const roSearchState = useState({ text: "", selectedId: null });
const [roSearch, setRoSearch] = roSearchState; const [roSearch, setRoSearch] = roSearchState;
@@ -67,100 +64,81 @@ function InvoiceEnterModalContainer({
if (roSearch.selectedId) { if (roSearch.selectedId) {
if (!called) loadLines(); if (!called) loadLines();
} }
const handleRoSelect = v => { const handleRoSelect = (value, obj) => {
setRoSearch({ ...roSearch, selectedId: v }); setRoSearch({ ...roSearch, selectedId: obj.id });
}; };
const handleVendorSelect = v => { const handleVendorSelect = (value, obj) => {
setVendorSearch({ ...vendorSearch, selectedId: v }); setVendorSearch({ ...vendorSearch, selectedId: obj.id });
}; };
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); alert("Closing this modal.");
form.validateFieldsAndScroll((err, values) => { toggleModalVisible();
if (err) { // if (!jobLineEditModal.context.id) {
notification["error"]({ // insertJobLine({
message: t("invoices.errors.validation"), // variables: {
description: err.message // lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
}); // }
} // })
if (!err) { // .then(r => {
console.log("values", values); // if (jobLineEditModal.actions.refetch)
alert("Closing this modal."); // jobLineEditModal.actions.refetch();
toggleModalVisible(); // toggleModalVisible();
// if (!jobLineEditModal.context.id) { // notification["success"]({
// insertJobLine({ // message: t("joblines.successes.created")
// variables: { // });
// lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }] // })
// } // .catch(error => {
// }) // notification["error"]({
// .then(r => { // message: t("joblines.errors.creating", {
// if (jobLineEditModal.actions.refetch) // message: error.message
// jobLineEditModal.actions.refetch(); // })
// toggleModalVisible(); // });
// notification["success"]({ // });
// message: t("joblines.successes.created") // } else {
// }); // updateJobLine({
// }) // variables: {
// .catch(error => { // lineId: jobLineEditModal.context.id,
// notification["error"]({ // line: values
// message: t("joblines.errors.creating", { // }
// message: error.message // })
// }) // .then(r => {
// }); // notification["success"]({
// }); // message: t("joblines.successes.updated")
// } else { // });
// updateJobLine({ // })
// variables: { // .catch(error => {
// lineId: jobLineEditModal.context.id, // notification["success"]({
// line: values // message: t("joblines.errors.updating", {
// } // message: error.message
// }) // })
// .then(r => { // });
// notification["success"]({ // });
// message: t("joblines.successes.updated") // if (jobLineEditModal.actions.refetch)
// }); // jobLineEditModal.actions.refetch();
// }) // toggleModalVisible();
// .catch(error => { // }
// notification["success"]({
// message: t("joblines.errors.updating", {
// message: error.message
// })
// });
// });
// if (jobLineEditModal.actions.refetch)
// jobLineEditModal.actions.refetch();
// toggleModalVisible();
// }
}
});
}; };
const handleCancel = () => { const handleCancel = () => {
toggleModalVisible(); toggleModalVisible();
}; };
console.log(
"c",
VendorAutoCompleteData?.vendors.filter(
v => v.id === vendorSearch.selectedId
)
);
return ( return (
<InvoiceEnterModalComponent <InvoiceEnterModalComponent
visible={invoiceEnterModal.visible} visible={invoiceEnterModal.visible}
invoice={invoiceEnterModal.context} invoice={invoiceEnterModal.context}
handleSubmit={handleSubmit} handleFinish={handleFinish}
handleCancel={handleCancel} handleCancel={handleCancel}
form={form}
handleRoAutoComplete={handleRoAutoComplete} handleRoAutoComplete={handleRoAutoComplete}
handleRoSelect={handleRoSelect} handleRoSelect={handleRoSelect}
roAutoCompleteOptions={ roAutoCompleteOptions={
RoAutoCompleteData RoAutoCompleteData
? RoAutoCompleteData.jobs.reduce((acc, value) => { ? RoAutoCompleteData.jobs.reduce((acc, value) => {
acc.push({ acc.push({
value: value.id, id: value.id,
text: `${value.ro_number || ""} | ${value.ownr_ln || value: `${value.ro_number || ""} | ${value.ownr_ln ||
""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr || ""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
""} ${value.vehicle.v_make_desc || ""} ${value.vehicle ""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
.v_model_desc || ""}` .v_model_desc || ""}`
@@ -175,8 +153,8 @@ function InvoiceEnterModalContainer({
VendorAutoCompleteData VendorAutoCompleteData
? VendorAutoCompleteData.vendors.reduce((acc, value) => { ? VendorAutoCompleteData.vendors.reduce((acc, value) => {
acc.push({ acc.push({
value: value.id, id: value.id,
text: `${value.name || ""}` value: `${value.name || ""}`
}); });
return acc; return acc;
}, []) }, [])
@@ -198,8 +176,4 @@ function InvoiceEnterModalContainer({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)( )(InvoiceEnterModalContainer);
Form.create({ name: "InvoiceEnterModalContainer" })(
InvoiceEnterModalContainer
)
);

71
client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
View File

@@ -1,19 +1,20 @@
import { Modal, Form, Input, InputNumber } from "antd"; import { Form, Input, InputNumber, Modal } from "antd";
import React from "react"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ResetForm from "../form-items-formatted/reset-form-item.component";
export default function JobLinesUpsertModalComponent({ export default function JobLinesUpsertModalComponent({
visible, visible,
jobLine, jobLine,
handleOk,
handleCancel, handleCancel,
handleSubmit, handleFinish
form
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { getFieldDecorator, isFieldsTouched, resetFields } = form; const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
}, [visible, form]);
console.log("jobLine", jobLine);
return ( return (
<Modal <Modal
title={ title={
@@ -23,45 +24,39 @@ export default function JobLinesUpsertModalComponent({
} }
visible={visible} visible={visible}
okText={t("general.labels.save")} okText={t("general.labels.save")}
onOk={handleSubmit} onOk={handleFinish}
forceRender={true}
onCancel={handleCancel} onCancel={handleCancel}
> >
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null} <Form
<Form onSubmit={handleSubmit} autoComplete={"off"}> onFinish={handleFinish}
<Form.Item label={t("joblines.fields.line_desc")}> initialValues={jobLine}
{getFieldDecorator("line_desc", { autoComplete={"off"}
initialValue: jobLine.line_desc form={form}
})(<Input name="line_desc" />)} >
<Form.Item label={t("joblines.fields.line_desc")} name="line_desc">
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.oem_partno")}> <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
{getFieldDecorator("oem_partno", { <Input />
initialValue: jobLine.oem_partno
})(<Input name="oem_partno" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.part_type")}> <Form.Item label={t("joblines.fields.part_type")} name="part_type">
{getFieldDecorator("part_type", { <Input />
initialValue: jobLine.part_type
})(<Input name="part_type" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.mod_lbr_ty")}> <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
{getFieldDecorator("mod_lbr_ty", { <Input />
initialValue: jobLine.mod_lbr_ty
})(<Input name="mod_lbr_ty" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.op_code_desc")}> <Form.Item
{getFieldDecorator("op_code_desc", { label={t("joblines.fields.op_code_desc")}
initialValue: jobLine.op_code_desc name="op_code_desc"
})(<Input name="op_code_desc" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.mod_lb_hrs")}> <Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs">
{getFieldDecorator("mod_lb_hrs", { <InputNumber />
initialValue: jobLine.mod_lb_hrs
})(<InputNumber name="mod_lb_hrs" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("joblines.fields.act_price")}> <Form.Item label={t("joblines.fields.act_price")} name="act_price">
{getFieldDecorator("act_price", { <InputNumber />
initialValue: jobLine.act_price
})(<InputNumber name="act_price" />)}
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

110
client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
View File

@@ -1,13 +1,10 @@
import { Form, notification } from "antd"; import { notification } from "antd";
import React from "react"; import React from "react";
import { useMutation } from "react-apollo"; import { useMutation } from "react-apollo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
INSERT_NEW_JOB_LINE,
UPDATE_JOB_LINE
} from "../../graphql/jobs-lines.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectJobLineEditModal } from "../../redux/modals/modals.selectors"; import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
import JobLinesUpdsertModal from "./job-lines-upsert-modal.component"; import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
@@ -21,70 +18,56 @@ const mapDispatchToProps = dispatch => ({
function JobLinesUpsertModalContainer({ function JobLinesUpsertModalContainer({
jobLineEditModal, jobLineEditModal,
toggleModalVisible, toggleModalVisible
form
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE); const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
const [updateJobLine] = useMutation(UPDATE_JOB_LINE); const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); if (!jobLineEditModal.context.id) {
insertJobLine({
form.validateFieldsAndScroll((err, values) => { variables: {
if (err) { lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
notification["error"]({ }
message: t("joblines.errors.validation"), })
description: err.message .then(r => {
});
}
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
})
});
});
if (jobLineEditModal.actions.refetch) if (jobLineEditModal.actions.refetch)
jobLineEditModal.actions.refetch(); jobLineEditModal.actions.refetch();
toggleModalVisible(); 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 = () => { const handleCancel = () => {
@@ -95,9 +78,8 @@ function JobLinesUpsertModalContainer({
<JobLinesUpdsertModal <JobLinesUpdsertModal
visible={jobLineEditModal.visible} visible={jobLineEditModal.visible}
jobLine={jobLineEditModal.context} jobLine={jobLineEditModal.context}
handleSubmit={handleSubmit} handleFinish={handleFinish}
handleCancel={handleCancel} handleCancel={handleCancel}
form={form}
/> />
); );
} }
@@ -105,6 +87,4 @@ function JobLinesUpsertModalContainer({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)( )(JobLinesUpsertModalContainer);
Form.create({ name: "JobsDetailPageContainer" })(JobLinesUpsertModalContainer)
);

58
client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx
View File

@@ -1,24 +1,17 @@
import { Form, Input, Switch } from "antd"; import { Form, Input, Switch } from "antd";
import React, { useContext } from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
export default function JobsDetailClaims({ job }) { export default function JobsDetailClaims({ job }) {
const form = useContext(JobDetailFormContext);
const { getFieldDecorator } = form;
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
<Form.Item label={t("jobs.fields.csr")}> <Form.Item label={t("jobs.fields.csr")} name="csr">
{getFieldDecorator("csr", { <Input />
initialValue: job.csr
})(<Input name='csr' />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.loss_desc")}> <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
{getFieldDecorator("loss_desc", { <Input />
initialValue: job.loss_desc
})(<Input name='loss_desc' />)}
</Form.Item> </Form.Item>
TODO How to handle different taxes and marking them as exempt? TODO How to handle different taxes and marking them as exempt?
{ {
@@ -28,36 +21,27 @@ export default function JobsDetailClaims({ job }) {
// })(<Input name='exempt' />)} // })(<Input name='exempt' />)}
// </Form.Item> // </Form.Item>
} }
<Form.Item label={t("jobs.fields.ponumber")}> <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
{getFieldDecorator("po_number", { <Input />
initialValue: job.po_number
})(<Input name='po_number' />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.unitnumber")}> <Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
{getFieldDecorator("unit_number", { <Input />
initialValue: job.unit_number
})(<Input name='unit_number' />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.specialcoveragepolicy")}> <Form.Item
{getFieldDecorator("special_coverage_policy", { label={t("jobs.fields.specialcoveragepolicy")}
initialValue: job.special_coverage_policy, valuePropName="checked"
valuePropName: "checked" name="special_coverage_policy"
})(<Switch name='special_coverage_policy' />)} >
<Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.kmin")}> <Form.Item label={t("jobs.fields.kmin")} name="kmin">
{getFieldDecorator("kmin", { <Input />
initialValue: job.kmin
})(<Input name='kmin' />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.kmout")}> <Form.Item label={t("jobs.fields.kmout")} name="kmout">
{getFieldDecorator("kmout", { <Input />
initialValue: job.kmout
})(<Input name='kmout' />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.referralsource")}> <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
{getFieldDecorator("referral_source", { <Input />
initialValue: job.referral_source
})(<Input name='referral_source' />)}
</Form.Item> </Form.Item>
</div> </div>
); );

117
client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
View File

@@ -1,89 +1,78 @@
import { DatePicker, Form } from "antd"; import { DatePicker, Form } from "antd";
import moment from "moment"; import React from "react";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
export default function JobsDetailDatesComponent({ job }) { export default function JobsDetailDatesComponent({ job }) {
const form = useContext(JobDetailFormContext);
const { getFieldDecorator } = form;
const { t } = useTranslation(); 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 ( return (
<div> <div>
<Form.Item label={t("jobs.fields.loss_date")}> <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
{getFieldDecorator("loss_date", { <DatePicker />
initialValue: job.loss_date ? moment(job.loss_date) : null
})(<DatePicker name="loss_date" />)}
</Form.Item> </Form.Item>
DAMAGE {JSON.stringify(job.area_of_damage)}
CAA # seems not correct based on field mapping Class seems not correct CAA # seems not correct based on field mapping Class seems not correct
based on field mapping based on field mapping
<Form.Item label={t("jobs.fields.date_estimated")}> <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
{getFieldDecorator("date_estimated", { <DatePicker />
initialValue: job.date_estimated ? moment(job.date_estimated) : null
})(<DatePicker name="date_estimated" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_open")}> <Form.Item label={t("jobs.fields.date_open")} name="date_open">
{getFieldDecorator("date_open", { <DatePicker />
initialValue: job.date_open ? moment(job.date_open) : null
})(<DatePicker name="date_open" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_scheduled")}> <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
{getFieldDecorator("date_scheduled", { <DatePicker />
initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
})(<DatePicker name="date_scheduled" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.scheduled_in")}> <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
{getFieldDecorator("scheduled_in", { <DatePicker />
initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
})(<DatePicker name="scheduled_in" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.actual_in")}> <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
{getFieldDecorator("actual_in", { <DatePicker />
initialValue: job.actual_in ? moment(job.actual_in) : null
})(<DatePicker name="actual_in" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.scheduled_completion")}> <Form.Item
{getFieldDecorator("scheduled_completion", { label={t("jobs.fields.scheduled_completion")}
initialValue: job.scheduled_completion name="scheduled_completion"
? moment(job.scheduled_completion) >
: null <DatePicker />
})(<DatePicker name="scheduled_completion" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.actual_completion")}> <Form.Item
{getFieldDecorator("actual_completion", { label={t("jobs.fields.actual_completion")}
initialValue: job.actual_completion name="actual_completion"
? moment(job.actual_completion) >
: null <DatePicker />
})(<DatePicker name="actual_completion" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.scheduled_delivery")}> <Form.Item
{getFieldDecorator("scheduled_delivery", { label={t("jobs.fields.scheduled_delivery")}
initialValue: job.scheduled_delivery name="scheduled_delivery"
? moment(job.scheduled_delivery) >
: null <DatePicker />
})(<DatePicker name="scheduled_delivery" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.actual_delivery")}> <Form.Item
{getFieldDecorator("actual_delivery", { label={t("jobs.fields.actual_delivery")}
initialValue: job.actual_delivery ? moment(job.actual_delivery) : null name="actual_delivery"
})(<DatePicker name="actual_delivery" />)} >
<DatePicker />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_invoiced")}> <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
{getFieldDecorator("date_invoiced", { <DatePicker />
initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
})(<DatePicker name="date_invoiced" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_closed")}> <Form.Item label={t("jobs.fields.date_closed")} name="date_closed">
{getFieldDecorator("date_closed", { <DatePicker />
initialValue: job.date_closed ? moment(job.date_closed) : null
})(<DatePicker name="date_closed" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.date_exported")}> <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
{getFieldDecorator("date_exported", { <DatePicker />
initialValue: job.date_exported ? moment(job.date_exported) : null
})(<DatePicker name="date_exported" />)}
</Form.Item> </Form.Item>
</div> </div>
); );

220
client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
View File

@@ -1,181 +1,131 @@
import { Form, Input, InputNumber, Divider } from "antd"; import { Divider, Form, Input, InputNumber } from "antd";
import React, { useContext } from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
export default function JobsDetailFinancials({ job }) { export default function JobsDetailFinancials({ job }) {
const form = useContext(JobDetailFormContext);
const { getFieldDecorator } = form;
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
<Form.Item label={t("jobs.fields.ded_amt")}> <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
{getFieldDecorator("ded_amt", { <InputNumber />
initialValue: job.ded_amt
})(<InputNumber name="ded_amt" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ded_status")}> <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
{getFieldDecorator("ded_status", { <Input />
initialValue: job.ded_status
})(<Input name="ded_status" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.depreciation_taxes")}> <Form.Item
{getFieldDecorator("depreciation_taxes", { label={t("jobs.fields.depreciation_taxes")}
initialValue: job.depreciation_taxes name="depreciation_taxes"
})(<InputNumber name="depreciation_taxes" />)} >
<InputNumber />
</Form.Item> </Form.Item>
TODO This is equivalent of GST payable. TODO This is equivalent of GST payable.
<Form.Item label={t("jobs.fields.federal_tax_payable")}> <Form.Item
{getFieldDecorator("federal_tax_payable", { label={t("jobs.fields.federal_tax_payable")}
initialValue: job.federal_tax_payable name="federal_tax_payable"
})(<InputNumber name="federal_tax_payable" />)} >
<InputNumber />
</Form.Item> </Form.Item>
TODO equivalent of other customer amount TODO equivalent of other customer amount
<Form.Item label={t("jobs.fields.other_amount_payable")}> <Form.Item
{getFieldDecorator("other_amount_payable", { label={t("jobs.fields.other_amount_payable")}
initialValue: job.other_amount_payable name="other_amount_payable"
})(<InputNumber name="other_amount_payable" />)} >
<InputNumber />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.towing_payable")}> <Form.Item label={t("jobs.fields.towing_payable")} name="towing_payable">
{getFieldDecorator("towing_payable", { <InputNumber />
initialValue: job.towing_payable
})(<InputNumber name="towing_payable" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.storage_payable")}> <Form.Item
{getFieldDecorator("storage_payable", { label={t("jobs.fields.storage_payable")}
initialValue: job.storage_payable name="storage_payable"
})(<InputNumber name="storage_payable" />)} >
<InputNumber />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.adjustment_bottom_line")}> <Form.Item
{getFieldDecorator("adjustment_bottom_line", { label={t("jobs.fields.adjustment_bottom_line")}
initialValue: job.adjustment_bottom_line name="adjustment_bottom_line"
})(<InputNumber name="adjustment_bottom_line" />)} >
<InputNumber />
</Form.Item> </Form.Item>
<Divider /> <Divider />
Totals Table Totals Table
<Form.Item label={t("jobs.fields.labor_rate_desc")}> <Form.Item
{getFieldDecorator("labor_rate_desc", { label={t("jobs.fields.labor_rate_desc")}
initialValue: job.labor_rate_desc name="labor_rate_desc"
})(<Input name="labor_rate_desc" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lab")}> <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
{getFieldDecorator("rate_lab", { <InputNumber />
initialValue: job.rate_lab
})(<InputNumber name="rate_lab" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lad")}> <Form.Item label={t("jobs.fields.rate_lad")} name="rate_lad">
{getFieldDecorator("rate_lad", { <InputNumber />
initialValue: job.rate_lad
})(<InputNumber name="rate_lad" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lae")}> <Form.Item label={t("jobs.fields.rate_lae")} name="rate_lae">
{getFieldDecorator("rate_lae", { <InputNumber />
initialValue: job.rate_lae
})(<InputNumber name="rate_lae" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lar")}> <Form.Item label={t("jobs.fields.rate_lar")} name="rate_lar">
{getFieldDecorator("rate_lar", { <InputNumber />
initialValue: job.rate_lar
})(<InputNumber name="rate_lar" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_las")}> <Form.Item label={t("jobs.fields.rate_las")} name="rate_las">
{getFieldDecorator("rate_las", { <InputNumber />
initialValue: job.rate_las
})(<InputNumber name="rate_las" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_laf")}> <Form.Item label={t("jobs.fields.rate_laf")} name="rate_laf">
{getFieldDecorator("rate_laf", { <InputNumber />
initialValue: job.rate_laf
})(<InputNumber name="rate_laf" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lam")}> <Form.Item label={t("jobs.fields.rate_lam")} name="rate_lam">
{getFieldDecorator("rate_lam", { <InputNumber />
initialValue: job.rate_lam
})(<InputNumber name="rate_lam" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lag")}> <Form.Item label={t("jobs.fields.rate_lag")} name="rate_lag">
{getFieldDecorator("rate_lag", { <InputNumber />
initialValue: job.rate_lag
})(<InputNumber name="rate_lag" />)}
</Form.Item> </Form.Item>
Note //TODO Remove ATP rate? Note //TODO Remove ATP rate?
<Form.Item label={t("jobs.fields.rate_atp")}> <Form.Item label={t("jobs.fields.rate_atp")} name="rate_atp">
{getFieldDecorator("rate_atp", { <InputNumber />
initialValue: job.rate_atp
})(<InputNumber name="rate_atp" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_lau")}> <Form.Item label={t("jobs.fields.rate_lau")} name="rate_lau">
{getFieldDecorator("rate_lau", { <InputNumber />
initialValue: job.rate_lau
})(<InputNumber name="rate_lau" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_la1")}> <Form.Item label={t("jobs.fields.rate_la1")} name="rate_la1">
{getFieldDecorator("rate_la1", { <InputNumber />
initialValue: job.rate_la1
})(<InputNumber name="rate_la1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_la2")}> <Form.Item label={t("jobs.fields.rate_la2")} name="rate_la2">
{getFieldDecorator("rate_la2", { <InputNumber />
initialValue: job.rate_la2
})(<InputNumber name="rate_la2" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_la3")}> <Form.Item label={t("jobs.fields.rate_la3")} name="rate_la3">
{getFieldDecorator("rate_la3", { <InputNumber />
initialValue: job.rate_la3
})(<InputNumber name="rate_la3" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_la4")}> <Form.Item label={t("jobs.fields.rate_la4")} name="rate_la4">
{getFieldDecorator("rate_la4", { <InputNumber />
initialValue: job.rate_la4
})(<InputNumber name="rate_la4" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_mapa")}> <Form.Item label={t("jobs.fields.rate_mapa")} name="rate_mapa">
{getFieldDecorator("rate_mapa", { <InputNumber />
initialValue: job.rate_mapa
})(<InputNumber name="rate_mapa" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_mash")}> <Form.Item label={t("jobs.fields.rate_mash")} name="rate_mash">
{getFieldDecorator("rate_mash", { <InputNumber />
initialValue: job.rate_mash
})(<InputNumber name="rate_mash" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_mahw")}> <Form.Item label={t("jobs.fields.rate_mahw")} name="rate_mahw">
{getFieldDecorator("rate_mahw", { <InputNumber />
initialValue: job.rate_mahw
})(<InputNumber name="rate_mahw" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_ma2s")}> <Form.Item label={t("jobs.fields.rate_ma2s")} name="rate_ma2s">
{getFieldDecorator("rate_ma2s", { <InputNumber />
initialValue: job.rate_ma2s
})(<InputNumber name="rate_ma2s" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_ma3s")}> <Form.Item label={t("jobs.fields.rate_ma3s")} name="rate_ma3s">
{getFieldDecorator("rate_ma3s", { <InputNumber />
initialValue: job.rate_ma3s
})(<InputNumber name="rate_ma3s" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_mabl")}> <Form.Item label={t("jobs.fields.rate_mabl")} name="rate_mabl">
{getFieldDecorator("rate_mabl", { <InputNumber />
initialValue: job.rate_mabl
})(<InputNumber name="rate_mabl" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_macs")}> <Form.Item label={t("jobs.fields.rate_macs")} name="rate_macs">
{getFieldDecorator("rate_macs", { <InputNumber />
initialValue: job.rate_macs
})(<InputNumber name="rate_macs" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_matd")}> <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
{getFieldDecorator("rate_matd", { <InputNumber />
initialValue: job.rate_matd </Form.Item>
})(<InputNumber name="rate_matd" />)} <Form.Item label={t("jobs.fields.rate_laa")} name="rate_laa">
<InputNumber />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.rate_laa")}>
{getFieldDecorator("rate_laa", {
initialValue: job.rate_laa
})(<InputNumber name="rate_laa" />)}
</Form.Item>
</div> </div>
); );
} }

64
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -5,13 +5,12 @@ import {
Checkbox, Checkbox,
Descriptions, Descriptions,
Dropdown, Dropdown,
Menu, Menu,
notification, notification,
PageHeader, PageHeader,
Tag Tag
} from "antd"; } from "antd";
import {DownCircleFilled} from "@ant-design/icons"; import { DownCircleFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Moment from "react-moment"; import Moment from "react-moment";
@@ -34,7 +33,7 @@ export default connect(
job, job,
mutationConvertJob, mutationConvertJob,
refetch, refetch,
handleSubmit, handleFinish,
scheduleModalState, scheduleModalState,
bodyshop, bodyshop,
updateJobStatus updateJobStatus
@@ -44,7 +43,7 @@ export default connect(
const tombstoneTitle = ( const tombstoneTitle = (
<div> <div>
<Avatar size='large' alt='Vehicle Image' src={CarImage} /> <Avatar size="large" alt="Vehicle Image" src={CarImage} />
{`${t("jobs.fields.ro_number")} ${ {`${t("jobs.fields.ro_number")} ${
job.ro_number ? job.ro_number : t("general.labels.na") job.ro_number ? job.ro_number : t("general.labels.na")
}`} }`}
@@ -55,7 +54,8 @@ export default connect(
<Menu <Menu
onClick={e => { onClick={e => {
updateJobStatus(e.key); updateJobStatus(e.key);
}}> }}
>
{bodyshop.md_ro_statuses.statuses.map(item => ( {bodyshop.md_ro_statuses.statuses.map(item => (
<Menu.Item key={item}>{item}</Menu.Item> <Menu.Item key={item}>{item}</Menu.Item>
))} ))}
@@ -63,23 +63,24 @@ export default connect(
); );
const menuExtra = [ const menuExtra = [
<Dropdown overlay={statusmenu} key='changestatus'> <Dropdown overlay={statusmenu} key="changestatus">
<Button> <Button>
{t("jobs.actions.changestatus")} <DownCircleFilled /> {t("jobs.actions.changestatus")} <DownCircleFilled />
</Button> </Button>
</Dropdown>, </Dropdown>,
<Badge key='schedule' count={job.appointments_aggregate.aggregate.count}> <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
<Button <Button
//TODO Enabled logic based on status. //TODO Enabled logic based on status.
onClick={() => { onClick={() => {
setscheduleModalVisible(true); setscheduleModalVisible(true);
}}> }}
>
{t("jobs.actions.schedule")} {t("jobs.actions.schedule")}
</Button> </Button>
</Badge>, </Badge>,
<Button <Button
key='convert' key="convert"
type='dashed' type="dashed"
disabled={job.converted} disabled={job.converted}
onClick={() => { onClick={() => {
mutationConvertJob({ mutationConvertJob({
@@ -91,14 +92,11 @@ export default connect(
message: t("jobs.successes.converted") message: t("jobs.successes.converted")
}); });
}); });
}}> }}
>
{t("jobs.actions.convert")} {t("jobs.actions.convert")}
</Button>, </Button>,
<Button <Button type="primary" key="submit" htmlType="submit">
type='primary'
key='submit'
htmlType='button'
onClick={handleSubmit}>
{t("general.labels.save")} {t("general.labels.save")}
</Button> </Button>
]; ];
@@ -111,9 +109,9 @@ export default connect(
title={tombstoneTitle} title={tombstoneTitle}
//subTitle={tombstoneSubtitle} //subTitle={tombstoneSubtitle}
tags={ tags={
<span key='job-status'> <span key="job-status">
{job.status ? <Tag color='blue'>{job.status}</Tag> : null} {job.status ? <Tag color="blue">{job.status}</Tag> : null}
<Tag color='red'> <Tag color="red">
{job.owner ? ( {job.owner ? (
<Link to={`/manage/owners/${job.owner.id}`}> <Link to={`/manage/owners/${job.owner.id}`}>
{`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln || {`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln ||
@@ -123,7 +121,7 @@ export default connect(
t("jobs.errors.noowner") t("jobs.errors.noowner")
)} )}
</Tag> </Tag>
<Tag color='green'> <Tag color="green">
{job.vehicle ? ( {job.vehicle ? (
<Link to={`/manage/vehicles/${job.vehicle.id}`}> <Link to={`/manage/vehicles/${job.vehicle.id}`}>
{job.vehicle.v_model_yr || t("general.labels.na")}{" "} {job.vehicle.v_model_yr || t("general.labels.na")}{" "}
@@ -137,27 +135,37 @@ export default connect(
<BarcodePopup value={job.id} /> <BarcodePopup value={job.id} />
</span> </span>
} }
extra={menuExtra}> extra={menuExtra}
<Descriptions size='small' column={5}> >
<Descriptions.Item label={t("jobs.fields.repairtotal")}> <Descriptions size="small" column={5}>
<Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
<CurrencyFormatter>{job.clm_total}</CurrencyFormatter> <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.customerowing")}> <Descriptions.Item
key="custowing"
label={t("jobs.fields.customerowing")}
>
##NO BINDING YET## ##NO BINDING YET##
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}> <Descriptions.Item
key="scp"
label={t("jobs.fields.specialcoveragepolicy")}
>
<Checkbox checked={job.special_coverage_policy} /> <Checkbox checked={job.special_coverage_policy} />
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.scheduled_completion")}> <Descriptions.Item
key="sched_comp"
label={t("jobs.fields.scheduled_completion")}
>
{job.scheduled_completion ? ( {job.scheduled_completion ? (
<Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment> <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
) : null} ) : null}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.servicecar")}> <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
{job.service_car} {job.service_car}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>

185
client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
View File

@@ -1,146 +1,115 @@
import { Divider, Form, Input, DatePicker } from "antd"; import { DatePicker, Divider, Form, Input } from "antd";
import React, { useContext } from "react"; import React from "react";
import { useTranslation } from "react-i18next"; 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 FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component"; import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import moment from "moment";
export default function JobsDetailInsurance({ job }) { export default function JobsDetailInsurance({ job, form }) {
const form = useContext(JobDetailFormContext); const { getFieldValue } = form;
const { getFieldDecorator, getFieldValue } = form;
const { t } = useTranslation(); const { t } = useTranslation();
//initialValue: job.loss_date ? moment(job.loss_date) : null
console.log("job", job);
return ( return (
<div> <div>
<Form.Item label={t("jobs.fields.ins_co_id")}> <Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
{getFieldDecorator("ins_co_id", { <Input />
initialValue: job.ins_co_id
})(<Input name="ins_co_id" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.policy_no")}> <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
{getFieldDecorator("policy_no", { <Input />
initialValue: job.policy_no
})(<Input name="policy_no" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.clm_no")}> <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
{getFieldDecorator("clm_no", { <Input />
initialValue: job.clm_no
})(<Input name="clm_no" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.regie_number")}> <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
{getFieldDecorator("regie_number", { <Input />
initialValue: job.regie_number
})(<Input name="regie_number" />)}
</Form.Item> </Form.Item>
TODO: missing KOL field??? TODO: missing KOL field???
<Form.Item label={t("jobs.fields.loss_date")}> <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
{getFieldDecorator("loss_date", { <DatePicker />
initialValue: job.loss_date ? moment(job.loss_date) : null
})(<DatePicker name="loss_date" />)}
</Form.Item> </Form.Item>
DAMAGE {JSON.stringify(job.area_of_damage)} DAMAGE {JSON.stringify(job.area_of_damage)}
CAA # seems not correct based on field mapping Class seems not correct CAA # seems not correct based on field mapping Class seems not correct
based on field mapping based on field mapping
<Form.Item label={t("jobs.fields.ins_co_nm")}> <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
{getFieldDecorator("ins_co_nm", { <Input />
initialValue: job.ins_co_nm
})(<Input name="ins_co_nm" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")}> <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
{getFieldDecorator("ins_addr1", { <Input />
initialValue: job.ins_addr1
})(<Input name="ins_addr1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_city")}> <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
{getFieldDecorator("ins_city", { <Input />
initialValue: job.ins_city
})(<Input name="ins_city" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_ln")}> <Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
{getFieldDecorator("ins_ct_ln", { <Input />
initialValue: job.ins_ct_ln
})(<Input name="ins_ct_ln" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_fn")}> <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
{getFieldDecorator("ins_ct_fn", { <Input />
initialValue: job.ins_ct_fn
})(<Input name="ins_ct_fn" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_ph1")}> <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
{getFieldDecorator("ins_ph1", { <FormItemPhone customInput={Input} />
initialValue: job.ins_ph1
})(<FormItemPhone customInput={Input} name="ins_ph1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.ins_ea")}> <Form.Item
{getFieldDecorator("ins_ea", { label={t("jobs.fields.ins_ea")}
initialValue: job.ins_ea, name="ins_ea"
rules: [ rules={[
{ {
type: "email", type: "email",
message: "This is not a valid email address." message: "This is not a valid email address."
} }
] ]}
})(<FormItemEmail name="ins_ea" email={getFieldValue("ins_ea")} />)} >
<FormItemEmail email={getFieldValue("ins_ea")} />
</Form.Item> </Form.Item>
<Divider /> <Divider />
Appraiser Info Appraiser Info
<Form.Item label={t("jobs.fields.est_co_nm")}> <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
{getFieldDecorator("est_co_nm", { <Input />
initialValue: job.est_co_nm
})(<Input name="est_co_nm" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.est_ct_fn")}> <Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
{getFieldDecorator("est_ct_fn", { <Input />
initialValue: job.est_ct_fn
})(<Input name="est_ct_fn" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.est_ct_ln")}> <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
{getFieldDecorator("est_ct_ln", { <Input />
initialValue: job.est_ct_ln
})(<Input name="est_ct_ln" />)}
</Form.Item> </Form.Item>
TODO: Field is pay date but title is inspection date. Likely incorrect? TODO: Field is pay date but title is inspection date. Likely incorrect?
<Form.Item label={t("jobs.fields.pay_date")}> <Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
{getFieldDecorator("pay_date", { <Input />
initialValue: job.pay_date
})(<Input name="pay_date" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.est_ph1")}> <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
{getFieldDecorator("est_ph1", { <Input />
initialValue: job.est_ph1
})(<Input name="est_ph1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.est_ea")}> <Form.Item
{getFieldDecorator("est_ea", { label={t("jobs.fields.est_ea")}
initialValue: job.est_ea, name="est_ea"
rules: [ rules={[
{ {
type: "email", type: "email",
message: "This is not a valid email address." message: "This is not a valid email address."
} }
] ]}
})(<FormItemEmail name="est_ea" email={getFieldValue("est_ea")} />)} >
<FormItemEmail email={getFieldValue("est_ea")} />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.selling_dealer")}> <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
{getFieldDecorator("selling_dealer", { <Input />
initialValue: job.selling_dealer
})(<Input name="selling_dealer" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.servicing_dealer")}> <Form.Item
{getFieldDecorator("servicing_dealer", { label={t("jobs.fields.servicing_dealer")}
initialValue: job.servicing_dealer name="servicing_dealer"
})(<Input name="servicing_dealer" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.selling_dealer_contact")}> <Form.Item
{getFieldDecorator("selling_dealer_contact", { label={t("jobs.fields.selling_dealer_contact")}
initialValue: job.selling_dealer_contact name="selling_dealer_contact"
})(<Input name="selling_dealer_contact" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("jobs.fields.servicing_dealer_contact")}> <Form.Item
{getFieldDecorator("servicing_dealer_contact", { label={t("jobs.fields.servicing_dealer_contact")}
initialValue: job.servicing_dealer_contact name="servicing_dealer_contact"
})(<Input name="servicing_dealer_contact" />)} >
<Input />
</Form.Item> </Form.Item>
TODO: Adding servicing/selling dealer contact info? TODO: Adding servicing/selling dealer contact info?
</div> </div>

120
client/src/components/owner-detail-form/owner-detail-form.component.jsx
View File

@@ -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 FormItemPhone from "../form-items-formatted/phone-form-item.component";
import ResetForm from "../form-items-formatted/reset-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 { t } = useTranslation();
const { const { isFieldsTouched, resetFields, getFieldValue } = form;
isFieldsTouched, console.log("isFieldsTouched([], true)", isFieldsTouched([], true));
resetFields,
getFieldDecorator,
getFieldValue
} = form;
return ( return (
<div> <div>
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null} <button onClick={() => alert(getFieldValue("ownr_ea"))}>YY</button>
{isFieldsTouched([], true) ? (
<ResetForm resetFields={resetFields} />
) : null}
<Button type="primary" key="submit" htmlType="submit"> <Button type="primary" key="submit" htmlType="submit">
{t("general.labels.save")} {t("general.labels.save")}
</Button> </Button>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item label={t("owners.fields.ownr_ln")}> <Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
{getFieldDecorator("ownr_ln", { <Input />
initialValue: owner.ownr_ln
})(<Input name="ownr_ln" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_fn")}> <Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
{getFieldDecorator("ownr_fn", { <Input />
initialValue: owner.ownr_fn
})(<Input name="ownr_fn" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.allow_text_message")}> <Form.Item
{getFieldDecorator("allow_text_message", { label={t("owners.fields.allow_text_message")}
initialValue: owner.allow_text_message, name="allow_text_message"
valuePropName: "checked" valuePropName="checked"
})(<Switch name="allow_text_message" />)} >
<Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_addr1")}> <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
{getFieldDecorator("ownr_addr1", { <Input />
initialValue: owner.ownr_addr1
})(<Input name="ownr_addr1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_addr2")}> <Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
{getFieldDecorator("ownr_addr2", { <Input />
initialValue: owner.ownr_addr2
})(<Input name="ownr_addr2" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_city")}> <Form.Item label={t("owners.fields.ownr_city")} name="ownr_city">
{getFieldDecorator("ownr_city", { <Input />
initialValue: owner.ownr_city
})(<Input name="ownr_city" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_ctry")}> <Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
{getFieldDecorator("ownr_ctry", { <Input />
initialValue: owner.ownr_ctry
})(<Input name="ownr_ctry" />)}
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
{" "} <Form.Item
<Form.Item label={t("owners.fields.ownr_ea")}> label={t("owners.fields.ownr_ea")}
{getFieldDecorator("ownr_ea", { name="ownr_ea"
initialValue: owner.ownr_ea, rules={[
rules: [ {
{ type: "email",
type: "email", message: "This is not a valid email address."
message: "This is not a valid email address." }
} ]}
] >
})( <FormItemEmail email={getFieldValue("ownr_ea")} />
<FormItemEmail name="ownr_ea" email={getFieldValue("ownr_ea")} />
)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_ph1")}> <Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
{getFieldDecorator("ownr_ph1", { <FormItemPhone customInput={Input} />
initialValue: owner.ownr_ph1
})(<FormItemPhone customInput={Input} name="ownr_ph1" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_st")}> <Form.Item label={t("owners.fields.ownr_st")} name="ownr_st">
{getFieldDecorator("ownr_st", { <Input />
initialValue: owner.ownr_st
})(<Input name="ownr_st" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_zip")}> <Form.Item label={t("owners.fields.ownr_zip")} name="ownr_zip">
{getFieldDecorator("ownr_zip", { <Input />
initialValue: owner.ownr_zip
})(<Input name="ownr_zip" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.preferred_contact")}> <Form.Item
{getFieldDecorator("preferred_contact", { label={t("owners.fields.preferred_contact")}
initialValue: owner.preferred_contact name="preferred_contact"
})(<Input name="preferred_contact" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("owners.fields.ownr_title")}> <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
{getFieldDecorator("ownr_title", { <Input />
initialValue: owner.ownr_title
})(<Input name="ownr_title" />)}
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>

48
client/src/components/owner-detail-form/owner-detail-form.container.jsx
View File

@@ -5,42 +5,34 @@ import { useTranslation } from "react-i18next";
import { UPDATE_OWNER } from "../../graphql/owners.queries"; import { UPDATE_OWNER } from "../../graphql/owners.queries";
import OwnerDetailFormComponent from "./owner-detail-form.component"; import OwnerDetailFormComponent from "./owner-detail-form.component";
function OwnerDetailFormContainer({ form, owner, refetch }) { function OwnerDetailFormContainer({ owner, refetch }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm();
const [updateOwner] = useMutation(UPDATE_OWNER); const [updateOwner] = useMutation(UPDATE_OWNER);
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); updateOwner({
variables: { ownerId: owner.id, owner: values }
form.validateFieldsAndScroll((err, values) => { }).then(r => {
if (err) { notification["success"]({
notification["error"]({ message: t("owners.successes.save")
message: t("owners.errors.validationtitle"), });
description: t("owners.errors.validation") //TODO Better way to reset the field decorators?
}); if (refetch) refetch().then();
} // resetFields();
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();
});
}
}); });
}; };
return ( return (
<Form onSubmit={handleSubmit} autoComplete="off"> <Form
<OwnerDetailFormComponent form={form} owner={owner} /> form={form}
onFinish={handleFinish}
autoComplete="off"
initialValues={owner}
>
<OwnerDetailFormComponent form={form} />
</Form> </Form>
); );
} }
export default Form.create({ name: "OwnerDetailFormContainer" })( export default OwnerDetailFormContainer;
OwnerDetailFormContainer
);

105
client/src/components/profile-my/profile-my.component.jsx
View File

@@ -16,61 +16,60 @@ const mapDispatchToProps = dispatch => ({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)( )(function ProfileMyComponent({
Form.create({ name: "ProfileMyComponentForm" })(function ProfileMyComponent({ currentUser,
currentUser,
form,
updateUserDetails
}) {
const { isFieldsTouched, resetFields, getFieldDecorator } = form;
const { t } = useTranslation();
const handleSubmit = e => { updateUserDetails
e.preventDefault(); }) {
const [form] = Form.useForm();
const { isFieldsTouched, resetFields } = form;
const { t } = useTranslation();
form.validateFieldsAndScroll((err, values) => { const handleSubmit = e => {
if (err) { e.preventDefault();
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
});
}
});
};
return ( form.validateFieldsAndScroll((err, values) => {
<div> if (err) {
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null} 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
});
}
});
};
<Form onSubmit={handleSubmit} autoComplete={"no"}> return (
<Form.Item label={t("user.fields.displayname")}> <div>
{getFieldDecorator("displayname", { {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
initialValue: currentUser.displayName,
rules: [{ required: true }]
})(<Input name='displayname' />)}
</Form.Item>
<Form.Item label={t("user.fields.photourl")}>
{getFieldDecorator("photoURL", {
initialValue: currentUser.photoURL
})(<Input name='photoURL' />)}
</Form.Item>
<Button <Form onSubmit={handleSubmit} autoComplete={"no"}>
type='primary' <Form.Item
key='submit' label={t("user.fields.displayname")}
htmlType='submit' rules={[{ required: true }]}
onClick={handleSubmit}> name="displayname"
{t("user.actions.updateprofile")} >
</Button> <Input />)
</Form> </Form.Item>
</div> <Form.Item label={t("user.fields.photourl")} name="photoURL">
); <Input />
}) </Form.Item>
);
<Button
type="primary"
key="submit"
htmlType="submit"
onClick={handleSubmit}
>
{t("user.actions.updateprofile")}
</Button>
</Form>
</div>
);
});

181
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -6,106 +6,125 @@ import { useTranslation } from "react-i18next";
export default function ShopEmployeesFormComponent({ export default function ShopEmployeesFormComponent({
form, form,
selectedEmployee, selectedEmployee,
handleSubmit handleFinish
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { getFieldDecorator } = form;
if (!selectedEmployee) return "//TODO No employee selected."; if (!selectedEmployee) return "//TODO No employee selected.";
return ( return (
<Form onSubmit={handleSubmit} autoComplete={"off"}> <Form
onFinish={handleFinish}
autoComplete={"off"}
form={form}
initialValues={{
...selectedEmployee,
hire_date: selectedEmployee.hire_date
? moment(selectedEmployee.hire_date)
: null,
termination_date: selectedEmployee.termination_date
? moment(selectedEmployee.termination_date)
: null
}}
>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
{t("general.actions.save")} {t("general.actions.save")}
</Button> </Button>
<Form.Item label={t("employees.fields.first_name")}> <Form.Item
{getFieldDecorator("first_name", { name="first_name"
initialValue: selectedEmployee.first_name, label={t("employees.fields.first_name")}
rules: [ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required")
} }
] ]}
})(<Input name="first_name" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.last_name")}> <Form.Item
{getFieldDecorator("last_name", { label={t("employees.fields.last_name")}
initialValue: selectedEmployee.last_name, name="last_name"
rules: [ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required")
} }
] ]}
})(<Input name="last_name" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.employee_number")}> <Form.Item
{getFieldDecorator("employee_number", { name="employee_number"
initialValue: selectedEmployee.employee_number, label={t("employees.fields.employee_number")}
rules: [ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required")
} }
] ]}
})(<Input name="employee_number" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.active")}> <Form.Item
{getFieldDecorator("active", { label={t("employees.fields.active")}
initialValue: selectedEmployee.active, valuePropName="checked"
valuePropName: "checked" name="active"
})(<Switch name="active" />)} >
<Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.flat_rate")}> <Form.Item
{getFieldDecorator("flat_rate", { label={t("employees.fields.flat_rate")}
initialValue: selectedEmployee.flat_rate, name="active"
valuePropName: "checked" valuePropName="checked"
})(<Switch name="active" />)} >
<Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.hire_date")}> <Form.Item
{getFieldDecorator("hire_date", { name="hire_date"
initialValue: selectedEmployee.hire_date label={t("employees.fields.hire_date")}
? moment(selectedEmployee.hire_date) rules={[
: null, {
rules: [ required: true,
{ message: t("general.validation.required")
required: true, }
message: t("general.validation.required") ]}
} >
] <DatePicker />
})(<DatePicker name="hire_date" />)}
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.termination_date")}> <Form.Item
{getFieldDecorator("termination_date", { label={t("employees.fields.termination_date")}
initialValue: selectedEmployee.termination_date name="termination_date"
? moment(selectedEmployee.termination_date) >
: null <DatePicker />
})(<DatePicker name="termination_date" />)}
</Form.Item> </Form.Item>
{ {
//TODO Make this a picklist. //TODO Make this a picklist.
} }
<Form.Item label={t("employees.fields.cost_center")}> <Form.Item
{getFieldDecorator("cost_center", { label={t("employees.fields.cost_center")}
initialValue: selectedEmployee.cost_center, name="cost_center"
rules: [ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required")
} }
] ]}
})(<Input name="cost_center" />)} >
<Input />
</Form.Item> </Form.Item>
<Form.Item label={t("employees.fields.base_rate")}> <Form.Item
{getFieldDecorator("base_rate", { label={t("employees.fields.base_rate")}
initialValue: selectedEmployee.base_rate, name="base_rate"
rules: [ rules={[
{ {
required: true, required: true,
message: t("general.validation.required") message: t("general.validation.required")
} }
] ]}
})(<InputNumber name="base_rate" />)} >
<InputNumber />
</Form.Item> </Form.Item>
</Form> </Form>
); );

102
client/src/components/shop-employees/shop-employees.container.jsx
View File

@@ -4,17 +4,22 @@ import { useMutation, useQuery } from "react-apollo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; 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 { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import ShopEmployeeComponent from "./shop-employees.component"; import ShopEmployeeComponent from "./shop-employees.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop
}); });
function ShopEmployeesContainer({ form, bodyshop }) { function ShopEmployeesContainer({ bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const employeeState = useState(null); const employeeState = useState(null);
const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, { const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
@@ -41,63 +46,49 @@ function ShopEmployeesContainer({ form, bodyshop }) {
}); });
}; };
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); if (employeeState[0].id) {
//Update a record.
form.validateFieldsAndScroll((err, values) => { updateEmployee({
if (err) { variables: { id: employeeState[0].id, employee: values }
notification["error"]({ })
message: t("employees.errors.validationtitle"), .then(r => {
description: t("employees.errors.validation") notification["success"]({
}); message: t("employees.successes.save")
}
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")
});
});
}); });
} //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 <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<ShopEmployeeComponent <ShopEmployeeComponent
handleSubmit={handleSubmit} handleFinish={handleFinish}
handleDelete={handleDelete} handleDelete={handleDelete}
form={form} form={form}
loading={loading} loading={loading}
@@ -106,7 +97,4 @@ function ShopEmployeesContainer({ form, bodyshop }) {
/> />
); );
} }
export default connect( export default connect(mapStateToProps, null)(ShopEmployeesContainer);
mapStateToProps,
null
)(Form.create({ name: "ShopEmployeesContainer" })(ShopEmployeesContainer));

143
client/src/components/sign-in-form/sign-in-form.component.jsx
View File

@@ -26,89 +26,74 @@ const mapDispatchToProps = dispatch => ({
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)( )(function SignInComponent({ emailSignInStart, currentUser, signInError }) {
Form.create({ name: "sign_in" })(function SignInComponent({ const apolloClient = useApolloClient();
form,
emailSignInStart,
currentUser,
signInError
}) {
const apolloClient = useApolloClient();
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); console.log("Login");
form.validateFields(async (err, values) => {
if (!err) { const { email, password } = values;
const { email, password } = values; emailSignInStart(email, password);
emailSignInStart(email, password); //Try to do the login using a saga here.
//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) { return (
apolloClient <div>
.mutate({ {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
mutation: UPSERT_USER,
variables: {
authEmail: currentUser.email,
authToken: currentUser.uid
}
})
.then()
.catch(error => {
console.log("User login upsert error.", error);
});
}
const { getFieldDecorator } = form; <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
return (
<div>
{currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
<img src={Logo} height="100" width="100" alt="Bodyshop.app" /> <Form onFinish={handleFinish}>
<Form.Item
name="email"
label="E-mail"
rules={[
{
//TODO Ensure using translations.
type: "email",
message: "Please enter a valid email."
},
{
required: true,
message: "Please your email."
}
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: "Please enter your password." }]}
>
<Input
prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form onSubmit={handleSubmit} className="login-form"> <div>Forgot password</div>
<Form.Item label="E-mail"> <Button type="primary" htmlType="submit">
{getFieldDecorator("email", { Log in
rules: [ </Button>
{
type: "email", {signInError ? <div>{signInError.message}</div> : null}
message: "Please enter a valid email." </Form>
}, </div>
{ );
required: true, });
message: "Please your email."
}
]
})(<Input />)}
</Form.Item>
<Form.Item>
{getFieldDecorator("password", {
rules: [
{ required: true, message: "Please enter your password." }
]
})(
<Input
prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="Password"
/>
)}
</Form.Item>
<Form.Item>
<div className="login-form-forgot">Forgot password</div>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
>
Log in
</Button>
</Form.Item>
{signInError ? <div>{signInError.message}</div> : null}
</Form>
</div>
);
})
);

2
client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
View File

@@ -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 moment from "moment";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

44
client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
View File

@@ -5,42 +5,30 @@ import VehicleDetailFormComponent from "./vehicle-detail-form.component";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries"; import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
function VehicleDetailFormContainer({ form, vehicle, refetch }) { function VehicleDetailFormContainer({ vehicle, refetch }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [updateVehicle] = useMutation(UPDATE_VEHICLE); const [updateVehicle] = useMutation(UPDATE_VEHICLE);
const [form] = Form.useForm();
const { resetFields } = form;
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); updateVehicle({
variables: { vehId: vehicle.id, vehicle: values }
form.validateFieldsAndScroll((err, values) => { }).then(r => {
if (err) { notification["success"]({
notification["error"]({ message: t("vehicles.successes.save")
message: t("vehicles.errors.validationtitle"), });
description: t("vehicles.errors.validation") //TODO Better way to reset the field decorators?
}); if (refetch) refetch().then();
} resetFields();
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();
});
}
}); });
}; };
return ( return (
<Form onSubmit={handleSubmit} autoComplete="off"> <Form onFinish={handleFinish} form={Form} autoComplete="off">
<VehicleDetailFormComponent form={form} vehicle={vehicle} /> <VehicleDetailFormComponent vehicle={vehicle} form={form} />
</Form> </Form>
); );
} }
export default Form.create({ name: "VehicleDetailFormContainer" })( export default VehicleDetailFormContainer;
VehicleDetailFormContainer
);

94
client/src/components/vendors-form/vendors-form.container.jsx
View File

@@ -19,7 +19,8 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop
}); });
function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) { function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation(); const { t } = useTranslation();
const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, { const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
variables: { id: vendorId }, variables: { id: vendorId },
@@ -45,61 +46,49 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
}); });
}; };
const handleSubmit = e => { const handleFinish = values => {
e.preventDefault(); delete values.keys;
form.validateFieldsAndScroll((err, values) => { if (vendorId) {
if (err) { //It's a vendor to update.
notification["error"]({ updateVendor({
message: t("jobs.errors.validationtitle"), variables: { id: vendorId, vendor: values }
description: t("jobs.errors.validation") })
.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 {
if (!err) { //It's a new vendor to insert.
console.log("Received values of form: ", values); insertvendor({
delete values.keys; variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
if (vendorId) { })
//It's a vendor to update. .then(r => {
updateVendor({ notification["success"]({
variables: { id: vendorId, vendor: values } message: t("vendors.successes.saved")
}) });
.then(r => { //TODO Better way to reset the field decorators?
notification["success"]({ if (refetch) refetch().then(r => form.resetFields());
message: t("vendors.successes.saved") })
}); .catch(error => {
//TODO Better way to reset the field decorators? notification["error"]({
if (refetch) refetch().then(r => form.resetFields()); message: t("vendors.errors.saving")
}) });
.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 <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<Form onSubmit={handleSubmit} autoComplete="new-password"> <Form onFinish={handleFinish} form={form} autoComplete="new-password">
{data ? ( {data ? (
<VendorsFormComponent <VendorsFormComponent
form={form} form={form}
@@ -112,7 +101,4 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
</Form> </Form>
); );
} }
export default connect( export default connect(mapStateToProps, null)(VendorsFormContainer);
mapStateToProps,
null
)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer));

1
client/src/graphql/jobs.queries.js
View File

@@ -94,6 +94,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
export const GET_JOB_BY_PK = gql` export const GET_JOB_BY_PK = gql`
query GET_JOB_BY_PK($id: uuid!) { query GET_JOB_BY_PK($id: uuid!) {
jobs_by_pk(id: $id) { jobs_by_pk(id: $id) {
updated_at
service_car service_car
csr csr
loss_desc loss_desc

93
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -1,21 +1,9 @@
import { Form, Tabs } from "antd"; import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
import { import { Form, notification, Tabs } from "antd";
BarsOutlined, import moment from "moment";
DollarCircleOutlined, import React, { lazy, Suspense } from "react";
ToolFilled,
CalendarFilled,
FileImageFilled
} from "@ant-design/icons";
import Icon from "@ant-design/icons";
import React, { lazy, Suspense, useContext } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
FaHardHat,
FaInfo,
FaRegStickyNote,
FaShieldAlt
} from "react-icons/fa";
import ResetForm from "../../components/form-items-formatted/reset-form-item.component";
//import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container"; //import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
//import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component"; //import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
//import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.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 JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
//import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container"; //import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; 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(() => const JobsLinesContainer = lazy(() =>
import("../../components/job-detail-lines/job-lines.container") import("../../components/job-detail-lines/job-lines.container")
@@ -70,6 +56,9 @@ const JobLineUpsertModalContainer = lazy(() =>
const EnterInvoiceModalContainer = lazy(() => const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container") 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({ export default function JobsDetailPage({
job, job,
@@ -81,8 +70,7 @@ export default function JobsDetailPage({
updateJobStatus updateJobStatus
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm();
const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
const formItemLayout = { const formItemLayout = {
labelCol: { 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 ( return (
<Suspense <Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />} fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
@@ -108,7 +107,45 @@ export default function JobsDetailPage({
<JobLineUpsertModalContainer /> <JobLineUpsertModalContainer />
<EnterInvoiceModalContainer /> <EnterInvoiceModalContainer />
<Form onSubmit={handleSubmit} {...formItemLayout} autoComplete={"off"}> <Form
form={form}
onFieldsChange={(a, b) => 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
}}
>
<Form.Item name="updated_at">
<input />
</Form.Item>
<JobsDetailHeader <JobsDetailHeader
job={job} job={job}
mutationConvertJob={mutationConvertJob} mutationConvertJob={mutationConvertJob}
@@ -117,9 +154,6 @@ export default function JobsDetailPage({
scheduleModalState={scheduleModalState} scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus} updateJobStatus={updateJobStatus}
/> />
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Tabs defaultActiveKey="claimdetail"> <Tabs defaultActiveKey="claimdetail">
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
@@ -132,7 +166,6 @@ export default function JobsDetailPage({
> >
<JobsDetailClaims job={job} /> <JobsDetailClaims job={job} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -142,9 +175,8 @@ export default function JobsDetailPage({
} }
key="insurance" key="insurance"
> >
<JobsDetailInsurance job={job} /> <JobsDetailInsurance job={job} form={form} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -156,7 +188,6 @@ export default function JobsDetailPage({
> >
<JobsLinesContainer jobId={job.id} /> <JobsLinesContainer jobId={job.id} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -168,7 +199,6 @@ export default function JobsDetailPage({
> >
<JobsDetailFinancials job={job} /> <JobsDetailFinancials job={job} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -180,7 +210,6 @@ export default function JobsDetailPage({
> >
<JobsDetailPliContainer job={job} /> <JobsDetailPliContainer job={job} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -192,7 +221,6 @@ export default function JobsDetailPage({
> >
Labor Labor
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>
@@ -204,7 +232,6 @@ export default function JobsDetailPage({
> >
<JobsDetailDatesComponent job={job} />} <JobsDetailDatesComponent job={job} />}
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={
<span> <span>

56
client/src/pages/jobs-detail/jobs-detail.page.container.jsx
View File

@@ -1,4 +1,4 @@
import { Form, notification } from "antd"; import { notification } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useMutation, useQuery } from "react-apollo"; import { useMutation, useQuery } from "react-apollo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -11,9 +11,8 @@ import {
UPDATE_JOB_STATUS UPDATE_JOB_STATUS
} from "../../graphql/jobs.queries"; } from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page.component"; 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 { jobId } = match.params;
const { t } = useTranslation(); const { t } = useTranslation();
@@ -52,49 +51,20 @@ function JobsDetailPageContainer({ match, form }) {
}); });
}, [loading, data, t, error]); }, [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 <SpinComponent />; if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />; if (error) return <AlertComponent message={error.message} type="error" />;
return data.jobs_by_pk ? ( return data.jobs_by_pk ? (
<JobDetailFormContext.Provider value={form}> <JobsDetailPage
<JobsDetailPage job={data.jobs_by_pk}
job={data.jobs_by_pk} mutationConvertJob={mutationConvertJob}
mutationUpdateJob={mutationUpdateJob} mutationUpdateJob={mutationUpdateJob}
mutationConvertJob={mutationConvertJob} refetch={refetch}
handleSubmit={handleSubmit} scheduleModalState={scheduleModalState}
getFieldDecorator={form.getFieldDecorator} updateJobStatus={updateJobStatus}
refetch={refetch} />
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
/>
</JobDetailFormContext.Provider>
) : ( ) : (
<AlertComponent message={t("jobs.errors.noaccess")} type='error' /> <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
); );
} }
export default Form.create({ name: "JobsDetailPageContainer" })( export default JobsDetailPageContainer;
JobsDetailPageContainer
);