Merge pull request #3255 from nextcloud/refactor/errorMessage

refactor: move error handling to Question component with NcNoteCard

Author: Chartman123

src/components/Questions/Question.vue

@@ -147,6 +147,9 @@
 					v-html="computedDescription" />
 				<!-- eslint-enable vue/no-v-html -->
 			</div>
+			<NcNoteCard v-if="hasError" :id="errorId" type="error">
+				{{ errorMessage }}
+			</NcNoteCard>
 		</div>
 
 		<!-- Question content -->
@@ -160,6 +163,7 @@ import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
@@ -191,6 +195,7 @@ export default {
 		NcActionCheckbox,
 		NcActionInput,
 		NcButton,
+		NcNoteCard,
 	},
 
 	inject: ['$markdownit'],
@@ -260,6 +265,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		errorMessage: {
+			type: String,
+			default: null,
+		},
 	},
 
 	emits: [
@@ -314,6 +324,14 @@ export default {
 		hasDescription() {
 			return this.description !== ''
 		},
+
+		hasError() {
+			return !!this.errorMessage
+		},
+
+		errorId() {
+			return `q${this.index}_error`
+		},
 	},
 
 	// Ensure description is sized correctly on initial render

src/components/Questions/QuestionFile.vue

@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template #actions>
 			<template v-if="!allowedFileTypesDialogOpened">
@@ -78,10 +79,6 @@
 			</template>
 		</template>
 
-		<NcNoteCard v-if="hasError" :id="errorId" type="error">
-			{{ errorMessage }}
-		</NcNoteCard>
-
 		<div class="question__content">
 			<ul>
 				<NcListItem
@@ -160,7 +157,6 @@ import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconFileDocumentAlert from 'vue-material-design-icons/FileDocumentAlertOutline.vue'
 import IconFile from 'vue-material-design-icons/FileOutline.vue'
@@ -205,7 +201,6 @@ export default {
 		NcButton,
 		NcListItem,
 		NcLoadingIcon,
-		NcNoteCard,
 		Question,
 	},
 
@@ -215,7 +210,6 @@ export default {
 	data() {
 		return {
 			fileTypes,
-			errorMessage: null,
 			fileLoading: false,
 			maxFileSizeUnit: Object.keys(FILE_SIZE_UNITS)[0],
 			maxFileSizeValue: '',
@@ -254,14 +248,6 @@ export default {
 
 			return t('forms', 'All file types are allowed.')
 		},
-
-		hasError() {
-			return !!this.errorMessage
-		},
-
-		errorId() {
-			return `q${this.index}_error`
-		},
 	},
 
 	mounted() {

src/components/Questions/QuestionGrid.vue

@@ -10,16 +10,13 @@
 		:warningInvalid="answerType.warningInvalid"
 		:contentValid="contentValid"
 		:shiftDragHandle="shiftDragHandle"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template v-if="readOnly">
 			<fieldset
 				:name="name || undefined"
 				:aria-labelledby="titleId"
 				:aria-describedby="description ? descriptionId : undefined">
-				<NcNoteCard v-if="hasError" :id="errorId" type="error">
-					{{ errorMessage }}
-				</NcNoteCard>
-
 				<table class="answer-grid">
 					<thead>
 						<tr>
@@ -181,7 +178,6 @@ import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 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'
@@ -197,7 +193,6 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcInputField,
 		NcLoadingIcon,
-		NcNoteCard,
 		Question,
 	},
 
@@ -206,11 +201,6 @@ export default {
 
 	data() {
 		return {
-			/**
-			 * The shown error message
-			 */
-			errorMessage: null,
-
 			isDragging: false,
 			isLoading: false,
 			questionTypes: [
@@ -227,18 +217,10 @@ export default {
 			return this.answerType.unique === true
 		},
 
-		hasError() {
-			return !!this.errorMessage
-		},
-
 		shiftDragHandle() {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
-		errorId() {
-			return `q${this.index}_error`
-		},
-
 		questionType() {
 			return this.extraSettings?.questionType ?? GridCellType.Radio
 		},

src/components/Questions/QuestionMultiple.vue

@@ -10,6 +10,7 @@
 		:warningInvalid="answerType.warningInvalid"
 		:contentValid="contentValid"
 		:shiftDragHandle="shiftDragHandle"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox
@@ -72,9 +73,6 @@
 				:name="name || undefined"
 				:aria-labelledby="titleId"
 				:aria-describedby="description ? descriptionId : undefined">
-				<NcNoteCard v-if="hasError" :id="errorId" type="error">
-					{{ errorMessage }}
-				</NcNoteCard>
 				<NcCheckboxRadioSwitch
 					v-for="answer in choices"
 					:key="answer.id"
@@ -186,7 +184,6 @@ import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
@@ -215,7 +212,6 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcInputField,
 		NcLoadingIcon,
-		NcNoteCard,
 		OptionInputDialog,
 		Question,
 	},
@@ -225,10 +221,6 @@ export default {
 
 	data() {
 		return {
-			/**
-			 * The shown error message
-			 */
-			errorMessage: null,
 			/**
 			 * This is used to cache the "other" answer, meaning if the user:
 			 * checks "other" types text, unchecks "other" and then re-check "other" the typed text is preserved
@@ -249,10 +241,6 @@ export default {
 			return this.answerType.unique === true
 		},
 
-		hasError() {
-			return !!this.errorMessage
-		},
-
 		shiftDragHandle() {
 			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
@@ -272,10 +260,6 @@ export default {
 			return this.isUnique ? this.values?.[0] : this.values
 		},
 
-		errorId() {
-			return `q${this.index}_error`
-		},
-
 		allowOtherAnswer() {
 			return this.extraSettings?.allowOtherAnswer ?? false
 		},

src/mixins/QuestionMixin.js

@@ -184,6 +184,15 @@ export default {
 		Question,
 	},
 
+	data() {
+		return {
+			/**
+			 * The shown error message
+			 */
+			errorMessage: null,
+		}
+	},
+
 	computed: {
 		questionProps() {
 			const props = { ...this.$props }
@@ -204,6 +213,14 @@ export default {
 			return 'q' + this.index + '_desc'
 		},
 
+		hasError() {
+			return !!this.errorMessage
+		},
+
+		errorId() {
+			return 'q' + this.index + '_error'
+		},
+
 		/**
 		 * Listeners for all questions to forward
 		 */