feat: add board import and export

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/navigation/AppNavigation.vue

@@ -42,6 +42,7 @@
 				</template>
 			</AppNavigationBoardCategory>
 			<AppNavigationAddBoard v-if="canCreate" />
+			<AppNavigationImportBoard v-if="canCreate" />
 		</template>
 		<template #footer>
 			<NcAppNavigationSettings :name="t('deck', 'Deck settings')">
@@ -116,6 +117,7 @@ import DeckIcon from './../icons/DeckIcon.vue'
 import ShareVariantIcon from 'vue-material-design-icons/Share.vue'
 import HelpModal from './../modals/HelpModal.vue'
 import { subscribe } from '@nextcloud/event-bus'
+import AppNavigationImportBoard from './AppNavigationImportBoard.vue'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -127,6 +129,7 @@ export default {
 		NcButton,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
+		AppNavigationImportBoard,
 		NcSelect,
 		NcAppNavigationItem,
 		ArchiveIcon,

src/components/navigation/AppNavigationBoard.vue

@@ -15,6 +15,10 @@
 		<template #icon>
 			<NcAppNavigationIconBullet :color="board.color" />
 			<BoardCloneModal v-if="cloneModalOpen" :board-title="board.title" @close="onCloseCloneModal" />
+			<BoardExportModal v-if="exportModalOpen"
+				:board-title="board.title"
+				@export="onExportBoard"
+				@close="onCloseExportBoard" />
 		</template>
 
 		<template #counter>
@@ -161,6 +165,8 @@ import { emit } from '@nextcloud/event-bus'
 
 import isTouchDevice from '../../mixins/isTouchDevice.js'
 import BoardCloneModal from './BoardCloneModal.vue'
+import BoardExportModal from './BoardExportModal.vue'
+import { showLoading } from '@nextcloud/dialogs'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -179,6 +185,7 @@ export default {
 		CloseIcon,
 		CheckIcon,
 		BoardCloneModal,
+		BoardExportModal,
 	},
 	directives: {
 		ClickOutside,
@@ -207,6 +214,7 @@ export default {
 			updateDueSetting: null,
 			canCreate: canCreateState,
 			cloneModalOpen: false,
+			exportModalOpen: false,
 		}
 	},
 	computed: {
@@ -346,7 +354,16 @@ export default {
 			this.updateDueSetting = null
 		},
 		actionExport() {
-			this.boardApi.exportBoard(this.board)
+			this.exportModalOpen = true
+		},
+		async onExportBoard(format) {
+			this.exportModalOpen = false
+			const loadingToast = showLoading(t('deck', 'Exporting board...'))
+			await this.boardApi.exportBoard(this.board, format)
+			loadingToast.hideToast()
+		},
+		onCloseExportBoard() {
+			this.exportModalOpen = false
 		},
 		onNavigate() {
 			if (this.isTouchDevice) {

src/components/navigation/AppNavigationImportBoard.vue

@@ -0,0 +1,55 @@
+<!--
+  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div>
+		<NcAppNavigationItem :name="t('deck', 'Import board')" icon="icon-upload" @click.prevent.stop="startImportBoard" />
+		<input ref="fileInput"
+			type="file"
+			accept="application/json"
+			style="display: none;"
+			@change="doImportBoard">
+	</div>
+</template>
+
+<script>
+import { NcAppNavigationItem } from '@nextcloud/vue'
+import { showError } from '../../helpers/errors.js'
+import { showSuccess, showLoading } from '@nextcloud/dialogs'
+
+export default {
+	name: 'AppNavigationImportBoard',
+	components: { NcAppNavigationItem },
+	props: {
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			value: '',
+		}
+	},
+	methods: {
+		startImportBoard() {
+			this.$refs.fileInput.value = ''
+			this.$refs.fileInput.click()
+		},
+		async doImportBoard(event) {
+			const file = event.target.files[0]
+			if (file) {
+				const loadingToast = showLoading(t('deck', 'Importing board...'))
+				const result = await this.$store.dispatch('importBoard', file)
+				loadingToast.hideToast()
+				if (result?.message) {
+					showError(result)
+				} else {
+					showSuccess(t('deck', 'Board imported successfully'))
+				}
+			}
+		},
+	},
+}
+</script>

src/components/navigation/BoardExportModal.vue

@@ -0,0 +1,78 @@
+<!--
+  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog :name="t('deck', 'Export {boardTitle}', {boardTitle: boardTitle})" @update:open="close">
+		<div class="modal__content">
+			<NcCheckboxRadioSwitch :checked.sync="exportFormat"
+				value="json"
+				type="radio"
+				name="board_export_format">
+				{{ t('deck', 'Export as JSON') }}
+			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch :checked.sync="exportFormat"
+				value="csv"
+				type="radio"
+				name="board_export_format">
+				{{ t('deck', 'Export as CSV') }}
+			</NcCheckboxRadioSwitch>
+
+			<p class="note">
+				{{ t('deck', 'Note: Only the JSON format is supported for importing back into the Deck app.') }}
+			</p>
+		</div>
+
+		<template #actions>
+			<NcButton @click="close">
+				{{ t('deck', 'Cancel') }}
+			</NcButton>
+			<NcButton type="primary" @click="exportBoard">
+				{{ t('deck', 'Export') }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcCheckboxRadioSwitch, NcDialog } from '@nextcloud/vue'
+
+export default {
+	name: 'BoardExportModal',
+	components: {
+		NcDialog,
+		NcCheckboxRadioSwitch,
+		NcButton,
+	},
+	props: {
+		boardTitle: {
+			type: String,
+			default: 'Board',
+		},
+	},
+	data() {
+		return {
+			exportFormat: 'json',
+		}
+	},
+	methods: {
+		exportBoard() {
+			this.$emit('export', this.exportFormat)
+			this.close()
+		},
+		close() {
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.modal__content {
+	margin: 20px;
+}
+
+p.note {
+	margin-top: 10px;
+}
+</style>