From 046cb872b1b779099286634b8aaabc264466d8ed Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Mon, 17 Feb 2025 23:37:01 +0100
Subject: [PATCH] feat(frontend): Implement drag-and-drop reordering for
 dropdown options

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 CHANGELOG.en.md                               |   4 +
 src/components/Questions/AnswerInput.vue      | 115 ++++++++++-------
 src/components/Questions/Question.vue         |   4 +-
 src/components/Questions/QuestionDropdown.vue |  89 +++++++++----
 src/components/Questions/QuestionMultiple.vue | 119 +++++++++++-------
 src/components/TransitionList.vue             |  29 -----
 src/mixins/QuestionMultipleMixin.ts           |  62 +++++----
 src/models/Entities.d.ts                      |   1 +
 8 files changed, 254 insertions(+), 169 deletions(-)
 delete mode 100644 src/components/TransitionList.vue

diff --git a/CHANGELOG.en.md b/CHANGELOG.en.md
index 8177c41c6..b89c8482c 100644
--- a/CHANGELOG.en.md
+++ b/CHANGELOG.en.md
@@ -7,6 +7,10 @@
 
 ## v5.0.0 - tbd
 
+- **Re-order options**
+
+    Options of multiple choice questions (radio/checkbox/dropdown) can now be re-ordered using a menu or drag'n'drop.
+
 - **Unified Search integration**
 
     You can now use the Unified Search to search forms based on the title and the description.
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index c355b59be..174a8245a 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -26,43 +26,43 @@
 			@compositionend="onCompositionEnd" />
 
 		<!-- Actions for reordering and deleting the option  -->
-		<div class="option__actions">
-			<template v-if="!answer.local">
-				<NcButton
-					ref="buttonUp"
-					class="option__actions-button"
-					:aria-label="t('forms', 'Move option up')"
+		<div v-if="!answer.local" class="option__actions">
+			<NcActions
+				:id="optionDragMenuId"
+				:container="`#${optionDragMenuId}`"
+				:aria-label="t('forms', 'Move option actions')"
+				class="option__drag-handle"
+				type="tertiary-no-background">
+				<template #icon>
+					<IconDragIndicator :size="20" />
+				</template>
+				<NcActionButton
+					ref="buttonOptionUp"
 					:disabled="index === 0"
-					size="small"
-					type="tertiary"
 					@click="onMoveUp">
 					<template #icon>
 						<IconArrowUp :size="20" />
 					</template>
-				</NcButton>
-				<NcButton
-					ref="buttonDown"
-					class="option__actions-button"
-					:aria-label="t('forms', 'Move option down')"
+					{{ t('forms', 'Move option up') }}
+				</NcActionButton>
+				<NcActionButton
+					ref="buttonOptionDown"
 					:disabled="index === maxIndex"
-					size="small"
-					type="tertiary"
 					@click="onMoveDown">
 					<template #icon>
 						<IconArrowDown :size="20" />
 					</template>
-				</NcButton>
-				<NcButton
-					class="option__actions-button"
-					:aria-label="t('forms', 'Delete answer')"
-					size="small"
-					type="tertiary"
-					@click="deleteEntry">
-					<template #icon>
-						<IconDelete :size="20" />
-					</template>
-				</NcButton>
-			</template>
+					{{ t('forms', 'Move option down') }}
+				</NcActionButton>
+			</NcActions>
+			<NcButton
+				:aria-label="t('forms', 'Delete answer')"
+				type="tertiary"
+				@click="deleteEntry">
+				<template #icon>
+					<IconDelete :size="20" />
+				</template>
+			</NcButton>
 		</div>
 	</li>
 </template>
@@ -74,13 +74,17 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import PQueue from 'p-queue'
 
-import NcButton from '@nextcloud/vue/components/NcButton'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
-import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconDragIndicator from '../Icons/IconDragIndicator.vue'
 import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
 import logger from '../../utils/Logger.js'
 
