From ba313d0c4806e6dd2fe87a46a909f4f0c2db4bc0 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 1 Apr 2025 18:54:12 +0200
Subject: [PATCH 1/2] feat: add board import and export

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

[skip ci]
---
 appinfo/routes.php                            |   1 +
 cypress/fixtures/import-board.json            | 102 ++++++++++++++++++
 lib/Controller/BoardController.php            |  62 +++++++++++
 src/components/navigation/AppNavigation.vue   |   3 +
 .../navigation/AppNavigationBoard.vue         |  11 +-
 .../navigation/AppNavigationImportBoard.vue   |  55 ++++++++++
 .../navigation/BoardExportModal.vue           |  78 ++++++++++++++
 src/services/BoardApi.js                      |  23 +++-
 .../Middleware/ExceptionMiddlewareTest.php    |  11 +-
 tests/unit/controller/BoardControllerTest.php |   7 ++
 10 files changed, 350 insertions(+), 3 deletions(-)
 create mode 100644 cypress/fixtures/import-board.json
 create mode 100644 src/components/navigation/AppNavigationImportBoard.vue
 create mode 100644 src/components/navigation/BoardExportModal.vue

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 0231397cbb..e96142db60 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -28,6 +28,7 @@
 		['name' => 'board#clone', 'url' => '/boards/{boardId}/clone', 'verb' => 'POST'],
 		['name' => 'board#transferOwner', 'url' => '/boards/{boardId}/transferOwner', 'verb' => 'PUT'],
 		['name' => 'board#export', 'url' => '/boards/{boardId}/export', 'verb' => 'GET'],
+		['name' => 'board#import', 'url' => '/boards/import', 'verb' => 'POST'],
 
 		// stacks
 		['name' => 'stack#index', 'url' => '/stacks/{boardId}', 'verb' => 'GET'],
diff --git a/cypress/fixtures/import-board.json b/cypress/fixtures/import-board.json
new file mode 100644
index 0000000000..be8b18f94f
--- /dev/null
+++ b/cypress/fixtures/import-board.json
@@ -0,0 +1,102 @@
+{
+  "boards": [
+    {
+      "id": 70,
+      "title": "Imported board",
+      "owner": "unvjrmwuag",
+      "color": "00ff00",
+      "archived": false,
+      "labels": [
+        {
+          "id": 293,
+          "title": "Finished",
+          "color": "31CC7C",
+          "boardId": 70,
+          "cardId": null,
+          "lastModified": 0,
+          "ETag": "cfcd208495d565ef66e7dff9f98764da"
+        },
+        {
+          "id": 294,
+          "title": "To review",
+          "color": "317CCC",
+          "boardId": 70,
+          "cardId": null,
+          "lastModified": 0,
+          "ETag": "cfcd208495d565ef66e7dff9f98764da"
+        },
+        {
+          "id": 295,
+          "title": "Action needed",
+          "color": "FF7A66",
+          "boardId": 70,
+          "cardId": null,
+          "lastModified": 0,
+          "ETag": "cfcd208495d565ef66e7dff9f98764da"
+        },
+        {
+          "id": 296,
+          "title": "Later",
+          "color": "F1DB50",
+          "boardId": 70,
+          "cardId": null,
+          "lastModified": 0,
+          "ETag": "cfcd208495d565ef66e7dff9f98764da"
+        }
+      ],
+      "acl": [],
+      "permissions": [],
+      "users": [],
+      "stacks": {
+        "114": {
+          "id": 114,
+          "title": "TestList",
+          "boardId": 70,
+          "deletedAt": 0,
+          "lastModified": 1743495533,
+          "cards": [
+            {
+              "id": 124,
+              "title": "Hello world",
+              "description": "# Hello world",
+              "descriptionPrev": null,
+              "stackId": 114,
+              "type": "plain",
+              "lastModified": 1743495533,
+              "lastEditor": null,
+              "createdAt": 1743495533,
+              "labels": [],
+              "assignedUsers": null,
+              "attachments": null,
+              "attachmentCount": null,
+              "owner": {
+                "primaryKey": "unvjrmwuag",
+                "uid": "unvjrmwuag",
+                "displayname": "unvjrmwuag",
+                "type": 0
+              },
+              "order": 999,
+              "archived": false,
+              "done": null,
+              "duedate": null,
+              "notified": false,
+              "deletedAt": 0,
+              "commentsUnread": 0,
+              "commentsCount": 0,
+              "relatedStack": null,
+              "relatedBoard": null,
+              "ETag": "aa85bb973089e7fbc0bbf122e926c23f"
+            }
+          ],
+          "order": 0,
+          "ETag": "aa85bb973089e7fbc0bbf122e926c23f"
+        }
+      },
+      "activeSessions": [],
+      "deletedAt": 0,
+      "lastModified": 1743495533,
+      "settings": [],
+      "ETag": "aa85bb973089e7fbc0bbf122e926c23f"
+    }
+  ]
+}
diff --git a/lib/Controller/BoardController.php b/lib/Controller/BoardController.php
index 3b60a457de..1065da2441 100644
--- a/lib/Controller/BoardController.php
+++ b/lib/Controller/BoardController.php
@@ -9,10 +9,12 @@
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\Board;
 use OCA\Deck\Service\BoardService;
