feat: downloading forms

Signed-off-by: TimedIn <git@timedin.net>

Author: timedin-de

src/Forms.vue

@@ -32,6 +32,7 @@
 						@openSharing="openSharing"
 						@mobileCloseNavigation="mobileCloseNavigation"
 						@clone="onCloneForm"
+						@download="onDownloadForm"
 						@delete="onDeleteForm" />
 				</ul>
 			</template>
@@ -51,6 +52,7 @@
 						readOnly
 						@openSharing="openSharing"
 						@clone="onCloneForm"
+						@download="onDownloadForm"
 						@mobileCloseNavigation="mobileCloseNavigation" />
 				</ul>
 			</template>
@@ -170,6 +172,7 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import Sidebar from './views/Sidebar.vue'
 import FormsIcon from '../img/forms-dark.svg?raw'
+import { version } from '../package.json'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import { FormState } from './models/Constants.ts'
 import logger from './utils/Logger.js'
@@ -440,6 +443,60 @@ export default {
 			}
 		}
 
+		const onDownloadForm = async (id) => {
+			const response = await axios.get(
+				generateOcsUrl('apps/forms/api/v3/forms/{id}', {
+					id,
+				}),
+			)
+			const form = OcsResponse2Data(response)
+
+			// download only required values
+			const download = {
+				appVersion: version,
+				form: {
+					title: form.title,
+					description: form.description,
+					isAnonymous: form.isAnonymous,
+					submitMultiple: form.submitMultiple,
+					allowEditSubmissions: form.allowEditSubmissions,
+					showExpiration: form.showExpiration,
+					submissionMessage: form.submissionMessage,
+					maxSubmissions: form.maxSubmissions,
+					confirmationEmailEnabled: form.confirmationEmailEnabled,
+					confirmationEmailSubject: form.confirmationEmailSubject,
+					confirmationEmailBody: form.confirmationEmailBody,
+					confirmationEmailQuestionId: form.confirmationEmailQuestionId,
+					allowComments: form.allowComments,
+					questions: form.questions.map((question) => ({
+						type: question.type,
+						order: question.order,
+						isRequired: question.isRequired,
+						text: question.text,
+						name: question.name,
+						description: question.description,
+						extraSettings: question.extraSettings,
+						options: question.options.map((option) => ({
+							order: option.order,
+							text: option.text,
+							optionType: option.optionType,
+						})),
+						accept: question.accept,
+					})),
+				},
+			}
+			// create blob and download
+			const blob = new Blob([JSON.stringify(download)])
+			const url = URL.createObjectURL(blob)
+			const a = document.createElement('a')
+			a.href = url
+			const formTitle = form.title ? form.title : t('forms', 'New form')
+			a.download = `${formTitle}.json`
+			a.click()
+			a.remove()
+			URL.revokeObjectURL(url)
+		}
+
 		const onDeleteForm = async (id) => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
 			const deletedHash = forms.value[formIndex].hash
@@ -513,6 +570,7 @@ export default {
 			fetchPartialForm,
 			onNewForm,
 			onCloneForm,
+			onDownloadForm,
 			onDeleteForm,
 			onLastUpdatedByEventBus,
 			IconPlus,

src/components/AppNavigationForm.vue

@@ -64,6 +64,12 @@
 				</template>
 				{{ t('forms', 'Copy form') }}
 			</NcActionButton>
+			<NcActionButton v-if="canEdit" closeAfterClick @click="onDownloadForm">
+				<template #icon>
+					<NcIconSvgWrapper :svg="IconDownload" />
+				</template>
+				{{ t('forms', 'Download form') }}
+			</NcActionButton>
 			<NcActionSeparator v-if="canEdit && !readOnly" />
 			<NcActionButton
 				v-if="canEdit && !readOnly"
@@ -103,6 +109,7 @@ import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
 import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
 import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
 import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
+import IconDownload from '@material-symbols/svg-400/outlined/download.svg?raw'
 import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
 import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
 import IconArchiveOff from '@material-symbols/svg-400/outlined/unarchive.svg?raw'
@@ -154,7 +161,7 @@ export default {
 		},
 	},
 
-	emits: ['mobileCloseNavigation', 'openSharing', 'clone', 'delete'],
+	emits: ['mobileCloseNavigation', 'openSharing', 'clone', 'delete', 'download'],
 
 	setup() {
 		return {
@@ -164,6 +171,7 @@ export default {
 			IconCheck,
 			IconContentCopy,
 			IconDelete,
+			IconDownload,
 			IconPencil,
 			IconPoll,
 			IconShareVariant,
@@ -292,6 +300,10 @@ export default {
 			this.$emit('clone', this.form.id)
 		},
 
+		onDownloadForm() {
+			this.$emit('download', this.form.id)
+		},
+
 		async onConfirmDelete() {
 			const shouldDelete = await showConfirmation({
 				name: t('forms', 'Delete form'),

src/components/ArchivedFormsModal.vue

@@ -17,6 +17,7 @@
 				:form="form"
 				forceDisplayActions
 				@clone="onCloneForm(form.id)"
+				@download="onDownloadForm(form.id)"
 				@delete="onDelete(form)"
 				@mobileCloseNavigation="$emit('update:open', false)" />
 		</ul>
@@ -49,7 +50,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['update:open', 'clone'],
+	emits: ['update:open', 'clone', 'download'],
 
 	data() {
 		return {
@@ -74,6 +75,10 @@ export default defineComponent({
 			this.$emit('update:open', false)
 		},
 
+		onDownloadForm(formId) {
+			this.$emit('download', formId)
+		},
+
 		onDelete(form) {
 			this.shownForms = this.shownForms.filter(({ id }) => id !== form.id)
 		},