From f19289362da34eba21c4f62d7c9d20a316a95fe1 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 8 Jul 2021 11:12:58 -0700
Subject: [PATCH] IO-1249 Adjust reconciliation window sizing.

---
 ...b-reconciliation-bills-table.component.jsx | 15 ++++++---
 .../job-reconciliation-modal.component.jsx    | 32 ++++++++++---------
 .../job-reconciliation-modal.styles.scss      | 12 +++++++
 .../job-reconciliation.modal.container.jsx    | 21 ++++++------
 ...b-reconciliation-parts-table.component.jsx | 10 +++---
 5 files changed, 56 insertions(+), 34 deletions(-)
 create mode 100644 client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss

diff --git a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
index be0fba05d..40cd8120c 100644
--- a/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
+++ b/client/src/components/job-reconciliation-bills-table/job-reconciliation-bills-table.component.jsx
@@ -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>
   );
 }
diff --git a/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx
index 7b5b8aac8..f817a4e73 100644
--- a/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx
@@ -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}
diff --git a/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss
new file mode 100644
index 000000000..8565ee51d
--- /dev/null
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.styles.scss
@@ -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;
+    }
+  }
+}
diff --git a/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx b/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
index 3850cf359..b67d02c40 100644
--- a/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
@@ -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>
   );
 }
diff --git a/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx b/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
index 496c06e4b..2bb5a7f53 100644
--- a/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
+++ b/client/src/components/job-reconciliation-parts-table/job-reconciliation-parts-table.component.jsx
@@ -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>
   );
 }