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">