From 26745f2e62935a9e767dd5f007df859b1b046546 Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Tue, 21 Jan 2020 10:52:40 -0800
Subject: [PATCH] Refactor jobs detail page to use container. Refresh detail
 cards on note add.

---
 bodyshop_translations.babel                   | 107 +++++++++++++++++-
 .../job-detail-cards.component.jsx            |  36 ++++--
 .../job-detail-cards.styles.scss              |   5 -
 .../jobs-list/jobs-list.component.jsx         |   3 +-
 .../jobs-list/jobs-list.styles.scss           |   4 -
 .../note-add-modal.component.jsx              |  10 +-
 client/src/graphql/apollo-error-handling.js   |  12 +-
 client/src/graphql/notes.queries.js           |   2 +-
 client/src/index.css                          |   1 +
 .../jobs-detail.page.container.jsx            |  31 +++++
 .../pages/jobs-detail/jobs-detail.page.jsx    |  50 ++++----
 client/src/pages/manage/manage.page.jsx       |   8 +-
 .../src/pages/manage/manage.page.styles.scss  |   1 +
 client/src/translations/en_us/common.json     |   5 +
 client/src/translations/es/common.json        |   5 +
 client/src/translations/fr/common.json        |   5 +
 16 files changed, 220 insertions(+), 65 deletions(-)
 delete mode 100644 client/src/components/jobs-list/jobs-list.styles.scss
 create mode 100644 client/src/pages/jobs-detail/jobs-detail.page.container.jsx
 create mode 100644 client/src/pages/manage/manage.page.styles.scss

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 5a81d8485..9336a0826 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
@@ -1087,6 +1087,111 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>documents</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>lines</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>notes</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>parts</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>rates</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>vehicle_info</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 4eb7469d4..63a0cc9cb 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
@@ -15,50 +16,61 @@ import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
 import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./job-detail-cards.styles.scss";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import NoteAddModal from "../note-add-modal/note-add-modal.component";
 
 export default function JobDetailCards({ selectedJob }) {
-  const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
+  const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
     fetchPolicy: "network-only",
     variables: { id: selectedJob },
     skip: !selectedJob
   });
   const [noteModalVisible, setNoteModalVisible] = useState(false);
-
   const { t } = useTranslation();
 
   if (!selectedJob) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
-
+  if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <div className='job-cards-container'>
       <NoteAddModal
-        jobId={data?.jobs_by_pk.id}
+        jobId={data.jobs_by_pk.id}
         visible={noteModalVisible}
         changeVisibility={setNoteModalVisible}
+        refetch={refetch}
       />
       <PageHeader
         ghost={false}
         onBack={() => window.history.back()}
