125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import { Table, Button } from "antd";
|
|
import React, { useContext, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
import EditableCell from "./job-lines-cell.component";
|
|
|
|
export default function JobLinesComponent({ job }) {
|
|
//const form = useContext(JobDetailFormContext);
|
|
//const { getFieldDecorator } = form;
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
filteredInfo: { text: "" }
|
|
});
|
|
const [editingKey, setEditingKey] = useState("");
|
|
const { t } = useTranslation();
|
|
|
|
const columns = [
|
|
{
|
|
title: t("joblines.fields.unq_seq"),
|
|
dataIndex: "joblines.unq_seq",
|
|
key: "joblines.unq_seq",
|
|
// onFilter: (value, record) => record.ro_number.includes(value),
|
|
// filteredValue: state.filteredInfo.text || null,
|
|
sorter: (a, b) => alphaSort(a, b),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "unq_seq" && state.sortedInfo.order,
|
|
//ellipsis: true,
|
|
editable: true
|
|
},
|
|
{
|
|
title: t("joblines.fields.line_desc"),
|
|
dataIndex: "line_desc",
|
|
key: "joblines.line_desc",
|
|
sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
|
|
ellipsis: true,
|
|
editable: true
|
|
},
|
|
{
|
|
title: t("joblines.fields.part_type"),
|
|
dataIndex: "part_type",
|
|
key: "joblines.part_type",
|
|
sorter: (a, b) => alphaSort(a.part_type, b.part_type),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
|
|
ellipsis: true,
|
|
editable: true
|
|
},
|
|
{
|
|
title: t("joblines.fields.db_price"),
|
|
dataIndex: "db_price",
|
|
key: "joblines.db_price",
|
|
sorter: (a, b) => a.db_price - b.db_price,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
|
|
ellipsis: true,
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>{record.db_price}</CurrencyFormatter>
|
|
)
|
|
},
|
|
{
|
|
title: t("joblines.fields.act_price"),
|
|
dataIndex: "act_price",
|
|
key: "joblines.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) => (
|
|
<div>
|
|
{" "}
|
|
<CurrencyFormatter>{record.act_price}</CurrencyFormatter>{" "}
|
|
<Button
|
|
onClick={() => {
|
|
setEditingKey(record.id);
|
|
}}>
|
|
EDIT
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
// const handleChange = event => {
|
|
// const { value } = event.target;
|
|
// setState({ ...state, filterinfo: { text: [value] } });
|
|
// };
|
|
return (
|
|
<Table
|
|
size='small'
|
|
pagination={{ position: "bottom" }}
|
|
columns={columns.map(col => {
|
|
if (!col.editable) {
|
|
return col;
|
|
}
|
|
return {
|
|
...col,
|
|
onCell: record => ({
|
|
record,
|
|
inputType: col.dataIndex === "age" ? "number" : "text",
|
|
dataIndex: col.dataIndex,
|
|
title: col.title,
|
|
editing: editingKey === record.id
|
|
})
|
|
};
|
|
})}
|
|
components={{
|
|
body: {
|
|
cell: EditableCell
|
|
}
|
|
}}
|
|
rowKey='id'
|
|
dataSource={job.joblines}
|
|
onChange={handleTableChange}
|
|
/>
|
|
);
|
|
}
|