128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
import { PageHeader, Table } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
import "./job-reconciliation-parts-table.styles.scss";
|
|
|
|
export default function JobReconcilitionPartsTable({
|
|
jobLineState,
|
|
jobLineData,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
});
|
|
|
|
const [selectedLines, setSelectedLines] = jobLineState;
|
|
|
|
const columns = [
|
|
{
|
|
title: t("joblines.fields.line_desc"),
|
|
dataIndex: "line_desc",
|
|
key: "line_desc",
|
|
sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
|
|
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 ? a.oem_partno : a.op_code_desc,
|
|
// b.oem_partno ? b.oem_partno : b.op_code_desc
|
|
// ),
|
|
// sortOrder:
|
|
// state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
|
|
|
|
// render: (text, record) => (
|
|
// <span>
|
|
// {record.oem_partno ? record.oem_partno : record.op_code_desc}
|
|
// </span>
|
|
// ),
|
|
// },
|
|
// {
|
|
// title: t("joblines.fields.part_type"),
|
|
// dataIndex: "part_type",
|
|
// key: "part_type",
|
|
// sorter: (a, b) => alphaSort(a.part_type, b.part_type),
|
|
// sortOrder:
|
|
// state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
|
|
// },
|
|
{
|
|
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,
|
|
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>{record.act_price}</CurrencyFormatter>
|
|
),
|
|
},
|
|
{
|
|
title: t("joblines.fields.part_qty"),
|
|
dataIndex: "part_qty",
|
|
key: "part_qty",
|
|
},
|
|
{
|
|
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,
|
|
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>
|
|
{record.act_price * record.part_qty}
|
|
</CurrencyFormatter>
|
|
),
|
|
},
|
|
|
|
{
|
|
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,
|
|
},
|
|
];
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
const handleOnRowClick = (selectedRecordKeys, selectedRecords) => {
|
|
setSelectedLines(selectedRecordKeys);
|
|
};
|
|
|
|
return (
|
|
<PageHeader title={t("jobs.labels.lines")}>
|
|
<Table
|
|
pagination={false}
|
|
columns={columns}
|
|
scroll={{ y: "40vh", x: true }}
|
|
rowKey="id"
|
|
dataSource={jobLineData}
|
|
onChange={handleTableChange}
|
|
rowSelection={{
|
|
onChange: handleOnRowClick,
|
|
getCheckboxProps: (record) => ({
|
|
disabled: record.removed,
|
|
}),
|
|
selectedRowKeys: selectedLines,
|
|
}}
|
|
rowClassName={(record) => record.removed && "text-strikethrough"}
|
|
/>
|
|
<div style={{ fontStyle: "italic", margin: "4px" }}>
|
|
{t("jobs.labels.reconciliation.removedpartsstrikethrough")}
|
|
</div>
|
|
</PageHeader>
|
|
);
|
|
}
|