From b7dceae83ff04ae03d18c49af789c2541922bc47 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Mon, 30 Mar 2020 11:40:21 -0700
Subject: [PATCH] BOD-53 Created vehicle popover and fixed remnant references
 to vehicle records.

---
 bodyshop_translations.babel                   | 26 ++++++
 .../job-detail-cards.customer.component.jsx   | 24 +++--
 .../jobs-detail-header.component.jsx          | 35 +-------
 .../jobs-list/jobs-list.component.jsx         |  8 +-
 .../vehicle-tag-popover.component.jsx         | 87 +++++++++++++++++++
 client/src/graphql/jobs.queries.js            | 17 +++-
 client/src/translations/en_us/common.json     |  3 +
 client/src/translations/es/common.json        |  3 +
 client/src/translations/fr/common.json        |  3 +
 9 files changed, 161 insertions(+), 45 deletions(-)
 create mode 100644 client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 5b87f9c5d..9d9639c53 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -9855,6 +9855,32 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>labels</name>
+                                <children>
+                                    <concept_node>
+                                        <name>updatevehicle</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>successes</name>
                                 <children>
diff --git a/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
index 86dcb31e6..76acbb7c3 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx
+++ b/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>
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index e31826772..8766e4add 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/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>
       }
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index 32f28d1c5..690fee55b 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/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")
         );
diff --git a/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx b/client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx
new file mode 100644
index 000000000..cb0b7cc0f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 57e55704d..5fd7e8458 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -108,6 +108,15 @@ export const GET_JOB_BY_PK = gql`
       v_model_desc
       v_make_desc
       v_color
+      vehicle {
+        id
+        plate_no
+        v_vin
+        v_model_yr
+        v_model_desc
+        v_make_desc
+        v_color
+      }
       ins_co_id
       policy_no
       loss_date
@@ -245,7 +254,13 @@ export const QUERY_JOB_CARD_DETAILS = gql`
       v_model_desc
       v_color
       plate_no
-
+      vehicle {
+        v_model_yr
+        v_make_desc
+        v_model_desc
+        v_color
+        plate_no
+      }
       actual_completion
       actual_delivery
       actual_in
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 7f3dcb694..4a4d5c58f 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -649,6 +649,9 @@
 				"v_type": "Type",
 				"v_vin": "Vehicle Identification Number"
 			},
+			"labels": {
+				"updatevehicle": "Update Vehicle Information"
+			},
 			"successes": {
 				"save": "Vehicle saved successfully."
 			}
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index f34a8c497..1b780b06c 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -649,6 +649,9 @@
 				"v_type": "Tipo",
 				"v_vin": "Número de identificación del vehículo"
 			},
+			"labels": {
+				"updatevehicle": ""
+			},
 			"successes": {
 				"save": "Vehículo guardado con éxito."
 			}
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 593d02e05..18fb72893 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -649,6 +649,9 @@
 				"v_type": "Type",
 				"v_vin": "Plaque d'immatriculation"
 			},
+			"labels": {
+				"updatevehicle": ""
+			},
 			"successes": {
 				"save": "Le véhicule a été enregistré avec succès."
 			}