@@ -92,7 +96,10 @@ export default {
 		IconArrowUp,
 		IconCheckboxBlankOutline,
 		IconDelete,
+		IconDragIndicator,
 		IconRadioboxBlank,
+		NcActions,
+		NcActionButton,
 		NcButton,
 	},
 
@@ -145,6 +152,10 @@ export default {
 			})
 		},
 
+		optionDragMenuId() {
+			return `q${this.answer.questionId}o${this.answer.id}__drag_menu`
+		},
+
 		placeholder() {
 			if (this.answer.local) {
 				return t('forms', 'Add a new answer option')
@@ -303,7 +314,6 @@ export default {
 				logger.error('Error while saving answer', { answer, error })
 				showError(t('forms', 'Error while saving the answer'))
 			}
-			return answer
 		},
 
 		/**
@@ -311,19 +321,18 @@ export default {
 		 */
 		onMoveDown() {
 			this.$emit('move-down')
-			if (this.index < this.maxIndex - 1) {
-				this.$nextTick(() => this.$refs.buttonDown.$el.focus())
-			} else {
-				this.$nextTick(() => this.$refs.buttonUp.$el.focus())
-			}
+			this.focusButton(
+				this.index < this.maxIndex - 1
+					? 'buttonOptionDown'
+					: 'buttonOptionUp',
+			)
 		},
 		onMoveUp() {
 			this.$emit('move-up')
-			if (this.index > 1) {
-				this.$nextTick(() => this.$refs.buttonUp.$el.focus())
-			} else {
-				this.$nextTick(() => this.$refs.buttonDown.$el.focus())
-			}
+			this.focusButton(this.index > 1 ? 'buttonOptionUp' : 'buttonOptionDown')
+		},
+		focusButton(refName) {
+			this.$nextTick(() => this.$refs[refName].$el.focus())
 		},
 
 		/**
@@ -356,7 +365,7 @@ export default {
 
 	&__pseudoInput {
 		color: var(--color-primary-element);
-		margin-inline-start: calc(-1 * var(--default-grid-baseline));
+		margin-inline-start: -2px;
 		z-index: 1;
 	}
 
@@ -364,15 +373,28 @@ export default {
 		display: flex;
 		position: absolute;
 		gap: var(--default-grid-baseline);
-		inset-inline-end: 16px;
-		height: var(--default-clickable-area);
+		inset-inline-end: 12px;
+		height: 100%;
 	}
 
-	.option__actions-button {
+	.option__drag-handle,
+	.drag-indicator-icon {
+		color: var(--color-text-maxcontrast);
+		cursor: grab;
 		margin-block: auto;
 
-		&:last-of-type {
-			margin-inline: 5px;
+		&:hover,
+		&:focus,
+		&:focus-within {
+			color: var(--color-main-text);
+		}
+
+		&:active {
+			cursor: grabbing;
+		}
+
+		> * {
+			cursor: grab;
 		}
 	}
 
@@ -380,7 +402,6 @@ export default {
 		width: calc(100% - var(--default-clickable-area));
 		position: relative;
 		inset-inline-start: -12px;
-		margin-block: 0 !important;
 		margin-inline-end: -12px !important;
 
 		&--shifted {
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 2daa0beec..d4776cea4 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -381,7 +381,7 @@ export default {
 		gap: 12px;
 		width: var(--default-clickable-area);
 		height: 100%;
-		opacity: 0.5;
+		color: var(--color-text-maxcontrast);
 		cursor: grab;
 
 		&-button {
@@ -397,7 +397,7 @@ export default {
 		&:hover,
 		&:focus,
 		&:focus-within {
-			opacity: 1;
+			color: var(--color-main-text);
 
 			.question__drag-handle-button {
 				position: initial;
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index fd36b4f26..1e117dd01 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -40,27 +40,45 @@
 			<div v-if="isLoading">
 				<NcLoadingIcon :size="64" />
 			</div>
-			<TransitionList v-else class="question__content">
-				<!-- Answer text input edit -->
-				<AnswerInput
-					v-for="(answer, index) in sortedOptions"
-					:key="answer.local ? 'option-local' : answer.id"
-					ref="input"
-					:answer="answer"
-					:form-id="formId"
-					is-dropdown
-					:index="index"
-					:is-unique="!isMultiple"
-					:max-index="options.length - 1"
-					:max-option-length="maxStringLengths.optionText"
-					@create-answer="onCreateAnswer"
-					@update:answer="updateAnswer(index, $event)"
-					@delete="deleteOption"
-					@focus-next="focusNextInput"
-					@move-up="onOptionMoveUp(index)"
-					@move-down="onOptionMoveDown(index)"
-					@tabbed-out="checkValidOption" />
-			</TransitionList>
+			<Draggable
+				v-else
+				v-model="sortedOptions"
+				class="question__content"
+				animation="200"
+				direction="vertical"
+				handle=".option__drag-handle"
+				invert-swap
+				tag="ul"
+				@change="saveOptionsOrder"
+				@start="isDragging = true"
+				@end="isDragging = false">
+				<TransitionGroup
+					:name="
+						isDragging
+							? 'no-external-transition-on-drag'
+							: 'options-list-transition'
+					">
+					<!-- Answer text input edit -->
+					<AnswerInput
+						v-for="(answer, index) in sortedOptions"
+						:key="answer.local ? 'option-local' : answer.id"
+						ref="input"
+						:answer="answer"
+						:form-id="formId"
+						is-dropdown
+						:index="index"
+						:is-unique="!isMultiple"
+						:max-index="options.length - 1"
+						:max-option-length="maxStringLengths.optionText"
+						@create-answer="onCreateAnswer"
+						@update:answer="updateAnswer(index, answer)"
+						@delete="deleteOption"
+						@focus-next="focusNextInput"
+						@move-up="onOptionMoveUp(index)"
+						@move-down="onOptionMoveDown(index)"
+						@tabbed-out="checkValidOption" />
+				</TransitionGroup>
+			</Draggable>
 		</template>
 
 		<!-- Add multiple options modal -->
@@ -71,6 +89,8 @@
 </template>
 
 <script>
+import Draggable from 'vuedraggable'
+
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
@@ -82,26 +102,29 @@ import AnswerInput from './AnswerInput.vue'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
-import TransitionList from '../TransitionList.vue'
 
 export default {
 	name: 'QuestionDropdown',
 
 	components: {
 		AnswerInput,
+		Draggable,
 		IconContentPaste,
 		NcActionButton,
 		NcActionCheckbox,
 		NcLoadingIcon,
 		NcSelect,
 		OptionInputDialog,
-		TransitionList,
 	},
 
 	mixins: [QuestionMixin, QuestionMultipleMixin],
 
 	data() {
-		return { inputValue: '', isOptionDialogShown: false, isLoading: false }
+		return {
+			isDragging: false,
+			isLoading: false,
+			isOptionDialogShown: false,
+		}
 	},
 
 	computed: {
@@ -169,4 +192,22 @@ export default {
 		margin-inline-end: 32px !important;
 	}
 }
+
+.options-list-transition-move,
+.options-list-transition-enter-active,
+.options-list-transition-leave-active {
+	transition: all var(--animation-slow) ease;
+}
+
+.options-list-transition-enter-from,
+.options-list-transition-leave-to {
+	opacity: 0;
+	transform: translateX(44px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.options-list-transition-leave-active {
+	position: absolute;
+}
 </style>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 02d34ee43..42143a8c6 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -112,45 +112,61 @@
 		</template>
 
 		<template v-else>
-			<template v-if="isLoading">
-				<div>
-					<NcLoadingIcon :size="64" />
-				</div>
-			</template>
-			<TransitionList v-else class="question__content">
-				<!-- Answer text input edit -->
-				<AnswerInput
-					v-for="(answer, index) in sortedOptions"
-					:key="answer.local ? 'option-local' : answer.id"
-					ref="input"
-					:answer="answer"
-					:form-id="formId"
-					:index="index"
-					:is-unique="isUnique"
-					:max-index="options.length - 1"
-					:max-option-length="maxStringLengths.optionText"
-					@create-answer="onCreateAnswer"
-					@update:answer="updateAnswer"
-					@delete="deleteOption"
-					@focus-next="focusNextInput"
-					@move-up="onOptionMoveUp(index)"
-					@move-down="onOptionMoveDown(index)"
-					@tabbed-out="checkValidOption" />
-				<li
-					v-if="allowOtherAnswer"
-					key="option-add-other"
-					class="question__item">
-					<div :is="pseudoIcon" class="question__item__pseudoInput" />
-					<input
-						:placeholder="t('forms', 'Other')"
-						class="question__input"
-						:disabled="!readonly"
-						:maxlength="maxStringLengths.optionText"
-						minlength="1"
-						type="text"
-						:readonly="!readOnly" />
-				</li>
-			</TransitionList>
+			<div v-if="isLoading">
+				<NcLoadingIcon :size="64" />
+			</div>
+			<Draggable
+				v-else
+				v-model="sortedOptions"
+				class="question__content"
+				animation="200"
+				direction="vertical"
+				handle=".option__drag-handle"
+				invert-swap
+				tag="ul"
+				@change="saveOptionsOrder"
+				@start="isDragging = true"
+				@end="isDragging = false">
+				<TransitionGroup
+					:name="
+						isDragging
+							? 'no-external-transition-on-drag'
+							: 'options-list-transition'
+					">
+					<!-- Answer text input edit -->
+					<AnswerInput
+						v-for="(answer, index) in sortedOptions"
+						:key="answer.local ? 'option-local' : answer.id"
+						ref="input"
+						:answer="answer"
+						:form-id="formId"
+						:index="index"
+						:is-unique="isUnique"
+						:max-index="options.length - 1"
+						:max-option-length="maxStringLengths.optionText"
+						@create-answer="onCreateAnswer"
+						@update:answer="updateAnswer(index, answer)"
+						@delete="deleteOption"
+						@focus-next="focusNextInput"
+						@move-up="onOptionMoveUp(index)"
+						@move-down="onOptionMoveDown(index)"
+						@tabbed-out="checkValidOption" />
+				</TransitionGroup>
+			</Draggable>
+			<li
+				v-if="allowOtherAnswer"
+				key="option-add-other"
+				class="question__item">
+				<div :is="pseudoIcon" class="question__item__pseudoInput" />
+				<input
+					:placeholder="t('forms', 'Other')"
+					class="question__input"
+					:disabled="!readOnly"
+					:maxlength="maxStringLengths.optionText"
+					minlength="1"
+					type="text"
+					:readonly="!readOnly" />
+			</li>
 		</template>
 
 		<!-- Add multiple options modal -->
@@ -163,6 +179,7 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import Draggable from 'vuedraggable'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -179,7 +196,6 @@ import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
-import TransitionList from '../TransitionList.vue'
 
 const QUESTION_EXTRASETTINGS_OTHER_PREFIX = 'system-other-answer:'
 
@@ -188,6 +204,7 @@ export default {
 
 	components: {
 		AnswerInput,
+		Draggable,
 		IconCheckboxBlankOutline,
 		IconContentPaste,
 		IconRadioboxBlank,
@@ -199,7 +216,6 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		OptionInputDialog,
-		TransitionList,
 	},
 
 	mixins: [QuestionMixin, QuestionMultipleMixin],
@@ -217,6 +233,7 @@ export default {
 			cachedOtherAnswerText: '',
 			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 
+			isDragging: false,
 			isOptionDialogShown: false,
 			isLoading: false,
 		}
@@ -232,7 +249,7 @@ export default {
 		},
 
 		shiftDragHandle() {
-			return !this.readonly && this.options.length !== 0
+			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
 		pseudoIcon() {
@@ -544,4 +561,22 @@ export default {
 .question__other-answer:deep() .input-field__input {
 	min-height: var(--default-clickable-area);
 }
+
+.options-list-transition-move,
+.options-list-transition-enter-active,
+.options-list-transition-leave-active {
+	transition: all var(--animation-slow) ease;
+}
+
+.options-list-transition-enter-from,
+.options-list-transition-leave-to {
+	opacity: 0;
+	transform: translateX(44px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.options-list-transition-leave-active {
+	position: absolute;
+}
 </style>
diff --git a/src/components/TransitionList.vue b/src/components/TransitionList.vue
deleted file mode 100644
index 68ce85a9a..000000000
--- a/src/components/TransitionList.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<TransitionGroup name="forms-list-transition" tag="ul">
-		<slot />
-	</TransitionGroup>
-</template>
-
-<style>
-.forms-list-transition-move,
-.forms-list-transition-enter-active,
-.forms-list-transition-leave-active {
-	transition: all var(--animation-slow) ease;
-}
-
-.forms-list-transition-enter-from,
-.forms-list-transition-leave-to {
-	opacity: 0;
-	transform: translateX(44px);
-}
-
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
-.forms-list-transition-leave-active {
-	position: absolute;
-}
-</style>
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
index 6965b43be..ac4e7dced 100644
--- a/src/mixins/QuestionMultipleMixin.ts
+++ b/src/mixins/QuestionMultipleMixin.ts
@@ -37,33 +37,45 @@ export default defineComponent({
 		/**
 		 * Options sorted by order or randomized if configured
 		 */
-		sortedOptions() {
-			// Only shuffle options if not in editing mode (and shuffling is enabled)
-			if (this.readOnly && this.extraSettings?.shuffleOptions) {
-				return this.shuffleArray(this.options)
-			}
-
-			// Ensure order of options always is the same
-			const options = [...this.options].sort((a, b) => {
-				if (a.order === b.order) {
-					return a.id - b.id
+		sortedOptions: {
+			get() {
+				// Only shuffle options if not in editing mode (and shuffling is enabled)
+				if (this.readOnly && this.extraSettings?.shuffleOptions) {
+					return this.shuffleArray(this.options)
 				}
-				return (a.order ?? 0) - (b.order ?? 0)
-			})
 
-			if (!this.readOnly) {
-				// In edit mode append an empty option
-				return [
-					...options,
-					{
-						local: true,
-						questionId: this.id,
-						text: '',
-						order: options.length,
-					},
-				]
-			}
-			return options
+				// Ensure order of options always is the same
+				const options = [...this.options].sort((a, b) => {
+					if (a.order === b.order) {
+						return a.id - b.id
+					}
+					return (a.order ?? 0) - (b.order ?? 0)
+				})
+
+				if (!this.readOnly) {
+					// In edit mode append an empty option
+					return [
+						...options,
+						{
+							local: true,
+							questionId: this.id,
+							text: '',
+							order: options.length,
+						},
+					]
+				}
+				return options
+			},
+			set(newOptions: FormsOption[]) {
+				this.updateOptions(
+					newOptions
+						.filter((option) => !option.local)
+						.map((option, index) => ({
+							...option,
+							order: index,
+						})),
+				)
+			},
 		},
 
 		/**
diff --git a/src/models/Entities.d.ts b/src/models/Entities.d.ts
index 469d68b4d..1a251b1ef 100644
--- a/src/models/Entities.d.ts
+++ b/src/models/Entities.d.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 export interface FormsOption {
+	local?: boolean
 	id: number
 	text: string
 	order?: number