feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend #2092

susnux · 2024-04-22T10:59:41Z

Resolves Allow multiple choice or checkbox answers to be reordered #354

This adds support to reorder options instead of having to remove them.
It works but I had to modify a lot of places to keep smooth behavior of the list ordering.

Implementation things:

I am not sure about the API endpoint, it does not match our current naming style
Should we expose the "order" property or just keep it internally and only return options sorted?

@nextcloud/designers question:

There is not much space for a "drag" handle + a11y button so I just used buttons, I do not think it looks super awesome, but it works. Do you have an idea how to improve? Especially because there is already the drag handle for the question itself.

Screenshots

Shuffle options enabled = no sorting	No shuffle = you can sort

src/components/Questions/AnswerInput.vue

szaimen · 2024-04-22T11:17:53Z

There is not much space for a "drag" handle + a11y button so I just used buttons, I do not think it looks super awesome, but it works. Do you have an idea how to improve? Especially because there is already the drag handle for the question itself.

I think it looks fine but had one suggestion :)

Chartman123

Some things I found by looking at the code, did not test it by now.

appinfo/routes.php

docs/API.md

lib/Controller/ApiController.php

src/components/Questions/AnswerInput.vue

jancborchardt

There is not much space for a "drag" handle + a11y button so I just used buttons, I do not think it looks super awesome, but it works. Do you have an idea how to improve? Especially because there is already the drag handle for the question itself.

@susnux what about using a drag handle that on click/enter shows a menu saying "Move up" and "Move down"? Then it would be 1 icon less, and both cases would be covered.

Questions:

Should the drag handle be on left or right – I would tend towards left
Which icon to use. I’d say the simple "drag" – or we use that for the whole question, and the "drag-horizontal-variant" for the individual replies?

Chartman123 · 2024-04-22T14:54:09Z

drag handle that on click/enter shows a menu saying "Move up" and "Move down"

@jancborchardt This would on the other hand introduce one more click for every move operation...

Should the drag handle be on left or right – I would tend towards left

having the handle on the left would introduce one more difference between edit and view mode, but we already have some differences, so I'd be fine with that. Whatever looks better as a whole.

susnux · 2024-04-23T08:19:33Z

The problem with a drag handle on the left is the conflict with the drag handle for the question itself.
We would then have two drag handles next to each other. Not sure about that.

Chartman123 · 2024-08-09T10:26:34Z

@susnux @jancborchardt What about having the arrow icons as an overlay at the end of the input fields that only shows up when the field has the focus / hover?

@susnux should I add your backend code to the API v3 PR or would you like to keep it in here and adjust it after v3 merge?

susnux · 2024-08-11T14:39:10Z

adjust it after v3 merge?

will adjust afterwards :)

jancborchardt

What about having the arrow icons as an overlay at the end of the input fields that only shows up when the field has the focus / hover?

@Chartman123 sounds good! Then it’s not that much visual noise, and the fields are nicely aligned in width. :)

Chartman123 · 2025-02-16T18:38:19Z

This is now rebased to our current main. Design-wise there's still some room for improvement as I'm really no expert in CSS stuff. But I already made the arrows overlay the input fields.

@jancborchardt what do you think?

marcoambrosini · 2025-02-17T13:27:41Z

@Chartman123 @jancborchardt is out on vacation and I'm replacing him.
The arrows look good! Please make sure that their respective buttons are of --clickable-area size and that the icons are centered in them. Since these are tertiary buttons we don't need any extra margins.
One question: shouldn't the arrows show only when the input field is focused?

Other than that, for the left drag handle I would suggest this icon:
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:drag_indicator:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=drag&icon.size=24&icon.color=%23e8eaed

This drag button looks like it has too much right margin, I'd reduce that to --default-grid-baseline

Chartman123 · 2025-02-17T14:08:50Z

One question: shouldn't the arrows show only when the input field is focused?

@marcoambrosini yes, but this might perhaps also be an a11y issue? and we can also deliver it in one of the next minor/patch releases :)

The arrows look good! Please make sure that their respective buttons are of --clickable-area size and that the icons are centered in them. Since these are tertiary buttons we don't need any extra margins.

Is the size not managed directly by using the NCButton?

marcoambrosini · 2025-02-17T16:24:27Z

@Chartman123 personally if we had to start from scatch, I would add two action buttons triggered by a click of the drag button. Adding the two options there. So that:

click and drag allows direct reordering
keyboard navigators can hit the drag button and open an actions menu with the move up and move down options

Chartman123 · 2025-02-17T16:40:16Z

@marcoambrosini so instead of the arrows on the right a drag handle (also on the right) and the up/down actions behind the action menu?

marcoambrosini · 2025-02-17T17:17:17Z

Yes exactly

src/components/Questions/QuestionMultiple.vue

AIlkiv · 2025-02-20T08:15:04Z

src/mixins/QuestionMultipleMixin.ts

+		 * @param {number} index Option that should move up
+		 */
+		onOptionMoveUp(index: number) {
+			if (index > 0) {


There is no need for this if, because the button that calls this logic will be disable when index = 0

AIlkiv · 2025-02-20T08:15:37Z

src/mixins/QuestionMultipleMixin.ts

+		 * @param {number} index Option that should move down
+		 */
+		onOptionMoveDown(index: number) {
+			if (index === this.sortedOptions.length - 1) {


There is no need for this if, because the button that calls this logic will be disable when index = this.sortedOptions.length - 1

src/components/Questions/AnswerInput.vue

AIlkiv · 2025-02-20T08:30:43Z

I don't think you should overlap the input borders on hover. I tested on version 30.

Chartman123 · 2025-02-20T09:55:11Z

I don't think you should overlap the input borders on hover. I tested on version 30.

Yes this has to be fixed, but not a blocker as the buttons will also be replaced in #2579 by a drag handle

Chartman123 · 2025-02-20T16:02:29Z

@max-nextcloud any idea why the e2e tests are failing without my changes? I mean we're still using aria-labels, even if they are now coming from a computed prop: acfe0a3

Edit: I found the error... We changed the text for existing options and the aria-label had a wrong condition

…ype options Signed-off-by: Ferdinand Thiessen <[email protected]> Signed-off-by: Christian Hartmann <[email protected]>

Signed-off-by: Christian Hartmann <[email protected]>

Signed-off-by: GitHub <[email protected]>

Signed-off-by: Christian Hartmann <[email protected]>

susnux added enhancement New feature or request 3. to review Waiting for reviews labels Apr 22, 2024

susnux added this to the 4.3 milestone Apr 22, 2024

susnux requested review from Koc, jancborchardt and Chartman123 April 22, 2024 10:59

susnux force-pushed the feat/reorder-options branch from 2faf119 to ee71d9d Compare April 22, 2024 11:07

szaimen reviewed Apr 22, 2024

View reviewed changes

src/components/Questions/AnswerInput.vue Outdated Show resolved Hide resolved

susnux force-pushed the feat/reorder-options branch from ee71d9d to ef615de Compare April 22, 2024 11:25

Chartman123 reviewed Apr 22, 2024

View reviewed changes

appinfo/routes.php Outdated Show resolved Hide resolved

docs/API.md Outdated Show resolved Hide resolved

lib/Controller/ApiController.php Outdated Show resolved Hide resolved

src/components/Questions/AnswerInput.vue Outdated Show resolved Hide resolved

susnux force-pushed the feat/reorder-options branch from ef615de to 18901ad Compare April 22, 2024 11:59

jancborchardt reviewed Apr 22, 2024

View reviewed changes

susnux force-pushed the feat/reorder-options branch 2 times, most recently from 69939ee to fecb454 Compare April 23, 2024 10:05

jancborchardt reviewed Aug 26, 2024

View reviewed changes

Chartman123 mentioned this pull request Sep 23, 2024

feat: Allow to reorder options for "multiple" question type in backend #2333

Merged

Chartman123 modified the milestones: 4.3, 5.0 Sep 23, 2024

Chartman123 changed the title ~~feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types~~ feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend Sep 23, 2024

Chartman123 force-pushed the feat/reorder-options branch 5 times, most recently from b746bea to d087b97 Compare January 25, 2025 16:26

Chartman123 force-pushed the feat/reorder-options branch from 6395e04 to 333fec2 Compare February 14, 2025 19:35

Chartman123 force-pushed the feat/reorder-options branch 2 times, most recently from c688bff to 83826ce Compare February 16, 2025 15:48

Chartman123 force-pushed the feat/reorder-options branch from 91385e0 to 02fe086 Compare February 16, 2025 21:15

Chartman123 mentioned this pull request Feb 17, 2025

Switch drag handles for questions #2576

Closed

Chartman123 mentioned this pull request Feb 18, 2025

WIP: feat: make options draggable #2579

Draft

AIlkiv requested changes Feb 20, 2025

View reviewed changes

Chartman123 force-pushed the feat/reorder-options branch 2 times, most recently from 866cd72 to acfe0a3 Compare February 20, 2025 15:56

susnux and others added 6 commits February 20, 2025 18:06

feat(frontend): Allow to reorder "multiple" and "dropdown" question t…

7a6ee4e

…ype options Signed-off-by: Ferdinand Thiessen <[email protected]> Signed-off-by: Christian Hartmann <[email protected]>

try to fix positioning of buttons

e1bf1f6

Signed-off-by: Christian Hartmann <[email protected]>

always allow to reorder options in edit mode

0f058be

Signed-off-by: GitHub <[email protected]>

fix typo

2b9e9bb

Signed-off-by: GitHub <[email protected]>

adjust e2e test

02b5eb1

Signed-off-by: GitHub <[email protected]>

fix aria-label

61aea50

Signed-off-by: Christian Hartmann <[email protected]>

Chartman123 force-pushed the feat/reorder-options branch from acfe0a3 to 61aea50 Compare February 20, 2025 17:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend #2092

feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend #2092

susnux commented Apr 22, 2024

szaimen commented Apr 22, 2024 •

edited

Loading

Chartman123 left a comment

jancborchardt left a comment

Chartman123 commented Apr 22, 2024

susnux commented Apr 23, 2024

Chartman123 commented Aug 9, 2024

susnux commented Aug 11, 2024

jancborchardt left a comment

Chartman123 commented Feb 16, 2025

marcoambrosini commented Feb 17, 2025 •

edited

Loading

Chartman123 commented Feb 17, 2025

marcoambrosini commented Feb 17, 2025

Chartman123 commented Feb 17, 2025

marcoambrosini commented Feb 17, 2025

AIlkiv Feb 20, 2025

AIlkiv Feb 20, 2025

AIlkiv commented Feb 20, 2025

Chartman123 commented Feb 20, 2025

Chartman123 commented Feb 20, 2025 •

edited

Loading

feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend #2092

Are you sure you want to change the base?

feat: Allow to reorder options of "checkbox" "radio" and "dropdown" question types in frontend #2092

Conversation

susnux commented Apr 22, 2024

Screenshots

szaimen commented Apr 22, 2024 • edited Loading

Chartman123 left a comment

Choose a reason for hiding this comment

jancborchardt left a comment

Choose a reason for hiding this comment

Chartman123 commented Apr 22, 2024

susnux commented Apr 23, 2024

Chartman123 commented Aug 9, 2024

susnux commented Aug 11, 2024

jancborchardt left a comment

Choose a reason for hiding this comment

Chartman123 commented Feb 16, 2025

marcoambrosini commented Feb 17, 2025 • edited Loading

Chartman123 commented Feb 17, 2025

marcoambrosini commented Feb 17, 2025

Chartman123 commented Feb 17, 2025

marcoambrosini commented Feb 17, 2025

AIlkiv Feb 20, 2025

Choose a reason for hiding this comment

AIlkiv Feb 20, 2025

Choose a reason for hiding this comment

AIlkiv commented Feb 20, 2025

Chartman123 commented Feb 20, 2025

Chartman123 commented Feb 20, 2025 • edited Loading

szaimen commented Apr 22, 2024 •

edited

Loading

marcoambrosini commented Feb 17, 2025 •

edited

Loading

Chartman123 commented Feb 20, 2025 •

edited

Loading