From dc0d8526a3ee2b3ee4fa3192da9f42b3f3750788 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 24 Oct 2022 12:49:06 -0700
Subject: [PATCH] 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": "",