Files
bodyshop/client/src/components/job-detail-lines/job-lines.component.jsx
2024-11-26 15:04:39 -08:00

632 lines
22 KiB
JavaScript

import {
DeleteFilled,
EditFilled,
FilterFilled,
HomeOutlined,
MinusCircleTwoTone,
PlusCircleTwoTone,
SyncOutlined,
WarningFilled
} from "@ant-design/icons";
import { PageHeader } from "@ant-design/pro-layout";
import { useMutation } from "@apollo/client";
import { Button, Dropdown, Input, Space, Table, Tag } from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { DELETE_JOB_LINE_BY_PK } from "../../graphql/jobs-lines.queries";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { onlyUnique } from "../../utils/arrayHelper";
import { alphaSort } from "../../utils/sorters";
import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";
import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-reference.component";
// import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
// import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
// import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import _ from "lodash";
import { FaTasks } from "react-icons/fa";
import { selectBodyshop } from "../../redux/user/user.selectors";
import dayjs from "../../utils/day";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import JobCreateIOU from "../job-create-iou/job-create-iou.component";
import JobLineBulkAssignComponent from "../job-line-bulk-assign/job-line-bulk-assign.component";
import JobLineDispatchButton from "../job-line-dispatch-button/job-line-dispatch-button.component";
import JoblineTeamAssignment from "../job-line-team-assignment/job-line-team-assignmnent.component";
import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-send-parts-price-change.component";
import PartsOrderDrawer from "../parts-order-list-table/parts-order-list-table-drawer.component";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
import JobLinesExpander from "./job-lines-expander.component";
import JobLinesPartPriceChange from "./job-lines-part-price-change.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
jobRO: selectJobReadOnly,
technician: selectTechnician
});
const mapDispatchToProps = (dispatch) => ({
setJobLineEditContext: (context) => dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
setPartsReceiveContext: (context) => dispatch(setModalContext({ context: context, modal: "partsReceive" })),
setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
});
export function JobLinesComponent({
bodyshop,
jobRO,
technician,
setPartsOrderContext,
setPartsReceiveContext,
loading,
refetch,
jobLines,
setSearchText,
job,
setJobLineEditContext,
form,
setBillEnterContext,
setTaskUpsertContext,
billsQuery,
handleBillOnRowClick,
handlePartsOrderOnRowClick,
handlePartsDispatchOnRowClick
}) {
const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
const {
treatments: { Enhanced_Payroll }
} = useSplitTreatments({
attributes: {},
names: ["Enhanced_Payroll"],
splitKey: bodyshop.imexshopid
});
const [selectedLines, setSelectedLines] = useState([]);
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: {}
});
const { t } = useTranslation();
const jobIsPrivate = bodyshop.md_ins_cos.find((c) => c.name === job.ins_co_nm)?.private;
const columns = [
{
title: "#",
dataIndex: "line_no",
key: "line_no",
sorter: (a, b) => a.line_no - b.line_no,
fixed: "left",
sortOrder: state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order
},
{
title: t("joblines.fields.line_desc"),
dataIndex: "line_desc",
fixed: "left",
key: "line_desc",
sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
onCell: (record) => ({
className: record.manual_line && "job-line-manual",
style: {
...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
}
}),
sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
},
{
title: t("joblines.fields.oem_partno"),
dataIndex: "oem_partno",
key: "oem_partno",
sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
sortOrder: state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
ellipsis: true,
onCell: (record) => ({
className: record.manual_line && "job-line-manual",
style: {
...(record.parts_dispatch_lines[0]?.accepted_at ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
}
}),
render: (text, record) => (
<span className="ant-table-cell-content">
{`${record.oem_partno || ""} ${record.alt_partno ? `(${record.alt_partno})` : ""}`.trim()}
</span>
)
},
{
title: t("joblines.fields.op_code_desc"),
dataIndex: "op_code_desc",
key: "op_code_desc",
sorter: (a, b) => alphaSort(a.op_code_desc, b.op_code_desc),
sortOrder: state.sortedInfo.columnKey === "op_code_desc" && state.sortedInfo.order,
ellipsis: true,
render: (text, record) => `${record.op_code_desc || ""}${record.alt_partm ? ` ${record.alt_partm}` : ""}`
},
{
title: t("joblines.fields.part_type"),
dataIndex: "part_type",
key: "part_type",
filteredValue: state.filteredInfo.part_type || null,
sorter: (a, b) => alphaSort(a.part_type, b.part_type),
sortOrder: state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
filters: [
{
text: t("jobs.labels.partsfilter"),
value: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"]
},
{
text: t("joblines.fields.part_types.PAN"),
value: ["PAN"]
},
{
text: t("joblines.fields.part_types.PAP"),
value: ["PAP"]
},
{
text: t("joblines.fields.part_types.PAL"),
value: ["PAL"]
},
{
text: t("joblines.fields.part_types.PAA"),
value: ["PAA"]
},
{
text: t("joblines.fields.part_types.PAG"),
value: ["PAG"]
},
{
text: t("joblines.fields.part_types.PAS"),
value: ["PAS"]
},
{
text: t("joblines.fields.part_types.PASL"),
value: ["PASL"]
},
{
text: t("joblines.fields.part_types.PAC"),
value: ["PAC"]
},
{
text: t("joblines.fields.part_types.PAR"),
value: ["PAR"]
},
{
text: t("joblines.fields.part_types.PAM"),
value: ["PAM"]
}
],
onFilter: (value, record) => value.includes(record.part_type),
render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
},
{
title: t("joblines.fields.act_price"),
dataIndex: "act_price",
key: "act_price",
sorter: (a, b) => a.act_price - b.act_price,
sortOrder: state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
ellipsis: true,
render: (text, record) => <JobLinesPartPriceChange line={record} job={job} refetch={refetch} />
},
{
title: t("joblines.fields.part_qty"),
dataIndex: "part_qty",
key: "part_qty",
sorter: (a, b) => a.part_qty - b.part_qty,
sortOrder: state.sortedInfo.columnKey === "part_qty" && state.sortedInfo.order
},
// {
// title: t('joblines.fields.tax_part'),
// dataIndex: 'tax_part',
// key: 'tax_part',
// render: (text, record) => <Checkbox checked={record.tax_part} />,
// },
// {
// title: t("joblines.fields.total"),
// dataIndex: "total",
// key: "total",
// sorter: (a, b) => a.act_price * a.part_qty - b.act_price * b.part_qty,
// sortOrder:
// state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
// ellipsis: true,
// render: (text, record) => (
// <CurrencyFormatter>
// {record.act_price * record.part_qty}
// </CurrencyFormatter>
// ),
// },
{
title: t("joblines.fields.mod_lbr_ty"),
dataIndex: "mod_lbr_ty",
key: "mod_lbr_ty",
sorter: (a, b) => alphaSort(a.mod_lbr_ty, b.mod_lbr_ty),
sortOrder: state.sortedInfo.columnKey === "mod_lbr_ty" && state.sortedInfo.order,
render: (text, record) => (record.mod_lbr_ty ? t(`joblines.fields.lbr_types.${record.mod_lbr_ty}`) : null)
},
{
title: t("joblines.fields.mod_lb_hrs"),
dataIndex: "mod_lb_hrs",
key: "mod_lb_hrs",
sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
sortOrder: state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order
},
{
title: t("joblines.fields.line_ind"),
dataIndex: "line_ind",
key: "line_ind",
sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
sortOrder: state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
responsive: ["md"]
},
...(Enhanced_Payroll.treatment === "on"
? [
{
title: t("joblines.fields.assigned_team"),
dataIndex: "assigned_team",
key: "assigned_team",
render: (text, record) => <JoblineTeamAssignment disabled={jobRO} jobline={record} jobId={job.id} />
}
]
: []),
{
title: t("joblines.fields.notes"),
dataIndex: "notes",
key: "notes",
render: (text, record) => <JobLineNotePopup disabled={jobRO} jobline={record} />
},
{
title: t("joblines.fields.location"),
dataIndex: "location",
key: "location",
render: (text, record) => <JobLineLocationPopup jobline={record} disabled={jobRO} />
},
...(HasFeatureAccess({ featureName: "bills", bodyshop })
? [
{
title: t("joblines.labels.billref"),
dataIndex: "billref",
key: "billref",
render: (text, record) => <JobLinesBillRefernece jobline={record} />,
responsive: ["md"]
}
]
: []),
{
title: t("joblines.fields.status"),
dataIndex: "status",
key: "status",
sorter: (a, b) => alphaSort(a.status, b.status),
sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
filteredValue: state.filteredInfo.status || null,
filters:
(jobLines &&
jobLines
.map((l) => l.status)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Status*",
value: [s]
};
})) ||
[],
onFilter: (value, record) => value.includes(record.status),
render: (text, record) => <JobLineStatusPopup jobline={record} disabled={jobRO} />
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<Space>
{(record.manual_line || jobIsPrivate) && !technician && (
<>
<Button
disabled={jobRO}
onClick={() => {
setJobLineEditContext({
actions: { refetch: refetch, submit: form && form.submit },
context: { ...record, jobid: job.id }
});
}}
>
<EditFilled />
</Button>
</>
)}
<Button
title={t("tasks.buttons.create")}
onClick={() => {
setTaskUpsertContext({
context: {
jobid: job.id,
joblineid: record.id
}
});
}}
>
<FaTasks />
</Button>
{(record.manual_line || jobIsPrivate) && !technician && (
<>
<Button
disabled={jobRO}
onClick={async () => {
await deleteJobLine({
variables: { joblineId: record.id },
update(cache) {
cache.modify({
fields: {
joblines(existingJobLines, { readField }) {
return existingJobLines.filter((jlRef) => record.id !== readField("id", jlRef));
}
}
});
}
});
await axios.post("/job/totalsssu", {
id: job.id
});
refetch && refetch();
}}
>
<DeleteFilled />
</Button>
</>
)}
</Space>
)
}
];
const handleTableChange = (pagination, filters, sorter) => {
setState((state) => ({
...state,
filteredInfo: filters,
sortedInfo: sorter
}));
};
const handleMark = (e) => {
if (e.key === "clear") {
setSelectedLines([]);
} else {
const markedTypes = [e.key];
if (e.key === "PAN") markedTypes.push("PAP");
if (e.key === "PAS") markedTypes.push("PASL");
setSelectedLines((selectedLines) =>
_.uniq([
...selectedLines,
...jobLines.filter((item) => markedTypes.includes(item.part_type) || markedTypes.includes(item.mod_lbr_ty))
])
);
}
};
const markMenu = {
onClick: handleMark,
items: [
{ key: "PAA", label: t("joblines.fields.part_types.PAA") },
{ key: "PAN", label: t("joblines.fields.part_types.PAN") },
{ key: "PAL", label: t("joblines.fields.part_types.PAL") },
{ key: "PAS", label: t("joblines.fields.part_types.PAS") },
{ type: "divider" },
{ key: "LAA", label: t("joblines.fields.lbr_types.LAA") },
{ key: "LAB", label: t("joblines.fields.lbr_types.LAB") },
{ key: "LAD", label: t("joblines.fields.lbr_types.LAD") },
{ key: "LAE", label: t("joblines.fields.lbr_types.LAE") },
{ key: "LAF", label: t("joblines.fields.lbr_types.LAF") },
{ key: "LAG", label: t("joblines.fields.lbr_types.LAG") },
{ key: "LAM", label: t("joblines.fields.lbr_types.LAM") },
{ key: "LAR", label: t("joblines.fields.lbr_types.LAR") },
{ key: "LAS", label: t("joblines.fields.lbr_types.LAS") },
{ key: "LAU", label: t("joblines.fields.lbr_types.LAU") },
{ key: "LA1", label: t("joblines.fields.lbr_types.LA1") },
{ key: "LA2", label: t("joblines.fields.lbr_types.LA2") },
{ key: "LA3", label: t("joblines.fields.lbr_types.LA3") },
{ key: "LA4", label: t("joblines.fields.lbr_types.LA4") },
{ type: "divider" },
{ key: "clear", label: t("general.labels.clear") }
]
};
return (
<div>
<PartsOrderModalContainer />
{!technician && (
<PartsOrderDrawer
job={job}
billsQuery={billsQuery}
handleOnRowClick={handlePartsOrderOnRowClick}
setPartsReceiveContext={setPartsReceiveContext}
setTaskUpsertContext={setTaskUpsertContext}
/>
)}
<PageHeader
title={t("jobs.labels.estimatelines")}
extra={
<Space wrap>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
{job.special_coverage_policy && (
<Tag color="tomato">
<Space>
<WarningFilled />
<span>{t("jobs.labels.specialcoveragepolicy")}</span>
</Space>
</Tag>
)}
<JobLineDispatchButton
selectedLines={selectedLines}
setSelectedLines={setSelectedLines}
job={job}
disabled={technician}
/>
{Enhanced_Payroll.treatment === "on" && (
<JobLineBulkAssignComponent selectedLines={selectedLines} setSelectedLines={setSelectedLines} job={job} />
)}
<Button
disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
onClick={() => {
setBillEnterContext({
actions: { refetch: refetch },
context: {
disableInvNumber: true,
job: { id: job.id },
bill: {
vendorid: bodyshop.inhousevendorid,
invoice_number: "ih",
isinhouse: true,
date: dayjs(),
total: 0,
billlines: selectedLines.map((p) => {
return {
joblineid: p.id,
actual_price: p.act_price,
actual_cost: 0, //p.act_price,
line_desc: p.line_desc,
line_remarks: p.line_remarks,
part_type: p.part_type,
quantity: p.quantity || 1,
applicable_taxes: {
local: false,
state: false,
federal: false
}
};
})
}
}
});
//Clear out the selected lines. IO-785
setSelectedLines([]);
}}
>
<HomeOutlined />
{t("parts.actions.orderinhouse")}
{selectedLines.length > 0 && ` (${selectedLines.length})`}
</Button>
<Button
disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
onClick={() => {
setPartsOrderContext({
actions: { refetch: refetch },
context: {
jobId: job.id,
job: job,
linesToOrder: selectedLines.map((l) => ({
...l,
oem_partno: `${l.oem_partno || ""} ${l.alt_partno ? `(${l.alt_partno})` : ""}`.trim()
}))
}
});
//Clear out the selected lines. IO-785
setSelectedLines([]);
}}
>
{t("parts.actions.order")}
{selectedLines.length > 0 && ` (${selectedLines.length})`}
</Button>
<Button
onClick={() => {
setState((state) => ({
...state,
filteredInfo: {
...state.filteredInfo,
part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"]
}
}));
}}
>
<FilterFilled /> {t("jobs.actions.filterpartsonly")}
</Button>
<Dropdown menu={markMenu} trigger={["click"]}>
<Button>{t("jobs.actions.mark")}</Button>
</Dropdown>
<Button
disabled={jobRO || technician}
onClick={() => {
setJobLineEditContext({
actions: { refetch: refetch },
context: { jobid: job.id }
});
}}
>
{t("joblines.actions.new")}
</Button>
{InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} disabled={technician} /> })}
<JobCreateIOU job={job} selectedJobLines={selectedLines} />
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
e.preventDefault();
setSearchText(e.target.value);
}}
/>
</Space>
}
/>
<Table
columns={columns}
rowKey="id"
loading={loading}
pagination={false}
dataSource={jobLines}
onChange={handleTableChange}
scroll={{
x: true
}}
expandable={{
expandedRowRender: (record) => <JobLinesExpander jobline={record} jobid={job.id} />,
rowExpandable: (record) => true,
//expandRowByClick: true,
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
) : (
<PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
)
}}
onRow={(record, rowIndex) => {
return {
onDoubleClick: (event) => {
const notMatchingLines = selectedLines.filter((i) => i.id !== record.id);
notMatchingLines.length !== selectedLines.length
? setSelectedLines(notMatchingLines)
: setSelectedLines([...selectedLines, record]);
} // double click row
};
}}
rowSelection={{
selectedRowKeys: selectedLines.map((item) => item && item.id),
onSelectAll: (selected, selectedRows, changeRows) => {
setSelectedLines(selectedRows);
},
onSelect: (record, selected, selectedRows, nativeEvent) => {
if (selected) {
setSelectedLines((selectedLines) => _.uniqBy([...selectedLines, record], "id"));
} else {
setSelectedLines((selectedLines) => selectedLines.filter((l) => l.id !== record.id));
}
}
}}
/>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobLinesComponent);