simplify inserting questions

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

src/components/AddQuestionMenu.vue

@@ -24,7 +24,7 @@
 				:disabled="isLoadingQuestions"
 				:isMenu="hasSubtypes(answer)"
 				class="question-menu__question"
-				@click="onPrimaryClick(answer, type)">
+				@click="onPrimaryClick(answer, type, position)">
 				<template #icon>
 					<NcIconSvgWrapper :svg="answer.icon" />
 				</template>
@@ -51,7 +51,7 @@
 				closeAfterClick
 				:disabled="isLoadingQuestions"
 				class="question-menu__question"
-				@click="onSubtypeClick(activeQuestionType, type)">
+				@click="onSubtypeClick(activeQuestionType, type, position)">
 				<template #icon>
 					<NcIconSvgWrapper :svg="answer.icon" />
 				</template>
@@ -88,12 +88,13 @@ export default {
 		ariaLabel: { type: String, default: null },
 		variant: { type: String, default: null },
 		primary: { type: Boolean, default: false },
+		position: { type: Number, default: null },
 		isLoadingQuestions: { type: Boolean, default: false },
 		answerTypesFilter: { type: Object, required: true },
 		hasSubtypes: { type: Function, required: true },
 	},
 
-	emits: ['update:open', 'add-question', 'addQuestion'],
+	emits: ['update:open', 'addQuestion'],
 
 	setup() {
 		return {
@@ -121,17 +122,17 @@ export default {
 	},
 
 	methods: {
-		onPrimaryClick(answer, type) {
+		onPrimaryClick(answer, type, position) {
 			if (this.hasSubtypes(answer)) {
 				this.activeQuestionType = type
 				return
 			}
-			this.$emit('addQuestion', type, null)
+			this.$emit('addQuestion', type, null, position)
 			this.openLocal = false
 		},
 
-		onSubtypeClick(type, subtype) {
-			this.$emit('addQuestion', type, subtype)
+		onSubtypeClick(type, subtype, position) {
+			this.$emit('addQuestion', type, subtype, position)
 			this.openLocal = false
 		},
 	},

src/views/Create.vue

@@ -157,7 +157,7 @@
 							@update:options="
 								(val) => (form.questions[index].options = val)
 							"
-							@clone="cloneHere(index, question)"
+							@clone="cloneQuestion(question, index)"
 							@delete="deleteQuestion(question.id)"
 							@moveDown="onMoveDown(index)"
 							@moveUp="onMoveUp(index)">
@@ -169,8 +169,7 @@
 									:class="[
 										{
 											'is-open':
-												insertMenuOpened
-												&& pendingInsertIndex === index + 1,
+												insertMenuOpenedIndex === index,
 										},
 										{
 											'is-mobile': isMobile,
@@ -186,11 +185,15 @@
 											)
 										"
 										variant="tertiary"
+										:position="index"
 										:isLoadingQuestions="isLoadingQuestions"
 										:answerTypesFilter="answerTypesFilter"
 										:hasSubtypes="hasSubtypes"
 										@update:open="
-											onInsertMenuUpdate($event, index)
+											(v) =>
+												(insertMenuOpenedIndex = v
+													? index
+													: null)
 										"
 										@addQuestion="addQuestion" />
 								</div>
@@ -288,7 +291,7 @@ export default {
 			questionRefsMap: {},
 
 			// when set to a number, the next created question will be inserted at this index
-			pendingInsertIndex: null,
+			insertMenuOpenedIndex: null,
 			// controls per-question insert menu visibility
 			insertMenuOpened: false,
 		}
@@ -484,18 +487,18 @@ export default {
 		 *
 		 * @param {string} type the question type, see AnswerTypes
 		 * @param {string|null} subtype the question subtype, see AnswerTypes.subtypes
+		 * @param {number|null} position where the new question should be added
 		 */
-		async addQuestion(type, subtype = null) {
+		async addQuestion(type, subtype = null, position = null) {
 			this.activeQuestionType = null
 			const text = ''
 			this.isLoadingQuestions = true
 
 			try {
-				// include optional position (1-based order) when inserting between questions
 				const body = { type, text, subtype }
-				if (this.pendingInsertIndex !== null) {
-					// backend expects 1-based position; pendingInsertIndex is array index to insert at
-					body.position = this.pendingInsertIndex + 1
+				if (position !== null) {
+					// position: current question position + 2 (0-based index: +1, next position: +1)
+					body.position = position + 2
 				}
 
 				const response = await axios.post(
@@ -507,15 +510,14 @@ export default {
 				const question = OcsResponse2Data(response)
 
 				// Delegate insertion & focus handling to helper
-				this.insertQuestion(question, { text, type, answers: [] })
+				this.insertQuestion(question, { text, type, answers: [] }, position)
 			} catch (error) {
 				logger.error('Error while adding new question', { error })
 				showError(
 					t('forms', 'There was an error while adding the new question'),
 				)
 			} finally {
 				this.isLoadingQuestions = false
-				this.pendingInsertIndex = null
 			}
 		},
 
@@ -554,7 +556,7 @@ export default {
 			}
 		},
 
-		insertQuestion(questionData, defaultFields = {}) {
+		insertQuestion(questionData, defaultFields = {}, position = null) {
 			const newQuestionObj = {
 				...defaultFields,
 				...questionData,
@@ -567,8 +569,8 @@ export default {
 				&& questionData.order !== null
 			) {
 				insertAt = Number(questionData.order) - 1
-			} else if (this.pendingInsertIndex !== null) {
-				insertAt = this.pendingInsertIndex
+			} else if (position !== null) {
+				insertAt = position
 			}
 
 			if (insertAt !== null && insertAt <= this.form.questions.length) {
@@ -577,7 +579,6 @@ export default {
 					// Prefer ref by id when available, fallback to positional refs
 					this.questionRefsMap[newQuestionObj.id]?.focus()
 				})
-				this.pendingInsertIndex = null
 			} else {
 				this.form.questions.push(newQuestionObj)
 				this.$nextTick(() => {
@@ -588,27 +589,13 @@ export default {
 			emit('forms:last-updated:set', this.form.id)
 		},
 
-		onInsertMenuUpdate(val, index) {
-			if (val) {
-				this.pendingInsertIndex = index + 1
-			} else {
-				this.pendingInsertIndex = null
-			}
-			this.insertMenuOpened = val
-		},
-
-		cloneHere(index, question) {
-			this.pendingInsertIndex = index + 1
-			this.cloneQuestion(question)
-			this.insertMenuOpened = false
-		},
-
 		/**
 		 * Clone a question
 		 *
 		 * @param {number} id the question id to clone in the current form
+		 * @param {number} position where the cloned question should be added
 		 */
-		async cloneQuestion({ id }) {
+		async cloneQuestion({ id }, position) {
 			this.isLoadingQuestions = true
 
 			try {
@@ -621,8 +608,9 @@ export default {
 				)
 
 				const body = {}
-				if (this.pendingInsertIndex !== null) {
-					body.position = this.pendingInsertIndex + 1
+				if (position !== null) {
+					// position: current question position + 2 (0-based index: +1, next position: +1)
+					body.position = position + 2
 				}
 
 				const response = await axios.post(url, body)