114 lines
3.7 KiB
JavaScript
114 lines
3.7 KiB
JavaScript
import { PrinterFilled } from "@ant-design/icons";
|
|
import { Button, Divider, PageHeader, Tag } from "antd";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectJobReadOnly } from "../../redux/application/application.selectors";
|
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
|
|
import JobsChangeStatus from "../jobs-change-status/jobs-change-status.component";
|
|
import JobsConvertButton from "../jobs-convert-button/jobs-convert-button.component";
|
|
import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
|
|
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
|
|
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
|
|
import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
|
|
import "./jobs-detail-header.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
jobRO: selectJobReadOnly,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setPrintCenterContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "printCenter" })),
|
|
});
|
|
|
|
export function JobsDetailHeader({
|
|
setPrintCenterContext,
|
|
jobRO,
|
|
job,
|
|
refetch,
|
|
loading,
|
|
form,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const menuExtra = (
|
|
<div className="imex-flex-row">
|
|
<JobsChangeStatus job={job} />
|
|
|
|
<Button
|
|
className="imex-flex-row__margin"
|
|
onClick={() => {
|
|
setPrintCenterContext({
|
|
actions: { refetch: refetch },
|
|
context: {
|
|
id: job.id,
|
|
type: "job",
|
|
},
|
|
});
|
|
}}
|
|
key="printing"
|
|
>
|
|
<PrinterFilled />
|
|
{t("jobs.actions.printCenter")}
|
|
</Button>
|
|
<JobsConvertButton job={job} refetch={refetch} />
|
|
<JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
|
|
<Button
|
|
type="primary"
|
|
loading={loading}
|
|
disabled={jobRO}
|
|
className="imex-flex-row__margin"
|
|
onClick={() => form.submit()}
|
|
>
|
|
{t("general.actions.save")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<PageHeader
|
|
title={job.ro_number || t("general.labels.na")}
|
|
subTitle={job.status}
|
|
tags={[
|
|
<OwnerTagPopoverComponent key="owner" job={job} />,
|
|
<VehicleTagPopoverComponent key="vehicle" job={job} />,
|
|
<Tag
|
|
color="#f50"
|
|
key="production"
|
|
style={{ display: job.inproduction ? "" : "none" }}
|
|
>
|
|
{t("jobs.labels.inproduction")}
|
|
</Tag>,
|
|
<Tag title={t("jobs.fields.repairtotal")} key="total" color="green">
|
|
<CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
|
|
<span style={{ margin: "0rem .5rem" }}>/</span>
|
|
<CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
|
|
</Tag>,
|
|
]}
|
|
extra={menuExtra}
|
|
>
|
|
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
|
{job.inproduction && (
|
|
<>
|
|
<div style={{ display: "flex", flex: 1 }}>
|
|
<div style={{ width: "20%" }}>
|
|
{t("jobs.fields.production_vars.note")}
|
|
</div>
|
|
<ProductionListColumnProductionNote record={job} />
|
|
</div>
|
|
<Divider type="vertical" />
|
|
</>
|
|
)}
|
|
|
|
<JobEmployeeAssignments job={job} />
|
|
</div>
|
|
</PageHeader>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailHeader);
|