feat: Allow to export or print single pages or pages with subpages

* Listen on printing shortcut to open print view for printing * Hide toastify dialogs when printing * Make sure background is removed Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Jul 28, 2023 · 50d77bc · 50d77bc
1 parent 2475b0f
commit 50d77bc
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 5 deletions.
diff --git a/src/components/Collective/CollectiveActions.vue b/src/components/Collective/CollectiveActions.vue
@@ -50,7 +50,7 @@
 		<NcActionSeparator v-if="collectiveCanShare(collective) && !isPublic" />
 		<NcActionLink :close-after-click="true"
 			:href="printLink"
-			target="_blank">
+			target="ncCollectivesPrint">
 			{{ t('collectives', 'Export or print') }}
 			<template #icon>
 				<DownloadIcon :size="20" />
@@ -142,6 +142,7 @@ export default {
 			'isCollectiveAdmin',
 			'isPublic',
 			'loading',
+			'printLink',
 		]),
 
 		circleLink() {
@@ -166,6 +167,10 @@ export default {
 				? generateUrl(`/apps/collectives/p/${this.shareTokenParam}/print/${this.collective.name}`)
 				: generateUrl(`/apps/collectives/_/print/${this.collective.name}`)
 		},
+
+		unshareIcon() {
+			return this.loading('unshare') ? 'icon-loading-small' : 'icon-public'
+		},
 	},
 
 	watch: {

diff --git a/src/components/CollectivePrint.vue b/src/components/CollectivePrint.vue
@@ -23,7 +23,7 @@
 				</ul>
 			</template>
 		</NcEmptyContent>
-		<div v-for="page in pagesTreeWalk()" v-show="!loading" :key="page.id">
+		<div v-for="page in pages" v-show="!loading" :key="page.id">
 			<PagePrint :page="page"
 				@loading="waitingFor.push(page.id)"
 				@ready="ready(page.id)" />
@@ -71,6 +71,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'currentCollective',
+			'currentPage',
 			'pagesTreeWalk',
 			'shareTokenParam',
 		]),
@@ -98,6 +99,14 @@ export default {
 
 			return parts.join(' - ')
 		},
+
+		/**
+		 * List of all pages, empty if pages not loaded
+		 */
+		pages() {
+			if (!this.currentPage) return []
+			return this.pagesTreeWalk(this.currentPage.parentId)
+		},
 	},
 
 	mounted() {
@@ -110,12 +119,12 @@ export default {
 		}),
 
 		/**
-		 * Get list of all pages
+		 * Fetch list of all pages
 		 */
 		async getPages() {
 			await this.dispatchGetPages()
 				.catch(displayError('Could not fetch pages'))
-			this.loadPages.total = this.pagesTreeWalk().length
+			this.loadPages.total = this.pagesTreeWalk(this.currentPage.parentId).length
 		},
 
 		ready(pageId) {

diff --git a/src/components/Page/PageActionMenu.vue b/src/components/Page/PageActionMenu.vue
@@ -68,6 +68,14 @@
 				</template>
 				{{ deletePageString }}
 			</NcActionButton>
+			<NcActionLink :close-after-click="true"
+				:href="printLink"
+				target="ncCollectivesPrint">
+				{{ t('collectives', 'Export or print') }}
+				<template #icon>
+					<DownloadIcon :size="20" />
+				</template>
+			</NcActionLink>
 			<NcActionSeparator v-if="lastUserId && lastUserDisplayName" />
 			<PageActionLastUser :last-user-id="lastUserId" :last-user-display-name="lastUserDisplayName" :timestamp="timestamp" />
 		</NcActions>
@@ -85,6 +93,7 @@ import { NcActions, NcActionButton, NcActionLink, NcActionSeparator } from '@nex
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import CollectiveActions from '../Collective/CollectiveActions.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import EmoticonOutlineIcon from 'vue-material-design-icons/EmoticonOutline.vue'
 import FormatListBulletedIcon from 'vue-material-design-icons/FormatListBulleted.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
@@ -104,6 +113,7 @@ export default {
 		NcActionLink,
 		NcActionSeparator,
 		DeleteIcon,
+		DownloadIcon,
 		EmoticonOutlineIcon,
 		FormatListBulletedIcon,
 		PagesTemplateIcon,
@@ -172,11 +182,17 @@ export default {
 			'hasSubpages',
 			'loading',
 			'pagesTreeWalk',
+			'pageById',
+			'pagePrintLink',
 			'showing',
 			'showTemplates',
 			'visibleSubpages',
 		]),
 
+		printLink() {
+			return this.pagePrintLink(this.pageById(this.pageId))
+		},
+
 		toggleOutlineString() {
 			return this.showing('outline')
 				? t('collectives', 'Hide outline')

diff --git a/src/components/PagePrint.vue b/src/components/PagePrint.vue
@@ -3,7 +3,7 @@
 		<h1 v-if="page.parentId === 0" id="page-title-collective" class="page-title page-title-collective">
 			{{ currentCollectiveTitle }}
 		</h1>
-		<h1 v-else class="page-title page-title-subpage">
+		<h1 v-else class="page-title" :class="{'page-title-subpage': currentPage.id !== page.id}">
 			{{ pageTitleString }}
 		</h1>
 		<RichTextReader v-if="pageContent"
@@ -53,6 +53,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'currentCollectiveTitle',
+			'currentPage',
 			'pageDavUrl',
 			'pageDirectory',
 			'isPublic',

diff --git a/src/router.js b/src/router.js
@@ -37,11 +37,13 @@ const routes = [
 		path: '/_/print/:collective',
 		component: CollectivePrintView,
 		props: (route) => route.params,
+		children: [{ path: ':page*' }],
 	},
 	{
 		path: '/p/:token/print/:collective',
 		component: CollectivePrintView,
 		props: (route) => route.params,
+		children: [{ path: ':page*' }],
 	},
 	{
 		path: '/p/:token/:collective',

diff --git a/src/store/pages.js b/src/store/pages.js
@@ -171,6 +171,14 @@ export default {
 			return state.pages.find(p => (p.parentId === parentId && p.title === TEMPLATE_PAGE))
 		},
 
+		pagePrintLink: (state, get) => (page) => {
+			const path = [page.collectivePath.split('/').at(-1), page.filePath.split('/'), page.fileName]
+			if (path.at(-1) === 'Readme.md') path.splice(-1, 1)
+			if (get.isPublic) path.splice(2, 0, 'print')
+			else path.splice(0, 0, '_', 'print')
+			return generateUrl(`/apps/collectives/${path.join('/')}`)
+		},
+
 		currentFileIdPage(state, _getters, rootState) {
 			const fileId = Number(rootState.route.query.fileId)
 			return state.pages.find(p => (p.id === fileId))

diff --git a/src/views/CollectivePrintView.vue b/src/views/CollectivePrintView.vue
@@ -47,6 +47,15 @@ export default {
 		height: fit-content;
 	}
 
+	html, body {
+		background: var(--color-main-background, white)!important;
+	}
+
+	/* hide toast notifications for printing */
+	.toastify.dialogs {
+		display: none;
+	}
+
 	#content-vue {
 		position: static;
 		overflow: visible;

diff --git a/src/views/CollectiveView.vue b/src/views/CollectiveView.vue
@@ -19,7 +19,9 @@
 <script>
 
 import { mapGetters, mapMutations } from 'vuex'
+import { showWarning } from '@nextcloud/dialogs'
 import { NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+
 import Collective from '../components/Collective.vue'
 import CollectiveNotFound from '../components/CollectiveNotFound.vue'
 import PageList from '../components/PageList.vue'
@@ -39,13 +41,43 @@ export default {
 	computed: {
 		...mapGetters([
 			'currentCollective',
+			'currentPage',
 			'loading',
+			'pagePrintLink',
 			'showing',
 		]),
 	},
 
+	mounted() {
+		window.addEventListener('keydown', this.printKeyHandler)
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('keydown', this.printKeyHandler)
+	},
+
 	methods: {
 		...mapMutations(['hide']),
+
+		/**
+		 * @param {KeyboardEvent} event the keydown event
+		 */
+		printKeyHandler(event) {
+			// Handle `CTRL+P` or `CMD+P` but ensure ALT or SHIFT are NOT pressed (e.g. CTRL+SHIFT+P is new private tab on firefox)
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'p' && !(event.altKey || event.shiftKey)) {
+				if (!this.currentPage) return
+
+				const handle = window.open(this.pagePrintLink(this.currentPage), 'ncCollectivesPrint')
+				if (handle === null) {
+					// This might happen because of popup blockers etc
+					showWarning(t('collectives', 'Could not open print view, try to disable any popup blockers.'))
+				} else {
+					handle.focus()
+					event.preventDefault()
+					event.stopImmediatePropagation()
+				}
+			}
+		},
 	},
 }
 </script>