Add multiple options with one paste #337

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

src/components/OptionInputDialog.vue

@@ -0,0 +1,138 @@
+<!--
+  - @copyright Copyright (c) 2024 Christian Hartmann <chris-hartmann@gmx.de>
+  -
+  - @author Christian Hartmann <[email protected]>
+  -
+  - @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>

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