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

Refactored some of the job detail form to use context. Created claims component.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-27 18:18:55 -08:00
parent b5e9c65aee
commit 265bc7d486
9 changed files with 169 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
bodyshop_translations.babel
View File

@@ -188,6 +188,32 @@
<folder_node>
<name>general</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>reset</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
@@ -387,6 +413,32 @@
</concept_node>
</children>
</folder_node>
<folder_node>
<name>messages</name>
<children>
<concept_node>
<name>unsavedchanges</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>
</folder_node>
<folder_node>

44
client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx Normal file
View File

@@ -0,0 +1,44 @@
import React, { useContext } from "react";
import { Form, Input } from "antd";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
export default function JobsDetailClaims({ job }) {
const form = useContext(JobDetailFormContext);
const { getFieldDecorator, isFieldTouched } = form;
return (
<div>
<div>
<Form.Item label='Estimator Last Name'>
{isFieldTouched("est_ct_ln") ? "Yes" : "No"}
{getFieldDecorator("est_ct_ln", {
initialValue: job.est_ct_ln
})(<Input name='est_ct_ln' />)}
</Form.Item>
<Form.Item label='Estimator First Name'>
{getFieldDecorator("est_ct_fn", {
initialValue: job.est_ct_fn
})(<Input name='est_ct_fn' />)}
</Form.Item>
<Form.Item label='Estimator Phone #'>
{getFieldDecorator("est_ph1", {
initialValue: job.est_ph1
})(<FormItemPhone customInput={Input} name='est_ph1' />)}
</Form.Item>
<Form.Item label='Estimator Email'>
{getFieldDecorator("est_ea", {
initialValue: job.est_ea,
rules: [
{
type: "email",
message: "This is not a valid email address."
}
]
})(<Input name='est_ea' />)}
</Form.Item>
</div>
</div>
);
}

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

