fix(files): Set default view and match also child routes

Signed-off-by: Ferdinand Thiessen <[email protected]>

apps/files/src/router/router.ts

@@ -19,9 +19,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import type { RawLocation, Route } from 'vue-router'
+
 import { generateUrl } from '@nextcloud/router'
 import queryString from 'query-string'
-import Router, { RawLocation, Route } from 'vue-router'
+import Router from 'vue-router'
 import Vue from 'vue'
 import { ErrorHandler } from 'vue-router/types/router'
 
@@ -46,10 +48,10 @@ const router = new Router({
 		{
 			path: '/',
 			// Pretending we're using the default view
-			redirect: { name: 'filelist' },
+			redirect: { name: 'filelist', params: { view: 'files' } },
 		},
 		{
-			path: '/:view/:fileid?',
+			path: '/:view/:fileid(\\d+)?',
 			name: 'filelist',
 			props: true,
 		},

apps/files/src/views/Navigation.vue

@@ -25,9 +25,9 @@
 		<template #list>
 			<NcAppNavigationItem v-for="view in parentViews"
 				:key="view.id"
-				:allow-collapse="true"
+				allow-collapse
 				:data-cy-files-navigation-item="view.id"
-				:exact="true"
+				:exact="useExactRouteMatching"
 				:icon="view.iconClass"
 				:name="view.name"
 				:open="isExpanded(view)"
@@ -75,7 +75,10 @@
 </template>
 
 <script lang="ts">
-import { emit, subscribe } from '@nextcloud/event-bus'
+import type { Navigation, View } from '@nextcloud/files'
+import type { PropType } from 'vue'
+
+import { emit } from '@nextcloud/event-bus'
 import { translate } from '@nextcloud/l10n'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
@@ -85,7 +88,6 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import { setPageHeading } from '../../../../core/src/OCP/accessibility.js'
 import { useViewConfigStore } from '../store/viewConfig.ts'
 import logger from '../logger.js'
-import type { Navigation, View } from '@nextcloud/files'
 import NavigationQuota from '../components/NavigationQuota.vue'
 import SettingsModal from './Settings.vue'
 
@@ -104,7 +106,7 @@ export default {
 	props: {
 		// eslint-disable-next-line vue/prop-name-casing
 		Navigation: {
-			type: Object as Navigation,
+			type: Object as PropType<Navigation>,
 			required: true,
 		},
 	},
@@ -128,7 +130,15 @@ export default {
 		},
 
 		currentView(): View {
-			return this.views.find(view => view.id === this.currentViewId)
+			return this.views.find(view => view.id === this.currentViewId)!
+		},
+
+		/**
+		 * Wheather we want exact route matching for the active navigation entry in the app navigation sidebar
+		 * For the 'files' view this does not work because of optional 'fileid' param
+		 */
+		useExactRouteMatching() {
+			return this.currentViewId !== 'files'
 		},
 
 		views(): View[] {
@@ -145,27 +155,27 @@ export default {
 				})
 		},
 
-		childViews(): View[] {
+		childViews(): Record<string, View[]> {
 			return this.views
 				// filter parent views
 				.filter(view => !!view.parent)
 				// create a map of parents and their children
 				.reduce((list, view) => {
-					list[view.parent] = [...(list[view.parent] || []), view]
+					list[view.parent!] = [...(list[view.parent!] || []), view]
 					// Sort children by order
-					list[view.parent].sort((a, b) => {
+					list[view.parent!].sort((a, b) => {
 						return a.order - b.order
 					})
 					return list
-				}, {})
+				}, {} as Record<string, View[]>)
 		},
 	},
 
 	watch: {
 		currentView(view, oldView) {
 			if (view.id !== oldView?.id) {
 				this.Navigation.setActive(view)
-				logger.debug('Navigation changed', { id: view.id, view })
+				logger.debug(`Navigation changed from ${oldView.id} to ${view.id}`, { from: oldView, to: view })
 
 				this.showView(view)
 			}
@@ -191,6 +201,7 @@ export default {
 		/**
 		 * Expand/collapse a a view with children and permanently
 		 * save this setting in the server.
+		 * @param view View to toggle
 		 */
 		onToggleExpand(view: View) {
 			// Invert state
@@ -203,6 +214,7 @@ export default {
 		/**
 		 * Check if a view is expanded by user config
 		 * or fallback to the default value.
+		 * @param view View to check if expanded
 		 */
 		isExpanded(view: View): boolean {
 			return typeof this.viewConfigStore.getConfig(view.id)?.expanded === 'boolean'
@@ -212,6 +224,7 @@ export default {
 
 		/**
 		 * Generate the route to a view
+		 * @param view View to generate "to" navigation for
 		 */
 		generateToNavigation(view: View) {
 			if (view.params) {