From 7f06df66fd4ba969d32784a451c3400b0019fdb0 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Fri, 7 Feb 2020 14:25:22 -0800
Subject: [PATCH] Added jobs list to vehicle detail page.

---
 bodyshop_translations.babel                   |  63 ++++++
 .../vehicle-detail-form.component.jsx         | 214 +++++++++---------
 .../vehicle-detail-jobs.component.jsx         |  59 +++++
 client/src/graphql/vehicles.queries.js        |   7 +
 .../pages/profile/profile.container.page.jsx  |   9 +-
 client/src/pages/profile/profile.page.jsx     |  11 +-
 .../vehicles-detail.page.component.jsx        |   3 +-
 .../vehicles-detail.page.container.jsx        |  11 +-
 client/src/translations/en_us/common.json     |   7 +-
 client/src/translations/es/common.json        |   7 +-
 client/src/translations/fr/common.json        |   7 +-
 11 files changed, 277 insertions(+), 121 deletions(-)
 create mode 100644 client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index fbee58836..e1f0bcff6 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -5008,6 +5008,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>vehicledetail</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>
@@ -5115,6 +5136,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>validation</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>
+                                    <concept_node>
+                                        <name>validationtitle</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>
diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
index a411dc642..8f5a369c7 100644
--- a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
+++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx
@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form, Input } from "antd";
+import { Button, DatePicker, Form, Input, Row, Col } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -13,107 +13,117 @@ export default function VehicleDetailFormComponent({ vehicle, form }) {
       <Button type="primary" key="submit" htmlType="submit">
         {t("general.labels.save")}
       </Button>
-      The Form
-      <Form.Item label={t("vehicles.fields.v_vin")}>
-        {getFieldDecorator("v_vin", {
-          initialValue: vehicle.v_vin
-        })(<Input name="v_vin" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.plate_no")}>
-        {getFieldDecorator("plate_no", {
-          initialValue: vehicle.plate_no
-        })(<Input name="plate_no" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.plate_st")}>
-        {getFieldDecorator("plate_st", {
-          initialValue: vehicle.plate_st
-        })(<Input name="plate_st" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_type")}>
-        {getFieldDecorator("v_type", {
-          initialValue: vehicle.v_type
-        })(<Input name="v_type" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_trimcode")}>
-        {getFieldDecorator("v_trimcode", {
-          initialValue: vehicle.v_trimcode
-        })(<Input name="v_trimcode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_tone")}>
-        {getFieldDecorator("v_tone", {
-          initialValue: vehicle.v_tone
-        })(<Input name="v_tone" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_stage")}>
-        {getFieldDecorator("v_stage", {
-          initialValue: vehicle.v_stage
-        })(<Input name="v_stage" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_prod_dt")}>
-        {getFieldDecorator("v_prod_dt", {
-          initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
-        })(<DatePicker name="v_prod_dt" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_paint_codes")}>
-        {getFieldDecorator("v_paint_codes", {
-          initialValue: JSON.stringify(vehicle.v_paint_codes)
-        })(<Input name="v_paint_codes" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_options")}>
-        {getFieldDecorator("v_options", {
-          initialValue: vehicle.v_options
-        })(<Input name="v_options" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_model_yr")}>
-        {getFieldDecorator("v_model_yr", {
-          initialValue: vehicle.v_model_yr
-        })(<Input name="v_model_yr" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_model_desc")}>
-        {getFieldDecorator("v_model_desc", {
-          initialValue: vehicle.v_model_desc
-        })(<Input name="v_model_desc" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_mldgcode")}>
-        {getFieldDecorator("v_mldgcode", {
-          initialValue: vehicle.v_mldgcode
-        })(<Input name="v_mldgcode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_makecode")}>
-        {getFieldDecorator("v_makecode", {
-          initialValue: vehicle.v_makecode
-        })(<Input name="v_makecode" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_make_desc")}>
-        {getFieldDecorator("v_make_desc", {
-          initialValue: vehicle.v_make_desc
-        })(<Input name="v_make_desc" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_engine")}>
-        {getFieldDecorator("v_engine", {
-          initialValue: vehicle.v_engine
-        })(<Input name="v_engine" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_cond")}>
-        {getFieldDecorator("v_cond", {
-          initialValue: vehicle.v_cond
-        })(<Input name="v_cond" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_color")}>
-        {getFieldDecorator("v_color", {
-          initialValue: vehicle.v_color
-        })(<Input name="v_color" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.v_bstyle")}>
-        {getFieldDecorator("v_bstyle", {
-          initialValue: vehicle.v_bstyle
-        })(<Input name="v_bstyle" />)}
-      </Form.Item>
-      <Form.Item label={t("vehicles.fields.trim_color")}>
-        {getFieldDecorator("trim_color", {
-          initialValue: vehicle.trim_color
-        })(<Input name="trim_color" />)}
-      </Form.Item>
+      <Row>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_vin")}>
+            {getFieldDecorator("v_vin", {
+              initialValue: vehicle.v_vin
+            })(<Input name="v_vin" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.plate_no")}>
+            {getFieldDecorator("plate_no", {
+              initialValue: vehicle.plate_no
+            })(<Input name="plate_no" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.plate_st")}>
+            {getFieldDecorator("plate_st", {
+              initialValue: vehicle.plate_st
+            })(<Input name="plate_st" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_type")}>
+            {getFieldDecorator("v_type", {
+              initialValue: vehicle.v_type
+            })(<Input name="v_type" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_trimcode")}>
+            {getFieldDecorator("v_trimcode", {
+              initialValue: vehicle.v_trimcode
+            })(<Input name="v_trimcode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_tone")}>
+            {getFieldDecorator("v_tone", {
+              initialValue: vehicle.v_tone
+            })(<Input name="v_tone" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_bstyle")}>
+            {getFieldDecorator("v_bstyle", {
+              initialValue: vehicle.v_bstyle
+            })(<Input name="v_bstyle" />)}
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_stage")}>
+            {getFieldDecorator("v_stage", {
+              initialValue: vehicle.v_stage
+            })(<Input name="v_stage" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_prod_dt")}>
+            {getFieldDecorator("v_prod_dt", {
+              initialValue: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null
+            })(<DatePicker name="v_prod_dt" />)}
+          </Form.Item>
+          {
+            //TODO Add handling for paint code json
+          }
+          <Form.Item label={t("vehicles.fields.v_paint_codes")}>
+            {getFieldDecorator("v_paint_codes", {
+              initialValue: JSON.stringify(vehicle.v_paint_codes)
+            })(<Input name="v_paint_codes" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_options")}>
+            {getFieldDecorator("v_options", {
+              initialValue: vehicle.v_options
+            })(<Input name="v_options" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_model_yr")}>
+            {getFieldDecorator("v_model_yr", {
+              initialValue: vehicle.v_model_yr
+            })(<Input name="v_model_yr" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_model_desc")}>
+            {getFieldDecorator("v_model_desc", {
+              initialValue: vehicle.v_model_desc
+            })(<Input name="v_model_desc" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.trim_color")}>
+            {getFieldDecorator("trim_color", {
+              initialValue: vehicle.trim_color
+            })(<Input name="trim_color" />)}
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("vehicles.fields.v_mldgcode")}>
+            {getFieldDecorator("v_mldgcode", {
+              initialValue: vehicle.v_mldgcode
+            })(<Input name="v_mldgcode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_makecode")}>
+            {getFieldDecorator("v_makecode", {
+              initialValue: vehicle.v_makecode
+            })(<Input name="v_makecode" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_make_desc")}>
+            {getFieldDecorator("v_make_desc", {
+              initialValue: vehicle.v_make_desc
+            })(<Input name="v_make_desc" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_engine")}>
+            {getFieldDecorator("v_engine", {
+              initialValue: vehicle.v_engine
+            })(<Input name="v_engine" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_cond")}>
+            {getFieldDecorator("v_cond", {
+              initialValue: vehicle.v_cond
+            })(<Input name="v_cond" />)}
+          </Form.Item>
+          <Form.Item label={t("vehicles.fields.v_color")}>
+            {getFieldDecorator("v_color", {
+              initialValue: vehicle.v_color
+            })(<Input name="v_color" />)}
+          </Form.Item>
+        </Col>
+      </Row>
     </div>
   );
 }
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
new file mode 100644
index 000000000..c4dfca2be
--- /dev/null
+++ b/client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+export default function VehicleDetailJobsComponent({ vehicle }) {
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      ellipsis: true,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.id}`}>
+          {record.ro_number ? record.ro_number : `EST ${record.est_number}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      render: (text, record) => (
+        <Link to={`/manage/owners/${record.owner.id}`}>
+          {`${record.ownr_fn} ${record.ownr_ln}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no"
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status"
+    },
+
+    {
+      title: t("jobs.fields.clm_total"),
+      dataIndex: "clm_total",
+      key: "clm_total",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+      )
+    }
+  ];
+
+  return (
+    <Table
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={vehicle.jobs}
+    />
+  );
+}
diff --git a/client/src/graphql/vehicles.queries.js b/client/src/graphql/vehicles.queries.js
index 0e74c6a83..2dcc10303 100644
--- a/client/src/graphql/vehicles.queries.js
+++ b/client/src/graphql/vehicles.queries.js
@@ -28,10 +28,17 @@ export const QUERY_VEHICLE_BY_ID = gql`
       updated_at
       trim_color
       jobs {
+        id
         ro_number
         ownr_fn
+        est_number
         ownr_ln
+        owner {
+          id
+        }
         clm_no
+        status
+        clm_total
       }
     }
   }
diff --git a/client/src/pages/profile/profile.container.page.jsx b/client/src/pages/profile/profile.container.page.jsx
index 4acf9c486..a2d7ece13 100644
--- a/client/src/pages/profile/profile.container.page.jsx
+++ b/client/src/pages/profile/profile.container.page.jsx
@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ProfilePage from "./profile.page";
-
+import { useTranslation } from "react-i18next";
 export default function ProfileContainerPage() {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.profile");
+  }, [t]);
+
   return <ProfilePage />;
 }
diff --git a/client/src/pages/profile/profile.page.jsx b/client/src/pages/profile/profile.page.jsx
index 29f3b7410..5138c062b 100644
--- a/client/src/pages/profile/profile.page.jsx
+++ b/client/src/pages/profile/profile.page.jsx
@@ -1,16 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Layout } from "antd";
-import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
+import React, { useState } from "react";
 import ProfileContent from "../../components/profile-content/profile-content.component";
+import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
 
 export default function ProfilePage() {
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    document.title = t("titles.profile");
-  }, [t]);
-
   const [sidebarSelection, setSidebarSelection] = useState({ key: "profile" });
   return (
     <Layout>
diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
index 62b04e3c0..8af261cf5 100644
--- a/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
+++ b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container";
+import VehicleDetailJobsComponent from "../../components/vehicle-detail-jobs/vehicle-detail-jobs.component";
 
 export default function VehicleDetailComponent({ vehicle, refetch }) {
   return (
@@ -7,7 +8,7 @@ export default function VehicleDetailComponent({ vehicle, refetch }) {
       Veh detail <span>{vehicle.v_vin}</span>
       <div>Vehicle Fields</div>
       <VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} />
-      <div>Associated Jobs</div>
+      <VehicleDetailJobsComponent vehicle={vehicle} />
     </div>
   );
 }
diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
index 0694ec9fc..5df581377 100644
--- a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
+++ b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import VehicleDetailComponent from "./vehicles-detail.page.component";
 import { useQuery } from "react-apollo";
 import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
@@ -14,6 +14,15 @@ export default function VehicleDetailContainer({ match }) {
     fetchPolicy: "network-only"
   });
 
+  useEffect(() => {
+    document.title = t("titles.vehicledetail", {
+      vehicle:
+        data && data.vehicles[0]
+          ? `${data.vehicles[0].v_model_yr} ${data.vehicles[0].v_make_desc} ${data.vehicles[0].v_model_desc}`
+          : ""
+    });
+  }, [t, data]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 27bbf0a5f..0dc6852df 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -315,7 +315,8 @@
 			"jobsdetail": "Job {{ro_number}} | $t(titles.app)",
 			"jobsdocuments": "Job Documents {{ro_number}} | $t(titles.app)",
 			"profile": "My Profile | $t(titles.app)",
-			"schedule": "Schedule | $t(titles.app)"
+			"schedule": "Schedule | $t(titles.app)",
+			"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)"
 		},
 		"user": {
 			"actions": {
@@ -328,7 +329,9 @@
 		},
 		"vehicles": {
 			"errors": {
-				"noaccess": "The vehicle does not exist or you do not have access to it."
+				"noaccess": "The vehicle does not exist or you do not have access to it.",
+				"validation": "Please ensure all fields are entered correctly.",
+				"validationtitle": "Validation Error"
 			},
 			"fields": {
 				"plate_no": "License Plate",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index aeccb967b..3db448c3a 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -315,7 +315,8 @@
 			"jobsdetail": "Trabajo {{ro_number}} | $t(titles.app)",
 			"jobsdocuments": "Documentos de trabajo {{ro_number}} | $ t (títulos.app)",
 			"profile": "Mi perfil | $t(titles.app)",
-			"schedule": "Horario | $t(titles.app)"
+			"schedule": "Horario | $t(titles.app)",
+			"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)"
 		},
 		"user": {
 			"actions": {
@@ -328,7 +329,9 @@
 		},
 		"vehicles": {
 			"errors": {
-				"noaccess": "El vehículo no existe o usted no tiene acceso a él."
+				"noaccess": "El vehículo no existe o usted no tiene acceso a él.",
+				"validation": "Asegúrese de que todos los campos se ingresen correctamente.",
+				"validationtitle": "Error de validacion"
 			},
 			"fields": {
 				"plate_no": "Placa",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 42bce0207..1feadd201 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -315,7 +315,8 @@
 			"jobsdetail": "Travail {{ro_number}} | $t(titles.app)",
 			"jobsdocuments": "Documents de travail {{ro_number}} | $ t (titres.app)",
 			"profile": "Mon profil | $t(titles.app)",
-			"schedule": "Horaire | $t(titles.app)"
+			"schedule": "Horaire | $t(titles.app)",
+			"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)"
 		},
 		"user": {
 			"actions": {
@@ -328,7 +329,9 @@
 		},
 		"vehicles": {
 			"errors": {
-				"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
+				"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès.",
+				"validation": "Veuillez vous assurer que tous les champs sont correctement entrés.",
+				"validationtitle": "Erreur de validation"
 			},
 			"fields": {
 				"plate_no": "Plaque d'immatriculation",