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

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

@@ -1,21 +1,9 @@
import { Form, Tabs } from "antd";
import {
BarsOutlined,
DollarCircleOutlined,
ToolFilled,
CalendarFilled,
FileImageFilled
} from "@ant-design/icons";
import Icon from "@ant-design/icons";
import React, { lazy, Suspense, useContext } from "react";
import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
import { Form, notification, Tabs } from "antd";
import moment from "moment";
import React, { lazy, Suspense } from "react";
import { useTranslation } from "react-i18next";
import {
FaHardHat,
FaInfo,
FaRegStickyNote,
FaShieldAlt
} from "react-icons/fa";
import ResetForm from "../../components/form-items-formatted/reset-form-item.component";
import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
//import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
//import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
//import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
@@ -28,8 +16,6 @@ import ResetForm from "../../components/form-items-formatted/reset-form-item.com
//import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
//import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import JobDetailFormContext from "./jobs-detail.page.context";
import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container";
const JobsLinesContainer = lazy(() =>
import("../../components/job-detail-lines/job-lines.container")
@@ -70,6 +56,9 @@ const JobLineUpsertModalContainer = lazy(() =>
const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
const JobsDetailPliContainer = lazy(() =>
import("../../components/jobs-detail-pli/jobs-detail-pli.container")
);
export default function JobsDetailPage({
job,
@@ -81,8 +70,7 @@ export default function JobsDetailPage({
updateJobStatus
}) {
const { t } = useTranslation();
const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
const [form] = Form.useForm();
const formItemLayout = {
labelCol: {
@@ -95,6 +83,17 @@ export default function JobsDetailPage({
}
};
const handleFinish = values => {
mutationUpdateJob({
variables: { jobId: job.id, job: values }
}).then(r => {
notification["success"]({
message: t("jobs.successes.savetitle")
});
refetch().then(r => form.resetFields());
});
};
return (
<Suspense
fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
@@ -108,7 +107,45 @@ export default function JobsDetailPage({
<JobLineUpsertModalContainer />
<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
job={job}
mutationConvertJob={mutationConvertJob}
@@ -117,9 +154,6 @@ export default function JobsDetailPage({
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
/>
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Tabs defaultActiveKey="claimdetail">
<Tabs.TabPane
tab={
@@ -132,7 +166,6 @@ export default function JobsDetailPage({
>
<JobsDetailClaims job={job} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -142,9 +175,8 @@ export default function JobsDetailPage({
}
key="insurance"
>
<JobsDetailInsurance job={job} />
<JobsDetailInsurance job={job} form={form} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -156,7 +188,6 @@ export default function JobsDetailPage({
>
<JobsLinesContainer jobId={job.id} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -168,7 +199,6 @@ export default function JobsDetailPage({
>
<JobsDetailFinancials job={job} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -180,7 +210,6 @@ export default function JobsDetailPage({
>
<JobsDetailPliContainer job={job} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -192,7 +221,6 @@ export default function JobsDetailPage({
>
Labor
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
@@ -204,7 +232,6 @@ export default function JobsDetailPage({
>
<JobsDetailDatesComponent job={job} />}
</Tabs.TabPane>
<Tabs.TabPane
tab={
<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 { useMutation, useQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
@@ -11,9 +11,8 @@ import {
UPDATE_JOB_STATUS
} from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page.component";
import JobDetailFormContext from "./jobs-detail.page.context";
function JobsDetailPageContainer({ match, form }) {
function JobsDetailPageContainer({ match }) {
const { jobId } = match.params;
const { t } = useTranslation();
@@ -52,49 +51,20 @@ function JobsDetailPageContainer({ match, form }) {
});
}, [loading, data, t, error]);
const handleSubmit = e => {
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (err) {
notification["error"]({
message: t("jobs.errors.validationtitle"),
description: t("jobs.errors.validation")
});
}
if (!err) {
mutationUpdateJob({
variables: { jobId: data.jobs_by_pk.id, job: values }
}).then(r => {
notification["success"]({
message: t("jobs.successes.savetitle")
});
refetch().then(r => form.resetFields());
});
}
});
};
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
if (error) return <AlertComponent message={error.message} type="error" />;
return data.jobs_by_pk ? (
<JobDetailFormContext.Provider value={form}>
<JobsDetailPage
job={data.jobs_by_pk}
mutationUpdateJob={mutationUpdateJob}
mutationConvertJob={mutationConvertJob}
handleSubmit={handleSubmit}
getFieldDecorator={form.getFieldDecorator}
refetch={refetch}
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
/>
</JobDetailFormContext.Provider>
<JobsDetailPage
job={data.jobs_by_pk}
mutationConvertJob={mutationConvertJob}
mutationUpdateJob={mutationUpdateJob}
refetch={refetch}
scheduleModalState={scheduleModalState}
updateJobStatus={updateJobStatus}
/>
) : (
<AlertComponent message={t("jobs.errors.noaccess")} type='error' />
<AlertComponent message={t("jobs.errors.noaccess")} type="error" />
);
}
export default Form.create({ name: "JobsDetailPageContainer" })(
JobsDetailPageContainer
);
export default JobsDetailPageContainer;