[DEA] Multiselect media support

[mahalakshme]

Current status:

• Currently in DEA only one media file(video/file/image) can be added at a time even when the media concept is multiselect.
  Video for the issue:
  https://github.com/avniproject/avni-webapp/assets/10369963/f7e2baaf-fde9-455e-89af-e1fff72957b9

Acceptance criteria:

The below should work for Image concept, for video, move it to separate card, if it is difficult(retaining the current functionality). Just added all in the same card, thinking if it is just one day additional effort, then I suggest we can complete it.

• When the media concept is single select, it should work in the way currently it is working.
• when the media concept is multiselect, on clicking upload image/video again, additional files should get added.
  --- when editing a form with a multiselect media concept,
  --- I should be able to add an additional image to the existing list of media
  --- I should be able to remove one image from the existing list of media
  --- I should be able to do both the above together
  --- When saving the form, each change mentioned above is handled correctly
  --- If I do not save the form, then changes do not persist
  --- when creating a form with a multiselect media concept, all the above criteria is fulfilled
• Add the ability to be able to do multiple selection on single click of 'Upload image/video'
• For viewing the uploaded files, refer the mockups below: The same mockups are applicable for Summary and Recommendations page as well as for viewing observations in DEA. Kindly also refer the design related AC in the violet sticky in the mockup.
  media_viewing.pdf

Tech reasons:

• Continuing to support carousel for viewing media, is not needed, hence is removed. Also the library currently used for carousel is archived.

Out of scope:

• Dealing with File concept(separate card). Just make sure the current way of working is retained for file.
• @mahalakshme Wont support RQG Media addition or display as part of this card, as it needs work on rqg edit page to complete [DEA] Add support to input values for question group - repeatable and non-repeatable #1137

Test cases:

• SingleSelect and MultiSelect
• subject registration, program enrolment, program encounter and encounter
• Create and Edit(addition, deleting) flows
• Image and Video concepts
• Upload via mobile and view in DEA
• Upload via DEA and view in mobile

Old: ignore

----- When multiple files uploaded from mobile, they are not visible in DEA. For them, Additional images uploaded(via DEA/mobile) should be visible, on clicking the right arrow in the carousel that appears when clicking 'View Media'.

----- In the Profile tab, in View mode increase the height of carousel to triple that of current one. On clicking right arrow again here as well, users should be able to see consecutive images. And on clicking cross mark in top right currently unable to close the carousel, though it closes in Edit mode. This need to be fixed.

----- Remove the 'Open in New tab' option.
----- Carousel need to be applicable only for the media in that concept when clicked on View media. Currently it shows media across all concepts for that subject.
https://github.com/avniproject/avni-webapp/assets/10369963/7cdc3b85-f99b-471f-ae55-4d959ae4d0f4

• For video concept,
  ----- downloads in carousel when uploaded via DEA, works fine when uploaded via mobile app. This need to be fixed.

[vinayvenu]

@mahalakshme

• There are a lot of issues mentioned here. This should be broken down into multiple cards each with its own acceptance criteria. This will help us focus on the core issues of each, discuss clearly in the card and test well

Suggesting detailed acceptance criteria to ensure testing does not miss flows. Example:

Where

• a form is used across subject registration, program enrolment, program encounter and encounter

• a media concept includes image, video and file concepts that are used in forms

• As a user,

  • when editing a form with a multiselect media concept,
    • I should be able to add an additional image to the existing list of media
    • I should be able to remove one image from the existing list of media
    • I should be able to do both the above together
    • When saving the form, each change mentioned above is handled correctly
    • If I do not save the form, then changes do not persist
  • when creating a form with a multiselect media concept, all the above criteria is fulfilled
  • when creating a form with a singleselect media concept, existing behaviour is retained

Testing notes

• Testing required for
  • SingleSelect and MultiSelect
  • subject registration, program enrolment, program encounter and encounter
  • Create and Edit flows
  • Image, Video and file concepts

[mahalakshme]

@vinayvenu I can add the test cases that you have mentioned and few more, but I mentioned everything in the same card, because everything is somewhat interrelated.

• Fixing for image would in itself fix for video - for carousel related issues

May be I ll do the below:

• Move the file related AC to different card
• Add the test cases.

[himeshr]

https://prerelease.avniproject.org/#/app/editSubject?uuid=4efeb844-d49f-42e0-b399-b85597b94fcf&type=curator
Organisation: Artist

Extended video: https://drive.google.com/file/d/1BLfSWFqURXrP5y8s9X2xQZvPY-i7Mf6Z/view?usp=drive_link

Screen.Recording.2024-04-03.at.3.33.51.PM.mov

[himeshr]

Create / edit form test cases for Image and Video type formElements

• Multi-select image allowed
• Show Thumbnails on selecting single image
• Show Thumbnails on selecting multiple image
• Allow preview of images
• Thumbnail refresh on selecting single videos
• Thumbnail refresh on selecting multiple videos
• When the media concept is single select, it should work in the way currently it is working.
• when the media concept is multiselect, on clicking upload image/video again, additional files should get added.
• when editing a form with a multiselect media concept,
  --- I should be able to add one or more additional images to the existing list of media
  --- I should be able to remove one or more images from the existing list of media
  --- I should be able to do both the above together
  --- When saving the form, each change mentioned above is handled correctly
  --- If I do not save the form, then changes do not persist
• Retain checks on media type
• Retain type and size check on Files(docx, pdf, etc)
• Behaviour is unchanged for Audio and file formElements
• Allow preview of video

[himeshr]

In Observations View sections (Summary, etc..):

• Remove Caraousel
• On click open in new tab
• Show hand icon on hover over image, on-click of media open in new tab
• Max 3 thumbnails in a row, Responsive and fit
• On click of view-media, open pane and show thumbnails of media (200 * 200 pixels)
• On click of image open and maximize image
• Support Video play, download and maximize individually
• Show in collapsible pane
• On clicking Up-arrow collpase and show just "View Media" Underlined link
• Use same theme color and style as used for other icons and buttons
• Support media elements within QuestionGroup
• Wont support RQG Media as part of this card, needs work on edit page to complete

Known behaviour:

• Can't Fix repeated loads of observations summary page, happens due to refreshOfSignedURLs every 110 seconds

Extended video recording

https://drive.google.com/file/d/1gbUbYO3Wot0B_aX5DnrT__roCEvGV5bW/view?usp=drive_link

Screen.Recording.2024-04-05.at.2.36.14.PM.mov

[AchalaBelokar]

• In the mobile app we can add image one by one means suppose we add one image after adding 1st image then only we can add 2nd image . after click on add button is gray out.

az_recorder_20240430_151610.mp4

Screen.Recording.2024-04-30.at.3.18.40.PM.mov

[himeshr]

• In the mobile app we can add image one by one means suppose we add one image after adding 1st image then only we can add 2nd image . after click on add button is gray out.

az_recorder_20240430_151610.mp4
Screen.Recording.2024-04-30.at.3.18.40.PM.mov

Yes, we'll need to correct this behaviour. But its an issue within Repeatable Question Group or Question Group, and not Media Select.
@himeshr I checked for multi select add button is gray on mobile app

[AchalaBelokar]

• created a individual which is having the muti select image is displaying like the requirement but after clicking on one image I am not able to go to next image there is no arrow.
• After edit the subject type multi select image is not working
  Screen Recording 2024-04-30 at 8.45.18 PM.mov.zip
• This is happen with multi-select image In the mobile app we can add image one by one means suppose we add one image after adding 1st image then only we can add 2nd image . after click on add button is gray out.

[himeshr]

• created a individual which is having the muti select image is displaying like the requirement but after clicking on one image I am not able to go to next image there is no arrow.

• This is expected, we had a discussion, after which, we decided to do away with Caraousel in Summary page for Media elements
• After edit the subject type multi select image is not working : Works for me as shown in demo
• Media select behaviour is different in DEA from Client. In DEA, we use single button to add single / mutiple images.

[himeshr]

@mahalakshme and @vinayvenu
How should we handle invalid Media URLs of follwoing types in DEA Create/edit flow:
- media observation has only uuid values (happens incase client failed to perform successful media upload after syncing entity)
- media s3 url is invalid,(happens when webapp upload of video wasn't stored correctly?)

In the view, flow we show a Placeholder error text stating, SignedUrl not found for the observation value.

[mahalakshme]

@himeshr we can show similar red toast message stating Unable to fetch media. But the rest of the information like observations need to continue to show. Let me know if you think this needs to be moved to a separate card. This message(SignedUrl not found for the observation value.) can also be changed to Unable to fetch media if it is not much work, else its okay.

[himeshr]

Sample screenshots

DEA Summary page:

DEA Form Create / Edit page:

[himeshr]

Only code review commits made since card was moved to "QA Failed" lane.

[AchalaBelokar]

• If Image or video is larger than normal size clear message should be visible but currently this message is showing

• Login with AchalaB@hello and register one teacher which contain multi-select image and video and view and download also it is working fine there
• try to edit the teacher I am able to see the actual image and video
• Pending testing in avni-client the images uploaded through DEA

[himeshr]

@AchalaBelokar i have fixed this issue "If Image or video is larger than normal size clear message should be visible"
Please resume testing on webapp and Client

[AchalaBelokar]

@himeshr tested on web app with max size upload is showed

[himeshr]

Staging test screenshot after cherry-pick to 9.0 branch: