From b070b0918c0897de4a76bfa01aa5c90ed46178f7 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Fri, 7 Feb 2020 10:54:08 -0800
Subject: [PATCH] Added vehicle and owner pages/routes.

---
 bodyshop_translations.babel                   | 91 ++++++++++++++++++-
 client/src/App/App.js                         |  5 +-
 .../components/header/header.component.jsx    | 15 +++
 .../jobs-list/jobs-list.component.jsx         |  2 +-
 .../loading-spinner.component.jsx             |  1 +
 .../schedule-day-view.component.jsx           |  1 +
 client/src/graphql/vehicles.queries.js        | 38 ++++++++
 .../pages/manage/manage.page.container.jsx    | 36 +++++++-
 client/src/pages/manage/manage.page.jsx       | 56 +++++++-----
 .../owners-detail.page.component.jsx          |  5 +
 .../owners-detail.page.container.jsx          |  8 ++
 .../pages/owners/owners.page.component.jsx    |  9 ++
 .../pages/owners/owners.page.container.jsx    |  8 ++
 .../vehicles-detail.page.component.jsx        |  9 ++
 .../vehicles-detail.page.container.jsx        | 28 ++++++
 .../vehicles/vehicles.page.component.jsx      |  9 ++
 .../vehicles/vehicles.page.container.jsx      |  6 ++
 client/src/translations/en_us/common.json     |  8 +-
 client/src/translations/es/common.json        |  8 +-
 client/src/translations/fr/common.json        |  8 +-
 20 files changed, 316 insertions(+), 35 deletions(-)
 create mode 100644 client/src/graphql/vehicles.queries.js
 create mode 100644 client/src/pages/owners-detail/owners-detail.page.component.jsx
 create mode 100644 client/src/pages/owners-detail/owners-detail.page.container.jsx
 create mode 100644 client/src/pages/owners/owners.page.component.jsx
 create mode 100644 client/src/pages/owners/owners.page.container.jsx
 create mode 100644 client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
 create mode 100644 client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
 create mode 100644 client/src/pages/vehicles/vehicles.page.component.jsx
 create mode 100644 client/src/pages/vehicles/vehicles.page.container.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 6bae095d9..1b4f239ba 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.6.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.6.1">
     <!--
 
     BabelEdit project file
@@ -4038,6 +4038,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>customers</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>home</name>
                                         <definition_loaded>false</definition_loaded>
@@ -4080,6 +4101,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>owners</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>schedule</name>
                                         <definition_loaded>false</definition_loaded>
@@ -4101,6 +4143,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>vehicles</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>
@@ -5028,6 +5091,32 @@
                     <folder_node>
                         <name>vehicles</name>
                         <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>noaccess</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>fields</name>
                                 <children>
diff --git a/client/src/App/App.js b/client/src/App/App.js
index a552fb31b..aab027088 100644
--- a/client/src/App/App.js
+++ b/client/src/App/App.js
@@ -13,7 +13,7 @@ import PrivateRoute from "../utils/private-route";
 import "./App.css";
 
 const LandingPage = lazy(() => import("../pages/landing/landing.page"));
