From 607f46f4e4b755cbddd3e12ca88659f63ece97ee Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Fri, 15 May 2020 14:09:23 +0200
Subject: [PATCH] Specialice question input-placeholders

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

diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 9b146e8..e51c503 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -26,6 +26,7 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
@@ -35,7 +36,8 @@
 			<!-- TODO: properly choose max length -->
 			<textarea ref="textarea"
 				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
-				:placeholder="t('forms', 'Long answer text')"
+				:placeholder="submissionInputPlaceholder"
+				:disabled="!readOnly"
 				:required="mandatory"
 				:value="values[0]"
 				class="question__text"
@@ -61,6 +63,15 @@ export default {
 		}
 	},
 
+	computed: {
+		submissionInputPlaceholder() {
+			if (this.readOnly) {
+				return this.answerType.submitPlaceholder
+			}
+			return this.answerType.createPlaceholder
+		},
+	},
+
 	mounted() {
 		this.autoSizeText()
 	},
@@ -95,6 +106,12 @@ export default {
 	border-bottom: 1px dotted var(--color-border-dark);
 	border-radius: 0;
 	resize: none;
+
+	&:disabled {
+		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+	}
 }
 
 </style>
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 46abfcd..4682ec1 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -26,6 +26,7 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 88d4db2..25e2fe0 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -26,6 +26,7 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
@@ -35,7 +36,8 @@
 			<!-- TODO: properly choose max length -->
 			<input ref="input"
 				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
-				:placeholder="t('forms', 'Short answer text')"
+				:placeholder="submissionInputPlaceholder"
+				:disabled="!readOnly"
 				:required="mandatory"
 				:value="values[0]"
 				class="question__input"
@@ -55,6 +57,15 @@ export default {
 
 	mixins: [QuestionMixin],
 
+	computed: {
+		submissionInputPlaceholder() {
+			if (this.readOnly) {
+				return this.answerType.submitPlaceholder
+			}
+			return this.answerType.createPlaceholder
+		},
+	},
+
 	methods: {
 		onInput() {
 			const input = this.$refs.input
@@ -74,6 +85,12 @@ export default {
 	border: 0;
 	border-bottom: 1px dotted var(--color-border-dark);
 	border-radius: 0;
+
+	&:disabled {
+		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+	}
 }
 
 </style>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 24432bd..4b8c28e 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -79,6 +79,14 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * Submission or Edit-Mode
+		 */
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Database-Restrictions
 		 */
diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js
index f6af064..7908f3c 100644
--- a/src/models/AnswerTypes.js
+++ b/src/models/AnswerTypes.js
@@ -56,14 +56,20 @@ export default {
 		component: QuestionShort,
 		icon: 'icon-answer-short',
 		label: t('forms', 'Short answer'),
+
 		titlePlaceholder: t('forms', 'ShortTitlePlaceholder'),
+		submitPlaceholder: t('forms', 'Enter a short answer'),
+		createPlaceholder: t('forms', 'People can enter a short answer'),
 	},
 
 	long: {
 		component: QuestionLong,
 		icon: 'icon-answer-long',
 		label: t('forms', 'Long text'),
+
 		titlePlaceholder: t('forms', 'LongTitlePlaceholder'),
+		submitPlaceholder: t('forms', 'Enter a long text'),
+		createPlaceholder: t('forms', 'People can enter a long text'),
 	},
 
 }