Add multiple options with one paste #337

Signed-off-by: hamza221 <[email protected]>

Author: hamza221

src/components/Questions/AnswerInput.vue

@@ -3,7 +3,7 @@
 		<div :is="pseudoIcon"
 			v-if="!isDropdown"
 			class="question__item__pseudoInput" />
-		<input ref="input"
+		<textarea ref="input"
 			:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
 			:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
 			:value="answer.text"
@@ -14,8 +14,7 @@
 			type="text"
 			@input="onInput"
 			@keydown.delete="deleteEntry"
-			@keydown.enter.prevent="addNewEntry">
-
+			@keydown.enter.prevent="addNewEntry" />
 		<!-- Delete answer -->
 		<NcActions>
 			<NcActionButton @click="deleteEntry">
@@ -111,17 +110,23 @@ export default {
 			// clone answer
 			const answer = Object.assign({}, this.answer)
 			answer.text = this.$refs.input.value
+			if (!this.isUnique) {
+				const multipleAnswers = answer.text.split(/\r?\n/g)
+				if (multipleAnswers.length > 1) {
+					// extract all answer entries except the first one to parent
+					this.$emit('multiple-answers', multipleAnswers, this.answer)
+					return
+				}
+			}
 
 			if (this.answer.local) {
-
 				// Dispatched for creation. Marked as synced
 				// eslint-disable-next-line vue/no-mutating-props
 				this.answer.local = false
 				const newAnswer = await this.debounceCreateAnswer(answer)
-
 				// Forward changes, but use current answer.text to avoid erasing
 				// any in-between changes while creating the answer
-				Object.assign(newAnswer, { text: this.$refs.input.value })
+				Object.assign(newAnswer, { text: answer.text })
 				this.$emit('update:answer', answer.id, newAnswer)
 			} else {
 				this.debounceUpdateAnswer(answer)
@@ -221,6 +226,7 @@ export default {
 		width: 100%;
 		position: relative;
 		margin-right: 2px !important;
+		resize: none;
 
 		&--shifted {
 			left: -30px;

src/components/Questions/QuestionMultiple.vue

@@ -66,7 +66,8 @@
 						:max-option-length="maxStringLengths.optionText"
 						@add="addNewEntry"
 						@delete="deleteOption"
-						@update:answer="updateAnswer" />
+						@update:answer="updateAnswer"
+						@multiple-answers="handleMultipleOptions" />
 				</template>
 
 				<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
@@ -180,7 +181,58 @@ export default {
 			// Radio: create array
 			this.$emit('update:values', [this.questionValues])
 		},
+		async handleMultipleOptions(answers, answer) {
+			this.edit = true
+			const options = this.options.slice()
+			if (answer.local) {
+				await axios.post(generateOcsUrl('apps/forms/api/v2/option'), {
+					questionId: this.id,
+					text: answers[0],
+				})
+				answer.local = false
+
+			} else {
+				try {
+					await axios.post(generateOcsUrl('apps/forms/api/v2/option/update'), {
+						id: answer.id,
+						keyValuePairs: {
+							text: answers[0],
+						},
+					})
+					logger.debug('Updated answer', { answer })
+				} catch (error) {
+					logger.error('Error while saving answer', { answer, error })
+					showError(t('forms', 'Error while saving the answer'))
+				}
+			}
+			answer.text = answers[0]
+			const answerIndex = options.findIndex(option => option.id === answer.id)
+			options[answerIndex] = answer
+			for (let i = 1; i < answers.length; i++) {
+
+				options.push({
+					id: GenRandomId(),
+					questionId: this.id,
+					text: answers[i],
+					local: false,
+				})
 
+				await axios.post(generateOcsUrl('apps/forms/api/v2/option'), {
+					questionId: this.id,
+					text: answers[i],
+				})
+			}
+			options.push({
+				id: GenRandomId(),
+				questionId: this.id,
+				text: '',
+				local: true,
+			})
+			this.updateOptions(options)
+			this.$nextTick(() => {
+				this.focusIndex(options.length - 1)
+			})
+		},
 		/**
 		 * Is the provided answer required ?
 		 * This is needed for checkboxes as html5
@@ -244,7 +296,6 @@ export default {
 				text: '',
 				local: true,
 			})
-
 			// Update question
 			this.updateOptions(options)