diff --git a/packages/inspection-report/src/components/DamageReport/DamageReport.js b/packages/inspection-report/src/components/DamageReport/DamageReport.js index 8a39d7723..eb70af8d1 100644 --- a/packages/inspection-report/src/components/DamageReport/DamageReport.js +++ b/packages/inspection-report/src/components/DamageReport/DamageReport.js @@ -172,6 +172,7 @@ export default function DamageReport({ inspectionId, damages, setDamages, + pictures, }); const { diff --git a/packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js b/packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js index e43aaf613..b319536c7 100644 --- a/packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js +++ b/packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js @@ -6,6 +6,7 @@ export default function useDamageReportStateHandlers({ inspectionId, damages, setDamages, + pictures, }) { const [editedDamage, setEditedDamage] = useState(undefined); const [editedDamagePart, setEditedDamagePart] = useState(undefined); @@ -84,7 +85,14 @@ export default function useDamageReportStateHandlers({ throw new Error(`Unable to find damage with corresponding pill part "${partName}"`); } const { images } = damage; - const partDamageImages = images.filter(img => img.base_image_type === "beauty_shot"); + const damagedPartImage = pictures.find(img => img.id === damage?.images[0]?.id)?.rendered_outputs?.map(img => ({ + id: img.id + '1', + url: img.url, + })) ?? []; + const partDamageImages = images.filter(img => img.base_image_type === "beauty_shot").map((img, index) => ({ + ...img, + rendered_outputs: index === 0 ? pictures.find(pic => pic.id === img?.id)?.rendered_outputs : [] + })); const zoomedDamageImages = images.filter(img => img.base_image_type === "close_up"); setEditedDamage(damage); setEditedDamagePart(partName); diff --git a/packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js b/packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js index 070a21554..44b0f2f5d 100644 --- a/packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js +++ b/packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js @@ -39,6 +39,7 @@ function getPictures(inspection) { .filter((damage) => damage?.additional_data?.description === 'rendering of detected damages') .map((damagedImage) => { return { + id: image.id, isRendered: true, label: image.additional_data?.label ?? undefined, url: damagedImage.path, @@ -56,6 +57,7 @@ function getDamages(inspection) { (inspectionPart) => (inspectionPart.id === severityResult.related_item_id), )?.related_images?.map( (relatedImage) => ({ + id: relatedImage.base_image_id, base_image_type: relatedImage.base_image_type, object_type: relatedImage.object_type, url: relatedImage.path, diff --git a/packages/inspection-report/src/components/Gallery/index.js b/packages/inspection-report/src/components/Gallery/index.js index d1024a6ed..478736bf7 100644 --- a/packages/inspection-report/src/components/Gallery/index.js +++ b/packages/inspection-report/src/components/Gallery/index.js @@ -171,13 +171,27 @@ function Gallery({ pictures }) { const currentPictureIndex = pictures.findIndex(pic => pic.id === focusedPhoto.id); switch (event.key) { case "ArrowLeft": - if (currentPictureIndex - 1 >= 0) { - setFocusedPhoto(pictures[currentPictureIndex - 1]); + if ((focusedPhoto?.isRendered && currentPictureIndex >= 0) || currentPictureIndex - 1 >= 0) { + if (focusedPhoto.isRendered) { + setFocusedPhoto(pictures[currentPictureIndex]); + } else { + setFocusedPhoto( + pictures[currentPictureIndex - 1]?.rendered_outputs?.length > 0 ? + pictures[currentPictureIndex - 1]?.rendered_outputs[0] : pictures[currentPictureIndex] + ); + } } break; case "ArrowRight": - if (currentPictureIndex + 1 < pictures.length) { - setFocusedPhoto(pictures[currentPictureIndex + 1]); + if ((!focusedPhoto?.isRendered && currentPictureIndex < pictures.length) || currentPictureIndex + 1 < pictures.length) { + if (focusedPhoto.isRendered) { + setFocusedPhoto(pictures[currentPictureIndex + 1]); + } else { + setFocusedPhoto( + pictures[currentPictureIndex]?.rendered_outputs?.length > 0 ? + pictures[currentPictureIndex]?.rendered_outputs[0] : pictures[currentPictureIndex + 1] + ); + } } break; default: @@ -224,7 +238,9 @@ function Gallery({ pictures }) { > - {(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''} + + {(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''} {focusedPhoto?.isRendered && t('gallery.withDamages')} +