fix: extract question list to seperate component, add 'insert question' to conditional

Signed-off-by: TimedIn <git@timedin.net>

Author: timedin-de

src/components/Questions/QuestionConditional.vue

@@ -151,107 +151,46 @@
 
 						<!-- Subquestions for this branch -->
 						<div class="branch__subquestions">
-							<ul class="branch__subquestions-list">
-								<Draggable
-									v-model="branches[branchIndex].subQuestions"
-									:animation="200"
-									tag="transition-group"
-									:componentData="{
-										name: isDragging
-											? 'no-external-transition-on-drag'
-											: 'question-list',
-									}"
-									handle=".question__drag-handle"
-									@change="onQuestionOrderChange(branchIndex)"
-									@start="isDragging = true"
-									@end="isDragging = false">
-									<li
-										v-for="(
-											subQuestion, subIndex
-										) in branch.subQuestions"
-										:key="subQuestion.id"
-										class="subquestion">
-										<component
-											:is="
-												getSubQuestionComponentName(
-													subQuestion.type,
-												)
-											"
-											v-bind="subQuestion"
-											:canMoveDown="
-												subIndex
-												< branch.subQuestions.length - 1
-											"
-											:canMoveUp="subIndex > 0"
-											:formId="formId"
-											:index="subIndex + index + 1"
-											:maxStringLengths="maxStringLengths"
-											:answerType="
-												getSubQuestionAnswerTypeConfig(
-													subQuestion.type,
-												)
-											"
-											@update:text="
-												updateSubQuestion(
-													branch.id,
-													subQuestion.id,
-													'text',
-													$event,
-												)
-											"
-											@update:description="
-												updateSubQuestion(
-													branch.id,
-													subQuestion.id,
-													'description',
-													$event,
-												)
-											"
-											@update:isRequired="
-												updateSubQuestion(
-													branch.id,
-													subQuestion.id,
-													'isRequired',
-													$event,
-												)
-											"
-											@update:extraSettings="
-												updateSubQuestion(
-													branch.id,
-													subQuestion.id,
-													'extraSettings',
-													$event,
-												)
-											"
-											@update:options="
-												updateSubQuestion(
-													branch.id,
-													subQuestion.id,
-													'options',
-													$event,
-												)
-											"
-											@delete="
-												deleteSubQuestion(
-													branch.id,
-													subQuestion.id,
-												)
-											"
-											@clone="
-												cloneSubQuestion(
-													branch.id,
-													subQuestion.id,
-												)
-											"
-											@moveDown="
-												onMoveDown(subIndex, branchIndex)
-											"
-											@moveUp="
-												onMoveUp(subIndex, branchIndex)
-											" />
-									</li>
-								</Draggable>
-							</ul>
+							<QuestionList
+								v-model="branches[branchIndex].subQuestions"
+								:getComponent="getSubQuestionComponent"
+								:getAnswerType="getSubQuestionAnswerType"
+								:maxStringLengths="maxStringLengths"
+								:baseIndex="index"
+								:animation="200"
+								:formId="formId"
+								:showInsert="true"
+								:insertMenuName="t('forms', 'Insert subquestion')"
+								:answerTypesFilter="subQuestionAnswerTypesFilter"
+								:hasSubtypes="hasSubtypes"
+								:isLoadingQuestions="isLoadingQuestions"
+								@updateProperty="
+									(idx, prop, val) =>
+										updateSubQuestion(
+											branch.id,
+											branches[branchIndex].subQuestions[idx]
+												.id,
+											prop,
+											val,
+										)
+								"
+								@clone="
+									(question) =>
+										cloneSubQuestion(branch.id, question.id)
+								"
+								@delete="
+									(question) =>
+										deleteSubQuestion(branch.id, question.id)
+								"
+								@moveDown="(idx) => onMoveDown(idx, branchIndex)"
+								@moveUp="(idx) => onMoveUp(idx, branchIndex)"
+								@orderChange="onQuestionOrderChange(branchIndex)"
+								@dragStart="isDragging = true"
+								@dragEnd="isDragging = false"
+								@addQuestion="
+									(type, subtype, position) =>
+										addSubQuestion(branch.id, type, position)
+								" />
 
 							<!-- Add subquestion button -->
 							<NcActions :aria-label="t('forms', 'Add subquestion')">
