Add multiple options with one paste #337

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

Author: hamza221

src/components/Questions/Question.vue

@@ -55,7 +55,33 @@
 				</template>
 			</NcButton>
 		</div>
-
+		<NcModal v-if="isModalOpen"
+			size="normal"
+			title="Add multiple options"
+			:out-transition="true"
+			:has-next="false"
+			:has-previous="false"
+			@close="closeModal">
+			<div class="modal__content">
+				<h1>Add multiple options {{ isModalOpen }}</h1>
+				<textarea ref="input"
+					v-model="inputedOptions"
+					:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
+					:placeholder="t('forms', 'Answer number {index}', { index: index + 1 })"
+					class="question__input"
+					type="text" />
+				<div class="options">
+					<div v-for="(option, i) in multipleOptions" :key="i" class="single_option">
+						<p>{{ option }}</p>
+					</div>
+				</div>
+				<div>
+					<NcButton @click="onMultipleOptions">
+						Add options
+					</NcButton>
+				</div>
+			</div>
+		</NcModal>
 		<!-- Header -->
 		<div class="question__header">
 			<div class="question__header__title">
@@ -118,6 +144,12 @@
 						</template>
 						{{ t('forms', 'Copy question') }}
 					</NcActionButton>
+					<NcActionButton @click="openModal">
+						<template #icon>
+							<IconContentPaste :size="20" />
+						</template>
+						{{ t('forms', 'Multiple Options') }}
+					</NcActionButton>
 					<NcActionButton @click="onDelete">
 						<template #icon>
 							<IconDelete :size="20" />
@@ -151,13 +183,16 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { showError } from '@nextcloud/dialogs'
 
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
 import IconAsterisk from 'vue-material-design-icons/Asterisk.vue'
 import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import IconDragHorizontalVariant from 'vue-material-design-icons/DragHorizontalVariant.vue'
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import IconIdentifier from 'vue-material-design-icons/Identifier.vue'
@@ -172,6 +207,7 @@ export default {
 		IconArrowUp,
 		IconAsterisk,
 		IconContentCopy,
+		IconContentPaste,
 		IconDelete,
 		IconDragHorizontalVariant,
 		IconDotsHorizontal,
@@ -182,6 +218,7 @@ export default {
 		NcActionCheckbox,
 		NcActionInput,
 		NcButton,
+		NcModal,
 	},
 
 	inject: ['$markdownit'],
@@ -241,6 +278,13 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			isModalOpen: false,
+			inputedOptions: '',
+		}
+	},
+
 	computed: {
 		/**
 		 * Extend text with asterisk if question is required
@@ -278,12 +322,40 @@ export default {
 		hasDescription() {
 			return this.description !== ''
 		},
+		multipleOptions() {
+			const allOptions = this.inputedOptions.split(/\r?\n/g)
+			return allOptions.filter(answer => { return answer.trim().length > 0 })
+		},
 	},
 	// Ensure description is sized correctly on initial render
 	mounted() {
 		this.$nextTick(() => this.resizeDescription())
 	},
 	methods: {
+		closeModal() {
+			this.isModalOpen = false
+		},
+
+		openModal() {
+			this.isModalOpen = true
+		},
+
+		onMultipleOptions() {
+			this.isModalOpen = false
+			this.$nextTick(() => {
+				this.$emit('update:edit', true)
+				if (this.multipleOptions.length > 1) {
+				// extract all options entries to parent
+					this.$emit('multiple-answers', this.multipleOptions)
+					this.inputedOptions = ''
+					return
+				}
+				// in case of only one option, just show an error message because it is probably missuse of the feature
+				showError(t('forms', 'Options should seperated by new line!'))
+			})
+
+		},
+
 		onTitleChange({ target }) {
 			this.$emit('update:text', target.value)
 		},
@@ -481,5 +553,26 @@ export default {
 		}
 	}
 }
+.modal__content {
+		padding: 20px;
+		display: flex;
+		flex-direction: column;
+	}
+.options{
+  display: flex !important;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 10px;
+  justify-content: flex-start;
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 5px 0px;
+}
+.single_option{
+ width: max-content;
+ padding: 5px;
+ margin: 5px;
+ border: 1px solid var(--color-primary);
+}
 
 </style>

src/components/Questions/QuestionDropdown.vue

@@ -26,7 +26,8 @@
 		:warning-invalid="answerType.warningInvalid"
 		:content-valid="contentValid"
 		:shift-drag-handle="shiftDragHandle"
-		v-on="commonListeners">
+		v-on="commonListeners"
+		@multiple-answers="handleMultipleOptions">
 		<template #actions>
 			<NcActionCheckbox :checked="extraSettings?.shuffleOptions"
 				@update:checked="onShuffleOptionsChange">

src/components/Questions/QuestionMultiple.vue

@@ -26,7 +26,8 @@
 		:warning-invalid="answerType.warningInvalid"
 		:content-valid="contentValid"
 		:shift-drag-handle="shiftDragHandle"
-		v-on="commonListeners">
+		v-on="commonListeners"
+		@multiple-answers="handleMultipleOptions">
 		<template #actions>
 			<NcActionCheckbox :checked="extraSettings?.shuffleOptions"
 				@update:checked="onShuffleOptionsChange">

src/mixins/QuestionMixin.js

@@ -24,6 +24,7 @@ import { emit } from '@nextcloud/event-bus'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
+import GenRandomId from '../utils/GenRandomId.js'
 
 import logger from '../utils/Logger.js'
 import Question from '../components/Questions/Question.vue'
@@ -359,5 +360,32 @@ export default {
 				showError(t('forms', 'Error while saving question'))
 			}
 		},
+		async handleMultipleOptions(answers) {
+			this.edit = true
+			const options = this.options.slice()
+			for (let i = 0; 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)
+			})
+		},
 	},
 }