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

IO-1249 Adjust reconciliation window sizing.

Browse Source
This commit is contained in:
Patrick Fic
2021-07-08 11:12:58 -07:00
parent 1360a73028
commit f19289362d
5 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, PageHeader, Table } from "antd";
import { Checkbox, Table, Typography } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -21,6 +21,7 @@ export default function JobReconciliationBillsTable({
title: t("billlines.fields.line_desc"),
dataIndex: "line_desc",
key: "line_desc",
width: "35%",
sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
sortOrder:
state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
@@ -29,6 +30,8 @@ export default function JobReconciliationBillsTable({
title: t("billlines.labels.from"),
dataIndex: "from",
key: "from",
width: "20%",
ellipsis: true,
render: (text, record) =>
`${record.bill.vendor && record.bill.vendor.name} / ${
record.bill.invoice_number
@@ -57,7 +60,7 @@ export default function JobReconciliationBillsTable({
),
},
{
title: t("billlines.fields.quantity"),
title: t("joblines.fields.part_qty"),
dataIndex: "quantity",
key: "quantity",
sorter: (a, b) => a.quantity - b.quantity,
@@ -86,10 +89,12 @@ export default function JobReconciliationBillsTable({
};
return (
<PageHeader title={t("bills.labels.bills")}>
<div>
<Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
<Table
pagination={false}
scroll={{ y: "40vh", x: true }}
size="small"
scroll={{ y: "80vh", x: true }}
columns={columns}
rowKey="id"
dataSource={invoiceLineData}
@@ -99,6 +104,6 @@ export default function JobReconciliationBillsTable({
selectedRowKeys: selectedLines,
}}
/>
</PageHeader>
</div>
);
}

32
client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx
View File

@@ -22,21 +22,23 @@ export default function JobReconciliationModalComponent({ job, bills }) {
);
return (
<div>
<Row gutter={[16, 16]}>
<Col span={12}>
<JobReconciliationPartsTable
jobLineData={jobLineData}
jobLineState={jobLineState}
/>
</Col>
<Col span={12}>
<JobReconciliationBillsTable
invoiceLineData={invoiceLineData}
billLineState={billLineState}
/>
</Col>
</Row>
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
<div style={{ flex: 1 }}>
<Row gutter={8}>
<Col span={12}>
<JobReconciliationPartsTable
jobLineData={jobLineData}
jobLineState={jobLineState}
/>
</Col>
<Col span={12}>
<JobReconciliationBillsTable
invoiceLineData={invoiceLineData}
billLineState={billLineState}
/>
</Col>
</Row>
</div>
<Row>
<JobReconciliationTotals
jobLines={jobLineData}

12
client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss Normal file
View File

@@ -0,0 +1,12 @@
.imex-reconciliation-modal {
top: 20px;
.ant-modal-content {
height: 95vh;
display: flex;
flex-direction: column;
.ant-modal-body {
display: flex;
flex: 1;
}
}
}

21
client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
View File

@@ -10,6 +10,7 @@ import { selectReconciliation } from "../../redux/modals/modals.selectors";
import JobReconciliationModalComponent from "./job-reconciliation-modal.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import "./job-reconciliation-modal.styles.scss";
const mapStateToProps = createStructuredSelector({
reconciliationModal: selectReconciliation,
@@ -38,23 +39,23 @@ function JobReconciliationModalContainer({
return (
<Modal
title={t("jobs.labels.reconciliationheader")}
width={"90%"}
width={"95%"}
visible={visible}
okText={t("general.actions.close")}
onOk={handleCancel}
onCancel={handleCancel}
cancelButtonProps={{ display: "none" }}
destroyOnClose
className="imex-reconciliation-modal"
>
<LoadingSpinner loading={loading}>
{error && <AlertComponent message={error.message} type="error" />}
{data && (
<JobReconciliationModalComponent
job={data && data.jobs_by_pk}
bills={data && data.bills}
/>
)}
</LoadingSpinner>
{loading && <LoadingSpinner loading={loading} />}
{error && <AlertComponent message={error.message} type="error" />}
{data && (
<JobReconciliationModalComponent
job={data && data.jobs_by_pk}
bills={data && data.bills}
/>
)}
</Modal>
);
}

10
client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
View File

@@ -1,4 +1,4 @@
import { PageHeader, Table } from "antd";
import { PageHeader, Table, Typography } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -102,11 +102,13 @@ export default function JobReconcilitionPartsTable({
};
return (
<PageHeader title={t("jobs.labels.lines")}>
<div>
<Typography.Title level={4}>{t("jobs.labels.lines")}</Typography.Title>
<Table
pagination={false}
columns={columns}
scroll={{ y: "40vh", x: true }}
size="small"
scroll={{ y: "80vh", x: true }}
rowKey="id"
dataSource={jobLineData}
onChange={handleTableChange}
@@ -122,6 +124,6 @@ export default function JobReconcilitionPartsTable({
<div style={{ fontStyle: "italic", margin: "4px" }}>
{t("jobs.labels.reconciliation.removedpartsstrikethrough")}
</div>
</PageHeader>
</div>
);
}