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

IO-3092 Address PR concerns.

Browse Source
This commit is contained in:
Patrick Fic
2025-02-27 13:54:16 -08:00
parent f13a70a22f
commit ace0039429
6 changed files with 96 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.component.jsx
View File

@@ -67,9 +67,8 @@ export function DocumentsUploadImgproxyComponent({
//Check to see if old files plus newly uploaded ones will be too much. //Check to see if old files plus newly uploaded ones will be too much.
if (shouldStopUpload) { if (shouldStopUpload) {
notification.open({ notification.error({
key: "cannotuploaddocuments", key: "cannotuploaddocuments",
type: "error",
message: t("documents.labels.upload_limitexceeded_title"), message: t("documents.labels.upload_limitexceeded_title"),
description: t("documents.labels.upload_limitexceeded") description: t("documents.labels.upload_limitexceeded")
}); });

125
client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js
View File

@@ -5,6 +5,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries"; import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
import { axiosAuthInterceptorId } from "../../utils/CleanAxios"; import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
import client from "../../utils/GraphQLClient"; import client from "../../utils/GraphQLClient";
import { error } from "logrocket";
//Context: currentUserEmail, bodyshop, jobid, invoiceid //Context: currentUserEmail, bodyshop, jobid, invoiceid
@@ -13,17 +14,26 @@ var cleanAxios = axios.create();
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId); cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
export const handleUpload = (ev, context, notification) => { export const handleUpload = (ev, context, notification) => {
logImEXEvent("document_upload", { filetype: ev.file.type }); logImEXEvent("document_upload", { filetype: ev.file?.type });
const { onError, onSuccess, onProgress } = ev; const { onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context; const { bodyshop, jobId } = context;
const fileName = ev.file.name || ev.filename; const fileName = ev.file?.name || ev.filename;
let extension = fileName.split(".").pop(); let extension = fileName.split(".").pop();
let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`; let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`;
uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification); uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification).catch(
(error) => {
console.error("Error uploading file to S3", error);
notification.error({
message: i18n.t("documents.errors.insert", {
message: error.message
})
});
}
);
}; };
//Handles only 1 file at a time. //Handles only 1 file at a time.
@@ -49,7 +59,7 @@ export const uploadToS3 = async (
if (signedURLResponse.status !== 200) { if (signedURLResponse.status !== 200) {
if (onError) onError(signedURLResponse.statusText); if (onError) onError(signedURLResponse.statusText);
notification["error"]({ notification.error({
message: i18n.t("documents.errors.getpresignurl", { message: i18n.t("documents.errors.getpresignurl", {
message: signedURLResponse.statusText message: signedURLResponse.statusText
}) })
@@ -60,67 +70,76 @@ export const uploadToS3 = async (
//Key should be same as we provided to maintain backwards compatibility. //Key should be same as we provided to maintain backwards compatibility.
const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0]; const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0];
var options = { const options = {
onUploadProgress: (e) => { onUploadProgress: (e) => {
if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 }); if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
} }
}; };
const s3UploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options); try {
//Insert the document with the matching key. const s3UploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options);
let takenat; //Insert the document with the matching key.
if (fileType.includes("image")) { let takenat;
try { if (fileType.includes("image")) {
const exif = await exifr.parse(file); try {
takenat = exif && exif.DateTimeOriginal; const exif = await exifr.parse(file);
} catch (error) { takenat = exif && exif.DateTimeOriginal;
console.log("Unable to parse image file for EXIF Data", error.message); } catch (error) {
console.log("Unable to parse image file for EXIF Data", error.message);
}
} }
}
const documentInsert = await client.mutate({ const documentInsert = await client.mutate({
mutation: INSERT_NEW_DOCUMENT, mutation: INSERT_NEW_DOCUMENT,
variables: { variables: {
docInput: [ docInput: [
{ {
...(jobId ? { jobid: jobId } : {}), ...(jobId ? { jobid: jobId } : {}),
...(billId ? { billid: billId } : {}), ...(billId ? { billid: billId } : {}),
uploaded_by: uploaded_by, uploaded_by: uploaded_by,
key: s3Key, key: s3Key,
type: fileType, type: fileType,
extension: s3UploadResponse.data.format || extension, extension: s3UploadResponse.data.format || extension,
bodyshopid: bodyshop.id, bodyshopid: bodyshop.id,
size: s3UploadResponse.data.bytes || file.size, //Leftover from Cloudinary. We don't do any optimization on upload, so it will always be file.size. size: s3UploadResponse.data.bytes || file.size, //Leftover from Cloudinary. We don't do any optimization on upload, so it will always be file.size.
takenat takenat
} }
] ]
} }
});
if (!documentInsert.errors) {
if (onSuccess)
onSuccess({
uid: documentInsert.data.insert_documents.returning[0].id,
name: documentInsert.data.insert_documents.returning[0].name,
status: "done",
key: documentInsert.data.insert_documents.returning[0].key
});
notification.open({
type: "success",
key: "docuploadsuccess",
message: i18n.t("documents.successes.insert")
}); });
if (callback) {
callback(); if (!documentInsert.errors) {
if (onSuccess)
onSuccess({
uid: documentInsert.data.insert_documents.returning[0].id,
name: documentInsert.data.insert_documents.returning[0].name,
status: "done",
key: documentInsert.data.insert_documents.returning[0].key
});
notification.success({
key: "docuploadsuccess",
message: i18n.t("documents.successes.insert")
});
if (callback) {
callback();
}
} else {
if (onError) onError(JSON.stringify(documentInsert.errors));
notification.error({
message: i18n.t("documents.errors.insert", {
message: JSON.stringify(documentInsert.errors)
})
});
return;
} }
} else { } catch (error) {
if (onError) onError(JSON.stringify(documentInsert.errors)); console.log("Error uploading file to S3", error.message, error.stack);
notification["error"]({ notification.error({
message: i18n.t("documents.errors.insert", { message: i18n.t("documents.errors.insert", {
message: JSON.stringify(documentInsert.errors) message: error.message
}) })
}); });
return; if (onError) onError(JSON.stringify(error.message));
} }
}; };

11
client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx
View File

@@ -9,7 +9,7 @@ import { useNotification } from "../../contexts/Notifications/notificationContex
import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js"; import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js";
import { selectBodyshop } from "../../redux/user/user.selectors.js"; import { selectBodyshop } from "../../redux/user/user.selectors.js";
import JobSearchSelect from "../job-search-select/job-search-select.component.jsx"; import JobSearchSelect from "../job-search-select/job-search-select.component.jsx";
import { isFunction } from "lodash";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop
}); });
@@ -54,9 +54,8 @@ export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages,
bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal; bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal;
if (shouldPreventTransfer) { if (shouldPreventTransfer) {
notification.open({ notification.error({
key: "cannotuploaddocuments", key: "cannotuploaddocuments",
type: "error",
message: t("documents.labels.reassign_limitexceeded_title"), message: t("documents.labels.reassign_limitexceeded_title"),
description: t("documents.labels.reassign_limitexceeded") description: t("documents.labels.reassign_limitexceeded")
}); });
@@ -81,17 +80,17 @@ export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages,
}) })
}); });
//Add in confirmation & errors. //Add in confirmation & errors.
if (callback) callback(); if (isFunction(callback)) callback();
if (res.errors) { if (res.errors) {
notification["error"]({ notification.error({
message: t("documents.errors.updating", { message: t("documents.errors.updating", {
message: JSON.stringify(res.errors) message: JSON.stringify(res.errors)
}) })
}); });
} }
if (!res.mutationResult?.errors) { if (!res.mutationResult?.errors) {
notification["success"]({ notification.success({
message: t("documents.successes.updated") message: t("documents.successes.updated")
}); });
} }

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

