Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(fix) O3-4314: Add Drag-and-Drop Reordering for Selected Answers with Portal Integration #403

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

Bharath-K-Shetty
Copy link
Contributor

@Bharath-K-Shetty Bharath-K-Shetty commented Feb 19, 2025

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
  • My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
  • My work includes tests or is validated by existing tests.

Summary

This PR introduces drag-and-drop functionality to the Select Answers component in the form builder, enabling users to rearrange their selected answers to match their preferred display order.

Key changes include:

  • Integration of react-beautiful-dnd components (DragDropContext, Droppable, Draggable) to manage drag events.
  • Implementation of the handleDragEnd function to update the answer order based on user interaction.
  • Use of a DraggablePortal to render the dragged element at the document body level, resolving offset issues caused by CSS transforms in modal containers.
  • Minor updates to state management to ensure the new order is immediately reflected.

Screenshots

dragndrop.mp4

Related Issue

https://openmrs.atlassian.net/browse/O3-3914

Other

@Bharath-K-Shetty
Copy link
Contributor Author

@NethmiRodrigo and @denniskigen needs review..!

@Bharath-K-Shetty
Copy link
Contributor Author

Bharath-K-Shetty commented Feb 19, 2025

Hey @NethmiRodrigo, could you please clarify if we should implement a cloning approach so that the original answer item remains visible in the list while dragging, or is it acceptable that the item is temporarily removed from its position and only appears in the drag layer until dropped?

Copy link
Collaborator

@NethmiRodrigo NethmiRodrigo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Bharath-K-Shetty! I know this is a large ask, but is it possible to reuse the functionality that we have that enables dragging questions in the interactive builder:
Screenshot 2025-02-26 at 7 29 31 PM
It's okay if we would have to change the appearance of the answers from the blue tags to something like above. Its best if we can minimize the use of third party libraries. We already use a couple and I'd like to minimize the use as much as possible to keep the build dize small.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants