423 lines
13 KiB
JavaScript
423 lines
13 KiB
JavaScript
import { EyeFilled, SyncOutlined } from "@ant-design/icons";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Checkbox,
|
|
Descriptions,
|
|
Drawer,
|
|
Grid,
|
|
Input,
|
|
PageHeader,
|
|
Space,
|
|
Table,
|
|
} from "antd";
|
|
import queryString from "query-string";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
|
import { DateFormatter } from "../../utils/DateFormatter";
|
|
import { alphaSort } from "../../utils/sorters";
|
|
import { TemplateList } from "../../utils/TemplateConstants";
|
|
import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
|
|
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//jobRO: selectJobReadOnly,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setPartsOrderContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "partsOrder" })),
|
|
setBillEnterContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "billEnter" })),
|
|
setReconciliationContext: (context) =>
|
|
dispatch(setModalContext({ context: context, modal: "reconciliation" })),
|
|
});
|
|
|
|
export function BillsListTableComponent({
|
|
job,
|
|
billsQuery,
|
|
handleOnRowClick,
|
|
setPartsOrderContext,
|
|
setBillEnterContext,
|
|
setReconciliationContext,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [selectedBillLinesByBill, setSelectedBillLinesByBill] = useState({});
|
|
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
|
|
.filter((screen) => !!screen[1])
|
|
.slice(-1)[0];
|
|
|
|
const bpoints = {
|
|
xs: "100%",
|
|
sm: "100%",
|
|
md: "100%",
|
|
lg: "75%",
|
|
xl: "75%",
|
|
xxl: "65%",
|
|
};
|
|
const drawerPercentage = selectedBreakpoint
|
|
? bpoints[selectedBreakpoint[0]]
|
|
: "100%";
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
});
|
|
const search = queryString.parse(useLocation().search);
|
|
const selectedBill = search.billid;
|
|
const Templates = TemplateList("bill");
|
|
const bills = billsQuery.data ? billsQuery.data.bills : [];
|
|
const { refetch } = billsQuery;
|
|
const recordActions = (record, showView = false) => (
|
|
<Space wrap>
|
|
{showView && (
|
|
<Button onClick={() => handleOnRowClick(record)}>
|
|
<EyeFilled />
|
|
</Button>
|
|
)}
|
|
{record.exported ? (
|
|
<Button disabled>{t("bills.actions.edit")}</Button>
|
|
) : (
|
|
<Link
|
|
to={`/manage/bills?billid=${record.id}&vendorid=${record.vendorid}`}
|
|
>
|
|
<Button>{t("bills.actions.edit")}</Button>
|
|
</Link>
|
|
)}
|
|
<BillDeleteButton bill={record} />
|
|
{record.isinhouse && (
|
|
<PrintWrapperComponent
|
|
templateObject={{
|
|
name: Templates.inhouse_invoice.key,
|
|
variables: { id: record.id },
|
|
}}
|
|
messageObject={{ subject: Templates.inhouse_invoice.subject }}
|
|
/>
|
|
)}
|
|
</Space>
|
|
);
|
|
const columns = [
|
|
{
|
|
title: t("bills.fields.vendorname"),
|
|
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("bills.fields.invoice_number"),
|
|
dataIndex: "invoice_number",
|
|
key: "invoice_number",
|
|
sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "invoice_number" &&
|
|
state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("bills.fields.date"),
|
|
dataIndex: "date",
|
|
key: "date",
|
|
sorter: (a, b) => a.date - b.date,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
|
|
render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
|
|
},
|
|
{
|
|
title: t("bills.fields.total"),
|
|
dataIndex: "total",
|
|
key: "total",
|
|
sorter: (a, b) => a.total - b.total,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>{record.total}</CurrencyFormatter>
|
|
),
|
|
},
|
|
{
|
|
title: t("bills.fields.is_credit_memo"),
|
|
dataIndex: "is_credit_memo",
|
|
key: "is_credit_memo",
|
|
sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "is_credit_memo" &&
|
|
state.sortedInfo.order,
|
|
render: (text, record) => <Checkbox checked={record.is_credit_memo} />,
|
|
},
|
|
{
|
|
title: t("bills.fields.exported"),
|
|
dataIndex: "exported",
|
|
key: "exported",
|
|
sorter: (a, b) => a.exported - b.exported,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
|
|
render: (text, record) => <Checkbox checked={record.exported} />,
|
|
},
|
|
{
|
|
title: t("general.labels.actions"),
|
|
dataIndex: "actions",
|
|
key: "actions",
|
|
render: (text, record) => recordActions(record, true),
|
|
},
|
|
];
|
|
const selectedBillRecord = bills.find((r) => r.id === selectedBill);
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
const rowExpander = (record) => {
|
|
const columns = [
|
|
{
|
|
title: t("billlines.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("billlines.fields.actual_price"),
|
|
dataIndex: "actual_price",
|
|
key: "actual_price",
|
|
sorter: (a, b) => a.actual_price - b.actual_price,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "actual_price" &&
|
|
state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
|
|
),
|
|
},
|
|
{
|
|
title: t("billlines.fields.actual_cost"),
|
|
dataIndex: "actual_cost",
|
|
key: "actual_cost",
|
|
sorter: (a, b) => a.actual_cost - b.actual_cost,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "actual_cost" &&
|
|
state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
|
|
),
|
|
},
|
|
{
|
|
title: t("billlines.fields.quantity"),
|
|
dataIndex: "quantity",
|
|
key: "quantity",
|
|
sorter: (a, b) => a.quantity - b.quantity,
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
|
|
},
|
|
{
|
|
title: t("billlines.fields.cost_center"),
|
|
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("billlines.fields.federal_tax_applicable"),
|
|
dataIndex: "applicable_taxes.federal",
|
|
key: "applicable_taxes.federal",
|
|
render: (text, record) => (
|
|
<Checkbox
|
|
disabled
|
|
checked={
|
|
(record.applicable_taxes && record.applicable_taxes.federal) ||
|
|
false
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: t("billlines.fields.state_tax_applicable"),
|
|
dataIndex: "applicable_taxes.state",
|
|
key: "applicable_taxes.state",
|
|
render: (text, record) => (
|
|
<Checkbox
|
|
disabled
|
|
checked={
|
|
(record.applicable_taxes && record.applicable_taxes.state) ||
|
|
false
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: t("billlines.fields.local_tax_applicable"),
|
|
dataIndex: "applicable_taxes.local",
|
|
key: "applicable_taxes.local",
|
|
render: (text, record) => (
|
|
<Checkbox
|
|
disabled
|
|
checked={
|
|
(record.applicable_taxes && record.applicable_taxes.local) ||
|
|
false
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
const handleOnBillrowclick = (selectedRows) => {
|
|
setSelectedBillLinesByBill({
|
|
...selectedBillLinesByBill,
|
|
[record.id]: selectedRows.map((r) => r.id),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title={
|
|
record &&
|
|
`${t("bills.fields.invoice_number")} ${record.invoice_number}`
|
|
}
|
|
extra={recordActions(record)}
|
|
/>
|
|
<Descriptions>
|
|
<Descriptions.Item label={t("bills.fields.federal_tax_rate")}>
|
|
{`${record.federal_tax_rate}%` || ""}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label={t("bills.fields.state_tax_rate")}>
|
|
{`${record.state_tax_rate}%` || ""}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label={t("bills.fields.local_tax_rate")}>
|
|
{`${record.local_tax_rate}%` || ""}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
<Button
|
|
disabled={
|
|
!selectedBillLinesByBill[record.id] ||
|
|
(selectedBillLinesByBill[record.id] &&
|
|
selectedBillLinesByBill[record.id].length === 0) ||
|
|
record.is_credit_memo
|
|
}
|
|
onClick={() =>
|
|
setPartsOrderContext({
|
|
actions: {},
|
|
context: {
|
|
jobId: job.id,
|
|
vendorId: record.vendorid,
|
|
returnFromBill: record.id,
|
|
invoiceNumber: record.invoice_number,
|
|
linesToOrder: record.billlines
|
|
.filter((il) =>
|
|
selectedBillLinesByBill[record.id].includes(il.id)
|
|
)
|
|
.map((i) => {
|
|
return {
|
|
line_desc: i.line_desc,
|
|
// db_price: i.actual_price,
|
|
act_price: i.actual_price,
|
|
cost: i.actual_cost,
|
|
quantity: i.quantity,
|
|
joblineid: i.joblineid,
|
|
};
|
|
}),
|
|
isReturn: true,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
{t("bills.actions.return")}
|
|
</Button>
|
|
<Table
|
|
scroll={{ x: "50%", y: "40rem" }}
|
|
columns={columns}
|
|
rowKey="id"
|
|
dataSource={record.billlines}
|
|
rowSelection={{
|
|
onSelect: (record, selected, selectedRows) => {
|
|
handleOnBillrowclick(selectedRows);
|
|
},
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
handleOnBillrowclick(selectedRows);
|
|
},
|
|
selectedRowKeys: selectedBillLinesByBill[record.id],
|
|
type: "checkbox",
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
title={t("bills.labels.bills")}
|
|
extra={
|
|
<Space wrap>
|
|
<Button onClick={() => refetch()}>
|
|
<SyncOutlined />
|
|
</Button>
|
|
{job ? (
|
|
<>
|
|
<Button
|
|
onClick={() => {
|
|
setBillEnterContext({
|
|
actions: { refetch: billsQuery.refetch },
|
|
context: {
|
|
job,
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
{t("jobs.actions.postbills")}
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setReconciliationContext({
|
|
actions: { refetch: billsQuery.refetch },
|
|
context: {
|
|
job,
|
|
bills: (billsQuery.data && billsQuery.data.bills) || [],
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
{t("jobs.actions.reconcile")}
|
|
</Button>
|
|
</>
|
|
) : null}
|
|
|
|
<Input.Search
|
|
placeholder={t("general.labels.search")}
|
|
onChange={(e) => {
|
|
e.preventDefault();
|
|
}}
|
|
/>
|
|
</Space>
|
|
}
|
|
>
|
|
<Drawer
|
|
placement="right"
|
|
onClose={() => handleOnRowClick(null)}
|
|
visible={selectedBill}
|
|
//getContainer={false}
|
|
style={{ position: "absolute" }}
|
|
closable
|
|
width={drawerPercentage}
|
|
>
|
|
{selectedBillRecord && rowExpander(selectedBillRecord)}
|
|
</Drawer>
|
|
<Table
|
|
loading={billsQuery.loading}
|
|
scroll={{ x: true, y: "50rem" }}
|
|
columns={columns}
|
|
rowKey="id"
|
|
dataSource={bills}
|
|
onChange={handleTableChange}
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(BillsListTableComponent);
|