admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3092 add messaging support for imgproxy

Browse Source
This commit is contained in:
Patrick Fic
2025-02-26 20:56:13 -08:00
parent 66671385d0
commit 25b289b65d
5 changed files with 136 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
View File

@@ -1,5 +1,5 @@
import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
import { Button, Card, Col, Row, Space, Typography } from "antd";
import { Button, Card, Col, Row, Space } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";
import { Gallery } from "react-grid-gallery";
@@ -16,6 +16,7 @@ import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.downlo
import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
import i18n from "i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -37,72 +38,15 @@ function JobsDocumentsImgproxyComponent({
const { t } = useTranslation();
const [modalState, setModalState] = useState({ open: false, index: 0 });
const fetchThumbnails = async () => {
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
let documents = result.data.reduce(
(acc, value) => {
if (value.type.startsWith("image")) {
acc.images.push({
src: value.thumbnailUrl,
fullsize: value.originalUrl,
height: 225,
width: 225,
isSelected: false,
key: value.key,
extension: value.extension,
id: value.id,
type: value.type,
size: value.size,
tags: [{ value: value.type, title: value.type }]
});
} else {
const fileName = value.key.split("/").pop();
acc.other.push({
source: value.originalUrlViaProxyPath,
src: value.thumbnailUrl,
fullsize: value.presignedGetUrl,
tags: [
{
value: fileName,
title: fileName
},
{ value: value.type, title: value.type },
...(value.bill
? [
{
value: value.bill.vendor.name,
title: t("vendors.fields.name")
},
{ value: value.bill.date, title: t("bills.fields.date") },
{
value: value.bill.invoice_number,
title: t("bills.fields.invoice_number")
}
]
: [])
],
height: 225,
width: 225,
isSelected: false,
extension: value.extension,
key: value.key,
id: value.id,
type: value.type,
size: value.size
});
}
return acc;
},
{ images: [], other: [] }
);
setgalleryImages(documents);
const fetchThumbnails = () => {
fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId });
};
useEffect(() => {
if (data) {
fetchThumbnails();
}
}, [data, setgalleryImages, t]);
}, [data, setgalleryImages]);
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
@@ -249,3 +193,69 @@ function JobsDocumentsImgproxyComponent({
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyComponent);
export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
let documents = result.data.reduce(
(acc, value) => {
if (value.type.startsWith("image")) {
acc.images.push({
src: value.thumbnailUrl,
fullsize: value.originalUrl,
height: 225,
width: 225,
isSelected: false,
key: value.key,
extension: value.extension,
id: value.id,
type: value.type,
size: value.size,
tags: [{ value: value.type, title: value.type }]
});
} else {
const fileName = value.key.split("/").pop();
acc.other.push({
source: value.originalUrlViaProxyPath,
src: value.thumbnailUrl,
fullsize: value.presignedGetUrl,
tags: [
{
value: fileName,
title: fileName
},
{ value: value.type, title: value.type },
...(value.bill
? [
{
value: value.bill.vendor.name,
title: i18n.t("vendors.fields.name")
},
{ value: value.bill.date, title: i18n.t("bills.fields.date") },
{
value: value.bill.invoice_number,
title: i18n.t("bills.fields.invoice_number")
}
]
: [])
],
height: 225,
width: 225,
isSelected: false,
extension: value.extension,
key: value.key,
id: value.id,
type: value.type,
size: value.size
});
}
return acc;
},
{ images: [], other: [] }
);
if (imagesOnly) {
setStateCallback(documents.images);
} else {
setStateCallback(documents);
}
};

36
client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx
View File

@@ -1,38 +1,20 @@
import { useEffect } from "react";
import { Gallery } from "react-grid-gallery";
import { useTranslation } from "react-i18next";
import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents-imgproxy.utility";
import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";
//import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents-imgproxy.utility";
function JobsDocumentImgproxyGalleryExternal({
data,
externalMediaState
}) {
function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
const [galleryImages, setgalleryImages] = externalMediaState;
const { t } = useTranslation();
useEffect(() => {
let documents = data.reduce((acc, value) => {
if (value.type.startsWith("image")) {
acc.push({
fullsize: GenerateSrcUrl(value),
src: GenerateThumbUrl(value),
thumbnailHeight: 225,
thumbnailWidth: 225,
isSelected: false,
key: value.key,
extension: value.extension,
id: value.id,
type: value.type,
tags: [{ value: value.type, title: value.type }],
size: value.size
});
}
const fetchThumbnails = () => {
fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
};
return acc;
}, []);
setgalleryImages(documents);
}, [data, setgalleryImages, t]);
useEffect(() => {
fetchThumbnails();
}, [jobId]);
return (
<div className="clearfix">