From 9184cb4480317413dd7e3290d033a41e2d45f907 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Thu, 14 May 2020 20:56:22 +0200
Subject: [PATCH] Question-specific title-placeholders

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/Questions/Question.vue         | 6 +++++-
 src/components/Questions/QuestionLong.vue     | 1 +
 src/components/Questions/QuestionMultiple.vue | 3 ++-
 src/components/Questions/QuestionShort.vue    | 1 +
 src/mixins/QuestionMixin.js                   | 2 +-
 src/models/AnswerTypes.js                     | 4 ++++
 src/views/Create.vue                          | 2 +-
 src/views/Submit.vue                          | 2 +-
 8 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 1c03977..d85b804 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -35,7 +35,7 @@
 		<!-- Header -->
 		<div class="question__header">
 			<input v-if="edit || !text"
-				:placeholder="t('forms', 'Question title')"
+				:placeholder="titlePlaceholder"
 				:aria-label="t('forms', 'Title of question number {index}', {index})"
 				:value="text"
 				class="question__header-title"
@@ -89,6 +89,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		titlePlaceholder: {
+			type: String,
+			required: true,
+		},
 		mandatory: {
 			type: Boolean,
 			required: true,
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 24c9c86..9b146e8 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -27,6 +27,7 @@
 		:mandatory="mandatory"
 		:edit.sync="edit"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index b433942..46abfcd 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -27,6 +27,7 @@
 		:mandatory="mandatory"
 		:edit.sync="edit"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
@@ -104,7 +105,7 @@ export default {
 		},
 
 		isUnique() {
-			return this.model.unique === true
+			return this.answerType.unique === true
 		},
 
 		hasNoAnswer() {
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 6078290..88d4db2 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -27,6 +27,7 @@
 		:mandatory="mandatory"
 		:edit.sync="edit"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 2c0a793..24432bd 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -74,7 +74,7 @@ export default {
 		/**
 		 * Answer type model object
 		 */
-		model: {
+		answerType: {
 			type: Object,
 			required: true,
 		},
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index 29ae04f..f6af064 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -37,6 +37,7 @@ export default {
 		component: QuestionMultiple,
 		icon: 'icon-answer-multiple',
 		label: t('forms', 'Multiple choice'),
+		titlePlaceholder: t('forms', 'MultiUniqueTitlePlaceholder'),
 		unique: true,
 		// Define conditions where this questions is not ok
 		validate: question => question.options.length > 0,
@@ -46,6 +47,7 @@ export default {
 		component: QuestionMultiple,
 		icon: 'icon-answer-checkbox',
 		label: t('forms', 'Checkboxes'),
+		titlePlaceholder: t('forms', 'MultiTitlePlaceholder'),
 		// Define conditions where this questions is not ok
 		validate: question => question.options.length > 0,
 	},
@@ -54,12 +56,14 @@ export default {
 		component: QuestionShort,
 		icon: 'icon-answer-short',
 		label: t('forms', 'Short answer'),
+		titlePlaceholder: t('forms', 'ShortTitlePlaceholder'),
 	},
 
 	long: {
 		component: QuestionLong,
 		icon: 'icon-answer-long',
 		label: t('forms', 'Long text'),
+		titlePlaceholder: t('forms', 'LongTitlePlaceholder'),
 	},
 
 }
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 20ca96b..dc6b32b 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -87,7 +87,7 @@
 					v-for="(question, index) in form.questions"
 					ref="questions"
 					:key="question.id"
-					:model="answerTypes[question.type]"
+					:answer-type="answerTypes[question.type]"
 					:index="index + 1"
 					:max-string-lengths="maxStringLengths"
 					v-bind.sync="question"
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 418a2bf..df7caef 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -46,7 +46,7 @@
 						ref="questions"
 						:key="question.id"
 						:read-only="true"
-						:model="answerTypes[question.type]"
+						:answer-type="answerTypes[question.type]"
 						:index="index + 1"
 						:max-string-lengths="maxStringLengths"
 						v-bind="question"