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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -21,6 +21,7 @@ export default function JobReconciliationBillsTable({
title: t("billlines.fields.line_desc"), title: t("billlines.fields.line_desc"),
dataIndex: "line_desc", dataIndex: "line_desc",
key: "line_desc", key: "line_desc",
width: "35%",
sorter: (a, b) => alphaSort(a.line_desc, b.line_desc), sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order, state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
@@ -29,6 +30,8 @@ export default function JobReconciliationBillsTable({
title: t("billlines.labels.from"), title: t("billlines.labels.from"),
dataIndex: "from", dataIndex: "from",
key: "from", key: "from",
width: "20%",
ellipsis: true,
render: (text, record) => render: (text, record) =>
`${record.bill.vendor && record.bill.vendor.name} / ${ `${record.bill.vendor && record.bill.vendor.name} / ${
record.bill.invoice_number 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", dataIndex: "quantity",
key: "quantity", key: "quantity",
sorter: (a, b) => a.quantity - b.quantity, sorter: (a, b) => a.quantity - b.quantity,
@@ -86,10 +89,12 @@ export default function JobReconciliationBillsTable({
}; };
return ( return (
<PageHeader title={t("bills.labels.bills")}> <div>
<Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
<Table <Table
pagination={false} pagination={false}
scroll={{ y: "40vh", x: true }} size="small"
scroll={{ y: "80vh", x: true }}
columns={columns} columns={columns}
rowKey="id" rowKey="id"
dataSource={invoiceLineData} dataSource={invoiceLineData}
@@ -99,6 +104,6 @@ export default function JobReconciliationBillsTable({
selectedRowKeys: selectedLines, 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 ( return (
<div> <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
<Row gutter={[16, 16]}> <div style={{ flex: 1 }}>
<Col span={12}> <Row gutter={8}>
<JobReconciliationPartsTable <Col span={12}>
jobLineData={jobLineData} <JobReconciliationPartsTable
jobLineState={jobLineState} jobLineData={jobLineData}
/> jobLineState={jobLineState}
</Col> />
<Col span={12}> </Col>
<JobReconciliationBillsTable <Col span={12}>
invoiceLineData={invoiceLineData} <JobReconciliationBillsTable
billLineState={billLineState} invoiceLineData={invoiceLineData}
/> billLineState={billLineState}
</Col> />
</Row> </Col>
</Row>
</div>
<Row> <Row>
<JobReconciliationTotals <JobReconciliationTotals
jobLines={jobLineData} 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 JobReconciliationModalComponent from "./job-reconciliation-modal.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import "./job-reconciliation-modal.styles.scss";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
reconciliationModal: selectReconciliation, reconciliationModal: selectReconciliation,
@@ -38,23 +39,23 @@ function JobReconciliationModalContainer({
return ( return (
<Modal <Modal
title={t("jobs.labels.reconciliationheader")} title={t("jobs.labels.reconciliationheader")}
width={"90%"} width={"95%"}
visible={visible} visible={visible}
okText={t("general.actions.close")} okText={t("general.actions.close")}
onOk={handleCancel} onOk={handleCancel}
onCancel={handleCancel} onCancel={handleCancel}
cancelButtonProps={{ display: "none" }} cancelButtonProps={{ display: "none" }}
destroyOnClose destroyOnClose
className="imex-reconciliation-modal"
> >
<LoadingSpinner loading={loading}> {loading && <LoadingSpinner loading={loading} />}
{error && <AlertComponent message={error.message} type="error" />} {error && <AlertComponent message={error.message} type="error" />}
{data && ( {data && (
<JobReconciliationModalComponent <JobReconciliationModalComponent
job={data && data.jobs_by_pk} job={data && data.jobs_by_pk}
bills={data && data.bills} bills={data && data.bills}
/> />
)} )}
</LoadingSpinner>
</Modal> </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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -102,11 +102,13 @@ export default function JobReconcilitionPartsTable({
}; };
return ( return (
<PageHeader title={t("jobs.labels.lines")}> <div>
<Typography.Title level={4}>{t("jobs.labels.lines")}</Typography.Title>
<Table <Table
pagination={false} pagination={false}
columns={columns} columns={columns}
scroll={{ y: "40vh", x: true }} size="small"
scroll={{ y: "80vh", x: true }}
rowKey="id" rowKey="id"
dataSource={jobLineData} dataSource={jobLineData}
onChange={handleTableChange} onChange={handleTableChange}
@@ -122,6 +124,6 @@ export default function JobReconcilitionPartsTable({
<div style={{ fontStyle: "italic", margin: "4px" }}> <div style={{ fontStyle: "italic", margin: "4px" }}>
{t("jobs.labels.reconciliation.removedpartsstrikethrough")} {t("jobs.labels.reconciliation.removedpartsstrikethrough")}
</div> </div>
</PageHeader> </div>
); );
} }