diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx index f0597d39..38471d5a 100644 --- a/src/components/ImageUpload/ImageUpload.jsx +++ b/src/components/ImageUpload/ImageUpload.jsx @@ -145,45 +145,46 @@ function ImageUpload(props) { maxCount={1} onRemove={onRemove} itemRender={(reactNode, file, fileList, actions) => { - return ( - - - - - {file?.name} - + if (imageUrl || (file?.url ?? file?.thumbUrl)) + return ( + + + + + {file?.name} + + + + {props?.imageReadOnly && ( + + + + )} + {!props?.imageReadOnly && imageUrl && ( + + + + )} + {!props?.imageReadOnly && (props?.imageUrl || imageUrl) && isCrop && ( + + + + )} + - - {props?.imageReadOnly && ( - - - - )} - {!props?.imageReadOnly && imageUrl && ( - - - - )} - {!props?.imageReadOnly && (props?.imageUrl || imageUrl) && isCrop && ( - - - - )} - - - ); + ); }} defaultFileList={ props?.imageUrl && [ diff --git a/src/components/MultipleImageUpload/MultipleImageUpload.jsx b/src/components/MultipleImageUpload/MultipleImageUpload.jsx index 8dc47676..6dcd0a76 100644 --- a/src/components/MultipleImageUpload/MultipleImageUpload.jsx +++ b/src/components/MultipleImageUpload/MultipleImageUpload.jsx @@ -106,33 +106,37 @@ const MultipleImageUpload = (props) => { const [fileList, setFileList] = useState( eventImageData?.length > 0 - ? eventImageData?.map((image) => { - return { - uid: image?.original?.entityId, - name: image?.original?.entityId, - status: 'done', - url: image?.original?.uri, - cropValues: { - large: { - x: image?.large?.xCoordinate ?? undefined, - y: image?.large?.yCoordinate ?? undefined, - height: image?.large?.height ?? undefined, - width: image?.large?.width ?? undefined, - }, - original: { - entityId: image?.original?.entityId ?? null, - height: image?.original?.height ?? undefined, - width: image?.original?.width ?? undefined, - }, - thumbnail: { - x: image?.thumbnail?.xCoordinate ?? undefined, - y: image?.thumbnail?.yCoordinate ?? undefined, - height: image?.thumbnail?.height ?? undefined, - width: image?.thumbnail?.width ?? undefined, - }, - }, - }; - }) + ? eventImageData + ?.map((image) => { + if (image) + return { + uid: image?.original?.entityId, + name: image?.original?.entityId, + status: 'done', + url: image?.original?.uri, + cropValues: { + large: { + x: image?.large?.xCoordinate ?? undefined, + y: image?.large?.yCoordinate ?? undefined, + height: image?.large?.height ?? undefined, + width: image?.large?.width ?? undefined, + }, + original: { + entityId: image?.original?.entityId ?? null, + height: image?.original?.height ?? undefined, + width: image?.original?.width ?? undefined, + }, + thumbnail: { + x: image?.thumbnail?.xCoordinate ?? undefined, + y: image?.thumbnail?.yCoordinate ?? undefined, + height: image?.thumbnail?.height ?? undefined, + width: image?.thumbnail?.width ?? undefined, + }, + }, + }; + else return []; + }) + ?.flat() : [], ); diff --git a/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx b/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx index 00cc001f..33e47f1e 100644 --- a/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx +++ b/src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx @@ -107,6 +107,7 @@ function EventReadOnly() { let artsDataLink = eventData?.sameAs?.filter((item) => item?.type === sameAsTypes.ARTSDATA_IDENTIFIER); const mainImageData = eventData?.image?.find((image) => image?.isMain) || null; const imageConfig = currentCalendarData?.imageConfig?.length > 0 && currentCalendarData?.imageConfig[0]; + const imageGalleryData = eventData?.image?.filter((image) => image && !image?.isMain) || []; const formConstants = currentCalendarData?.forms?.filter((form) => form?.formName === 'Event')[0]; let mandatoryStandardFields = []; @@ -862,7 +863,7 @@ function EventReadOnly() { )} )} - {eventData?.image?.length > 0 && imageConfig.enableGallery && ( + {imageGalleryData?.length > 0 && imageConfig.enableGallery && (
!image?.isMain)} + eventImageData={imageGalleryData} />
)} diff --git a/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx b/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx index 06401eff..eef3ff7b 100644 --- a/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx +++ b/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx @@ -86,6 +86,7 @@ function OrganizationsReadOnly() { const calendarContentLanguage = currentCalendarData?.contentLanguage; const imageConfig = currentCalendarData?.imageConfig?.length > 0 && currentCalendarData?.imageConfig[0]; + const imageGalleryData = organizationData?.image?.filter((image) => image && !image?.isMain) || []; const formConstants = currentCalendarData?.forms?.filter((form) => form?.formName === 'Organization')[0]; let mandatoryStandardFields = []; @@ -425,31 +426,30 @@ function OrganizationsReadOnly() { )} {checkIfFieldIsToBeDisplayed( organizationFormFieldNames.IMAGE, - imageConfig.enableGallery ? organizationData?.image?.filter((image) => !image?.isMain) : [], + imageConfig.enableGallery ? imageGalleryData : [], ) && (

{t('dashboard.events.addEditEvent.otherInformation.image.additionalImages')}

- {organizationData?.image?.filter((image) => !image?.isMain)?.length > 0 && - imageConfig.enableGallery && ( - <> - 0 - ? imageConfig?.large?.aspectRatio - : null - } - thumbnailAspectRatio={ - currentCalendarData?.imageConfig?.length > 0 - ? imageConfig?.thumbnail?.aspectRatio - : null - } - eventImageData={organizationData?.image?.filter((image) => !image?.isMain)} - /> - - )} + {imageGalleryData?.length > 0 && imageConfig.enableGallery && ( + <> + 0 + ? imageConfig?.large?.aspectRatio + : null + } + thumbnailAspectRatio={ + currentCalendarData?.imageConfig?.length > 0 + ? imageConfig?.thumbnail?.aspectRatio + : null + } + eventImageData={imageGalleryData} + /> + + )}
)} {checkIfFieldIsToBeDisplayed( diff --git a/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx b/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx index 490dc854..6f6d7652 100644 --- a/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx +++ b/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx @@ -85,6 +85,7 @@ function PersonReadOnly() { const mainImageData = personData?.image?.find((image) => image?.isMain) || null; const imageConfig = currentCalendarData?.imageConfig?.length > 0 && currentCalendarData?.imageConfig[0]; + const imageGalleryData = personData?.image?.filter((image) => image && !image?.isMain) || []; const formConstants = currentCalendarData?.forms?.filter((form) => form?.formName === 'Organization')[0]; let mandatoryStandardFields = []; @@ -462,27 +463,25 @@ function PersonReadOnly() { ))} )} - {imageConfig.enableGallery && ( + {imageConfig.enableGallery && imageGalleryData?.length > 0 && (

{t('dashboard.events.addEditEvent.otherInformation.image.additionalImages')}

- {personData?.image?.length > 0 && ( - 0 - ? imageConfig?.large?.aspectRatio - : null - } - thumbnailAspectRatio={ - currentCalendarData?.imageConfig?.length > 0 - ? imageConfig?.thumbnail?.aspectRatio - : null - } - eventImageData={personData?.image?.filter((image) => !image?.isMain)} - /> - )} + 0 + ? imageConfig?.large?.aspectRatio + : null + } + thumbnailAspectRatio={ + currentCalendarData?.imageConfig?.length > 0 + ? imageConfig?.thumbnail?.aspectRatio + : null + } + eventImageData={imageGalleryData} + /> )} diff --git a/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx b/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx index 8e37aa93..87f3c539 100644 --- a/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx +++ b/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx @@ -90,6 +90,7 @@ function PlaceReadOnly() { const calendarContentLanguage = currentCalendarData?.contentLanguage; const mainImageData = placeData?.image?.find((image) => image?.isMain) || null; const imageConfig = currentCalendarData?.imageConfig?.length > 0 && currentCalendarData?.imageConfig[0]; + const imageGalleryData = placeData?.image?.filter((image) => image && !image?.isMain) || []; const formConstants = currentCalendarData?.forms?.filter((form) => form?.formName === 'Place')[0]; let mandatoryStandardFields = []; @@ -475,7 +476,7 @@ function PlaceReadOnly() { )} )} - {placeData?.image?.length > 0 && imageConfig.enableGallery && ( + {imageGalleryData?.length > 0 && imageConfig.enableGallery && (

@@ -493,7 +494,7 @@ function PlaceReadOnly() { ? imageConfig?.thumbnail?.aspectRatio : null } - eventImageData={placeData?.image?.filter((image) => !image?.isMain)} + eventImageData={imageGalleryData} />

diff --git a/src/utils/formInitialValueHandler.js b/src/utils/formInitialValueHandler.js index c45c8de4..54059cae 100644 --- a/src/utils/formInitialValueHandler.js +++ b/src/utils/formInitialValueHandler.js @@ -14,6 +14,7 @@ export const formInitialValueHandler = (type, mappedField, datatype, data) => { case formTypes.MULTISELECT: if (initialData?.length > 0) return initialData?.map((concept) => concept?.entityId); else return []; + case formTypes.IMAGE: if (Array.isArray(initialData) && initialData.length > 0) { return [ @@ -21,16 +22,16 @@ export const formInitialValueHandler = (type, mappedField, datatype, data) => { uid: initialData[0]?.original?.entityId, name: initialData[0]?.original?.entityId, status: 'done', - url: initialData[0].original.uri, + url: initialData[0]?.original?.uri, }, ]; } else if (initialData?.original?.uri) { return [ { - uid: initialData.original.entityId, - name: initialData.original.entityId, + uid: initialData?.original?.entityId, + name: initialData?.original?.entityId, status: 'done', - url: initialData.original.uri, + url: initialData?.original?.uri, }, ]; }