fix: resolve Vue 3 regression bugs from migration

- Replace `type` with `variant` for NcDialog button definitions
- Replace `@change` with `@update:modelValue` for date picker events
- Guard against stale grid option IDs crashing ResultsSummary and
Submission
- Skip file question answers when restoring an edited submission
- Pass `optionType` when bulk-creating options to avoid null bucket
crash
- Default `contentValid` prop to `true` in Question.vue
- Pass `isLoggedIn` to router-view in Forms.vue
- Fix NcTextArea container height in OptionInputDialog

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

src/Forms.vue

@@ -120,6 +120,7 @@
 		<template v-else>
 			<router-view
 				:form="selectedForm"
+				isLoggedIn
 				:sidebarOpened="sidebarOpened"
 				@update:form="updateSelectedForm"
 				@update:sidebarOpened="sidebarOpened = $event"

src/components/OptionInputDialog.vue

@@ -11,12 +11,14 @@
 		:buttons="buttons"
 		size="normal"
 		@update:open="$emit('update:open', $event)">
-		<NcTextArea
-			v-model="enteredOptions"
-			:label="t('forms', 'Add multiple options (one per line)')"
-			:placeholder="t('forms', 'Add multiple options (one per line)')"
-			resize="vertical"
-			rows="10" />
+		<div class="options-text-area">
+			<NcTextArea
+				v-model="enteredOptions"
+				:label="t('forms', 'Add multiple options (one per line)')"
+				:placeholder="t('forms', 'Add multiple options (one per line)')"
+				resize="vertical"
+				rows="10" />
+		</div>
 		<NcSelect
 			:inputLabel="t('forms', 'Options')"
 			multiple
