feat: downloading forms (#1425)

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,58 @@ export default {
 			}
 		}
 
+		const onDownloadForm = async (id) => {
+			try {
+				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: {
+						...form,
+						// Remove unused values
+						...[
+							'hash',
+							'ownerId',
+							'created',
+							'access',
+							'lastUpdated',
+							'lockedBy',
+							'lockedUntil',
+							'shares',
+							'permissions',
+							'canSubmit',
+							'isMaxSubmissionsReached',
+							'submissionCount',
+						].reduce((prev, curr) => {
+							prev[curr] = undefined
+							return prev
+						}, {}),
+
+						id: undefined,
+						questions: form.questions,
+					},
+				}
+				// 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()
+				URL.revokeObjectURL(url)
+			} catch (error) {
+				logger.error(`Unable to download form ${id}`, { error })
+				showError(t('forms', 'Unable to download form'))
+			}
+		}
+
 		const onDeleteForm = async (id) => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
 			const deletedHash = forms.value[formIndex].hash
@@ -513,6 +568,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)
 		},