-
Notifications
You must be signed in to change notification settings - Fork 102
(feat) O3-3914: Support re-arranging concept answers to preferred order #403
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
Conversation
@NethmiRodrigo and @denniskigen needs review..! |
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? |
There was a problem hiding this 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:
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.
10ee48e
to
40e8340
Compare
There was a problem hiding this 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! Getting close, just a few more adjustments
...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
40e8340
to
4573270
Compare
There was a problem hiding this 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, 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
dbd42b9
to
485ea14
Compare
...der/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx
Outdated
Show resolved
Hide resolved
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); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So the concept answer tags are rendered from an array called selectedAnswers
here -
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.
<button | ||
className={styles.conceptAnswerButton} | ||
onClick={() => handleDeleteAdditionalAnswer(answer.id)} | ||
> | ||
X | ||
</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By using a sortable tag, we've lost the feature to remove an added answer, which shouldn't be the case
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? |
…ns in Interactive Builder
Updated one..! @NethmiRodrigo |
...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx
Outdated
Show resolved
Hide resolved
...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.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
...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx
Outdated
Show resolved
Hide resolved
...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx
Outdated
Show resolved
Hide resolved
...ractive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.component.tsx
Outdated
Show resolved
Hide resolved
...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss
Show resolved
Hide resolved
...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss
Show resolved
Hide resolved
...ents/interactive-builder/modals/question/question-form/common/sortable-tag/sortable-tag.scss
Show resolved
Hide resolved
…rm/common/sortable-tag/sortable-tag.component.tsx Co-authored-by: Nethmi Rodrigo <[email protected]>
…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]>
…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>
…rm/common/sortable-tag/sortable-tag.scss Co-authored-by: Nethmi Rodrigo <[email protected]>
updated one..! @NethmiRodrigo ..! |
...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
There was a problem hiding this 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!
Requirements
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:
Screenshots
Screen.Recording.2025-02-28.145937.mp4
Related Issue
https://openmrs.atlassian.net/browse/O3-3914
Other