@@ -1,14 +1,4 @@
import {
Avatar,
Button,
Descriptions,
notification,
PageHeader,
Tag,
Input,
Form,
Checkbox
} from "antd";
import { Avatar, Button, Checkbox, Descriptions, notification, PageHeader, Tag } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
@@ -95,7 +85,7 @@ export default function JobsDetailHeader({
</Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.customerowing")}>
$NO BINDING YET
##NO BINDING YET##
</Descriptions.Item>
<Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>

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

@@ -1,24 +1,31 @@
import { Form, Icon, Tabs } from "antd";
import React from "react";
import { Form, Icon, Tabs, Alert, Button } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import { FaRegStickyNote } from "react-icons/fa";
import {
FaInfo,
FaRegStickyNote,
FaShieldAlt,
FaHardHat
} from "react-icons/fa";
import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
import JobsRatesContainer from "../../components/jobs-rates/jobs-rates.container";
import JobDetailFormContext from "./jobs-detail.page.context";
export default function JobsDetailPage({
job,
mutationUpdateJob,
mutationConvertJob,
handleSubmit,
handleChange,
getFieldDecorator,
refetch
}) {
const { t } = useTranslation();
const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
const formItemLayout = {
labelCol: {
xs: { span: 12 },
@@ -30,69 +37,44 @@ export default function JobsDetailPage({
}
};
// const TEMP = (
// <div>
// {" "}
// <Form.Item label='Estimator Last Name'>
// {getFieldDecorator("est_ct_ln", {
// initialValue: jobContext.est_ct_ln
// })(<Input name='est_ct_ln' onChange={handleChange} />)}
// </Form.Item>
// <Form.Item label='Estimator First Name'>
// {getFieldDecorator("est_ct_fn", {
// initialValue: jobContext.est_ct_fn
// })(<Input name='est_ct_fn' onChange={handleChange} />)}
// </Form.Item>
// <Form.Item label='Estimator Phone #'>
// {getFieldDecorator("est_ph1", {
// initialValue: jobContext.est_ph1
// })(
// <FormItemPhone
// customInput={Input}
// name='est_ph1'
// onValueChange={handleChange}
// />
// )}
// </Form.Item>
// <Form.Item label='Estimator Email'>
// {getFieldDecorator("est_ea", {
// initialValue: jobContext.est_ea,
// rules: [
// {
// type: "email",
// message: "This is not a valid email address."
// }
// ]
// })(<Input name='est_ea' onChange={handleChange} />)}
// </Form.Item>
// </div>
// );
return (
<Form onSubmit={handleSubmit} {...formItemLayout}>
<JobsDetailHeader
job={job}
mutationConvertJob={mutationConvertJob}
refetch={refetch}
getFieldDecorator={getFieldDecorator}
/>
{isFieldsTouched() ? (
<Alert
message={
<div>
{t("general.messages.unsavedchanges")}
<Button onClick={() => resetFields()}>
{t("general.actions.reset")}
</Button>
</div>
}
closable
/>
) : null}
<Tabs defaultActiveKey='claimdetail'>
<Tabs.TabPane
tab={
<span>
<Icon type='bars' />
<Icon component={FaInfo} />
{t("menus.jobsdetail.claimdetail")}
</span>
}
key='claimdetail'>
Claim detail
<JobsDetailClaims job={job} />
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<Icon type='bars' />
<Icon component={FaShieldAlt} />
{t("menus.jobsdetail.insurance")}
</span>
}
@@ -125,7 +107,7 @@ export default function JobsDetailPage({
<Tabs.TabPane
tab={
<span>
<Icon type='bars' />
<Icon type='tool' />
{t("menus.jobsdetail.partssublet")}
</span>
}
@@ -136,7 +118,7 @@ export default function JobsDetailPage({
<Tabs.TabPane
tab={
<span>
<Icon type='bars' />
<Icon component={FaHardHat} />
{t("menus.jobsdetail.labor")}
</span>
}
@@ -147,7 +129,7 @@ export default function JobsDetailPage({
<Tabs.TabPane
tab={
<span>
<Icon type='bars' />
<Icon type='calendar' />
{t("menus.jobsdetail.dates")}
</span>
}

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

@@ -5,11 +5,12 @@ import { useTranslation } from "react-i18next";
import AlertComponent from "../../components/alert/alert.component";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import {
CONVERT_JOB_TO_RO,
GET_JOB_BY_PK,
UPDATE_JOB,
CONVERT_JOB_TO_RO
UPDATE_JOB
} from "../../graphql/jobs.queries";
import JobsDetailPage from "./jobs-detail.page.component";
import JobDetailFormContext from "./jobs-detail.page.context";
function JobsDetailPageContainer({ match, form }) {
const { jobId } = match.params;
@@ -44,32 +45,30 @@ function JobsDetailPageContainer({ match, form }) {
if (!err) {
mutationUpdateJob({
variables: { jobId: data.jobs_by_pk.id, job: values }
}).then(r =>
}).then(r => {
notification["success"]({
message: t("jobs.successes.savetitle")
})
);
});
//TODO: Better way to reset the field decorators?
refetch().then(r => form.resetFields());
});
}
});
};
const handleChange = event => {
//const { name, value } = event.target ? event.target : event;
//setJobContext({ ...jobContext, [name]: value });
};
if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return data.jobs_by_pk ? (
<JobsDetailPage
job={data.jobs_by_pk}
mutationUpdateJob={mutationUpdateJob}
mutationConvertJob={mutationConvertJob}
handleSubmit={handleSubmit}
handleChange={handleChange}
getFieldDecorator={form.getFieldDecorator}
refetch={refetch}
/>
<JobDetailFormContext.Provider value={form}>
<JobsDetailPage
job={data.jobs_by_pk}
mutationUpdateJob={mutationUpdateJob}
mutationConvertJob={mutationConvertJob}
handleSubmit={handleSubmit}
getFieldDecorator={form.getFieldDecorator}
refetch={refetch}
/>
</JobDetailFormContext.Provider>
) : (
<AlertComponent message={t("jobs.errors.noaccess")} type='error' />
);

3
client/src/pages/jobs-detail/jobs-detail.page.context.jsx Normal file
View File

@@ -0,0 +1,3 @@
import React from "react";
const JobDetailFormContext = React.createContext(null);
export default JobDetailFormContext;

6
client/src/translations/en_us/common.json
View File

@@ -16,6 +16,9 @@
}
},
"general": {
"actions": {
"reset": "Reset to original."
},
"labels": {
"in": "In",
"loading": "Loading...",
@@ -28,6 +31,9 @@
"english": "English",
"french": "French",
"spanish": "Spanish"
},
"messages": {
"unsavedchanges": "You have unsaved changes."
}
},
"jobs": {

6
client/src/translations/es/common.json
View File

@@ -16,6 +16,9 @@
}
},
"general": {
"actions": {
"reset": "Restablecer a original."
},
"labels": {
"in": "en",
"loading": "Cargando...",
@@ -28,6 +31,9 @@
"english": "Inglés",
"french": "francés",
"spanish": "español"
},
"messages": {
"unsavedchanges": "Usted tiene cambios no guardados."
}
},
"jobs": {

6
client/src/translations/fr/common.json
View File

@@ -16,6 +16,9 @@
}
},
"general": {
"actions": {
"reset": "Rétablir l'original."
},
"labels": {
"in": "dans",
"loading": "Chargement...",
@@ -28,6 +31,9 @@
"english": "Anglais",
"french": "Francais",
"spanish": "Espanol"
},
"messages": {
"unsavedchanges": "Vous avez des changements non enregistrés."
}
},
"jobs": {