@@ -309,6 +248,7 @@
 				</div>
 			</div>
 		</div>
+		<slot name="insert" />
 	</Question>
 </template>
 
@@ -330,8 +270,8 @@ import IconTextLong from '@material-symbols/svg-400/outlined/subject.svg?raw'
 import IconSwapVertical from '@material-symbols/svg-400/outlined/swap_vert.svg?raw'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 import { generateOcsUrl } from '@nextcloud/router'
-import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -344,6 +284,7 @@ import QuestionDate from './QuestionDate.vue'
 import QuestionDropdown from './QuestionDropdown.vue'
 import QuestionFile from './QuestionFile.vue'
 import QuestionLinearScale from './QuestionLinearScale.vue'
+import QuestionList from './QuestionList.vue'
 import QuestionLong from './QuestionLong.vue'
 import QuestionMultiple from './QuestionMultiple.vue'
 import QuestionRanking from './QuestionRanking.vue'
@@ -372,7 +313,6 @@ export default {
 
 	components: {
 		BranchConditionEditor,
-		Draggable,
 		NcActionButton,
 		NcActions,
 		NcButton,
@@ -383,6 +323,7 @@ export default {
 		QuestionDropdown,
 		QuestionFile,
 		QuestionLinearScale,
+		QuestionList,
 		QuestionLong,
 		QuestionMultiple,
 		QuestionShort,
@@ -413,6 +354,7 @@ export default {
 	data() {
 		return {
 			isDragging: false,
+			isLoadingQuestions: false,
 			triggerValues: [],
 			subQuestionValues: {},
 		}
@@ -560,6 +502,46 @@ export default {
 			return this.extraSettings?.branches || []
 		},
 
+		/**
+		 * Get component reference for subquestion (used with :is in QuestionList)
+		 * Returns the actual component object, not a string name,
+		 * so it works in QuestionList's scope.
+		 */
+		getSubQuestionComponent() {
+			return (question) => QUESTION_COMPONENTS[question.type]
+		},
+
+		/**
+		 * Get answer type config for subquestion (used with :answerType in QuestionList)
+		 * Takes a question object and returns the answer type config.
+		 */
+		getSubQuestionAnswerType() {
+			return (question) => this.buildAnswerTypeConfig(question.type)
+		},
+
+		/**
+		 * Build answerTypes filter for subquestion insert menu
+		 * Filters out 'conditional' to prevent recursion
+		 */
+		subQuestionAnswerTypesFilter() {
+			const filter = {}
+			for (const sqType of this.subQuestionTypesList) {
+				filter[sqType.type] = {
+					icon: sqType.icon,
+					label: sqType.label,
+				}
+			}
+			return filter
+		},
+
+		/**
+		 * Check if an answer type has subtypes
+		 */
+		hasSubtypes() {
+			return (answer) =>
+				answer && answer.subtypes && Object.keys(answer.subtypes).length > 0
+		},
+
 		activeBranches() {
 			if (!this.triggerValues || this.triggerValues.length === 0) {
 				return null
@@ -821,7 +803,7 @@ export default {
 			return t('forms', 'Branch {number}', { number: index + 1 })
 		},
 
-		async addSubQuestion(branchId, type) {
+		async addSubQuestion(branchId, type, position = null) {
 			const branch = this.branches.find((b) => b.id === branchId)
 			if (!branch) return
 
@@ -840,10 +822,16 @@ export default {
 				const newQuestion = OcsResponse2Data(response)
 
 				const branchIndex = this.branches.findIndex((b) => b.id === branchId)
+				const newSubQuestions = [...(branch.subQuestions || [])]
+				if (position !== null) {
+					newSubQuestions.splice(position, 0, newQuestion)
+				} else {
+					newSubQuestions.push(newQuestion)
+				}
 				const newBranches = [...this.branches]
 				newBranches[branchIndex] = {
 					...branch,
-					subQuestions: [...(branch.subQuestions || []), newQuestion],
+					subQuestions: newSubQuestions,
 				}
 				this.onExtraSettingsChange({ branches: newBranches })
 			} catch (error) {
@@ -1228,16 +1216,6 @@ export default {
 		padding-left: 16px;
 		border-left: 3px solid var(--color-primary-element-light);
 	}
-
-	&__subquestions-list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-}
-
-.subquestion {
-	margin-bottom: 8px;
 }
 
 .active-subquestions {