BOD-53 Created vehicle popover and fixed remnant references to vehicle records.

client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx

@@ -35,14 +35,22 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
             )}
           </div>
           <div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
-          {data.vehicle ? (
-            <Link to={`/manage/vehicles/${data.vehicleid}`}>
-              {`${data.v_model_yr || ""} ${data.v_make_desc ||
-                ""} ${data.v_model_desc || ""}`}
-            </Link>
-          ) : (
-            <span>{t("jobs.errors.novehicle")}</span>
-          )}
+          <div>
+            {data.vehicle ? (
+              <Link to={`/manage/vehicles/${data.vehicleid}`}>
+                {`${data.v_model_yr || ""} ${data.v_make_desc ||
+                  ""} ${data.v_model_desc || ""}`}
+                a
+              </Link>
+            ) : (
+              <span>
+                {`${data.v_model_yr || ""} ${data.v_make_desc ||
+                  ""} ${data.v_model_desc || ""}`}
+                b
+              </span>
+            )}
+            e
+          </div>
         </span>
       ) : null}
     </CardTemplate>

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

@@ -1,27 +1,16 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import {
-  Avatar,
-  Badge,
-  Button,
-  Checkbox,
-  Descriptions,
-  Dropdown,
-  Menu,
-  notification,
-  PageHeader,
-  Tag
-} from "antd";
+import { Avatar, Badge, Button, Checkbox, Descriptions, Dropdown, Menu, notification, PageHeader, Tag } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import CarImage from "../../assets/car.svg";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import BarcodePopup from "../barcode-popup/barcode-popup.component";
 import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
+import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -113,25 +102,7 @@ export default connect(
         <span key="job-status">
           {job.status ? <Tag color="blue">{job.status}</Tag> : null}
           <OwnerTagPopoverComponent job={job} />
-          <Tag color="green">
-            {job.vehicleid ? (
-              <Link to={`/manage/vehicles/${job.vehicleid}`}>
-                {`${job.v_model_yr || t("general.labels.na")} 
-                ${job.v_make_desc || t("general.labels.na")} 
-                ${job.v_model_desc || t("general.labels.na")} | 
-                ${job.plate_no || t("general.labels.na")} | 
-                ${job.v_vin || t("general.labels.na")}`}
-              </Link>
-            ) : (
-              <span>
-                {`${job.v_model_yr || t("general.labels.na")} 
-              ${job.v_make_desc || t("general.labels.na")} 
-              ${job.v_model_desc || t("general.labels.na")} | 
-              ${job.plate_no || t("general.labels.na")} | 
-              ${job.v_vin || t("general.labels.na")}`}
-              </span>
-            )}
-          </Tag>
+          <VehicleTagPopoverComponent job={job} />
           <BarcodePopup value={job.id} />
         </span>
       }

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

@@ -107,7 +107,7 @@ export default withRouter(function JobsList({
       width: "15%",
       ellipsis: true,
       render: (text, record) => {
-        return record.vehicle ? (
+        return record.vehicleid ? (
           <Link to={"/manage/vehicles/" + record.vehicleid}>
             {`${record.v_model_yr || ""} ${record.v_make_desc ||
               ""} ${record.v_model_desc || ""}`}
@@ -123,12 +123,12 @@ export default withRouter(function JobsList({
       key: "plate_no",
       width: "8%",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a.vehicle.plate_no, b.vehicle.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.vehicle.plate_no ? (
-          <span>{record.vehicle.plate_no}</span>
+        return record.plate_no ? (
+          <span>{record.plate_no}</span>
         ) : (
           t("general.labels.unknown")
         );

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

@@ -0,0 +1,87 @@
+import { Button, Col, Descriptions, Popover, Row, Tag } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+export default function VehicleTagPopoverComponent({ job }) {
+  const { t } = useTranslation();
+  const content = (
+    <div style={{ width: "400px" }}>
+      <Row>
+        <Col span={12}>
+          <Descriptions
+            title={t("owners.labels.fromclaim")}
+            size="small"
+            column={1}
+          >
+            <Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
+              {`${job.v_model_yr || t("general.labels.na")} 
+            ${job.v_make_desc || t("general.labels.na")} 
+            ${job.v_model_desc || t("general.labels.na")}`}
+            </Descriptions.Item>
+
+            <Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}>
+              {`${job.plate_no || t("general.labels.na")}`}
+            </Descriptions.Item>
+            <Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}>
+              {`${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")}`}
+            </Descriptions.Item>
+          </Descriptions>
+        </Col>
+        <Col span={12}>
+          <Descriptions
+            title={t("owners.labels.fromowner")}
+            size="small"
+            column={1}
+          >
+            <Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
+              {`${job.vehicle.v_model_yr || t("general.labels.na")} 
+        ${job.vehicle.v_make_desc || t("general.labels.na")} 
+        ${job.vehicle.v_model_desc || t("general.labels.na")}`}
+            </Descriptions.Item>
+
+            <Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}>
+              {`${job.vehicle.plate_no || t("general.labels.na")}`}
+            </Descriptions.Item>
+            <Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}>
+              {`${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")}`}
+            </Descriptions.Item>
+          </Descriptions>
+        </Col>
+      </Row>
+      <Link to={`/manage/vehicles/${job.vehicle.id}`}>
+        <Button>{t("vehicle.labels.updatevehicle")}</Button>
+      </Link>
+    </div>
+  );
+
+  return (
+    <Popover placement="bottom" content={content}>
+      <Tag color="green">
+        {job.vehicleid ? (
+          <Link to={`/manage/vehicles/${job.vehicleid}`}>
+            {`${job.v_model_yr || t("general.labels.na")} 
+        ${job.v_make_desc || t("general.labels.na")} 
+        ${job.v_model_desc || t("general.labels.na")} | 
+        ${job.plate_no || t("general.labels.na")} | 
+        ${job.v_vin || t("general.labels.na")}`}
+          </Link>
+        ) : (
+          <span>
+            {`${job.v_model_yr || t("general.labels.na")} 
+      ${job.v_make_desc || t("general.labels.na")} 
+      ${job.v_model_desc || t("general.labels.na")} | 
+      ${job.plate_no || t("general.labels.na")} | 
+      ${job.v_vin || t("general.labels.na")}`}
+          </span>
+        )}
+      </Tag>
+    </Popover>
+  );
+}