From 18f6b9c5d047286314c07017a1002d09f8272bcd 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>
---
 src/components/Questions/AnswerInput.vue      | 102 ++++++++++--------
 src/components/Questions/QuestionDropdown.vue |  67 +++++++-----
 src/components/Questions/QuestionMultiple.vue |  97 +++++++++--------
 src/mixins/QuestionMultipleMixin.ts           |  62 ++++++-----
 src/models/Entities.d.ts                      |   1 +
 5 files changed, 196 insertions(+), 133 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index c355b59be..aca06b1d2 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -28,34 +28,36 @@
 		<!-- 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')"
-					:disabled="index === 0"
-					size="small"
-					type="tertiary"
-					@click="onMoveUp">
+				<NcActions
+					:id="optionDragMenuId"
+					:container="`#${optionDragMenuId}`"
+					:aria-label="t('forms', 'Move option actions')"
+					class="option__drag-handle"
+					type="tertiary-no-background">
 					<template #icon>
-						<IconArrowUp :size="20" />
+						<IconDragIndicator :size="20" />
 					</template>
-				</NcButton>
+					<NcActionButton
+						ref="buttonUp"
+						:disabled="index === 0"
+						@click="onMoveUp">
+						<template #icon>
+							<IconArrowUp :size="20" />
+						</template>
+						{{ t('forms', 'Move option up') }}
+					</NcActionButton>
+					<NcActionButton
+						ref="buttonDown"
+						:disabled="index === maxIndex"
+						@click="onMoveDown">
+						<template #icon>
+							<IconArrowDown :size="20" />
+						</template>
+						{{ t('forms', 'Move option down') }}
+					</NcActionButton>
+				</NcActions>
 				<NcButton
-					ref="buttonDown"
-					class="option__actions-button"
-					:aria-label="t('forms', 'Move option down')"
-					: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>
@@ -74,13 +76,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 +98,10 @@ export default {
 		IconArrowUp,
 		IconCheckboxBlankOutline,
 		IconDelete,
+		IconDragIndicator,
 		IconRadioboxBlank,
+		NcActions,
+		NcActionButton,
 		NcButton,
 	},
 
@@ -145,6 +154,10 @@ export default {
 			})
 		},
 
+		optionDragMenuId() {
+			return 'q' + this.answer.questionId + 'o' + this.index + '__drag_menu'
+		},
+
 		placeholder() {
 			if (this.answer.local) {
 				return t('forms', 'Add a new answer option')
@@ -171,13 +184,6 @@ export default {
 			this.$emit('tabbed-out')
 		},
 
-		/**
-		 * Focus the input
-		 */
-		focus() {
-			this.$refs.input?.focus()
-		},
-
 		/**
 		 * Option changed, processing the data
 		 *
@@ -356,7 +362,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 +370,28 @@ export default {
 		display: flex;
 		position: absolute;
 		gap: var(--default-grid-baseline);
-		inset-inline-end: 16px;
-		height: var(--default-clickable-area);
-	}
-
-	.option__actions-button {
 		margin-block: auto;
+		inset-inline-end: 12px;
+		height: 100%;
+
+		.option__drag-handle {
+			top: 4px;
+			opacity: 0.5;
+			cursor: grab;
+
+			&:hover,
+			&:focus,
+			&:focus-within {
+				opacity: 1;
+			}
 
-		&:last-of-type {
-			margin-inline: 5px;
+			&:active {
+				cursor: grabbing;
+			}
+
+			> * {
+				cursor: grab;
+			}
 		}
 	}
 
@@ -380,7 +399,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/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index fd36b4f26..9c56003fe 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -40,27 +40,41 @@
 			<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"
+				tag="ul"
+				handle=".option__drag-handle"
+				@change="saveOptionsOrder"
+				@start="isDragging = true"
+				@end="isDragging = false">
+				<transition-group
+					:name="
+						isDragging ? 'no-external-transition-on-drag' : 'option-list'
+					">
+					<!-- 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" />
+				</transition-group>
+			</Draggable>
 		</template>
 
 		<!-- Add multiple options modal -->
@@ -71,6 +85,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 +98,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: {
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 02d34ee43..4c3095350 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -112,45 +112,57 @@
 		</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"
+				tag="ul"
+				handle=".option__drag-handle"
+				@change="saveOptionsOrder"
+				@start="isDragging = true"
+				@end="isDragging = false">
+				<transition-group
+					:name="
+						isDragging ? 'no-external-transition-on-drag' : 'option-list'
+					">
+					<!-- 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, $event)"
+						@delete="deleteOption"
+						@focus-next="focusNextInput"
+						@move-up="onOptionMoveUp(index)"
+						@move-down="onOptionMoveDown(index)"
+						@tabbed-out="checkValidOption" />
+				</transition-group>
+			</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 +175,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 +192,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 +200,7 @@ export default {
 
 	components: {
 		AnswerInput,
+		Draggable,
 		IconCheckboxBlankOutline,
 		IconContentPaste,
 		IconRadioboxBlank,
@@ -199,7 +212,6 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		OptionInputDialog,
-		TransitionList,
 	},
 
 	mixins: [QuestionMixin, QuestionMultipleMixin],
@@ -217,6 +229,7 @@ export default {
 			cachedOtherAnswerText: '',
 			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 
+			isDragging: false,
 			isOptionDialogShown: false,
 			isLoading: false,
 		}
@@ -232,7 +245,7 @@ export default {
 		},
 
 		shiftDragHandle() {
-			return !this.readonly && this.options.length !== 0
+			return !this.readonly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
 		pseudoIcon() {
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