+use OCA\Deck\Service\Importer\BoardImportService;
 use OCA\Deck\Service\PermissionService;
 use OCP\AppFramework\ApiController;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
+use OCP\IL10N;
 use OCP\IRequest;
 
 class BoardController extends ApiController {
@@ -21,6 +23,8 @@ public function __construct(
 		IRequest $request,
 		private BoardService $boardService,
 		private PermissionService $permissionService,
+		private BoardImportService $boardImportService,
+		private IL10N $l10n,
 		private $userId,
 	) {
 		parent::__construct($appName, $request);
@@ -162,4 +166,62 @@ public function transferOwner(int $boardId, string $newOwner): DataResponse {
 	public function export($boardId) {
 		return $this->boardService->export($boardId);
 	}
+
+	/**
+	 * @NoAdminRequired
+	 */
+	public function import(): DataResponse {
+		$file = $this->request->getUploadedFile('file');
+		$error = null;
+		$phpFileUploadErrors = [
+			UPLOAD_ERR_OK => $this->l10n->t('The file was uploaded'),
+			UPLOAD_ERR_INI_SIZE => $this->l10n->t('The uploaded file exceeds the upload_max_filesize directive in php.ini'),
+			UPLOAD_ERR_FORM_SIZE => $this->l10n->t('The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form'),
+			UPLOAD_ERR_PARTIAL => $this->l10n->t('The file was only partially uploaded'),
+			UPLOAD_ERR_NO_FILE => $this->l10n->t('No file was uploaded'),
+			UPLOAD_ERR_NO_TMP_DIR => $this->l10n->t('Missing a temporary folder'),
+			UPLOAD_ERR_CANT_WRITE => $this->l10n->t('Could not write file to disk'),
+			UPLOAD_ERR_EXTENSION => $this->l10n->t('A PHP extension stopped the file upload'),
+		];
+
+		if (empty($file)) {
+			$error = $this->l10n->t('No file uploaded or file size exceeds maximum of %s', [\OCP\Util::humanFileSize(\OCP\Util::uploadLimit())]);
+		}
+		if (!empty($file) && array_key_exists('error', $file) && $file['error'] !== UPLOAD_ERR_OK) {
+			$error = $phpFileUploadErrors[$file['error']];
+		}
+		if (!empty($file) && $file['error'] === UPLOAD_ERR_OK && !in_array($file['type'], ['application/json', 'text/plain'])) {
+			$error = $this->l10n->t('Invalid file type. Only JSON files are allowed.');
+		}
+		if ($error !== null) {
+			return new DataResponse([
+				'status' => 'error',
+				'message' => $error,
+			], Http::STATUS_BAD_REQUEST);
+		}
+
+		try {
+			$fileContent = file_get_contents($file['tmp_name']);
+			$this->boardImportService->setSystem('DeckJson');
+			$config = new \stdClass();
+			$config->owner = $this->userId;
+			$this->boardImportService->setConfigInstance($config);
+			$this->boardImportService->setData(json_decode($fileContent));
+			$this->boardImportService->import();
+			$importedBoard = $this->boardImportService->getBoard();
+			$board = $this->boardService->find($importedBoard->getId());
+
+			return new DataResponse($board, Http::STATUS_OK);
+		} catch (\TypeError $e) {
+			return new DataResponse([
+				'status' => 'error',
+				'message' => $this->l10n->t('Invalid JSON data'),
+			], Http::STATUS_BAD_REQUEST);
+		} catch (\Exception $e) {
+			return new DataResponse([
+				'status' => 'error',
+				'message' => $this->l10n->t('Failed to import board'),
+			], Http::STATUS_BAD_REQUEST);
+		}
+	}
 }
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 013c268446..edab125fb0 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/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,
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index fe93162461..9abdb25c77 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -340,7 +340,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) {
diff --git a/src/components/navigation/AppNavigationImportBoard.vue b/src/components/navigation/AppNavigationImportBoard.vue
new file mode 100644
index 0000000000..bd8d9f001a
--- /dev/null
+++ b/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>
diff --git a/src/components/navigation/BoardExportModal.vue b/src/components/navigation/BoardExportModal.vue
new file mode 100644
index 0000000000..10a3544178
--- /dev/null
+++ b/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>
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index 14e0b923f4..708d5218fc 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -132,7 +132,7 @@ export class BoardApi {
 		}
 	}
 
-	exportBoard(board) {
+	exportBoard(board, format) {
 		return axios.get(this.url(`/boards/${board.id}/export`))
 			.then(
 				(response) => {
@@ -197,6 +197,27 @@ export class BoardApi {
 			})
 	}
 
+	importBoard(file) {
+		const formData = new FormData()
+		formData.append('file', file)
+		return axios.post(this.url('/boards/import'), formData, {
+			headers: {
+				'Content-Type': 'multipart/form-data',
+			},
+		})
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				},
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	// Label API Calls
 	deleteLabel(id) {
 		return axios.delete(this.url(`/labels/${id}`))
diff --git a/tests/unit/Middleware/ExceptionMiddlewareTest.php b/tests/unit/Middleware/ExceptionMiddlewareTest.php
index 546d645f9a..261fef0f6d 100644
--- a/tests/unit/Middleware/ExceptionMiddlewareTest.php
+++ b/tests/unit/Middleware/ExceptionMiddlewareTest.php
@@ -28,6 +28,7 @@
 use OCA\Deck\NoPermissionException;
 use OCA\Deck\NotFoundException;
 use OCA\Deck\Service\BoardService;
+use OCA\Deck\Service\Importer\BoardImportService;
 use OCA\Deck\Service\PermissionService;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
@@ -86,7 +87,15 @@ public function testAfterExceptionNoController() {
 	public function testAfterExceptionFail() {
 		$this->request->expects($this->any())->method('getId')->willReturn('abc123');
 		// BoardService $boardService, PermissionService $permissionService, $userId
-		$boardController = new BoardController('deck', $this->createMock(IRequest::class), $this->createMock(BoardService::class), $this->createMock(PermissionService::class), 'admin');
+		$boardController = new BoardController(
+			'deck',
+			$this->createMock(IRequest::class),
+			$this->createMock(BoardService::class),
+			$this->createMock(PermissionService::class),
+			$this->createMock(BoardImportService::class),
+			$this->createMock(\OCP\IL10N::class),
+			'admin'
+		);
 		$result = $this->exceptionMiddleware->afterException($boardController, 'bar', new \Exception('other exception message'));
 		$this->assertEquals('Internal server error: Please contact the server administrator if this error reappears multiple times, please include the request ID "abc123" below in your report.', $result->getData()['message']);
 		$this->assertEquals(500, $result->getData()['status']);
diff --git a/tests/unit/controller/BoardControllerTest.php b/tests/unit/controller/BoardControllerTest.php
index 402fc72bc2..5be7018e4e 100644
--- a/tests/unit/controller/BoardControllerTest.php
+++ b/tests/unit/controller/BoardControllerTest.php
@@ -35,6 +35,7 @@ class BoardControllerTest extends \Test\TestCase {
 	private $groupManager;
 	private $boardService;
 	private $permissionService;
+	private $boardImportService;
 	private $userId = 'user';
 
 	public function setUp(): void {
@@ -62,6 +63,10 @@ public function setUp(): void {
 			'\OCA\Deck\Service\PermissionService')
 			->disableOriginalConstructor()
 			->getMock();
+		$this->boardImportService = $this->getMockBuilder(
+			'\OCA\Deck\Service\Importer\BoardImportService')
+			->disableOriginalConstructor()
+			->getMock();
 
 		$user = $this->createMock(IUser::class);
 		$this->groupManager->method('getUserGroupIds')
@@ -75,6 +80,8 @@ public function setUp(): void {
 			$this->request,
 			$this->boardService,
 			$this->permissionService,
+			$this->boardImportService,
+			$this->l10n,
 			$this->userId
 		);
 	}

From 423bd7ec252ffe0aa38cd034d334390b97bcfa2d Mon Sep 17 00:00:00 2001
From: silver <s.szmajduch@posteo.de>
Date: Tue, 20 Oct 2026 13:24:04 +0200
Subject: [PATCH 2/2] fix(backport): add missing import/export changes

- Wire up BoardExportModal in AppNavigationBoard
- Add JSON export to BoardApi.exportBoard
- Add importBoard store action
- Add board import/export Cypress tests
- Use showMessage instead of showLoading (not in @nextcloud/dialogs 5.x)

Signed-off-by: silver <s.szmajduch@posteo.de>
Assisted-by: ClaudeCode:claude-opus-5.5
---
 cypress/e2e/boardFeatures.js                  | 79 +++++++++++++++++++
 .../navigation/AppNavigationBoard.vue         | 14 +++-
 .../navigation/AppNavigationImportBoard.vue   |  4 +-
 src/services/BoardApi.js                      | 19 +++++
 src/store/main.js                             |  8 ++
 5 files changed, 120 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/boardFeatures.js b/cypress/e2e/boardFeatures.js
index 1e3bf752eb..75e90f3910 100644
--- a/cypress/e2e/boardFeatures.js
+++ b/cypress/e2e/boardFeatures.js
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { randUser } from '../utils/index.js'
+import { sampleBoard } from '../utils/sampleBoard.js'
 const user = randUser()
 const recipient = randUser()
 
@@ -58,3 +59,81 @@ describe('Board', function() {
 			.should('be.visible')
 	})
 })
+
+describe('Board export', function() {
+	before(function() {
+		cy.createUser(user)
+	})
+
+	it('Exports a board as JSON', function() {
+		const boardName = 'Export JSON board'
+		const board = sampleBoard(boardName)
+		cy.createExampleBoard({ user, board }).then((board) => {
+			const boardId = board.id
+			cy.visit(`/apps/deck/board/${boardId}`)
+			cy.get('.app-navigation__list .app-navigation-entry:contains("' + boardName + '")')
+				.parent()
+				.find('button[aria-label="Actions"]')
+				.click()
+			cy.get('button:contains("Export board")')
+				.click()
+			cy.get('.modal-container .checkbox-radio-switch__text:contains("Export as JSON")')
+				.click()
+			cy.get('.modal-container button:contains("Export")')
+				.click()
+
+			const downloadsFolder = Cypress.config('downloadsFolder')
+			cy.readFile(`${downloadsFolder}/${boardName}.json`)
+		})
+	})
+
+	it('Exports a board as CSV', function() {
+		const boardName = 'Export CSV board'
+		const board = sampleBoard(boardName)
+		cy.createExampleBoard({ user, board }).then((board) => {
+			const boardId = board.id
+			cy.visit(`/apps/deck/board/${boardId}`)
+			cy.get('.app-navigation__list .app-navigation-entry:contains("' + boardName + '")')
+				.parent()
+				.find('button[aria-label="Actions"]')
+				.click()
+			cy.get('button:contains("Export board")')
+				.click()
+			cy.get('.modal-container .checkbox-radio-switch__text:contains("Export as CSV")')
+				.click()
+			cy.get('.modal-container button:contains("Export")')
+				.click()
+
+			const downloadsFolder = Cypress.config('downloadsFolder')
+			cy.readFile(`${downloadsFolder}/${boardName}.csv`)
+		})
+	})
+})
+
+describe('Board import', function() {
+	before(function() {
+		cy.createUser(user)
+	})
+	beforeEach(function() {
+		cy.login(user)
+		cy.visit('/apps/deck')
+	})
+
+	it('Imports a board from JSON', function() {
+		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry:contains("Import board")')
+			.should('be.visible')
+			.click()
+
+		// Upload a JSON file
+		cy.get('input[type="file"]')
+			.selectFile([
+				{
+					contents: 'cypress/fixtures/import-board.json',
+					fileName: 'import-board.json',
+				},
+			], { force: true })
+
+		cy.get('.app-navigation__list .app-navigation-entry:contains("Imported board")')
+			.should('be.visible')
+	})
+})
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 9abdb25c77..626aef390a 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -12,7 +12,13 @@
 		:force-display-actions="isTouchDevice"
 		@click="onNavigate"
 		@undo="unDelete">
-		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
+		<template #icon>
+			<NcAppNavigationIconBullet :color="board.color" />
+			<BoardExportModal v-if="exportModalOpen"
+				:board-title="board.title"
+				@export="onExportBoard"
+				@close="onCloseExportBoard" />
+		</template>
 
 		<template #counter>
 			<AccountIcon v-if="board.acl.length > 0" />
@@ -157,6 +163,8 @@ import { loadState } from '@nextcloud/initial-state'
 import { emit } from '@nextcloud/event-bus'
 
 import isTouchDevice from '../../mixins/isTouchDevice.js'
+import BoardExportModal from './BoardExportModal.vue'
+import { showMessage, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -174,6 +182,7 @@ export default {
 		CloneIcon,
 		CloseIcon,
 		CheckIcon,
+		BoardExportModal,
 	},
 	directives: {
 		ClickOutside,
@@ -201,6 +210,7 @@ export default {
 			isDueSubmenuActive: false,
 			updateDueSetting: null,
 			canCreate: canCreateState,
+			exportModalOpen: false,
 		}
 	},
 	computed: {
@@ -344,7 +354,7 @@ export default {
 		},
 		async onExportBoard(format) {
 			this.exportModalOpen = false
-			const loadingToast = showLoading(t('deck', 'Exporting board...'))
+			const loadingToast = showMessage(t('deck', 'Exporting board...'), { timeout: TOAST_PERMANENT_TIMEOUT })
 			await this.boardApi.exportBoard(this.board, format)
 			loadingToast.hideToast()
 		},
diff --git a/src/components/navigation/AppNavigationImportBoard.vue b/src/components/navigation/AppNavigationImportBoard.vue
index bd8d9f001a..30109ab5a8 100644
--- a/src/components/navigation/AppNavigationImportBoard.vue
+++ b/src/components/navigation/AppNavigationImportBoard.vue
@@ -16,7 +16,7 @@
 <script>
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import { showError } from '../../helpers/errors.js'
-import { showSuccess, showLoading } from '@nextcloud/dialogs'
+import { showSuccess, showMessage, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
 export default {
 	name: 'AppNavigationImportBoard',
@@ -40,7 +40,7 @@ export default {
 		async doImportBoard(event) {
 			const file = event.target.files[0]
 			if (file) {
-				const loadingToast = showLoading(t('deck', 'Importing board...'))
+				const loadingToast = showMessage(t('deck', 'Importing board...'), { timeout: TOAST_PERMANENT_TIMEOUT })
 				const result = await this.$store.dispatch('importBoard', file)
 				loadingToast.hideToast()
 				if (result?.message) {
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index 708d5218fc..f32454d4e2 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -136,6 +136,25 @@ export class BoardApi {
 		return axios.get(this.url(`/boards/${board.id}/export`))
 			.then(
 				(response) => {
+					if (format === 'json') {
+						const exportData = {
+							boards: [response.data],
+						}
+						const stacks = {}
+						for (const stack of response.data.stacks) {
+							stacks[stack.id] = stack
+						}
+						exportData.boards[0].stacks = stacks
+						const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+						const blobUrl = URL.createObjectURL(blob)
+						const a = document.createElement('a')
+						a.href = blobUrl
+						a.download = response.data.title + '.json'
+						a.click()
+						a.remove()
+						return Promise.resolve()
+					}
+
 					const fields = { title: t('deck', 'Card title'), description: t('deck', 'Description'), stackId: t('deck', 'List name'), labels: t('deck', 'Tags'), duedate: t('deck', 'Due date'), createdAt: t('deck', 'Created'), lastModified: t('deck', 'Modified') }
 					let row = ''
 					Object.keys(fields).forEach(field => {
diff --git a/src/store/main.js b/src/store/main.js
index 19dcf4b784..f2f8f2700b 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -409,6 +409,14 @@ export default function storeFactory() {
 					return err
 				}
 			},
+			async importBoard({ commit }, file) {
+				try {
+					const board = await apiClient.importBoard(file)
+					commit('addBoard', board)
+				} catch (err) {
+					return err
+				}
+			},
 			async cloneBoard({ commit }, boardData) {
 				try {
 					const newBoard = await apiClient.cloneBoard(boardData)