From 6d0007619212d67c61de73ef73097a059f080595 Mon Sep 17 00:00:00 2001
From: hamza221 <hamzamahjoubi221@gmail.com>
Date: Sat, 19 Nov 2022 19:36:09 +0100
Subject: [PATCH] Add multiple options with one paste #337

Signed-off-by: hamza221 <hamzamahjoubi221@gmail.com>
Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/components/OptionInputDialog.vue          | 138 ++++++++++++++++++
 src/components/Questions/QuestionDropdown.vue |  89 +++++++----
 src/components/Questions/QuestionMultiple.vue | 110 +++++++++-----
 src/mixins/QuestionMixin.js                   |  33 +++++
 4 files changed, 299 insertions(+), 71 deletions(-)
 create mode 100644 src/components/OptionInputDialog.vue

diff --git a/src/components/OptionInputDialog.vue b/src/components/OptionInputDialog.vue
new file mode 100644
index 000000000..a87ce10b6
--- /dev/null
+++ b/src/components/OptionInputDialog.vue
@@ -0,0 +1,138 @@
+<!--
+  - @copyright Copyright (c) 2024 Christian Hartmann <chris-hartmann@gmx.de>
+  -
+  - @author Christian Hartmann <chris-hartmann@gmx.de>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NcDialog
+		content-classes="options-modal"
+		:name="t('forms', 'Add multiple options')"
+		:open="open"
+		:buttons="buttons"
+		size="normal"
+		@update:open="$emit('update:open', $event)">
+		<NcTextArea
+			:value.sync="enteredOptions"
+			:label="t('forms', 'Add multiple options (one per line)')"
+			:placeholder="t('forms', 'Add multiple options (one per line)')"
+			resize="vertical"
+			rows="10" />
+		<NcSelect
+			:input-label="t('forms', 'Options')"
+			multiple
+			disabled
+			:value="multipleOptions" />
+	</NcDialog>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
+
+import IconCheck from '@mdi/svg/svg/check.svg?raw'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'OptionInputDialog',
+
+	components: {
+		NcDialog,
+		NcSelect,
+		NcTextArea,
+	},
+
+	props: {
+		open: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	emits: ['update:open'],
+
+	data() {
+		return {
+			enteredOptions: '',
+		}
+	},
+
+	computed: {
+		buttons() {
+			return [
+				{
+					label: t('forms', 'Cancel'),
+					callback: () => {
+						this.$emit('update:open', false)
+					},
+				},
+				{
+					label: t('forms', 'Add options'),
+					type: 'primary',
+					icon: IconCheck,
+					callback: () => {
+						this.onMultipleOptions()
+					},
+				},
+			]
+		},
+
+		multipleOptions() {
+			const allOptions = this.enteredOptions.split(/\r?\n/g)
+			return allOptions.filter((answer) => {
+				return answer.trim().length > 0
+			})
+		},
+	},
+
+	methods: {
+		t,
+
+		onMultipleOptions() {
+			this.$emit('update:open', false)
+			if (this.multipleOptions.length > 1) {
+				// extract all options entries to parent
+				this.$emit('multiple-answers', this.multipleOptions)
+				this.enteredOptions = ''
+				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 be seperated by new line!'))
+		},
+	},
+})
+</script>
+
+<style scoped>
+:deep(.options-modal) {
+	padding: 20px;
+}
+
+:deep(.v-select) {
+	width: 100%;
+	margin-top: 10px !important;
+	display: flex;
+	flex-direction: column;
+	gap: 2px 0;
+}
+</style>
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 459d0ecf6..b6c8c4af6 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -34,6 +34,12 @@
 				@update:checked="onShuffleOptionsChange">
 				{{ t('forms', 'Shuffle options') }}
 			</NcActionCheckbox>
+			<NcActionButton close-after-click @click="isOptionDialogShown = true">
+				<template #icon>
+					<IconContentPaste :size="20" />
+				</template>
+				{{ t('forms', 'Add multiple options') }}
+			</NcActionButton>
 		</template>
 		<NcSelect
 			v-if="readOnly"
@@ -47,37 +53,47 @@
 			label="text"
 			@input="onInput" />
 
