fix: dropdown anc checkboxes fields are broken after grid type introduction

Signed-off-by: Kostiantyn Miakshyn <[email protected]>

Author: Koc

src/components/Questions/QuestionDropdown.vue

@@ -49,7 +49,7 @@
 				handle=".option__drag-handle"
 				invert-swap
 				tag="ul"
-				@change="saveOptionsOrder"
+        @change="saveOptionsOrder('choice')"
 				@start="isDragging = true"
 				@end="isDragging = false">
 				<TransitionGroup
@@ -75,9 +75,9 @@
 						@update:answer="updateAnswer"
 						@delete="deleteOption"
 						@focus-next="focusNextInput"
-						@move-up="onOptionMoveUp(index)"
-						@move-down="onOptionMoveDown(index)"
-						@tabbed-out="checkValidOption" />
+						@move-up="onOptionMoveUp(index, 'choice')"
+						@move-down="onOptionMoveDown(index, 'choice')"
+						@tabbed-out="checkValidOption('choice')" />
 				</TransitionGroup>
 			</Draggable>
 		</template>

src/components/Questions/QuestionGrid.vue

@@ -184,6 +184,7 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AnswerInput from './AnswerInput.vue'
+import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
@@ -198,6 +199,7 @@ export default {
 		NcInputField,
 		NcLoadingIcon,
 		NcNoteCard,
+		Question,
 	},
 
 	mixins: [QuestionMixin, QuestionMultipleMixin],

src/components/Questions/QuestionMultiple.vue

@@ -47,9 +47,7 @@
 					:model-value="!!extraSettings?.optionsLimitMax"
 					@update:model-value="
 						(checked) =>
-							onLimitOptionsMax(
-								checked ? sortedOptions.length || 1 : null,
-							)
+							onLimitOptionsMax(checked ? choices.length || 1 : null)
 					">
 					{{ t('forms', 'Require a maximum of options to be checked') }}
 				</NcActionCheckbox>
@@ -75,7 +73,7 @@
 					{{ errorMessage }}
 				</NcNoteCard>
 				<NcCheckboxRadioSwitch
-					v-for="answer in sortedOptions"
+					v-for="answer in choices"
 					:key="answer.id"
 					:aria-errormessage="hasError ? errorId : undefined"
 					:aria-invalid="hasError ? 'true' : undefined"
@@ -118,15 +116,15 @@
 			</div>
 			<Draggable
 				v-else
-				v-model="sortedOptions"
+				v-model="choices"
 				class="question__content"
 				animation="200"
 				direction="vertical"
 				handle=".option__drag-handle"
 				invert-swap
 				tag="ul"
-				@change="saveOptionsOrder"
-				@start="isDragging = true"
+        @change="saveOptionsOrder('choice')"
+        @start="isDragging = true"
 				@end="isDragging = false">
 				<TransitionGroup
 					:name="
@@ -136,7 +134,7 @@
 					">
 					<!-- Answer text input edit -->
 					<AnswerInput
-						v-for="(answer, index) in sortedOptions"
+						v-for="(answer, index) in choices"
 						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
@@ -145,13 +143,14 @@
 						:is-unique="isUnique"
 						:max-index="options.length - 1"
 						:max-option-length="maxStringLengths.optionText"
+						option-type="choice"
 						@create-answer="onCreateAnswer"
 						@update:answer="updateAnswer"
 						@delete="deleteOption"
 						@focus-next="focusNextInput"
-						@move-up="onOptionMoveUp(index)"
-						@move-down="onOptionMoveDown(index)"
-						@tabbed-out="checkValidOption" />
+						@move-up="onOptionMoveUp(index, 'choice')"
+						@move-down="onOptionMoveDown(index, 'choice')"
+						@tabbed-out="checkValidOption('choice')" />
 				</TransitionGroup>
 			</Draggable>
 			<li
@@ -196,7 +195,10 @@ import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
-import { QUESTION_EXTRASETTINGS_OTHER_PREFIX } from '../../models/Constants.ts'
+import {
+	OptionType,
+	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
+} from '../../models/Constants.ts'
 
 export default {
 	name: 'QuestionMultiple',
@@ -288,6 +290,16 @@ export default {
 				v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
 		},
+
+		choices: {
+			get() {
+				return this.sortOptionsOfType(this.options, OptionType.Choice)
+			},
+
+			set(value) {
+				this.updateOptionsOrder(value, OptionType.Choice)
+			},
+		},
 	},
 
 	watch: {

src/mixins/QuestionMultipleMixin.ts

@@ -12,7 +12,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
-import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
+import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
 import logger from '../utils/Logger.js'
 
 export default defineComponent({
@@ -31,17 +31,13 @@ export default defineComponent({
 			return this.answerType.validate(this)
 		},
 
-		hasNoAnswer() {
-			return this.options.length === 0
-		},
-
 		isLastEmpty() {
 			const value = this.options[this.options.length - 1]
 			return value?.text?.trim?.().length === 0
 		},
 
 		expectedOptionTypes() {
-			return ['row', 'column']
+			return [OptionType.Choice, OptionType.Row, OptionType.Column]
 		},
 
 		sortedOptionsPerType(): { [key: string]: FormsOption[] } {