Further refinement on jobs detail screen on header. BOD-155

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -1,76 +1,57 @@
-import { Button } from "antd";
+import { Col, Row } from "antd";
 import React from "react";
-import { connect } from "react-redux";
-import { setModalContext } from "../../redux/modals/modals.actions";
 import AlertComponent from "../alert/alert.component";
 import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";
 import JobInvoicesTotalsComponent from "../job-invoices-total/job-invoices-total.component";
-import { useTranslation } from "react-i18next";
-import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
+const tableCol = {
+  xs: {
+    span: 24,
+  },
+  md: {
+    span: 20,
+  },
+};
 
-const mapDispatchToProps = (dispatch) => ({
-  setInvoiceEnterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
-  setReconciliationContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "reconciliation" })),
-});
+const totalsCol = {
+  xs: {
+    span: 24,
+  },
+  md: {
+    span: 4,
+  },
+};
 
-export function JobsDetailPliComponent({
-  setInvoiceEnterContext,
-  setReconciliationContext,
+export default function JobsDetailPliComponent({
   job,
   invoicesQuery,
   handleOnRowClick,
   selectedInvoice,
 }) {
-  const { t } = useTranslation();
   return (
     <div>
-      <PartsOrderModalContainer />
-      <Button
-        onClick={() => {
-          setInvoiceEnterContext({
-            actions: { refetch: invoicesQuery.refetch || null },
-            context: {
-              job,
-            },
-          });
-        }}>
-        {t("jobs.actions.postInvoices")}
-      </Button>
-      <Button
-        onClick={() => {
-          setReconciliationContext({
-            actions: { refetch: invoicesQuery.refetch },
-            context: {
-              job,
-              invoices: invoicesQuery.data && invoicesQuery.data.invoices,
-            },
-          });
-        }}>
-        {t("jobs.actions.reconcile")}
-      </Button>
-
+      <PartsOrderModal />
       {invoicesQuery.error ? (
         <AlertComponent message={invoicesQuery.error.message} type='error' />
       ) : null}
-
-      <JobInvoicesTotalsComponent
-        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
-        loading={invoicesQuery.loading}
-        jobTotals={job.job_totals}
-      />
-
-      <InvoicesListTableComponent
-        job={job}
-        loading={invoicesQuery.loading}
-        handleOnRowClick={handleOnRowClick}
-        selectedInvoice={selectedInvoice}
-        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
-        refetch={invoicesQuery.refetch}
-      />
+      <Row>
+        <Col {...tableCol}>
+          <InvoicesListTableComponent
+            job={job}
+            loading={invoicesQuery.loading}
+            handleOnRowClick={handleOnRowClick}
+            selectedInvoice={selectedInvoice}
+            invoicesQuery={invoicesQuery}
+          />
+        </Col>
+        <Col {...totalsCol}>
+          <JobInvoicesTotalsComponent
+            invoices={invoicesQuery.data ? invoicesQuery.data.invoices : []}
+            loading={invoicesQuery.loading}
+            jobTotals={job.job_totals}
+          />
+        </Col>
+      </Row>
     </div>
   );
 }
-
-export default connect(null, mapDispatchToProps)(JobsDetailPliComponent);

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,9 +1,9 @@
-import React from "react";
 import { useQuery } from "@apollo/react-hooks";
-import JobsDetailPliComponent from "./jobs-detail-pli.component";
-import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
-import { useHistory, useLocation } from "react-router-dom";
 import queryString from "query-string";
+import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
+import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
 export default function JobsDetailPliContainer({ job }) {
   const invoicesQuery = useQuery(QUERY_INVOICES_BY_JOBID, {