82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import { Table } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
|
|
export default function JobCostingPartsTable({ job, data }) {
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
});
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const columns = [
|
|
{
|
|
title: t("bodyshop.fields.responsibilitycenter"),
|
|
dataIndex: "cost_center",
|
|
key: "cost_center",
|
|
sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("jobs.labels.sale_labor"),
|
|
dataIndex: "sale_labor",
|
|
key: "sale_labor",
|
|
sorter: (a, b) => alphaSort(a.sale_labor, b.sale_labor),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "sale_labor" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("jobs.labels.sale_parts"),
|
|
dataIndex: "sale_parts",
|
|
key: "sale_parts",
|
|
sorter: (a, b) => alphaSort(a.sale_parts, b.sale_parts),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "sale_parts" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("jobs.labels.cost"),
|
|
dataIndex: "cost",
|
|
key: "cost",
|
|
sorter: (a, b) => a.cost - b.cost,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("jobs.labels.gpdollars"),
|
|
dataIndex: "gpdollars",
|
|
key: "gpdollars",
|
|
sorter: (a, b) => a.gpdollars - b.gpdollars,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "gpdollars" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("jobs.labels.gppercent"),
|
|
dataIndex: "gppercent",
|
|
key: "gppercent",
|
|
sorter: (a, b) => a.gppercent - b.gppercent,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "gppercent" && state.sortedInfo.order,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Table
|
|
size="small"
|
|
scroll={{ x: "50%", y: "40rem" }}
|
|
onChange={handleTableChange}
|
|
pagination={{ position: "top", defaultPageSize: 25 }}
|
|
columns={columns}
|
|
rowKey="id"
|
|
dataSource={data}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|