-const ManagePage = lazy(() => import("../pages/manage/manage.page"));
+const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
 const Unauthorized = lazy(() =>
   import("../pages/unauthorized/unauthorized.component")
@@ -28,8 +28,7 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(({ checkUserSession, currentUser, setBodyshop }) => {
-
+)(({ checkUserSession, currentUser }) => {
   useEffect(() => {
     checkUserSession();
     return () => {};
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 0054bb392..640678a7b 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -49,6 +49,21 @@ export default ({ landingHeader, selectedNavItem }) => {
             </Menu.Item>
           </Menu.SubMenu>
 
+          <Menu.SubMenu title={t("menus.header.customers")}>
+            <Menu.Item key="owners">
+              <Link to="/manage/owners">
+                <Icon type="team" />
+                {t("menus.header.owners")}
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="vehicles">
+              <Link to="/manage/vehicles">
+                <Icon type="car" />
+                {t("menus.header.vehicles")}
+              </Link>
+            </Menu.Item>
+          </Menu.SubMenu>
+
           {!landingHeader ? null : (
             <Menu.Item>
               <ManageSignInButton />
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index f16a36726..312e1ad91 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -106,7 +106,7 @@ export default withRouter(function JobsList({
       ellipsis: true,
       render: (text, record) => {
         return record.vehicle ? (
-          <Link to={"manage/vehicles/" + record.vehicle.id}>
+          <Link to={"/manage/vehicles/" + record.vehicle.id}>
             {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
             {record.vehicle.v_model_desc}
           </Link>
diff --git a/client/src/components/loading-spinner/loading-spinner.component.jsx b/client/src/components/loading-spinner/loading-spinner.component.jsx
index 98ab9e422..550499569 100644
--- a/client/src/components/loading-spinner/loading-spinner.component.jsx
+++ b/client/src/components/loading-spinner/loading-spinner.component.jsx
@@ -6,6 +6,7 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
   return (
     <Spin
       spinning={loading}
+      style={{ position: "absolute", top: "50%", left: "50%" }}
       className="loading-spinner"
       size="large"
       //delay="500"
diff --git a/client/src/components/schedule-day-view/schedule-day-view.component.jsx b/client/src/components/schedule-day-view/schedule-day-view.component.jsx
index e12818a74..dd657fcdf 100644
--- a/client/src/components/schedule-day-view/schedule-day-view.component.jsx
+++ b/client/src/components/schedule-day-view/schedule-day-view.component.jsx
@@ -11,6 +11,7 @@ export default function ScheduleDayViewComponent({ data, day }) {
       <ScheduleCalendarWrapperComponent
         events={data}
         defaultView="day"
+        views={["day"]}
         style={{ height: "40vh" }}
         defaultDate={new Date(day)}
         //onNavigate={e => console.log("e", e)}
diff --git a/client/src/graphql/vehicles.queries.js b/client/src/graphql/vehicles.queries.js
new file mode 100644
index 000000000..1894f09ef
--- /dev/null
+++ b/client/src/graphql/vehicles.queries.js
@@ -0,0 +1,38 @@
+import { gql } from "apollo-boost";
+
+export const QUERY_VEHICLE_BY_ID = gql`
+  query QUERY_VEHICLE_BY_ID($id: uuid!) {
+    vehicles(where: { id: { _eq: $id } }) {
+      created_at
+      db_v_code
+      id
+      plate_no
+      plate_st
+      v_vin
+      v_type
+      v_trimcode
+      v_tone
+      v_stage
+      v_prod_dt
+      v_paint_codes
+      v_options
+      v_model_yr
+      v_model_desc
+      v_mldgcode
+      v_makecode
+      v_make_desc
+      v_engine
+      v_cond
+      v_color
+      v_bstyle
+      updated_at
+      trim_color
+      jobs {
+        ro_number
+        ownr_fn
+        ownr_ln
+        clm_no
+      }
+    }
+  }
+`;
diff --git a/client/src/pages/manage/manage.page.container.jsx b/client/src/pages/manage/manage.page.container.jsx
index 4df3c41b6..e01664baf 100644
--- a/client/src/pages/manage/manage.page.container.jsx
+++ b/client/src/pages/manage/manage.page.container.jsx
@@ -1,6 +1,34 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ManagePage from "./manage.page";
+import { useQuery } from "react-apollo";
+import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
+import { setBodyshop } from "../../redux/user/user.actions";
+import { connect } from "react-redux";
+import { notification } from "antd";
+import { useTranslation } from "react-i18next";
 
-export default function ManagePageContainer() {
-  return <ManagePage />;
-}
+const mapDispatchToProps = dispatch => ({
+  setBodyshop: bs => dispatch(setBodyshop(bs))
+});
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(function ManagePageContainer({ match, setBodyshop }) {
+  const { error, data } = useQuery(QUERY_BODYSHOP, {
+    fetchPolicy: "network-only"
+  });
+  const { t } = useTranslation();
+  if (error) {
+    notification["error"]({ message: t("bodyshop.errors.loading") });
+  }
+
+  useEffect(() => {
+    if (data) setBodyshop(data.bodyshops[0]);
+    return () => {
+      //
+    };
+  }, [data]);
+
+  return <ManagePage match={match} />;
+});
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 9cd00db97..89bf3e5ef 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -1,6 +1,6 @@
 import { BackTop, Layout, notification } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
-import { useQuery } from "react-apollo";
+
 import { useTranslation } from "react-i18next";
 //This page will handle all routing for the entire application.
 import { connect } from "react-redux";
@@ -10,7 +10,6 @@ import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 //const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 import { setBodyshop } from "../../redux/user/user.actions";
 import "./manage.page.styles.scss";
@@ -35,29 +34,21 @@ const ChatWindowContainer = lazy(() =>
 const ScheduleContainer = lazy(() =>
   import("../schedule/schedule.page.container")
 );
-
+const VehiclesContainer = lazy(() =>
+  import("../vehicles/vehicles.page.container")
+);
+const VehiclesDetailContainer = lazy(() =>
+  import("../vehicles-detail/vehicles-detail.page.container")
+);
+const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
+const OwnersDetailContainer = lazy(() =>
+  import("../owners-detail/owners-detail.page.container")
+);
 const { Header, Content, Footer } = Layout;
 
-const mapDispatchToProps = dispatch => ({
-  setBodyshop: bs => dispatch(setBodyshop(bs))
-});
-export default connect(
-  null,
-  mapDispatchToProps
-)(function Manage({ match, setBodyshop }) {
+export default function Manage({ match }) {
   const { t } = useTranslation();
 
-  const { error, data } = useQuery(QUERY_BODYSHOP, {
-    fetchPolicy: "network-only"
-  });
-
-  if (error) {
-    notification["error"]({ message: t("bodyshop.errors.loading") });
-  }
-  if (data) {
-    setBodyshop(data.bodyshops[0]);
-  }
-
   useEffect(() => {
     document.title = t("titles.app");
   }, [t]);
@@ -96,7 +87,26 @@ export default connect(
                 path={`${match.path}/profile`}
                 component={ProfilePage}
               />
-
+              <Route
+                exact
+                path={`${match.path}/vehicles`}
+                component={VehiclesContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/vehicles/:vehId`}
+                component={VehiclesDetailContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/owners`}
+                component={OwnersContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/owners/:ownerId`}
+                component={OwnersDetailContainer}
+              />
               <Route
                 exact
                 path={`${match.path}/schedule`}
@@ -118,4 +128,4 @@ export default connect(
       <BackTop />
     </Layout>
   );
-});
+}
diff --git a/client/src/pages/owners-detail/owners-detail.page.component.jsx b/client/src/pages/owners-detail/owners-detail.page.component.jsx
new file mode 100644
index 000000000..122d88f1a
--- /dev/null
+++ b/client/src/pages/owners-detail/owners-detail.page.component.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function OwnersDetailComponent() {
+  return <div>Owner Detail</div>;
+}
diff --git a/client/src/pages/owners-detail/owners-detail.page.container.jsx b/client/src/pages/owners-detail/owners-detail.page.container.jsx
new file mode 100644
index 000000000..bc7b94f4b
--- /dev/null
+++ b/client/src/pages/owners-detail/owners-detail.page.container.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import OwnersDetailComponent from "./owners-detail.page.component";
+
+export default function OwnersDetailContainer({ match }) {
+  const { ownerId } = match.params;
+  console.log("ownerId", ownerId);
+  return <OwnersDetailComponent />;
+}
diff --git a/client/src/pages/owners/owners.page.component.jsx b/client/src/pages/owners/owners.page.component.jsx
new file mode 100644
index 000000000..31c9c4e34
--- /dev/null
+++ b/client/src/pages/owners/owners.page.component.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function OwnersPageComponent() {
+    return (
+        <div>
+            Owners Page
+        </div>
+    )
+}
diff --git a/client/src/pages/owners/owners.page.container.jsx b/client/src/pages/owners/owners.page.container.jsx
new file mode 100644
index 000000000..85c71f91a
--- /dev/null
+++ b/client/src/pages/owners/owners.page.container.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import OwnersPageComponent from './owners.page.component'
+
+export default function OwnersPageContainer() {
+    return (
+<OwnersPageComponent />
+    )
+}
diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
new file mode 100644
index 000000000..02400dc7e
--- /dev/null
+++ b/client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function VehicleDetailComponent({ vehicle }) {
+  return (
+    <div>
+      Veh detail <span>{vehicle.v_vin}</span>
+    </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
new file mode 100644
index 000000000..ccc9efe8b
--- /dev/null
+++ b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import VehicleDetailComponent from "./vehicles-detail.page.component";
+import { useQuery } from "react-apollo";
+import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import AlertComponent from "../../components/alert/alert.component";
+import { useTranslation } from "react-i18next";
+
+export default function VehicleDetailContainer({ match }) {
+  const { vehId } = match.params;
+  const { t } = useTranslation();
+  const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
+    variables: { id: vehId },
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  console.log("vehId", vehId);
+
+  if (data.vehicles[0])
+    return <VehicleDetailComponent vehicle={data.vehicles[0]} />;
+  else
+    return (
+      <AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
+    );
+}
diff --git a/client/src/pages/vehicles/vehicles.page.component.jsx b/client/src/pages/vehicles/vehicles.page.component.jsx
new file mode 100644
index 000000000..17af2f393
--- /dev/null
+++ b/client/src/pages/vehicles/vehicles.page.component.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function VehiclesPageComponent() {
+    return (
+        <div>
+            Vehiculos
+        </div>
+    )
+}
diff --git a/client/src/pages/vehicles/vehicles.page.container.jsx b/client/src/pages/vehicles/vehicles.page.container.jsx
new file mode 100644
index 000000000..8d656af4b
--- /dev/null
+++ b/client/src/pages/vehicles/vehicles.page.container.jsx
@@ -0,0 +1,6 @@
+import React from "react";
+import VehiclesPageComponent from "./vehicles.page.component";
+
+export default function VehiclesPageContainer() {
+  return <VehiclesPageComponent />;
+}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 85bf5e6ca..35a4d9c39 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -246,9 +246,12 @@
 			"header": {
 				"activejobs": "Active Jobs",
 				"availablejobs": "Available Jobs",
+				"customers": "Customers",
 				"home": "Home",
 				"jobs": "Jobs",
-				"schedule": "Schedule"
+				"owners": "Owners",
+				"schedule": "Schedule",
+				"vehicles": "Vehicles"
 			},
 			"jobsdetail": {
 				"claimdetail": "Claim Details",
@@ -324,6 +327,9 @@
 			}
 		},
 		"vehicles": {
+			"errors": {
+				"noaccess": "The vehicle does not exist or you do not have access to it."
+			},
 			"fields": {
 				"plate_no": "License Plate"
 			}
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 38f891c71..505e60676 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -246,9 +246,12 @@
 			"header": {
 				"activejobs": "Empleos activos",
 				"availablejobs": "Trabajos disponibles",
+				"customers": "Clientes",
 				"home": "Casa",
 				"jobs": "Trabajos",
-				"schedule": "Programar"
+				"owners": "propietarios",
+				"schedule": "Programar",
+				"vehicles": "Vehículos"
 			},
 			"jobsdetail": {
 				"claimdetail": "Detalles de la reclamación",
@@ -324,6 +327,9 @@
 			}
 		},
 		"vehicles": {
+			"errors": {
+				"noaccess": "El vehículo no existe o usted no tiene acceso a él."
+			},
 			"fields": {
 				"plate_no": "Placa"
 			}
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 513006861..6bc1f4d8f 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -246,9 +246,12 @@
 			"header": {
 				"activejobs": "Emplois actifs",
 				"availablejobs": "Emplois disponibles",
+				"customers": "Les clients",
 				"home": "Accueil",
 				"jobs": "Emplois",
-				"schedule": "Programme"
+				"owners": "Propriétaires",
+				"schedule": "Programme",
+				"vehicles": "Véhicules"
 			},
 			"jobsdetail": {
 				"claimdetail": "Détails de la réclamation",
@@ -324,6 +327,9 @@
 			}
 		},
 		"vehicles": {
+			"errors": {
+				"noaccess": "Le véhicule n'existe pas ou vous n'y avez pas accès."
+			},
 			"fields": {
 				"plate_no": "Plaque d'immatriculation"
 			}