IO-1536 Add VIN Highlighting.

client/src/components/global-search/global-search.component.jsx

@@ -11,6 +11,7 @@ import AlertComponent from "../alert/alert.component";
 import OwnerNameDisplay, {
   OwnerNameDisplayFunction,
 } from "../owner-name-display/owner-name-display.component";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
   const history = useHistory();
@@ -97,7 +98,11 @@ export default function GlobalSearch() {
                       } ${vehicle.v_model_desc || ""}`}
                     </span>
                     <span>{vehicle.plate_no || ""}</span>
-                    <span> {vehicle.v_vin || ""}</span>
+                    <span>
+                      <VehicleVinDisplay>
+                        {vehicle.v_vin || ""}
+                      </VehicleVinDisplay>
+                    </span>
                   </Space>
                 </Link>
               ),

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

@@ -4,6 +4,7 @@ import { Table, Input, Card, Space } from "antd";
 import { Link } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function JobsCreateVehicleInfoSearchComponent({
   loading,
@@ -27,7 +28,9 @@ export default function JobsCreateVehicleInfoSearchComponent({
         tableState.sortedInfo.columnKey === "v_vin" &&
         tableState.sortedInfo.order,
       render: (text, record) => (
-        <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
+        <Link to={"/manage/vehicles/" + record.id}>
+          <VehicleVinDisplay>{record.v_vin}</VehicleVinDisplay>
+        </Link>
       ),
     },
     {

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

@@ -23,6 +23,7 @@ import JobsRelatedRos from "../jobs-related-ros/jobs-related-ros.component";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -211,7 +212,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
               }`})`}
             </DataLabel>
             <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
-              {`${job.v_vin || t("general.labels.na")}`}
+              <VehicleVinDisplay>
+                {`${job.v_vin || t("general.labels.na")}`}
+              </VehicleVinDisplay>
             </DataLabel>
             <DataLabel label={t("jobs.labels.relatedros")}>
               <JobsRelatedRos jobid={job.id} job={job} />

client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx

@@ -2,6 +2,7 @@ import { Button, Col, Descriptions, Popover, Row, Tag } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function VehicleTagPopoverComponent({ job }) {
   const { t } = useTranslation();
@@ -27,7 +28,9 @@ export default function VehicleTagPopoverComponent({ job }) {
               {`${job.plate_st || t("general.labels.na")}`}
             </Descriptions.Item>
             <Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}>
-              {`${job.v_vin || t("general.labels.na")}`}
+              <VehicleVinDisplay>
+                {`${job.v_vin || t("general.labels.na")}`}
+              </VehicleVinDisplay>
             </Descriptions.Item>
           </Descriptions>
         </Col>
@@ -46,7 +49,9 @@ export default function VehicleTagPopoverComponent({ job }) {
               {`${job.vehicle.plate_st || t("general.labels.na")}`}
             </Descriptions.Item>
             <Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}>
-              {`${job.vehicle.v_vin || t("general.labels.na")}`}
+              <VehicleVinDisplay>{`${
+                job.vehicle.v_vin || t("general.labels.na")
+              }`}</VehicleVinDisplay>
             </Descriptions.Item>
           </Descriptions>
         </Col>

client/src/components/vehicle-vin-display/vehicle-vin-display.component.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function VehicleVinDisplay({ children }) {
+  if (!children) return null;
+  console.log(children);
+  if (typeof children !== "string" || children.length !== 17) return children;
+  const vin = children.trim();
+
+  const first = vin.substring(0, 9);
+  const second = vin.substring(9, 17);
+
+  return (
+    <>
+      <span>{first}</span>
+      <span style={{ textDecoration: "underline" }}>{second}</span>
+    </>
+  );
+}

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -4,6 +4,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -31,7 +32,7 @@ export default function VehiclesListComponent({
       key: "v_vin",
       render: (text, record) => (
         <Link to={"/manage/vehicles/" + record.id}>
-          {record.v_vin || "N/A"}
+          <VehicleVinDisplay>{record.v_vin || "N/A"}</VehicleVinDisplay>
         </Link>
       ),
     },