-        tags={<Tag color='blue'>{data?.jobs_by_pk.job_status?.name}</Tag>}
+        tags={
+          <span key='job-status'>
+            {data.jobs_by_pk.job_status ? (
+              <Tag color='blue'>{data.jobs_by_pk.job_status.name}</Tag>
+            ) : null}
+          </span>
+        }
         title={
           loading
             ? t("general.labels.loading")
-            : data?.jobs_by_pk.ro_number
-            ? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
-            : `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
+            : data.jobs_by_pk.ro_number
+            ? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
+            : `${t("jobs.fields.est_number")} ${data.jobs_by_pk.est_number}`
         }
         extra={[
-          <Button key='documents'>
-            <Icon type='file-image' />
-            {t("jobs.actions.addDocuments")}
-          </Button>,
+          <Link
+            key='documents'
+            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
+            <Button>
+              <Icon type='file-image' />
+              {t("jobs.actions.addDocuments")}
+            </Button>
+          </Link>,
           <Button key='printing'>
             <Icon type='printer' />
             {t("jobs.actions.printCenter")}
diff --git a/client/src/components/job-detail-cards/job-detail-cards.styles.scss b/client/src/components/job-detail-cards/job-detail-cards.styles.scss
index bd2a6fb18..33f1d1eff 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.styles.scss
+++ b/client/src/components/job-detail-cards/job-detail-cards.styles.scss
@@ -1,8 +1,3 @@
-.job-cards-container {
-  height: 45vh;
-  overflow-y: auto;
-}
-
 .job-cards {
   display: flex;
   flex-wrap: wrap;
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index e64a39889..592144dbb 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
-import "./jobs-list.styles.scss";
 
 export default function JobsList({
   loading,
@@ -190,7 +189,7 @@ export default function JobsList({
   };
 
   return (
-    <div className='jobs-list'>
+    <div>
       <Table
         loading={loading}
         title={() => {
diff --git a/client/src/components/jobs-list/jobs-list.styles.scss b/client/src/components/jobs-list/jobs-list.styles.scss
deleted file mode 100644
index 04944afb2..000000000
--- a/client/src/components/jobs-list/jobs-list.styles.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.jobs-list{
-    text-align: center;     
-   height: 40vh;
-}
\ No newline at end of file
diff --git a/client/src/components/note-add-modal/note-add-modal.component.jsx b/client/src/components/note-add-modal/note-add-modal.component.jsx
index 2b25ad68e..cbdfecaa7 100644
--- a/client/src/components/note-add-modal/note-add-modal.component.jsx
+++ b/client/src/components/note-add-modal/note-add-modal.component.jsx
@@ -4,7 +4,12 @@ import { useTranslation } from "react-i18next";
 import { useMutation } from "react-apollo";
 import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
 
-export default function NoteAddModal({ jobId, visible, changeVisibility }) {
+export default function NoteAddModal({
+  jobId,
+  visible,
+  changeVisibility,
+  refetch
+}) {
   const [newNote, setnewNote] = useState({
     private: false,
     critical: false,
@@ -32,7 +37,8 @@ export default function NoteAddModal({ jobId, visible, changeVisibility }) {
             text: ""
           });
         });
-
+        console.log('refetch', refetch)
+        refetch();
         changeVisibility(!visible);
       }}
       onCancel={() => {
diff --git a/client/src/graphql/apollo-error-handling.js b/client/src/graphql/apollo-error-handling.js
index 7c6ebcc53..617259f3d 100644
--- a/client/src/graphql/apollo-error-handling.js
+++ b/client/src/graphql/apollo-error-handling.js
@@ -39,14 +39,14 @@ const errorLink = onError(
                 }
               }));
 
-              // const subscriber = {
-              //   next: observer.next.bind(observer),
-              //   error: observer.error.bind(observer),
-              //   complete: observer.complete.bind(observer)
-              // };
+              const subscriber = {
+                next: observer.next.bind(observer),
+                error: observer.error.bind(observer),
+                complete: observer.complete.bind(observer)
+              };
               console.log("About to resend the request.");
               // Retry last failed request
-              forward(operation); //.subscribe(subscriber);
+              forward(operation).subscribe(subscriber);
             })
             .catch(error => {
               // No refresh or client token available, we force user to login
diff --git a/client/src/graphql/notes.queries.js b/client/src/graphql/notes.queries.js
index 8ad02f359..43020a900 100644
--- a/client/src/graphql/notes.queries.js
+++ b/client/src/graphql/notes.queries.js
@@ -1,7 +1,7 @@
 import { gql } from "apollo-boost";
 
 export const INSERT_NEW_NOTE = gql`
-  mutation INSERT_NEW_JOB($noteInput: [notes_insert_input!]!) {
+  mutation INSERT_NEW_NOTE($noteInput: [notes_insert_input!]!) {
     insert_notes(objects: $noteInput) {
       returning {
         id
diff --git a/client/src/index.css b/client/src/index.css
index 4a1df4db7..c58b73347 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.container.jsx b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx
new file mode 100644
index 000000000..644dc97f2
--- /dev/null
+++ b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx
@@ -0,0 +1,31 @@
+import { useQuery } from "@apollo/react-hooks";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../../components/alert/alert.component";
+import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import JobsDetailPage from "./jobs-detail.page";
+
+function JobsDetailPageContainer({ match, location }) {
+  const { jobId } = match.params;
+  const { hash } = location;
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  useEffect(() => {
+    document.title = loading
+      ? "..."
+      : t("titles.jobsdetail", {
+          ro_number: data.jobs_by_pk.ro_number
+        });
+  }, [loading, data, t]);
+
+  if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
+}
+export default JobsDetailPageContainer;
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.jsx b/client/src/pages/jobs-detail/jobs-detail.page.jsx
index 710cc4077..1c814d29d 100644
--- a/client/src/pages/jobs-detail/jobs-detail.page.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.jsx
@@ -1,34 +1,14 @@
-import React, { useEffect } from "react";
-import { useQuery } from "@apollo/react-hooks";
-import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import AlertComponent from "../../components/alert/alert.component";
-import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
-import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
-import { Tabs, Icon, Row } from "antd";
-import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import { Icon, Row, Tabs } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
+import { FaRegStickyNote } from "react-icons/fa";
 
-function JobsDetailPage({ match, location }) {
-  const { jobId } = match.params;
-  const { hash } = location;
+function JobsDetailPage({ jobId, hash, data, match }) {
   const { t } = useTranslation();
-  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
-    variables: { id: jobId },
-    fetchPolicy: "network-only"
-  });
 
-  useEffect(() => {
-    document.title = loading
-      ? "..."
-      : t("titles.jobsdetail", {
-          ro_number: data.jobs_by_pk.ro_number
-        });
-  }, [loading, data, t]);
-
-  //const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
-  if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <div>
       <Row>
@@ -40,7 +20,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='bars' />
-                Lines
+                {t("jobs.labels.lines")}
               </span>
             }
             key='#lines'>
@@ -50,7 +30,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='dollar' />
-                Rates
+                {t("jobs.labels.rates")}
               </span>
             }
             key='#rates'>
@@ -60,7 +40,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='tool1' />
-                Parts
+                {t("jobs.labels.parts")}
               </span>
             }
             key='#parts'>
@@ -70,12 +50,22 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='file-image' />
-                Documents
+                {t("jobs.labels.documents")}
               </span>
             }
             key='#documents'>
             <JobsDocumentsContainer jobId={jobId} />
           </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon component={FaRegStickyNote} />
+                {t("jobs.labels.notes")}
+              </span>
+            }
+            key='#notes'>
+            lol notes here 
+          </Tabs.TabPane>
         </Tabs>
       </Row>
     </div>
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 9d415fe6f..56f4e47f0 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -8,14 +8,18 @@ import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
+import './manage.page.styles.scss'
+
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
-const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
+const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
 const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 const JobsDocumentsPage = lazy(() =>
   import("../../components/jobs-documents/jobs-documents.container")
 );
 