@@ -17,6 +17,7 @@ import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reass
import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component"; import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component"; import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
import i18n from "i18next"; import i18n from "i18next";
import { isFunction } from "lodash";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop bodyshop: selectBodyshop
@@ -40,19 +41,19 @@ function JobsDocumentsImgproxyComponent({
downloadIdentifier, downloadIdentifier,
ignoreSizeLimit ignoreSizeLimit
}) { }) {
const [galleryImages, setgalleryImages] = useState({ images: [], other: [] }); const [galleryImages, setGalleryImages] = useState({ images: [], other: [] });
const { t } = useTranslation(); const { t } = useTranslation();
const [modalState, setModalState] = useState({ open: false, index: 0 }); const [modalState, setModalState] = useState({ open: false, index: 0 });
const fetchThumbnails = () => { const fetchThumbnails = () => {
fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId }); fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
}; };
useEffect(() => { useEffect(() => {
if (data) { if (data) {
fetchThumbnails(); fetchThumbnails();
} }
}, [data, setgalleryImages]); }, [data]);
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" }); const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" }); const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
@@ -65,7 +66,7 @@ function JobsDocumentsImgproxyComponent({
onClick={() => { onClick={() => {
//Handle any doc refresh. //Handle any doc refresh.
refetch && refetch(); isFunction(refetch) && refetch();
//Do the imgproxy refresh too //Do the imgproxy refresh too
fetchThumbnails(); fetchThumbnails();
@@ -73,7 +74,7 @@ function JobsDocumentsImgproxyComponent({
> >
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} /> <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
<JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} /> <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
<JobsDocumentsDeleteButton <JobsDocumentsDeleteButton
galleryImages={galleryImages} galleryImages={galleryImages}
@@ -122,7 +123,7 @@ function JobsDocumentsImgproxyComponent({
// ); // );
}} }}
onSelect={(index, image) => { onSelect={(index, image) => {
setgalleryImages({ setGalleryImages({
...galleryImages, ...galleryImages,
images: galleryImages.images.map((g, idx) => images: galleryImages.images.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g index === idx ? { ...g, isSelected: !g.isSelected } : g
@@ -148,7 +149,7 @@ function JobsDocumentsImgproxyComponent({
window.open(galleryImages.other[index].source, "_blank", "toolbar=0,location=0,menubar=0"); window.open(galleryImages.other[index].source, "_blank", "toolbar=0,location=0,menubar=0");
}} }}
onSelect={(index) => { onSelect={(index) => {
setgalleryImages({ setGalleryImages({
...galleryImages, ...galleryImages,
other: galleryImages.other.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)) other: galleryImages.other.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g))
}); });
@@ -160,6 +161,7 @@ function JobsDocumentsImgproxyComponent({
<Lightbox <Lightbox
toolbarButtons={[ toolbarButtons={[
<EditFilled <EditFilled
key="edit"
onClick={() => { onClick={() => {
const newWindow = window.open( const newWindow = window.open(
`${window.location.protocol}//${window.location.host}/edit?documentId=${ `${window.location.protocol}//${window.location.host}/edit?documentId=${
@@ -202,7 +204,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgprox
export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => { export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId }); const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
let documents = result.data.reduce( const documents = result.data.reduce(
(acc, value) => { (acc, value) => {
if (value.type.startsWith("image")) { if (value.type.startsWith("image")) {
acc.images.push({ acc.images.push({
@@ -259,9 +261,6 @@ export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesO
}, },
{ images: [], other: [] } { images: [], other: [] }
); );
if (imagesOnly) {
setStateCallback(documents.images); setStateCallback(imagesOnly ? documents.images : documents);
} else {
setStateCallback(documents);
}
}; };

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

@@ -5,7 +5,7 @@ import { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils.js"; import { logImEXEvent } from "../../firebase/firebase.utils.js";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { isFunction } from "lodash";
/* /*
################################################################################################ ################################################################################################
@@ -34,22 +34,21 @@ export default function JobsDocumentsImgproxyDeleteButton({ galleryImages, delet
}); });
if (res.data.error) { if (res.data.error) {
notification["error"]({ notification.error({
message: t("documents.errors.deleting", { message: t("documents.errors.deleting", {
error: JSON.stringify(res.data.error.response.errors) error: JSON.stringify(res.data.error.response.errors)
}) })
}); });
} else { } else {
notification.open({ notification.success({
key: "docdeletedsuccesfully", key: "docdeletedsuccesfully",
type: "success",
message: t("documents.successes.delete") message: t("documents.successes.delete")
}); });
if (deletionCallback) deletionCallback(); if (isFunction(deletionCallback)) deletionCallback();
} }
} catch (error) { } catch (error) {
notification["error"]({ notification.error({
message: t("documents.errors.deleting", { message: t("documents.errors.deleting", {
error: error.message error: error.message
}) })

4
server/graphql-client/queries.js
View File

@@ -2253,7 +2253,7 @@ exports.UPDATE_PARTS_CRITICAL = `mutation UPDATE_PARTS_CRITICAL ($IdsToMarkCriti
notcritical: update_joblines(where: {id: {_nin: $IdsToMarkCritical}, jobid: {_eq: $jobid}}, _set: {critical: false}) { notcritical: update_joblines(where: {id: {_nin: $IdsToMarkCritical}, jobid: {_eq: $jobid}}, _set: {critical: false}) {
affected_rows affected_rows
} }
}`;; }`;
exports.ACTIVE_SHOP_BY_USER = `query ACTIVE_SHOP_BY_USER($user: String) { exports.ACTIVE_SHOP_BY_USER = `query ACTIVE_SHOP_BY_USER($user: String) {
associations(where: {active: {_eq: true}, useremail: {_eq: $user}}) { associations(where: {active: {_eq: true}, useremail: {_eq: $user}}) {
@@ -2706,8 +2706,6 @@ exports.INSERT_AUDIT_TRAIL = `
} }
`; `;
exports.GET_DOCUMENTS_BY_JOB = ` exports.GET_DOCUMENTS_BY_JOB = `
query GET_DOCUMENTS_BY_JOB($jobId: uuid!) { query GET_DOCUMENTS_BY_JOB($jobId: uuid!) {
jobs_by_pk(id: $jobId) { jobs_by_pk(id: $jobId) {