From 0bc8d95120f2edaacd4def6bd5b93cb980994e36 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 29 Apr 2020 14:13:49 -0700
Subject: [PATCH] BOD-72 Fixed thumbnail generation + added transform params to
 environment variables.

---
 .../job-detail-cards.documents.component.jsx          | 11 +++++++----
 .../jobs-documents-gallery.component.jsx              |  4 ++--
 client/src/graphql/jobs.queries.js                    |  1 +
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
index 5c3713097..4cdec4c27 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
@@ -18,12 +18,15 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
     <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.documents")}
-      extraLink={`/manage/jobs/${data.id}?documents`}
-    >
+      extraLink={`/manage/jobs/${data.id}?tab=documents`}>
       {data.documents.length > 0 ? (
         <Carousel autoplay>
-          {data.documents.map(item => (
-            <img key={item.id} src={item.thumb_url} alt={item.name} />
+          {data.documents.map((item) => (
+            <img
+              key={item.id}
+              src={`${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${item.key}.jpg`}
+              alt={item.name}
+            />
           ))}
         </Carousel>
       ) : (
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index 3ec6d4f6b..87e7f6b17 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -12,7 +12,7 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
       data.reduce((acc, value) => {
         acc.push({
           src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}.jpg`,
-          thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/h_200,w_200,c_thumb/${value.key}.jpg`,
+          thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}.jpg`,
           tags: value.type.includes("pdf")
             ? [{ value: "PDF", title: "PDF" }]
             : [],
@@ -28,7 +28,7 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
   }, [data, setgalleryImages]);
 
   return (
-    <div className="clearfix">
+    <div className='clearfix'>
       <DocumentsUploadContainer
         jobId={jobId}
         callbackAfterUpload={refetch}
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 4a8354ef4..b213e6583 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -306,6 +306,7 @@ export const QUERY_JOB_CARD_DETAILS = gql`
       v_color
       plate_no
       vehicle {
+        id
         v_model_yr
         v_make_desc
         v_model_desc