(feat) O3-3914: Support re-arranging concept answers to preferred order #403

Bharath-K-Shetty · 2025-02-19T13:19:53Z

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

Screen.Recording.2025-02-28.145937.mp4

Related Issue

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

Other

Bharath-K-Shetty · 2025-02-19T13:23:54Z

@NethmiRodrigo and @denniskigen needs review..!

Bharath-K-Shetty · 2025-02-19T13:24:55Z

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?

NethmiRodrigo

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:

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.

NethmiRodrigo

Thanks @Bharath-K-Shetty! Getting close, just a few more adjustments

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

NethmiRodrigo

Thanks @Bharath-K-Shetty, this is very well done! A few adjustments to make.

If a user has additional answers added, ordering the answers causes the additional answers to appear in the obs answers section.

Screen.Recording.2025-03-12.at.2.22.02.PM.mov

The context behind this is, a concept can have its own answers, which a user can see in the first dropdown to select answers. If a concept is of type Coded, a user can search for and add other additional concepts as answers.
These additional answers are shown separate when creating a question so that they can search or remove.
2. We should support ordering for the additional answers.
3. It would help to have an icon in the tag (like we do for questions) to let the user know that it can be dragged

…extended DragNDrop for additional concept answers

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

NethmiRodrigo · 2025-03-27T12:14:07Z

src/components/interactive-builder/modals/question/question.modal.tsx

