[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]

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: