Merge pull request #389 from nextcloud/enh/specific_question_placeholder

Question-specific placeholders

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,

src/components/Questions/QuestionLong.vue

@@ -26,14 +26,17 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
 		<div class="question__content">
 			<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"
@@ -60,6 +63,15 @@ export default {
 		}
 	},
 
+	computed: {
+		submissionInputPlaceholder() {
+			if (this.readOnly) {
+				return this.answerType.submitPlaceholder
+			}
+			return this.answerType.createPlaceholder
+		},
+	},
+
 	mounted() {
 		this.autoSizeText()
 	},
@@ -97,6 +109,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,7 +26,9 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
@@ -108,7 +110,7 @@ export default {
 		},
 
 		isUnique() {
-			return this.model.unique === true
+			return this.answerType.unique === true
 		},
 
 		hasNoAnswer() {

src/components/Questions/QuestionShort.vue

@@ -26,14 +26,17 @@
 		:text="text"
 		:mandatory="mandatory"
 		:edit.sync="edit"
+		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
+		:title-placeholder="answerType.titlePlaceholder"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
 		<div class="question__content">
 			<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"
@@ -54,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
@@ -73,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

@@ -74,11 +74,19 @@ export default {
 		/**
 		 * Answer type model object
 		 */
-		model: {
+		answerType: {
 			type: Object,
 			required: true,
 		},
 
+		/**
+		 * Submission or Edit-Mode
+		 */
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Database-Restrictions
 		 */

src/models/AnswerTypes.js

@@ -32,34 +32,58 @@ import QuestionMultiple from '../components/Questions/QuestionMultiple'
  * @property {string} long
  */
 export default {
+	/**
+	 * Specifying Question-Models in a common place
+	 * Further type-specific parameters are possible.
+	 * @prop component The vue-component this answer-type relies on
+	 * @prop icon The icon corresponding to this answer-type
+	 * @prop label The answer-type label, that users will see as answer-type.
+	 * @prop validate *optional* Define conditions where this question is not ok
+	 *
+	 * @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
+	 */
 
 	multiple_unique: {
 		component: QuestionMultiple,
 		icon: 'icon-answer-multiple',
 		label: t('forms', 'Multiple choice'),
-		unique: true,
-		// Define conditions where this questions is not ok
 		validate: question => question.options.length > 0,
+
+		titlePlaceholder: t('forms', 'Multiple choice question title'),
+
+		// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
+		unique: true,
 	},
 
 	multiple: {
 		component: QuestionMultiple,
 		icon: 'icon-answer-checkbox',
 		label: t('forms', 'Checkboxes'),
-		// Define conditions where this questions is not ok
 		validate: question => question.options.length > 0,
+
+		titlePlaceholder: t('forms', 'Checkbox question title'),
 	},
 
 	short: {
 		component: QuestionShort,
 		icon: 'icon-answer-short',
 		label: t('forms', 'Short answer'),
+
+		titlePlaceholder: t('forms', 'Short answer question title'),
+		createPlaceholder: t('forms', 'People can enter a short answer'),
+		submitPlaceholder: t('forms', 'Enter a short answer'),
 	},
 
 	long: {
 		component: QuestionLong,
 		icon: 'icon-answer-long',
 		label: t('forms', 'Long text'),
+
+		titlePlaceholder: t('forms', 'Long text question title'),
+		createPlaceholder: t('forms', 'People can enter a long text'),
+		submitPlaceholder: t('forms', 'Enter a long text'),
 	},
 
 }

src/views/Create.vue

@@ -90,7 +90,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"

src/views/Submit.vue

@@ -48,7 +48,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"