+  const saveQuestion = useCallback(() => {
+    const current = formField.questionOptions?.answers || [];
+    const mergedAnswers = [
+      ...current,
+      ...additionalAnswers
+        .filter((ans) => !current.some((a) => a.concept === ans.id))
+        .map((ans) => ({ concept: ans.id, label: ans.text })),
+    ];
+    const updatedFormField: FormField = {
+      ...formField,
+      questionOptions: {
+        ...formField.questionOptions,
+        answers: mergedAnswers,
+      },
+    };
+
+    setFormField(updatedFormField);
+


Why are the additional answers added into the context? Seems a bit unnecessary to do this on the modal. The whole point of breaking down into components was so that the main component, in this case the question modal, wouldn't have to worry about things like this.

Hey @NethmiRodrigo As much as i know and correct me if I am wrong,It is because that previously when we were adding additional concept answers that were stored as a separate array of that and were merging when setFormField is triggered and it was triggering when we click on save.After the drag and drop is introduced after adding additional concept answers and when we try to drag the concept answers at that moment only it was merging because it was triggering the setFormField.So what I did is that I explictely made the merging should happen when user click save until that time it should be separated.Is there any better approach for this?

So the concept answer tags are rendered from an array called selectedAnswers here -

openmrs-esm-form-builder/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

Lines 25 to 32 in cb4de45

const selectedAnswers = useMemo(

() =>

formField.questionOptions?.answers?.map((answer) => ({

id: answer.concept,

text: answer.label,

})) ?? [],

[formField.questionOptions?.answers],

);

If the addedAnswers state is not empty, we can just filter out the elements in addedAnswers from selectedAnswers. That way, we wouldn't have to do so much.

NethmiRodrigo · 2025-03-28T14:58:04Z

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

-                  <button
-                    className={styles.conceptAnswerButton}
-                    onClick={() => handleDeleteAdditionalAnswer(answer.id)}
-                  >
-                    X
-                  </button>


By using a sortable tag, we've lost the feature to remove an added answer, which shouldn't be the case

…m-form-builder into fix/O3-3914

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty · 2025-04-19T13:18:54Z

Hey @NethmiRodrigo updated the code.But some other test cases are failing(Not the previous one it is fixed now..!)

NethmiRodrigo · 2025-04-21T09:38:39Z

Hey @NethmiRodrigo updated the code.But some other test cases are failing(Not the previous one it is fixed now..!)

@Bharath-K-Shetty have you looked into the failing test cases, and which ones are failing?

…m-form-builder into fix/O3-3914

…ns in Interactive Builder

…m-form-builder into fix/O3-3914

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty · 2025-05-18T05:32:28Z

Updated one..! @NethmiRodrigo

...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx

...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss

…rm/common/sortable-tag/sortable-tag.component.tsx Co-authored-by: Nethmi Rodrigo <[email protected]>

…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>

…m-form-builder into fix/O3-3914

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty · 2025-05-21T18:56:15Z

updated one..! @NethmiRodrigo ..!

...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx

...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss

…m-form-builder into fix/O3-3914

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty · 2025-05-22T17:00:33Z

Updated one..!

NethmiRodrigo

Thanks @Bharath-K-Shetty!

NethmiRodrigo reviewed Feb 26, 2025

View reviewed changes

Bharath-K-Shetty changed the title ~~(fix) O3-4314: Add Drag-and-Drop Reordering for Selected Answers with Portal Integration~~ (fix) O3-3914: Add Drag-and-Drop Reordering for Selected Answers with Portal Integration Feb 28, 2025

Bharath-K-Shetty force-pushed the fix/O3-3914 branch from 10ee48e to 40e8340 Compare February 28, 2025 09:53

Bharath-K-Shetty requested a review from NethmiRodrigo February 28, 2025 09:55

NethmiRodrigo reviewed Feb 28, 2025

View reviewed changes

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx Outdated Show resolved Hide resolved

...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx Outdated Show resolved Hide resolved

Bharath-K-Shetty force-pushed the fix/O3-3914 branch from 40e8340 to 4573270 Compare February 28, 2025 11:18

Bharath-K-Shetty requested a review from NethmiRodrigo February 28, 2025 11:19

NethmiRodrigo reviewed Mar 12, 2025

View reviewed changes

NethmiRodrigo changed the title ~~(fix) O3-3914: Add Drag-and-Drop Reordering for Selected Answers with Portal Integration~~ (feat) O3-3914: Support re-arranging concept answers to preferred order Mar 12, 2025

Bharath-K-Shetty added 2 commits March 24, 2025 14:28

Integrate @dnd-kit for reordering selected answers.

5bf4bc1

Fixed invalid merging while DragNDrop and added a draggable icon and …

485ea14

…extended DragNDrop for additional concept answers

Bharath-K-Shetty force-pushed the fix/O3-3914 branch from dbd42b9 to 485ea14 Compare March 24, 2025 08:58

Bharath-K-Shetty and others added 2 commits March 24, 2025 14:29

Merge branch 'main' into fix/O3-3914

1a49ece

Merge branch 'main' into fix/O3-3914

683a346

NethmiRodrigo reviewed Mar 27, 2025

View reviewed changes

Bharath-K-Shetty requested a review from NethmiRodrigo March 27, 2025 12:57

NethmiRodrigo reviewed Mar 28, 2025

View reviewed changes

Bharath-K-Shetty added 5 commits April 15, 2025 18:05

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

c20523d

…m-form-builder into fix/O3-3914

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

aacb0f6

…m-form-builder into fix/O3-3914

Fixed invalid merging

7b11b7b

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

1862d07

…m-form-builder into fix/O3-3914

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

6aa4435

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty requested a review from NethmiRodrigo April 19, 2025 13:06

Bharath-K-Shetty added 2 commits April 19, 2025 18:44

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

647bee7

…nmrs-esm-form-builder into fix/O3-3914

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

a91e5a3

…nmrs-esm-form-builder into fix/O3-3914

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

fe742ff

…m-form-builder into fix/O3-3914

NethmiRodrigo mentioned this pull request May 7, 2025

(feat) O3-4171 : Validate concept answers and show error for non-existing answers #445

Merged

3 tasks

Bharath-K-Shetty added 5 commits May 13, 2025 10:40

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

ed74f10

…m-form-builder into fix/O3-3914

Refactor: Replace <Tag> element with custom layout similar to Questio…

9db6e5f

…ns in Interactive Builder

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

df76d1d

…m-form-builder into fix/O3-3914

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

98497d5

…m-form-builder into fix/O3-3914

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

0e20d05

…nmrs-esm-form-builder into fix/O3-3914

NethmiRodrigo requested changes May 19, 2025

View reviewed changes

Bharath-K-Shetty and others added 9 commits May 19, 2025 14:56

Update src/components/interactive-builder/modals/question/question-fo…

f4551e1

…rm/common/sortable-tag/sortable-tag.component.tsx Co-authored-by: Nethmi Rodrigo <[email protected]>

Update src/components/interactive-builder/modals/question/question-fo…

2420196

…rm/common/sortable-tag/sortable-tag.component.tsx Co-authored-by: Nethmi Rodrigo <[email protected]>

Update src/components/interactive-builder/modals/question/question-fo…

6db2ad4

…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>

Update src/components/interactive-builder/modals/question/question-fo…

aebc4b2

…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>

Update src/components/interactive-builder/modals/question/question-fo…

1c73e67

…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>

Merge branch 'main' into fix/O3-3914

0c83105

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

0b9e640

…m-form-builder into fix/O3-3914

Updated the styling for invalid concept answers

a03f8f9

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

996f629

…nmrs-esm-form-builder into fix/O3-3914

Bharath-K-Shetty requested review from NethmiRodrigo May 21, 2025 18:56

Merge branch 'main' into fix/O3-3914

1056d9b

NethmiRodrigo requested changes May 22, 2025

View reviewed changes

...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx Show resolved Hide resolved

...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss Outdated Show resolved Hide resolved

Bharath-K-Shetty added 3 commits May 22, 2025 22:26

Updated styling

bc8d1e3

Merge branch 'main' of https://github.com/Bharath-K-Shetty/openmrs-es…

d12afb9

…m-form-builder into fix/O3-3914

Merge branch 'fix/O3-3914' of https://github.com/Bharath-K-Shetty/ope…

0b9b400

…nmrs-esm-form-builder into fix/O3-3914

Merge branch 'main' into fix/O3-3914

6eb0bd4

NethmiRodrigo approved these changes May 23, 2025

View reviewed changes

NethmiRodrigo merged commit 820d733 into openmrs:main May 23, 2025
6 checks passed

Bharath-K-Shetty deleted the fix/O3-3914 branch May 25, 2025 04:38

	const selectedAnswers = useMemo(
	() =>
	formField.questionOptions?.answers?.map((answer) => ({
	id: answer.concept,
	text: answer.label,
	})) ?? [],
	[formField.questionOptions?.answers],
	);

(feat) O3-3914: Support re-arranging concept answers to preferred order #403

(feat) O3-3914: Support re-arranging concept answers to preferred order #403

Uh oh!

Conversation

Bharath-K-Shetty commented Feb 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Requirements

Summary

Screenshots

Related Issue

Other

Uh oh!

Bharath-K-Shetty commented Feb 19, 2025

Uh oh!

Bharath-K-Shetty commented Feb 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NethmiRodrigo left a comment

Choose a reason for hiding this comment

Uh oh!

NethmiRodrigo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

NethmiRodrigo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

NethmiRodrigo Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

Bharath-K-Shetty Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

NethmiRodrigo Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NethmiRodrigo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Bharath-K-Shetty commented Apr 19, 2025

Uh oh!

NethmiRodrigo commented Apr 21, 2025

Uh oh!

Bharath-K-Shetty commented May 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Bharath-K-Shetty commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Bharath-K-Shetty commented May 22, 2025

Uh oh!

NethmiRodrigo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Bharath-K-Shetty commented Feb 19, 2025 •

edited

Loading

Bharath-K-Shetty commented Feb 19, 2025 •

edited

Loading

NethmiRodrigo Mar 28, 2025 •

edited

Loading