diff --git a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
index 360954101..d47be4d1f 100644
--- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
+++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
@@ -24,7 +24,7 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
-
+
const columns = [
{
title: t("jobs.fields.ro_number"),
@@ -44,6 +44,15 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
title: t("jobs.fields.vehicle"),
dataIndex: "vehicleid",
key: "vehicleid",
+ sorter: (a, b) =>
+ alphaSort(
+ `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+ a.v_model_desc || ""
+ }`,
+ `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+ ),
+ sortOrder:
+ state.sortedInfo.columnKey === "vehicleid" && state.sortedInfo.order,
render: (text, record) =>
record.vehicleid ? (
@@ -67,9 +76,15 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
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),
},
{
diff --git a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx
index 403d223bf..370142a2a 100644
--- a/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx
+++ b/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) => (
@@ -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),
},
{
diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx
index bb1a97183..8a6f9ea61 100644
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -4,8 +4,9 @@ import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useLocation } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
-import {pageLimit} from "../../utils/config";
+import { alphaSort } from './../../utils/sorters';
export default function VehiclesListComponent({
loading,
vehicles,
@@ -31,6 +32,8 @@ export default function VehiclesListComponent({
title: t("vehicles.fields.v_vin"),
dataIndex: "v_vin",
key: "v_vin",
+ sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
+ sortOrder: state.sortedInfo.columnKey === "v_vin" && state.sortedInfo.order,
render: (text, record) => (
{record.v_vin || "N/A"}
@@ -51,8 +54,10 @@ export default function VehiclesListComponent({
},
{
title: t("vehicles.fields.plate_no"),
- dataIndex: "plate",
- key: "plate",
+ dataIndex: "plate_no",
+ key: "plate_no",
+ sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+ sortOrder: state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
render: (text, record) => {
return (
{`${record.plate_st || ""} | ${record.plate_no || ""}`}