feat: copy questions from another form #3636

Original file line number	Diff line number	Diff line change
Expand Up		@@ -570,9 +570,14 @@ public function newQuestion(int $formId, ?string $type = null, ?string $subtype

		try {
		$sourceQuestion = $this->questionMapper->findById($fromId);
	// Only allow cloning questions that belong to the same form
	// A question may be cloned from another form, but only from one the user is
	// allowed to edit. Without that check any question could be read out of any
	// form by guessing ids.
		if ($sourceQuestion->getFormId() !== $formId) {
	throw new OCSBadRequestException('Question doesn\'t belong to given form');
	$this->formsService->getFormIfAllowed(
	$sourceQuestion->getFormId(),
	Constants::PERMISSION_EDIT,
	);
		}
		$sourceOptions = $this->optionMapper->findByQuestion($fromId);
		} catch (IMapperException) {
Expand All		@@ -584,12 +589,19 @@ public function newQuestion(int $formId, ?string $type = null, ?string $subtype

		$questionData = $sourceQuestion->read();
		unset($questionData['id']);
	// read() carries the source question's formId, so a clone taken from another
	// form would otherwise be created back in that form rather than this one.
	$questionData['formId'] = $formId;

		if ($position !== null) {
		$position = $this->shiftQuestionsForInsert($allQuestions, $position);
		$questionData['order'] = $position;
		} else {
	$questionData['order'] = end($allQuestions)->getOrder() + 1;
	// Append at the end. The target form may have no questions yet -- the usual
	// case when copying into a new form -- and end() of an empty list is false,
	// not a question.
	$lastQuestion = end($allQuestions);
	$questionData['order'] = $lastQuestion ? $lastQuestion->getOrder() + 1 : 1;
		}

		$newQuestion = Question::fromParams($questionData);
Expand Down

332 changes: 332 additions & 0 deletions src/components/ImportQuestionsDialog.vue

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,332 @@
	<!--
	- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
	- SPDX-License-Identifier: AGPL-3.0-or-later
	-->

	<template>
	<NcDialog
	:open="open"
	:name="t('forms', 'Import questions')"
	size="normal"
	@update:open="$emit('update:open', $event)">
	<div class="import">
	<NcLoadingIcon v-if="loadingForms" :size="32" />

	<NcEmptyContent
	v-else-if="otherForms.length === 0"
	:name="t('forms', 'No other forms to import from')">
	<template #description>
	{{
	t(
	'forms',
	'Questions can be imported from any form you are able to edit.',
	)
	}}
	</template>
	</NcEmptyContent>

	<template v-else>
	<label class="import__row">
	<span>{{ t('forms', 'Copy from') }}</span>
	<select
	:value="selectedFormId ?? ''"
	:aria-label="t('forms', 'Form to copy questions from')"
	@change="onSelectForm">
	<option disabled value="">
	{{ t('forms', 'Choose a form') }}
	</option>
	<option
	v-for="candidate in otherForms"
	:key="candidate.id"
	:value="candidate.id">
	{{ candidate.title \|\| t('forms', 'Untitled form') }}
	</option>
	</select>
	</label>

	<NcLoadingIcon v-if="loadingQuestions" :size="32" />

	<template v-else-if="selectedFormId">
	<p v-if="questions.length === 0" class="import__empty">
	{{ t('forms', 'That form has no questions to copy.') }}
	</p>
	<template v-else>
	<NcCheckboxRadioSwitch
	:modelValue="allChosen"
	@update:modelValue="onToggleAll">
	{{ t('forms', 'Select all') }}
	</NcCheckboxRadioSwitch>
	<ul class="import__list">
	<li v-for="question in questions" :key="question.id">
	<NcCheckboxRadioSwitch
	:modelValue="chosen.includes(question.id)"
	@update:modelValue="
	onToggle(question.id, $event)
	">
	{{
	question.text
	\|\| t('forms', 'Untitled question')
	}}
	<span class="import__type">
	{{ typeLabel(question.type) }}
	</span>
	</NcCheckboxRadioSwitch>
	</li>
	</ul>
	</template>
	</template>
	</template>
	</div>

	<template #actions>
	<NcButton
	:disabled="chosen.length === 0 \|\| importing"
	variant="primary"
	@click="onImport">
	<template v-if="importing" #icon>
	<NcLoadingIcon :size="20" />
	</template>
	{{ t('forms', 'Copy') }}
	</NcButton>
	</template>
	</NcDialog>
	</template>

	<script lang="ts">
	import type { PropType } from 'vue'
	import type { FormsForm, FormsQuestion } from '../types/Entities.d.ts'

	import axios from '@nextcloud/axios'
	import { showError } from '@nextcloud/dialogs'
	import { t } from '@nextcloud/l10n'
	import { generateOcsUrl } from '@nextcloud/router'
	import { computed, defineComponent, ref, watch } from 'vue'
	import NcButton from '@nextcloud/vue/components/NcButton'
	import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
	import NcDialog from '@nextcloud/vue/components/NcDialog'
	import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
	import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
	import answerTypes from '../models/AnswerTypes.ts'
	import logger from '../utils/Logger.ts'
	import OcsResponse2Data from '../utils/OcsResponse2Data.ts'

	export default defineComponent({
	name: 'ImportQuestionsDialog',

	components: {
	NcButton,
	NcCheckboxRadioSwitch,
	NcDialog,
	NcEmptyContent,
	NcLoadingIcon,
	},

	props: {
	open: {
	type: Boolean,
	default: false,
	},

	formId: {
	type: Number as PropType<number>,
	required: true,
	},
	},

	emits: ['update:open', 'imported'],

	setup(props, { emit }) {
	const forms = ref<FormsForm[]>([])
	const questions = ref<FormsQuestion[]>([])
	const chosen = ref<number[]>([])
	const selectedFormId = ref<number \| null>(null)
	const loadingForms = ref(false)
	const loadingQuestions = ref(false)
	const importing = ref(false)

	const otherForms = computed(() =>
	forms.value.filter((form) => form.id !== props.formId),
	)

	const allChosen = computed(
	() =>
	questions.value.length > 0
	&& chosen.value.length === questions.value.length,
	)

	/**
	* @param type the answer type
	*/
	function typeLabel(type: string): string {
	return answerTypes[type]?.label ?? type
	}

	/**
	*
	*/
	async function loadForms(): Promise<void> {
	loadingForms.value = true
	try {
	const response = await axios.get(
	generateOcsUrl('apps/forms/api/v3/forms'),
	)
	forms.value = OcsResponse2Data(response) ?? []
	} catch (error) {
	logger.error('Could not load forms to import from', { error })
	showError(t('forms', 'Could not load your forms'))
	} finally {
	loadingForms.value = false
	}
	}

	/**
	* @param event the select change
	*/
	async function onSelectForm(event: Event): Promise<void> {
	selectedFormId.value = Number((event.target as HTMLSelectElement).value)
	chosen.value = []
	loadingQuestions.value = true
	try {
	const response = await axios.get(
	generateOcsUrl('apps/forms/api/v3/forms/{id}', {
	id: selectedFormId.value,
	}),
	)
	questions.value = OcsResponse2Data(response)?.questions ?? []
	} catch (error) {
	logger.error('Could not load questions to import', { error })
	showError(t('forms', 'Could not load the questions of that form'))
	questions.value = []
	} finally {
	loadingQuestions.value = false
	}
	}

	/**
	* @param questionId the question toggled
	* @param selected its new state
	*/
	function onToggle(questionId: number, selected: boolean): void {
	chosen.value = selected
	? [...chosen.value, questionId]
	: chosen.value.filter((id) => id !== questionId)
	}

	/**
	* @param selected whether to select every question
	*/
	function onToggleAll(selected: boolean): void {
	chosen.value = selected ? questions.value.map((q) => q.id) : []
	}

	/**
	*
	*/
	async function onImport(): Promise<void> {
	importing.value = true
	const created = []
	try {
	// Sequential rather than parallel: each copy is appended at the end of the
	// form, so firing them at once would give an unpredictable order.
	for (const question of questions.value) {
	if (!chosen.value.includes(question.id)) {
	continue
	}
	const response = await axios.post(
	generateOcsUrl('apps/forms/api/v3/forms/{id}/questions', {
	id: props.formId,
	}),
	{ fromId: question.id },
	)
	created.push(OcsResponse2Data(response))
	}
	emit('imported', created)
	emit('update:open', false)
	} catch (error) {
	logger.error('Could not import questions', { error })
	// Some may already have been copied, so do not imply that none were.
	showError(
	created.length
	? t('forms', 'Only some questions could be copied')
	: t('forms', 'Could not copy the questions'),
	)
	if (created.length) {
	emit('imported', created)
	}
	} finally {
	importing.value = false
	}
	}

	watch(
	() => props.open,
	(isOpen) => {
	if (isOpen) {
	loadForms()
	}
	},
	{ immediate: true },
	)

	return {
	allChosen,
	chosen,
	importing,
	loadingForms,
	loadingQuestions,
	onImport,
	onSelectForm,
	onToggle,
	onToggleAll,
	otherForms,
	questions,
	selectedFormId,
	t,
	typeLabel,
	}
	},
	})
	</script>

	<style lang="scss" scoped>
	.import {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 120px;

	&__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	select {
	flex: 1 1 12ch;
	min-height: var(--default-clickable-area);
	min-width: 0;
	}
	}

	&__list {
	max-height: 320px;
	overflow-y: auto;
	}

	&__type {
	color: var(--color-text-maxcontrast);
	margin-inline-start: 8px;
	}

	&__empty {
	color: var(--color-text-maxcontrast);
	}

	@media (max-width: 512px) {
	&__row {
	align-items: stretch;
	flex-direction: column;
	}
	}
	}
	</style>

Navigation Menu

Uh oh!

feat: copy questions from another form #3636

Are you sure you want to change the base?

Uh oh!

feat: copy questions from another form #3636

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!