Show question invalid warning

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Co-authored-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

src/components/Questions/Question.vue

@@ -46,6 +46,10 @@
 				required
 				@input="onTitleChange">
 			<h3 v-else class="question__header-title" v-text="computedText" />
+			<div v-if="!edit && !questionValid"
+				v-tooltip.auto="warningInvalid"
+				class="question__header-warning icon-error-color"
+				tabindex="0" />
 			<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
 				<ActionCheckbox :checked="mandatory"
 					@update:checked="onMandatoryChange">
@@ -114,6 +118,14 @@ export default {
 			type: Number,
 			required: true,
 		},
+		contentValid: {
+			type: Boolean,
+			default: true,
+		},
+		warningInvalid: {
+			type: String,
+			default: t('forms', 'This question needs a title!'),
+		},
 	},
 
 	computed: {
@@ -127,6 +139,14 @@ export default {
 			}
 			return this.text
 		},
+
+		/**
+		 * Question valid, if text not empty and content valid
+		 * @returns {Boolean} true if question valid
+		 */
+		questionValid() {
+			return this.text && this.contentValid
+		},
 	},
 
 	methods: {
@@ -240,6 +260,10 @@ export default {
 			border-bottom-color: var(--color-border-dark);
 		}
 
+		&-warning {
+			padding: 22px;
+		}
+
 		&-menu.action-item {
 			position: sticky;
 			top: var(--header-height);

src/components/Questions/QuestionLong.vue

@@ -29,6 +29,7 @@
 		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
+		:warning-invalid="answerType.warningInvalid"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">

src/components/Questions/QuestionMultiple.vue

@@ -29,6 +29,8 @@
 		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
+		:warning-invalid="answerType.warningInvalid"
+		:content-valid="contentValid"
 		:shift-drag-handle="shiftDragHandle"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
@@ -108,6 +110,10 @@ export default {
 	mixins: [QuestionMixin],
 
 	computed: {
+		contentValid() {
+			return this.answerType.validate(this)
+		},
+
 		isLastEmpty() {
 			const value = this.options[this.options.length - 1]
 			return value?.text?.trim().length === 0

src/components/Questions/QuestionShort.vue

@@ -29,6 +29,7 @@
 		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
+		:warning-invalid="answerType.warningInvalid"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">

src/models/AnswerTypes.js

@@ -43,6 +43,7 @@ export default {
 	 * @prop titlePlaceholder The placeholder users see as empty question-title in edit-mode
 	 * @prop createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
 	 * @prop submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
+	 * @prop warningInvalid The warning users see in edit mode, if the question is invalid.
 	 */
 
 	multiple_unique: {
@@ -52,6 +53,7 @@ export default {
 		validate: question => question.options.length > 0,
 
 		titlePlaceholder: t('forms', 'Multiple choice question title'),
+		warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
 
 		// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
 		unique: true,
@@ -64,6 +66,7 @@ export default {
 		validate: question => question.options.length > 0,
 
 		titlePlaceholder: t('forms', 'Checkbox question title'),
+		warningInvalid: t('forms', 'This question needs a title and at least one answer!'),
 	},
 
 	short: {
@@ -74,6 +77,7 @@ export default {
 		titlePlaceholder: t('forms', 'Short answer question title'),
 		createPlaceholder: t('forms', 'People can enter a short answer'),
 		submitPlaceholder: t('forms', 'Enter a short answer'),
+		warningInvalid: t('forms', 'This question needs a title!'),
 	},
 
 	long: {
@@ -84,6 +88,7 @@ export default {
 		titlePlaceholder: t('forms', 'Long text question title'),
 		createPlaceholder: t('forms', 'People can enter a long text'),
 		submitPlaceholder: t('forms', 'Enter a long text'),
+		warningInvalid: t('forms', 'This question needs a title!'),
 	},
 
 }