admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added parts backorder + receiving for orders BOD-159

Browse Source
This commit is contained in:
Patrick Fic
2020-06-25 10:03:46 -07:00
parent db08be58ac
commit 2e30a9078e
21 changed files with 852 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
client/src/components/parts-order-list-table/parts-order-list-table.component.jsx Normal file
View File

@@ -0,0 +1,215 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button, Input, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
const mapDispatchToProps = (dispatch) => ({});
export function PartsOrderListTableComponent({
job,
loading,
invoicesQuery,
handleOnRowClick,
}) {
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
});
const search = queryString.parse(useLocation().search);
const selectedpartsorder = search.partsorderid;
const parts_orders = invoicesQuery.data
? invoicesQuery.data.parts_orders
: [];
const { refetch } = invoicesQuery;
const columns = [
{
title: t("vendors.fields.name"),
dataIndex: "vendorname",
key: "vendorname",
sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
sortOrder:
state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
render: (text, record) => <span>{record.vendor.name}</span>,
},
{
title: t("parts_orders.fields.order_number"),
dataIndex: "order_number",
key: "order_number",
sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
sortOrder:
state.sortedInfo.columnKey === "invoice_number" &&
state.sortedInfo.order,
},
{
title: t("parts_orders.fields.order_date"),
dataIndex: "order_date",
key: "order_date",
sorter: (a, b) => a.order_date - b.order_date,
sortOrder:
state.sortedInfo.columnKey === "order_date" && state.sortedInfo.order,
render: (text, record) => (
<DateFormatter>{record.order_date}</DateFormatter>
),
},
{
title: t("parts_orders.fields.deliver_by"),
dataIndex: "deliver_by",
key: "deliver_by",
sorter: (a, b) => a.deliver_by - b.deliver_by,
sortOrder:
state.sortedInfo.columnKey === "deliver_by" && state.sortedInfo.order,
render: (text, record) => (
<DateFormatter>{record.deliver_by}</DateFormatter>
),
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const rowExpander = (record) => {
const columns = [
{
title: t("parts_orders.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("parts_orders.fields.db_price"),
dataIndex: "db_price",
key: "db_price",
sorter: (a, b) => a.db_price - b.db_price,
sortOrder:
state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
render: (text, record) => (
<CurrencyFormatter>{record.db_price}</CurrencyFormatter>
),
},
{
title: t("parts_orders.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("parts_orders.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,
},
{
title: t("parts_orders.fields.line_remarks"),
dataIndex: "line_remarks",
key: "line_remarks",
},
{
title: t("parts_orders.fields.status"),
dataIndex: "status",
key: "status",
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<div>
<PartsOrderLineBackorderButton
partsOrderStatus={record.status}
partsLineId={record.id}
jobLineId={record.job_line_id}
/>
</div>
),
},
];
return (
<div>
<Table
size="small"
scroll={{ x: "50%", y: "40rem" }}
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns}
rowKey="id"
dataSource={record.parts_order_lines}
/>
</div>
);
};
return (
<Table
loading={loading}
size="small"
title={() => (
<div className="imex-table-header">
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<div className="imex-table-header__search">
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
e.preventDefault();
}}
/>
</div>
</div>
)}
scroll={{ x: "50%", y: "40rem" }}
expandedRowRender={rowExpander}
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns}
rowKey="id"
dataSource={parts_orders}
onChange={handleTableChange}
expandable={{
expandedRowKeys: [selectedpartsorder],
onExpand: (expanded, record) => {
handleOnRowClick(expanded ? record : null);
},
}}
rowSelection={{
onSelect: (record) => {
handleOnRowClick(record);
},
selectedRowKeys: [selectedpartsorder],
type: "radio",
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleOnRowClick(record);
}, // click row
onDoubleClick: (event) => {}, // double click row
onContextMenu: (event) => {}, // right button click row
onMouseEnter: (event) => {}, // mouse enter row
onMouseLeave: (event) => {}, // mouse leave row
};
}}
/>
);
}
export default connect(null, mapDispatchToProps)(PartsOrderListTableComponent);