From aa97c66bb16c723086e657488d872792bd842a73 Mon Sep 17 00:00:00 2001 From: himeshr Date: Thu, 4 Apr 2024 17:21:38 +0530 Subject: [PATCH] #1133 | Handle display of multi-select media content in summary page during create / edit of form --- src/dataEntryApp/components/MediaUploader.js | 51 ++++++++++--------- .../services/FormElementService.js | 12 ++++- 2 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js index 9869fb603..4ed3f77ef 100644 --- a/src/dataEntryApp/components/MediaUploader.js +++ b/src/dataEntryApp/components/MediaUploader.js @@ -57,21 +57,28 @@ const isValidType = (formElement, type, isFile) => { }; function updatePreviewWithObsResults(observationValue, setPreview) { - MediaService.getMedia(observationValue).then(res => - setPreview(oldPreview => ({ - ...oldPreview, - [observationValue]: res - })) - ); + observationValue && + MediaService.getMedia(observationValue).then(res => + setPreview(oldPreview => ({ + ...oldPreview, + [observationValue]: res + })) + ); +} + +function invokeUpdate(update, mediaUrl) { + // Push consolidated changes to ObservationHolder, doing it directly without state messes up the multi-select flows + update(mediaUrl); } -function addMediaUrlToLocalObsValue(setLocalObsValue, isMultiSelect, localObsValue, r) { +function addMediaUrlToLocalObsValue(setLocalObsValue, isMultiSelect, localObsValue, r, update) { + invokeUpdate(update, r.data); if (isMultiSelect) { - if (isArrayLikeObject(localObsValue)) { - setLocalObsValue(locObsValue => [...locObsValue, r.data]); - } else { - setLocalObsValue(locObsValue => [locObsValue, r.data].filter(ele => !isEmpty(ele))); - } + setLocalObsValue(locObsValue => + locObsValue && !isArrayLikeObject(locObsValue) + ? [locObsValue, r.data].filter(ele => !isEmpty(ele)) + : [...(locObsValue || []), r.data].filter(ele => !isEmpty(ele)) + ); } else { setLocalObsValue(r.data); } @@ -90,19 +97,14 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement const isMultiSelect = formElement.isMultiSelect() && !isFileDataType; useEffect(() => { - // Push consolidated changes to ObservationHolder, doing it directly without state messes up the multi-select flows - update(localObsValue); - }, [localObsValue]); - - useEffect(() => { - if (!isEmpty(obsValue)) { - if (isArrayLikeObject(obsValue)) { - obsValue.forEach(obsItrValue => updatePreviewWithObsResults(obsItrValue, setPreview)); + if (!isEmpty(localObsValue)) { + if (isArrayLikeObject(localObsValue)) { + localObsValue.forEach(obsItrValue => updatePreviewWithObsResults(obsItrValue, setPreview)); } else { - updatePreviewWithObsResults(obsValue, setPreview); + updatePreviewWithObsResults(localObsValue, setPreview); } } - }, [obsValue]); + }, [localObsValue]); useEffect(() => { setUploading(uploadButtonClicked > 0); @@ -146,7 +148,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement .uploadFile("/web/uploadMedia", file) .then(r => { setUploadButtonClicked(oldValue => oldValue - 1); - addMediaUrlToLocalObsValue(setLocalObsValue, isMultiSelect, localObsValue, r); + addMediaUrlToLocalObsValue(setLocalObsValue, isMultiSelect, localObsValue, r, update); }) .catch(r => { const error = `${get(r, "response.data") || @@ -161,8 +163,9 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement }; const onDelete = fileName => { + invokeUpdate(update, fileName); if (isMultiSelect && isArrayLikeObject(localObsValue)) { - setLocalObsValue(localObsValue.filter(item => item !== fileName)); + setLocalObsValue(locObsValue => locObsValue.filter(item => item !== fileName)); } else { if (localObsValue === fileName) setLocalObsValue(); //Remove previous value } diff --git a/src/dataEntryApp/services/FormElementService.js b/src/dataEntryApp/services/FormElementService.js index beba2d5f2..549af8989 100644 --- a/src/dataEntryApp/services/FormElementService.js +++ b/src/dataEntryApp/services/FormElementService.js @@ -41,14 +41,18 @@ export default { } else if ( formElement.isMultiSelect() && (formElement.concept.datatype === Concept.dataType.Coded || - formElement.concept.datatype === Concept.dataType.Subject) + formElement.concept.datatype === Concept.dataType.Subject || + formElement.concept.datatype === Concept.dataType.Image || + formElement.concept.datatype === Concept.dataType.Video) ) { const observation = observationsHolder.toggleMultiSelectAnswer(formElement.concept, value); return observation && observation.getValueWrapper(); } else if ( formElement.isSingleSelect() && (formElement.concept.datatype === Concept.dataType.Coded || - formElement.concept.datatype === Concept.dataType.Subject) + formElement.concept.datatype === Concept.dataType.Subject || + formElement.concept.datatype === Concept.dataType.Image || + formElement.concept.datatype === Concept.dataType.Video) ) { const observation = observationsHolder.toggleSingleSelectAnswer(formElement.concept, value); return observation && observation.getValueWrapper(); @@ -71,6 +75,10 @@ export default { const { phoneNumber, isVerified } = value; observationsHolder.updatePhoneNumberValue(formElement.concept, phoneNumber, isVerified); return phoneNumber; + } else if (formElement.concept.datatype === Concept.dataType.File) { + //TODO Handle File same as Image or Video later when its fixed in MediaUploader as well + const observation = observationsHolder.toggleSingleSelectAnswer(formElement.concept, value); + return observation && observation.getValueWrapper(); } else { observationsHolder.addOrUpdatePrimitiveObs(formElement.concept, value); return value;