#1133 | Handle display of multi-select media content in summary page …

…during create / edit of form
avniproject · Apr 4, 2024 · aa97c66 · aa97c66
1 parent 98a5938
commit aa97c66
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git 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
@@ -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;