+
+
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
@@ -31,7 +35,7 @@ export default function Manage({ match }) {
         <HeaderContainer />
       </Header>
 
-      <Content>
+      <Content className="content-container">
         <ErrorBoundary>
           <Suspense
             fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
diff --git a/client/src/pages/manage/manage.page.styles.scss b/client/src/pages/manage/manage.page.styles.scss
new file mode 100644
index 000000000..a4ce5b8b1
--- /dev/null
+++ b/client/src/pages/manage/manage.page.styles.scss
@@ -0,0 +1 @@
+.content-container { overflow-y : scroll; }
\ No newline at end of file
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index b0334030f..7eea35636 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -72,6 +72,11 @@
 					"vehicle": "Vehicle"
 				},
 				"convert": "Convert",
+				"documents": "Documents",
+				"lines": "Estimate Lines",
+				"notes": "Notes",
+				"parts": "Parts",
+				"rates": "Rates",
 				"vehicle_info": "Vehicle"
 			},
 			"successes": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 38bdacf2d..281590b38 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -72,6 +72,11 @@
 					"vehicle": "Vehículo"
 				},
 				"convert": "Convertir",
+				"documents": "documentos",
+				"lines": "Líneas estimadas",
+				"notes": "Notas",
+				"parts": "Partes",
+				"rates": "Tarifas",
 				"vehicle_info": "Vehículo"
 			},
 			"successes": {
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index cf488722e..7a59df742 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -72,6 +72,11 @@
 					"vehicle": "Véhicule"
 				},
 				"convert": "Convertir",
+				"documents": "Les documents",
+				"lines": "Estimer les lignes",
+				"notes": "Remarques",
+				"parts": "les pièces",
+				"rates": "Les taux",
 				"vehicle_info": "Véhicule"
 			},
 			"successes": {