UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

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

@@ -1,15 +1,15 @@
-import React, { useState } from "react";
 import { Table } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
 
 export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
@@ -26,7 +26,7 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
         <Link to={`/manage/jobs/${record.id}`}>
           {record.ro_number ? record.ro_number : `EST ${record.est_number}`}
         </Link>
-      )
+      ),
     },
     {
       title: t("jobs.fields.owner"),
@@ -36,17 +36,17 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
         <Link to={`/manage/owners/${record.owner.id}`}>
           {`${record.ownr_fn} ${record.ownr_ln}`}
         </Link>
-      )
+      ),
     },
     {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
-      key: "clm_no"
+      key: "clm_no",
     },
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
-      key: "status"
+      key: "status",
     },
 
     {
@@ -55,8 +55,8 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       key: "clm_total",
       render: (text, record) => (
         <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-      )
-    }
+      ),
+    },
   ];
 
   return (
@@ -71,20 +71,31 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
         </div>
       )}
       pagination={{ position: "bottom" }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      columns={columns}
+      rowKey='id'
+      scroll={{ x: true }}
       dataSource={vehicle.jobs}
       rowSelection={{
         onSelect: (record, selected, selectedRows) => {
-          setSelectedJobs(selectedRows ? selectedRows.map(i => i.id) : []);
+          setSelectedJobs(selectedRows ? selectedRows.map((i) => i.id) : []);
+        },
+        onSelectAll: (selected, selectedRows, changeRows) => {
+          setSelectedJobs(
+            selectedRows
+              ? selectedRows
+                  .filter((i) =>
+                    bodyshop.md_ro_statuses.open_statuses.includes(i.status)
+                  )
+                  .map((i) => i.id)
+              : []
+          );
         },
-
         selectedRowKeys: selectedJobs,
-        getCheckboxProps: record => ({
+        getCheckboxProps: (record) => ({
           disabled: bodyshop.md_ro_statuses.open_statuses
             ? !bodyshop.md_ro_statuses.open_statuses.includes(record.status)
-            : true
-        })
+            : true,
+        }),
       }}
     />
   );