From dc0d8526a3ee2b3ee4fa3192da9f42b3f3750788 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Mon, 24 Oct 2022 12:49:06 -0700 Subject: [PATCH 1/3] IO-2086 Improved local media image display. --- bodyshop_translations.babel | 21 +++++++++++++ ...jobs-documents-local-gallery.container.jsx | 30 ++++++++++++++++--- client/src/redux/media/media.sagas.js | 6 ++++ client/src/translations/en_us/common.json | 1 + client/src/translations/es/common.json | 1 + client/src/translations/fr/common.json | 1 + 6 files changed, 56 insertions(+), 4 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index e3ebd5530..bd442b8d8 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -13704,6 +13704,27 @@ + + optimizedimage + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + reassign_limitexceeded false diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx index d3500e72a..77a6fa80b 100644 --- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx +++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx @@ -1,5 +1,5 @@ import { SyncOutlined, FileExcelFilled } from "@ant-design/icons"; -import { Button, Card, Space } from "antd"; +import { Alert, Button, Card, Space } from "antd"; import React, { useEffect } from "react"; import Gallery from "react-grid-gallery"; import { useTranslation } from "react-i18next"; @@ -58,7 +58,7 @@ export function JobsDocumentsLocalGallery({ } } }, [job, invoice_number, getJobMedia, getBillMedia]); - + let optimized; const jobMedia = allMedia && allMedia[job.id] ? allMedia[job.id].reduce( @@ -68,7 +68,11 @@ export function JobsDocumentsLocalGallery({ val.type.mime && val.type.mime.startsWith("image") ) { - acc.images.push(val); + acc.images.push({ + ...val, + ...(val.optimized && { src: val.optimized, fullsize: val.src }), + }); + if (val.optimized) optimized = true; } else { acc.other.push({ ...val, @@ -80,6 +84,11 @@ export function JobsDocumentsLocalGallery({ { images: [], other: [] } ) : { images: [], other: [] }; + console.log( + "🚀 ~ file: jobs-documents-local-gallery.container.jsx ~ line 63 ~ jobMedia", + jobMedia + ); + return (
@@ -119,9 +128,22 @@ export function JobsDocumentsLocalGallery({ onSelectImage={(index, image) => { toggleMediaSelected({ jobid: job.id, filename: image.filename }); }} + {...(optimized && { + customControls: [ + , + ], + })} onClickImage={(props) => { + const media = allMedia[job.id].find( + (m) => m.optimized === props.target.src + ); + window.open( - props.target.src, + media ? media.src : props.target.src, "_blank", "toolbar=0,location=0,menubar=0" ); diff --git a/client/src/redux/media/media.sagas.js b/client/src/redux/media/media.sagas.js index 5b8c64f95..be0c34777 100644 --- a/client/src/redux/media/media.sagas.js +++ b/client/src/redux/media/media.sagas.js @@ -39,6 +39,11 @@ export function* getJobMedia({ payload: jobid }) { thumbnail: normalizeUrl( `${localmediaserverhttp}/${d.thumbnail}` ), + ...(d.optimized && { + optimized: normalizeUrl( + `${localmediaserverhttp}/${d.optimized}` + ), + }), isSelected: false, key: idx, }; @@ -50,6 +55,7 @@ export function* getJobMedia({ payload: jobid }) { thumbnail: normalizeUrl( `${localmediaserverhttp}/${d.thumbnail}` ), + isSelected: false, key: idx, }; diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index f4c464986..6996dc40d 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -849,6 +849,7 @@ "doctype": "Document Type", "newjobid": "Assign to Job", "openinexplorer": "Open in Explorer", + "optimizedimage": "The below image is optimized. Click on the picture below to open in a new window and view it full size, or open it in explorer.", "reassign_limitexceeded": "Reassigning all selected documents will exceed the job storage limit for your shop. ", "reassign_limitexceeded_title": "Unable to reassign document(s)", "storageexceeded": "You've exceeded your storage limit for this job. Please remove documents, or increase your storage plan.", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 1ab9f658c..0fe3570c6 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -849,6 +849,7 @@ "doctype": "", "newjobid": "", "openinexplorer": "", + "optimizedimage": "", "reassign_limitexceeded": "", "reassign_limitexceeded_title": "", "storageexceeded": "", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index ffe4f8505..c4bb4a09c 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -849,6 +849,7 @@ "doctype": "", "newjobid": "", "openinexplorer": "", + "optimizedimage": "", "reassign_limitexceeded": "", "reassign_limitexceeded_title": "", "storageexceeded": "", From 41b32a25d71d14c595aa3804ed13191d47aae776 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Mon, 24 Oct 2022 13:49:57 -0700 Subject: [PATCH 2/3] IO-2086 LMS Optimized imges bugfix. --- .../documents-local-upload/documents-local-upload.utility.js | 5 +++++ client/src/redux/media/media.sagas.js | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/client/src/components/documents-local-upload/documents-local-upload.utility.js b/client/src/components/documents-local-upload/documents-local-upload.utility.js index ad53b7f4a..eba5e96fb 100644 --- a/client/src/components/documents-local-upload/documents-local-upload.utility.js +++ b/client/src/components/documents-local-upload/documents-local-upload.utility.js @@ -60,6 +60,11 @@ export const handleUpload = async ({ ev, context }) => { ...d, selected: false, src: normalizeUrl(`${bodyshop.localmediaserverhttp}/${d.src}`), + ...(d.optimized && { + optimized: normalizeUrl( + `${bodyshop.localmediaserverhttp}/${d.optimized}` + ), + }), thumbnail: normalizeUrl( `${bodyshop.localmediaserverhttp}/${d.thumbnail}` ), diff --git a/client/src/redux/media/media.sagas.js b/client/src/redux/media/media.sagas.js index be0c34777..ac080f32a 100644 --- a/client/src/redux/media/media.sagas.js +++ b/client/src/redux/media/media.sagas.js @@ -97,6 +97,11 @@ export function* getBillMedia({ payload: { jobid, invoice_number } }) { thumbnail: normalizeUrl( `${localmediaserverhttp}/${d.thumbnail}` ), + ...(d.optimized && { + optimized: normalizeUrl( + `${localmediaserverhttp}/${d.optimized}` + ), + }), isSelected: false, key: idx, }; From 15bf1937d35c2056fc463d43981bd894bb8b5811 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Mon, 24 Oct 2022 14:01:37 -0700 Subject: [PATCH 3/3] Remove logging statement. --- .../jobs-documents-local-gallery.container.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx index 77a6fa80b..5370971d9 100644 --- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx +++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx @@ -84,10 +84,6 @@ export function JobsDocumentsLocalGallery({ { images: [], other: [] } ) : { images: [], other: [] }; - console.log( - "🚀 ~ file: jobs-documents-local-gallery.container.jsx ~ line 63 ~ jobMedia", - jobMedia - ); return (