-		<ol v-if="!readOnly" class="question__content">
-			<!-- Answer text input edit -->
-			<AnswerInput
-				v-for="(answer, index) in options"
-				:key="
-					index /* using index to keep the same vnode after new answer creation */
-				"
-				ref="input"
-				:answer="answer"
-				:index="index"
-				:is-unique="!isMultiple"
-				:is-dropdown="true"
-				:max-option-length="maxStringLengths.optionText"
-				@delete="deleteOption"
-				@update:answer="updateAnswer"
-				@focus-next="focusNextInput"
-				@tabbed-out="checkValidOption" />
-
-			<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
-				<input
-					ref="pseudoInput"
-					v-model="inputValue"
-					:aria-label="t('forms', 'Add a new answer')"
-					:placeholder="t('forms', 'Add a new answer')"
-					class="question__input"
-					:maxlength="maxStringLengths.optionText"
-					minlength="1"
-					type="text"
-					@input="addNewEntry" />
-			</li>
-		</ol>
+		<template v-else>
+			<div v-if="isLoading">
+				<NcLoadingIcon :size="64" />
+			</div>
+			<ol v-else class="question__content">
+				<!-- Answer text input edit -->
+				<AnswerInput
+					v-for="(answer, index) in options"
+					:key="
+						index /* using index to keep the same vnode after new answer creation */
+					"
+					ref="input"
+					:answer="answer"
+					:index="index"
+					:is-unique="!isMultiple"
+					:is-dropdown="true"
+					:max-option-length="maxStringLengths.optionText"
+					@delete="deleteOption"
+					@update:answer="updateAnswer"
+					@focus-next="focusNextInput"
+					@tabbed-out="checkValidOption" />
+
+				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
+					<input
+						ref="pseudoInput"
+						v-model="inputValue"
+						:aria-label="t('forms', 'Add a new answer')"
+						:placeholder="t('forms', 'Add a new answer')"
+						class="question__input"
+						:maxlength="maxStringLengths.optionText"
+						minlength="1"
+						type="text"
+						@input="addNewEntry" />
+				</li>
+			</ol>
+		</template>
+
+		<!-- Add multiple options modal -->
+		<OptionInputDialog
+			:open.sync="isOptionDialogShown"
+			@multiple-answers="handleMultipleOptions" />
 	</Question>
 </template>
 
@@ -87,9 +103,14 @@ import { emit } from '@nextcloud/event-bus'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
+import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
+
 import AnswerInput from './AnswerInput.vue'
