feat(PageList): add a "collapse all pages" action

playwright/e2e/page-list.spec.ts

@@ -140,3 +140,25 @@ test.describe('Page list drag and drop', () => {
 		await editor.hasCollectiveLink(page1.data.title)
 	})
 })
+
+test.describe('Page list collapse all', () => {
+	test('Collapse all pages but keep current page visible', async ({ page, user, collective, pageList }) => {
+		const parent = await collective.createPage({ title: 'Parent', user, page })
+		const child = await collective.createPage({ title: 'Child', parentId: parent.data.id, user, page })
+		await collective.createPage({ title: 'Grandchild', parentId: child.data.id, user, page })
+		const other = await collective.createPage({ title: 'Other', user, page })
+		await collective.createPage({ title: 'Other child', parentId: other.data.id, user, page })
+
+		await child.open()
+		await expect(pageList.getPageItem('Grandchild')).toBeVisible()
+		await pageList.toggleExpandPage('Other')
+		await expect(pageList.getPageItem('Other child')).toBeVisible()
+
+		await pageList.collapseAll()
+
+		// Parent of current page stays expanded, everything else collapses
+		await expect(pageList.getPageItem('Child')).toBeVisible()
+		await expect(pageList.getPageItem('Grandchild')).toHaveCount(0)
+		await expect(pageList.getPageItem('Other child')).toHaveCount(0)
+	})
+})

playwright/support/sections/PageListSection.ts

@@ -39,6 +39,11 @@ export class PageListSection {
 			.click()
 	}
 
+	public async collapseAll(): Promise<void> {
+		await this.el.getByRole('button', { name: 'Page list options' }).click()
+		await this.page.getByRole('menuitem', { name: 'Collapse all pages' }).click()
+	}
+
 	public async addPage(parentTitle: string): Promise <void> {
 		const item = this.getPageItem(parentTitle)
 		// The add-subpage button is only shown on hover

src/components/PageList.vue

@@ -47,13 +47,9 @@
 
 		<NcActions
 			class="toggle"
-			:aria-label="t('collectives', 'Sort order')">
+			:aria-label="t('collectives', 'Page list options')">
 			<template #icon>
-				<SortAscendingIcon v-if="sortedBy('byOrder')" :size="16" />
-				<SortAlphabeticalAscendingIcon v-else-if="sortedBy('byTitleAsc')" :size="16" />
-				<SortAlphabeticalDescendingIcon v-else-if="sortedBy('byTitleDesc')" :size="16" />
-				<SortClockAscendingIcon v-else-if="sortedBy('byTimeAsc')" :size="16" />
-				<SortClockDescendingIcon v-else :size="16" />
+				<FilterVariantIcon :size="20" />
 			</template>
 			<NcActionButton
 				class="toggle-button"
@@ -87,6 +83,17 @@
 				</template>
 				{{ sortedBy('byTitleAsc') ? t('collectives', 'Sort descending by title') : t('collectives', 'Sort ascending by title') }}
 			</NcActionButton>
+			<template v-if="!isFilteredView">
+				<NcActionSeparator />
+				<NcActionButton
+					closeAfterClick
+					@click="collapseAllAndScroll">
+					<template #icon>
+						<UnfoldLessHorizontalIcon :size="20" />
+					</template>
+					{{ t('collectives', 'Collapse all pages') }}
+				</NcActionButton>
+			</template>
 		</NcActions>
 
 		<NcButton
@@ -220,17 +227,20 @@ import { ref } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import FilterVariantIcon from 'vue-material-design-icons/FilterVariant.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import SortAlphabeticalAscendingIcon from 'vue-material-design-icons/SortAlphabeticalAscending.vue'
 import SortAlphabeticalDescendingIcon from 'vue-material-design-icons/SortAlphabeticalDescending.vue'
 import SortAscendingIcon from 'vue-material-design-icons/SortAscending.vue'
 import SortClockAscendingIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue'
 import SortClockDescendingIcon from 'vue-material-design-icons/SortClockDescendingOutline.vue'
+import UnfoldLessHorizontalIcon from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
 import DraggableElement from './PageList/DraggableElement.vue'
 import NewPageDialog from './PageList/NewPageDialog.vue'
 import PageFavorites from './PageList/PageFavorites.vue'
@@ -258,6 +268,7 @@ export default {
 	components: {
 		NcActionButton,
 		NcActions,
+		NcActionSeparator,
 		NcAppNavigationCaption,
 		NcButton,
 		NcPopover,
@@ -271,13 +282,15 @@ export default {
 		PageTag,
 		PageTrash,
 		PlusIcon,
+		RecycleScroller,
 		SubpageList,
 		SortAlphabeticalAscendingIcon,
 		SortAlphabeticalDescendingIcon,
 		SortAscendingIcon,
 		SortClockAscendingIcon,
 		SortClockDescendingIcon,
-		RecycleScroller,
+		FilterVariantIcon,
+		UnfoldLessHorizontalIcon,
 	},
 
 	mixins: [
@@ -486,7 +499,7 @@ export default {
 
 		...mapActions(useTagsStore, ['addFilterTagId', 'removeFilterTagId']),
 		...mapActions(useCollectivesStore, ['setCollectiveUserSettingPageOrder']),
-		...mapActions(usePagesStore, ['contentSearch', 'setPageOrder']),
+		...mapActions(usePagesStore, ['collapseAll', 'contentSearch', 'setPageOrder']),
 		...mapActions(useSearchStore, ['setSearchQuery']),
 
 		clearFilterString() {
@@ -516,6 +529,13 @@ export default {
 			})
 		},
 
+		collapseAllAndScroll() {
+			this.collapseAll()
+			this.$nextTick(() => {
+				scrollToPage(this.currentPageId)
+			})
+		},
+
 		updateScrollerHeights() {
 			const [filteredPagesScrollerMaxHeight, contentFilteredPagesScrollerMaxHeight] = this.scrollerMaxHeights
 			this.$nextTick(() => {

src/stores/pages.js

@@ -550,6 +550,16 @@ export const usePagesStore = defineStore('pages', {
 			}
 		},
 
+		// Collapse all pages of current collective except parents of current page
+		collapseAll() {
+			for (const page of this.pages) {
+				delete this.collapsed[page.id]
+			}
+			if (this.currentPage) {
+				this.expandParents(this.currentPage.parentId)
+			}
+		},
+
 		setNewPageParentId(id) {
 			this.newPageParentId = id
 		},