Specialice question input-placeholders

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

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>

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"

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>

src/mixins/QuestionMixin.js

@@ -79,6 +79,14 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * Submission or Edit-Mode
+		 */
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Database-Restrictions
 		 */

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'),
 	},
 
 }