IO-2671 Add in appropriate sorters at same time

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

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

@@ -7,7 +7,9 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort, statusSort } from "../../utils/sorters";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 import VehicleDetailUpdateJobsComponent from "../vehicle-detail-update-jobs/vehicle-detail-update-jobs.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -45,6 +47,10 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
       key: "owner",
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={`/manage/owners/${record.owner.id}`}>
           <OwnerNameDisplay ownerObject={record} />
@@ -63,9 +69,15 @@ export function VehicleDetailJobsComponent({ vehicle, bodyshop }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-      sorter: (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
+      sorter: (a, b) =>
+        statusSort(a.status, b.status, bodyshop.md_ro_statuses.statuses),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters: bodyshop.md_ro_statuses.statuses.map((status) => ({
+        text: status,
+        value: status,
+      })),
+      onFilter: (value, record) => value.includes(record.status),
     },
 
     {