@@ -117,4 +119,8 @@ export default defineComponent({
 	flex-direction: column;
 	gap: 2px 0;
 }
+
+.options-text-area {
+	height: 210px;
+}
 </style>

src/components/Questions/Question.vue

@@ -243,7 +243,7 @@ export default {
 
 		contentValid: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 
 		warningInvalid: {

src/components/Questions/QuestionDate.vue

@@ -96,7 +96,7 @@
 				:disabledDate="disabledDates"
 				:disabledTime="disabledTimes"
 				rangeSeparator=" - "
-				@change="onValueChange" />
+				@update:modelValue="onValueChange" />
 		</div>
 	</Question>
 </template>
@@ -162,11 +162,11 @@ export default {
 
 		time() {
 			if (this.extraSettings?.dateRange || this.extraSettings?.timeRange) {
-				return this.values
+				return this.values?.[0]
 					? [this.parse(this.values[0]), this.parse(this.values[1])]
 					: null
 			}
-			return this.values ? this.parse(this.values[0]) : null
+			return this.values?.[0] ? this.parse(this.values[0]) : null
 		},
 
 		/**

src/components/Results/ResultsSummary.vue

@@ -340,30 +340,42 @@ export default {
 					for (const rowId of Object.keys(answerJson)) {
 						const columnId = answerJson[rowId]
 
-						matrix[rowId][columnId].answersCount++
+						if (matrix[rowId]?.[columnId]) {
+							matrix[rowId][columnId].answersCount++
+						}
 					}
 				} else if (
 					this.question.extraSettings.questionType
 					=== GridCellType.Checkbox
 				) {
 					for (const rowId of Object.keys(answerJson)) {
+						if (!Array.isArray(answerJson[rowId])) {
+							continue
+						}
 						for (const columnId of answerJson[rowId]) {
-							matrix[rowId][columnId].answersCount++
+							if (matrix[rowId]?.[columnId]) {
+								matrix[rowId][columnId].answersCount++
+							}
 						}
 					}
 				} else if (
 					this.question.extraSettings.questionType === GridCellType.Number
 				) {
 					for (const rowId of Object.keys(answerJson)) {
+						if (!matrix[rowId]) {
+							continue
+						}
 						for (const columnId of Object.keys(answerJson[rowId])) {
 							if ('' === answerJson[rowId][columnId]) {
 								continue
 							}
 
-							matrix[rowId][columnId].totalValue += parseFloat(
-								answerJson[rowId][columnId],
-							)
-							matrix[rowId][columnId].answersCount++
+							if (matrix[rowId][columnId]) {
+								matrix[rowId][columnId].totalValue += parseFloat(
+									answerJson[rowId][columnId],
+								)
+								matrix[rowId][columnId].answersCount++
+							}
 						}
 					}
 				}

src/components/Results/Submission.vue

@@ -160,6 +160,7 @@ export default {
 						&& question.extraSettings.questionType === 'radio'
 					) {
 						squashedAnswers = Object.keys(gridValue)
+							.filter((key) => optionsPerId[key] && optionsPerId[gridValue[key]])
 							.map((key) => {
 								return (
 									optionsPerId[key].text
@@ -173,11 +174,16 @@ export default {
 						&& question.extraSettings.questionType === 'checkbox'
 					) {
 						squashedAnswers = Object.keys(gridValue)
+							.filter((key) => optionsPerId[key] && Array.isArray(gridValue[key]))
 							.map((key) => {
 								return (
 									optionsPerId[key].text
 									+ ': '
 									+ gridValue[key]
+										.filter(
+											(optionId) =>
+												optionsPerId[optionId],
+										)
 										.map(
 											(optionId) =>
 												optionsPerId[optionId].text,

src/components/SidebarTabs/SettingsSidebarTab.vue

@@ -69,7 +69,7 @@
 				:showSecond="false"
 				:modelValue="expirationDate"
 				type="datetime"
-				@change="onExpirationDateChange" />
+				@update:modelValue="onExpirationDateChange" />
 			<NcCheckboxRadioSwitch
 				:modelValue="form.showExpiration"
 				:disabled="locked"

src/mixins/QuestionMixin.js

@@ -8,7 +8,7 @@ import { emit } from '@nextcloud/event-bus'
 import { generateOcsUrl } from '@nextcloud/router'
 import debounce from 'debounce'
 import Question from '../components/Questions/Question.vue'
-import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
+import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
 import logger from '../utils/Logger.js'
 import OcsResponse2Data from '../utils/OcsResponse2Data.js'
 
@@ -399,7 +399,8 @@ export default {
 						},
 					),
 					{
-						optionTexts: answers, // Send the entire array of answers at once
+						optionTexts: answers,
+						optionType: OptionType.Choice,
 					},
 				)
 				const newServerOptions = OcsResponse2Data(response) // Assuming this function can handle arrays

src/views/Results.vue

@@ -402,15 +402,15 @@ export default {
 				{
 					label: t('forms', 'Unlink spreadsheet'),
 					icon: IconLinkVariantOffSvg,
-					type: 'error',
+					variant: 'error',
 					callback: () => {
 						this.onUnlinkFile()
 					},
 				},
 				{
 					label: t('forms', 'Create spreadsheet'),
 					icon: IconLinkSvg,
-					type: 'primary',
+					variant: 'primary',
 					callback: () => {
 						this.onLinkFile()
 					},
@@ -421,15 +421,15 @@ export default {
 				{
 					label: t('forms', 'Cancel'),
 					icon: IconCancelSvg,
-					type: 'tertiary',
+					variant: 'tertiary',
 					callback: () => {
 						this.showConfirmDeleteDialog = false
 					},
 				},
 				{
 					label: t('forms', 'Delete responses'),
 					icon: IconDeleteSvg,
-					type: 'error',
+					variant: 'error',
 					callback: () => {
 						this.deleteAllSubmissionsConfirmed()
 					},

src/views/Submit.vue

@@ -125,12 +125,12 @@
 						v-for="(question, index) in validQuestions"
 						ref="questions"
 						:key="question.id"
+						v-bind="question"
 						readOnly
 						:answerType="answerTypes[question.type]"
 						:index="index + 1"
 						:maxStringLengths="maxStringLengths"
 						:values="answers[question.id]"
-						v-bind="question"
 						@keydown.enter="onKeydownEnter"
 						@keydown.ctrl.enter="onKeydownCtrlEnter"
 						@update:values="(values) => onUpdate(question, values)" />
@@ -438,7 +438,7 @@ export default {
 				{
 					label: t('forms', 'Submit'),
 					icon: IconCheckSvg,
-					type: 'primary',
+					variant: 'primary',
 					callback: () => this.onConfirmedSubmit(),
 				},
 			]
@@ -457,7 +457,7 @@ export default {
 				{
 					label: t('forms', 'Leave'),
 					icon: IconCheckSvg,
-					type: 'primary',
+					variant: 'primary',
 					callback: () => this.confirmButtonCallback(true),
 				},
 			]
@@ -476,7 +476,7 @@ export default {
 				{
 					label: t('forms', 'Clear'),
 					icon: IconCheckSvg,
-					type: 'primary',
+					variant: 'primary',
 					callback: () => this.onResetSubmission(),
 				},
 			]
@@ -678,6 +678,14 @@ export default {
 								`option ${text} could not be mapped to an option for question ${questionId}`,
 							)
 						}
+					} else if (question.type === 'file') {
+						// File answers cannot be restored when editing a submission —
+						// the uploaded file has already been moved to permanent storage
+						// and the temporary uploadedFileId no longer exists.
+						// The user must re-upload files if needed.
+						logger.debug(
+							`Skipping file answer for question ${questionId} — cannot restore uploaded files`,
+						)
 					} else {
 						answers[questionId].push(text)
 					}