142 lines
3.6 KiB
JavaScript
142 lines
3.6 KiB
JavaScript
import {
|
|
Avatar,
|
|
Button,
|
|
Checkbox,
|
|
Descriptions,
|
|
notification,
|
|
PageHeader,
|
|
Tag
|
|
} from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Moment from "react-moment";
|
|
import { Link } from "react-router-dom";
|
|
import CarImage from "../../assets/car.svg";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
|
|
export default function JobsDetailHeader({
|
|
job,
|
|
mutationConvertJob,
|
|
refetch,
|
|
handleSubmit,
|
|
scheduleModalState
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
|
|
|
|
const tombstoneTitle = (
|
|
<div>
|
|
<Avatar size="large" alt="Vehicle Image" src={CarImage} />
|
|
{`${t("jobs.fields.ro_number")} ${
|
|
job.ro_number ? job.ro_number : t("general.labels.na")
|
|
}`}
|
|
</div>
|
|
);
|
|
|
|
const tombstoneSubtitle = (
|
|
<div>
|
|
<Tag color="red">
|
|
{job.owner ? (
|
|
<Link to={`/manage/owners/${job.owner.id}`}>
|
|
{`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln || ""}`}
|
|
</Link>
|
|
) : (
|
|
t("jobs.errors.noowner")
|
|
)}
|
|
</Tag>
|
|
|
|
<Tag color="green">
|
|
{job.vehicle ? (
|
|
<Link to={`/manage/vehicles/${job.vehicle.id}`}>
|
|
{job.vehicle.v_model_yr || t("general.labels.na")}{" "}
|
|
{job.vehicle.v_make_desc || t("general.labels.na")}{" "}
|
|
{job.vehicle.v_model_desc || t("general.labels.na")} |{" "}
|
|
{job.vehicle.plate_no || t("general.labels.na")} |{" "}
|
|
{job.vehicle.v_vin || t("general.labels.na")}
|
|
</Link>
|
|
) : null}
|
|
</Tag>
|
|
</div>
|
|
);
|
|
|
|
const menuExtra = [
|
|
<Button
|
|
key="schedule"
|
|
//TODO: Enabled logic based on status.
|
|
onClick={() => {
|
|
setscheduleModalVisible(true);
|
|
}}
|
|
>
|
|
{t("jobs.actions.schedule")}
|
|
</Button>,
|
|
<Button
|
|
key="convert"
|
|
type="dashed"
|
|
disabled={job.converted}
|
|
onClick={() => {
|
|
mutationConvertJob({
|
|
variables: { jobId: job.id }
|
|
}).then(r => {
|
|
refetch();
|
|
|
|
notification["success"]({
|
|
message: t("jobs.successes.converted")
|
|
});
|
|
});
|
|
}}
|
|
>
|
|
{t("jobs.actions.convert")}
|
|
</Button>,
|
|
<Button
|
|
type="primary"
|
|
key="submit"
|
|
htmlType="button"
|
|
onClick={handleSubmit}
|
|
>
|
|
{t("general.labels.save")}
|
|
</Button>
|
|
];
|
|
|
|
return (
|
|
<PageHeader
|
|
style={{
|
|
border: "1px solid rgb(235, 237, 240)"
|
|
}}
|
|
title={tombstoneTitle}
|
|
subTitle={tombstoneSubtitle}
|
|
tags={
|
|
<span key="job-status">
|
|
{job.job_status ? (
|
|
<Tag color="blue">{job.job_status.name}</Tag>
|
|
) : null}
|
|
</span>
|
|
}
|
|
extra={menuExtra}
|
|
>
|
|
<Descriptions size="small" column={5}>
|
|
<Descriptions.Item label={t("jobs.fields.repairtotal")}>
|
|
<CurrencyFormatter>{job.claim_total}</CurrencyFormatter>
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item label={t("jobs.fields.customerowing")}>
|
|
##NO BINDING YET##
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>
|
|
<Checkbox checked={job.special_coverage_policy} />
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item label={t("jobs.fields.scheduled_completion")}>
|
|
{job.scheduled_completion ? (
|
|
<Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
|
|
) : null}
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item label={t("jobs.fields.servicecar")}>
|
|
{job.service_car}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</PageHeader>
|
|
);
|
|
}
|