+import OptionInputDialog from '../OptionInputDialog.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import logger from '../../utils/Logger.js'
@@ -99,8 +120,12 @@ export default {
 
 	components: {
 		AnswerInput,
+		IconContentPaste,
+		NcActionButton,
 		NcActionCheckbox,
+		NcLoadingIcon,
 		NcSelect,
+		OptionInputDialog,
 	},
 
 	mixins: [QuestionMixin],
@@ -109,6 +134,8 @@ export default {
 		return {
 			selectedOption: null,
 			inputValue: '',
+			isOptionDialogShown: false,
+			isLoading: false,
 		}
 	},
 
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 09c7f821a..9c21cb4a1 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -79,6 +79,12 @@
 					:value="extraSettings.optionsLimitMax"
 					@update:value="onLimitOptionsMax" />
 			</template>
+			<NcActionButton close-after-click @click="isOptionDialogShown = true">
+				<template #icon>
+					<IconContentPaste :size="20" />
+				</template>
+				{{ t('forms', 'Add multiple options') }}
+			</NcActionButton>
 		</template>
 		<template v-if="readOnly">
 			<fieldset :name="name || undefined" :aria-labelledby="titleId">
@@ -123,47 +129,59 @@
 		</template>
 
 		<template v-else>
-			<ul class="question__content">
-				<!-- Answer text input edit -->
-				<AnswerInput
-					v-for="(answer, index) in sortedOptions"
-					:key="
-						index /* using index to keep the same vnode after new answer creation */
-					"
-					ref="input"
-					:answer="answer"
-					:index="index"
-					:is-unique="isUnique"
-					:is-dropdown="false"
-					:max-option-length="maxStringLengths.optionText"
-					@delete="deleteOption"
-					@update:answer="updateAnswer"
-					@focus-next="focusNextInput"
-					@tabbed-out="checkValidOption" />
-				<li v-if="allowOtherAnswer" class="question__item">
-					<div :is="pseudoIcon" class="question__item__pseudoInput" />
-					<input
-						:placeholder="t('forms', 'Other')"
-						class="question__input"
-						:maxlength="maxStringLengths.optionText"
-						minlength="1"
-						type="text"
-						:readonly="!readOnly" />
-				</li>
-				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
-					<div :is="pseudoIcon" class="question__item__pseudoInput" />
-					<input
-						ref="pseudoInput"
-						class="question__input"
-						:aria-label="t('forms', 'Add a new answer')"
-						:placeholder="t('forms', 'Add a new answer')"
-						:maxlength="maxStringLengths.optionText"
-						minlength="1"
-						type="text"
-						@input="addNewEntry" />
-				</li>
-			</ul>
+			<template v-if="isLoading">
+				<div>
+					<NcLoadingIcon :size="64" />
+				</div>
+			</template>
+			<template v-else>
+				<ul class="question__content">
+					<!-- Answer text input edit -->
+					<AnswerInput
+						v-for="(answer, index) in sortedOptions"
+						:key="
+							index /* using index to keep the same vnode after new answer creation */
+						"
+						ref="input"
+						:answer="answer"
+						:index="index"
+						:is-unique="isUnique"
+						:is-dropdown="false"
+						:max-option-length="maxStringLengths.optionText"
+						@delete="deleteOption"
+						@update:answer="updateAnswer"
+						@focus-next="focusNextInput"
+						@tabbed-out="checkValidOption" />
+					<li v-if="allowOtherAnswer" class="question__item">
+						<div :is="pseudoIcon" class="question__item__pseudoInput" />
+						<input
+							:placeholder="t('forms', 'Other')"
+							class="question__input"
+							:maxlength="maxStringLengths.optionText"
+							minlength="1"
+							type="text"
+							:readonly="!readOnly" />
+					</li>
+					<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
+						<div :is="pseudoIcon" class="question__item__pseudoInput" />
+						<input
+							ref="pseudoInput"
+							class="question__input"
+							:aria-label="t('forms', 'Add a new answer')"
+							:placeholder="t('forms', 'Add a new answer')"
+							:maxlength="maxStringLengths.optionText"
+							minlength="1"
+							type="text"
+							@input="addNewEntry" />
+					</li>
+				</ul>
+			</template>
 		</template>
+
+		<!-- Add multiple options modal -->
+		<OptionInputDialog
+			:open.sync="isOptionDialogShown"
+			@multiple-answers="handleMultipleOptions" />
 	</Question>
 </template>
 
@@ -173,18 +191,23 @@ import { emit } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
+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 NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+
 import IconCheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
+import IconContentPaste from 'vue-material-design-icons/ContentPaste.vue'
 import IconRadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 import logger from '../../utils/Logger.js'
+import OptionInputDialog from '../OptionInputDialog.vue'
 
 const QUESTION_EXTRASETTINGS_OTHER_PREFIX = 'system-other-answer:'
 
@@ -194,12 +217,16 @@ export default {
 	components: {
 		AnswerInput,
 		IconCheckboxBlankOutline,
+		IconContentPaste,
 		IconRadioboxBlank,
+		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
 		NcCheckboxRadioSwitch,
 		NcInputField,
+		NcLoadingIcon,
 		NcNoteCard,
+		OptionInputDialog,
 	},
 
 	mixins: [QuestionMixin],
@@ -216,6 +243,9 @@ export default {
 			 */
 			cachedOtherAnswerText: '',
 			QUESTION_EXTRASETTINGS_OTHER_PREFIX,
+
+			isOptionDialogShown: false,
+			isLoading: false,
 		}
 	},
 
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index c75911fa8..d84f43b3d 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -26,6 +26,7 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 
 import logger from '../utils/Logger.js'
+import OcsResponse2Data from '../utils/OcsResponse2Data.js'
 import Question from '../components/Questions/Question.vue'
 
 export default {
@@ -376,5 +377,37 @@ export default {
 				showError(t('forms', 'Error while saving question'))
 			}
 		},
+
+		/**
+		 * Handles multiple options for a question.
+		 *
+		 * @param {Array<string>} answers - The array of answers for the question.
+		 */
+		async handleMultipleOptions(answers) {
+			const options = this.options.slice()
+			this.isLoading = true
+			for (let i = 0; i < answers.length; i++) {
+				const response = await axios.post(
+					generateOcsUrl('apps/forms/api/v2/option'),
+					{
+						questionId: this.id,
+						text: answers[i],
+					},
+				)
+				const newServerOption = OcsResponse2Data(response)
+				const option = {
+					id: newServerOption.id, // use the ID from the server
+					questionId: this.id,
+					text: answers[i],
+					local: false,
+				}
+				options.push(option)
+			}
+			this.updateOptions(options)
+			this.$nextTick(() => {
+				this.focusIndex(options.length - 1)
+			})
+			this.isLoading = false
+		},
 	},
 }