359 lines
12 KiB
JavaScript
359 lines
12 KiB
JavaScript
import Icon, {
|
|
BarsOutlined,
|
|
CalendarFilled,
|
|
DollarCircleOutlined,
|
|
FileImageFilled,
|
|
HistoryOutlined,
|
|
PrinterFilled,
|
|
SyncOutlined,
|
|
ToolFilled,
|
|
} from "@ant-design/icons";
|
|
import {
|
|
Button,
|
|
Divider,
|
|
Form,
|
|
Space,
|
|
Tabs,
|
|
notification,
|
|
} from "antd";
|
|
import {PageHeader} from "@ant-design/pro-layout";
|
|
|
|
import Axios from "axios";
|
|
import dayjs from "../../utils/day";
|
|
import queryString from "query-string";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
|
|
import { connect } from "react-redux";
|
|
import {useNavigate, useLocation} from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
|
|
import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
|
|
import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
|
|
import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
|
|
import JobReconciliationModal from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
|
|
import JobSyncButton from "../../components/job-sync-button/job-sync-button.component";
|
|
import JobsChangeStatus from "../../components/jobs-change-status/jobs-change-status.component";
|
|
import JobsConvertButton from "../../components/jobs-convert-button/jobs-convert-button.component";
|
|
import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
|
|
import JobsDetailGeneral from "../../components/jobs-detail-general/jobs-detail-general.component";
|
|
import JobsDetailHeaderActions from "../../components/jobs-detail-header-actions/jobs-detail-header-actions.component";
|
|
import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
|
|
import JobsDetailLaborContainer from "../../components/jobs-detail-labor/jobs-detail-labor.container";
|
|
import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container";
|
|
import JobsDetailRates from "../../components/jobs-detail-rates/jobs-detail-rates.component";
|
|
import JobsDetailTotals from "../../components/jobs-detail-totals/jobs-detail-totals.component";
|
|
import JobsDocumentsGalleryContainer from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
|
|
import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
|
|
import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
|
|
import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
|
|
import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
|
|
import { insertAuditTrail } from "../../redux/application/application.actions";
|
|
import { selectJobReadOnly } from "../../redux/application/application.selectors";
|
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import AuditTrailMapping from "../../utils/AuditTrailMappings";
|
|
import UndefinedToNull from "../../utils/undefinedtonull";
|
|
import { DateTimeFormat } from "./../../utils/DateFormatter";
|
|
import JobLifecycleComponent from "../../components/job-lifecycle/job-lifecycle.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
jobRO: selectJobReadOnly,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setPrintCenterContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "printCenter" })),
|
|
insertAuditTrail: ({ jobid, operation }) =>
|
|
dispatch(insertAuditTrail({ jobid, operation })),
|
|
});
|
|
export function JobsDetailPage({
|
|
bodyshop,
|
|
setPrintCenterContext,
|
|
jobRO,
|
|
job,
|
|
mutationUpdateJob,
|
|
handleSubmit,
|
|
insertAuditTrail,
|
|
refetch,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
const history = useNavigate();
|
|
const [loading, setLoading] = useState(false);
|
|
const search = queryString.parse(useLocation().search);
|
|
const formItemLayout = {
|
|
layout: "vertical",
|
|
};
|
|
|
|
useEffect(() => {
|
|
//form.setFieldsValue(transormJobToForm(job));
|
|
form.resetFields();
|
|
}, [form, job]);
|
|
|
|
//useKeyboardSaveShortcut(form.submit);
|
|
|
|
const handleFinish = async (values) => {
|
|
setLoading(true);
|
|
|
|
const result = await mutationUpdateJob({
|
|
variables: {
|
|
jobId: job.id,
|
|
job: {
|
|
...UndefinedToNull(values, [
|
|
"alt_transport",
|
|
"category",
|
|
"referral_source",
|
|
]),
|
|
parts_tax_rates: {
|
|
...job.parts_tax_rates,
|
|
...values.parts_tax_rates,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
const newTotals = await Axios.post("/job/totalsssu", {
|
|
id: job.id,
|
|
});
|
|
|
|
if (newTotals.status !== 200 || result.errors) {
|
|
notification["error"]({
|
|
message: t("jobs.errors.totalscalc"),
|
|
});
|
|
} else {
|
|
notification["success"]({
|
|
message: t("jobs.successes.savetitle"),
|
|
});
|
|
const changedAuditFields = form.getFieldsValue(
|
|
[
|
|
"scheduled_in",
|
|
"actual_in",
|
|
"scheduled_completion",
|
|
"actual_completion",
|
|
"scheduled_delivery",
|
|
"actual_delivery",
|
|
"date_invoiced",
|
|
"ins_co_nm",
|
|
"ded_amt",
|
|
"ded_status",
|
|
"date_exported",
|
|
"special_coverage_policy",
|
|
"ca_gst_registrant",
|
|
"ca_bc_pvrt",
|
|
"scheduled_in",
|
|
"rate_la1",
|
|
"rate_la2",
|
|
"rate_la3",
|
|
"rate_la4",
|
|
"rate_laa",
|
|
"rate_lab",
|
|
"rate_lad",
|
|
"rate_lae",
|
|
"rate_laf",
|
|
"rate_lag",
|
|
"rate_lam",
|
|
"rate_lar",
|
|
"rate_las",
|
|
"rate_lau",
|
|
"rate_ma2s",
|
|
"rate_ma2t",
|
|
"rate_ma3s",
|
|
"rate_mabl",
|
|
"rate_macs",
|
|
"rate_mapa",
|
|
"rate_mahw",
|
|
"rate_mash",
|
|
"rate_matd",
|
|
],
|
|
(meta) => meta && meta.touched
|
|
);
|
|
|
|
Object.keys(changedAuditFields).forEach((key) => {
|
|
insertAuditTrail({
|
|
jobid: job.id,
|
|
operation: AuditTrailMapping.jobfieldchange(
|
|
key,
|
|
changedAuditFields[key] instanceof dayjs
|
|
? DateTimeFormat(changedAuditFields[key])
|
|
: changedAuditFields[key]
|
|
),
|
|
});
|
|
});
|
|
|
|
await refetch();
|
|
form.setFieldsValue(transormJobToForm(job));
|
|
form.resetFields();
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const menuExtra = (
|
|
<Space wrap>
|
|
<Button
|
|
onClick={() => {
|
|
refetch();
|
|
}}
|
|
key="refresh"
|
|
>
|
|
<SyncOutlined />
|
|
{t("general.labels.refresh")}
|
|
</Button>
|
|
<JobsChangeStatus job={job} />
|
|
<JobSyncButton job={job} />
|
|
<Button
|
|
onClick={() => {
|
|
setPrintCenterContext({
|
|
actions: { refetch: refetch },
|
|
context: {
|
|
id: job.id,
|
|
job: job,
|
|
type: "job",
|
|
},
|
|
});
|
|
}}
|
|
key="printing"
|
|
>
|
|
<PrinterFilled />
|
|
{t("jobs.actions.printCenter")}
|
|
</Button>
|
|
<JobsConvertButton
|
|
job={job}
|
|
refetch={refetch}
|
|
parentFormIsFieldsTouched={form.isFieldsTouched}
|
|
/>
|
|
<JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
|
|
<Button
|
|
type="primary"
|
|
loading={loading}
|
|
disabled={jobRO}
|
|
onClick={() => form.submit()}
|
|
>
|
|
{t("general.actions.save")}
|
|
</Button>
|
|
</Space>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<ScheduleJobModalContainer />
|
|
<JobReconciliationModal />
|
|
<JobLineUpsertModalContainer />
|
|
<NoteUpsertModalComponent />
|
|
<Form
|
|
form={form}
|
|
name="JobDetailForm"
|
|
onFinish={handleFinish}
|
|
{...formItemLayout}
|
|
autoComplete={"off"}
|
|
initialValues={transormJobToForm(job)}
|
|
>
|
|
<PageHeader
|
|
// onBack={() => window.history.back()}
|
|
title={job.ro_number || t("general.labels.na")}
|
|
extra={menuExtra}
|
|
/>
|
|
<JobsDetailHeader job={job} />
|
|
<Divider type="horizontal" />
|
|
<FormFieldsChanged form={form} />
|
|
<Tabs
|
|
defaultActiveKey={search.tab}
|
|
onChange={(key) => history({ search: `?tab=${key}` })}
|
|
tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
|
|
items={[
|
|
{
|
|
key: "general",
|
|
icon: <Icon component={FaShieldAlt} />,
|
|
label: t("menus.jobsdetail.general"),
|
|
forceRender: true,
|
|
children: <JobsDetailGeneral job={job} form={form} />,
|
|
},
|
|
{
|
|
key: "repairdata",
|
|
icon: <BarsOutlined />,
|
|
label: t("menus.jobsdetail.repairdata"),
|
|
forceRender: true,
|
|
children: (
|
|
<JobsLinesContainer
|
|
job={job}
|
|
joblines={job.joblines}
|
|
refetch={refetch}
|
|
form={form}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: "rates",
|
|
icon: <DollarCircleOutlined />,
|
|
label: t("menus.jobsdetail.rates"),
|
|
forceRender: true,
|
|
children: <JobsDetailRates job={job} form={form} />,
|
|
},
|
|
{
|
|
key: "totals",
|
|
icon: <DollarCircleOutlined />,
|
|
label: t("menus.jobsdetail.totals"),
|
|
children: <JobsDetailTotals job={job} refetch={refetch} />,
|
|
},
|
|
{
|
|
key: "partssublet",
|
|
icon: <ToolFilled />,
|
|
label: t("menus.jobsdetail.partssublet"),
|
|
children: <JobsDetailPliContainer job={job} />,
|
|
},
|
|
{
|
|
key: "labor",
|
|
icon: <Icon component={FaHardHat} />,
|
|
label: t("menus.jobsdetail.labor"),
|
|
children: <JobsDetailLaborContainer job={job} jobId={job.id} />,
|
|
},
|
|
{
|
|
key: 'lifecycle',
|
|
icon: <BarsOutlined />,
|
|
label: t('menus.jobsdetail.lifecycle'),
|
|
children: <JobLifecycleComponent job={job} statuses={bodyshop.md_ro_statuses} />,
|
|
},
|
|
{
|
|
key: "dates",
|
|
icon: <CalendarFilled />,
|
|
label: t("menus.jobsdetail.dates"),
|
|
forceRender: true,
|
|
children: <JobsDetailDatesComponent job={job} />,
|
|
},
|
|
{
|
|
key: "documents",
|
|
icon: <FileImageFilled />,
|
|
label: t("jobs.labels.documents"),
|
|
children: bodyshop.uselocalmediaserver ? (
|
|
<JobsDocumentsLocalGallery job={job} />
|
|
) : (
|
|
<JobsDocumentsGalleryContainer jobId={job.id} />
|
|
),
|
|
},
|
|
{
|
|
key: "notes",
|
|
icon: <Icon component={FaRegStickyNote} />,
|
|
label: t("jobs.labels.notes"),
|
|
children: <JobNotesContainer jobId={job.id} />,
|
|
},
|
|
{
|
|
key: "audit",
|
|
icon: <HistoryOutlined />,
|
|
label: t("jobs.labels.audit"),
|
|
children: <JobAuditTrail jobId={job.id} />,
|
|
},
|
|
]}
|
|
/>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailPage);
|
|
|
|
const transormJobToForm = (job) => {
|
|
return {
|
|
...job,
|
|
loss_date: job.loss_date ? dayjs(job.loss_date) : null,
|
|
date_estimated: job.date_estimated ? dayjs(job.date_estimated) : null,
|
|
};
|
|
};
|