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

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/files/src/main.ts b/apps/files/src/main.ts
index 08fb3f562ab75149ce818c6fb53f5e212470ce96..fe3e2e172cba6f58955267e662592c2311ca5b70 100644 (file)
--- a/apps/files/src/main.ts
+++ b/apps/files/src/main.ts
@@ -3,8 +3,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia'
 import { getNavigation } from '@nextcloud/files'
 import { getRequestToken } from '@nextcloud/auth'
 
-import FilesListView from './views/FilesList.vue'
-import NavigationView from './views/Navigation.vue'
 import router from './router/router'
 import RouterService from './services/RouterService'
 import SettingsModel from './models/Setting.js'

diff --git a/apps/files/src/router/router.ts b/apps/files/src/router/router.ts
index 5bb8f90770b0195dea72f1b2c0f9cddc10f61f52..4fec332cddffb2b0271aace3abcefd0b68af39e7 100644 (file)
--- a/apps/files/src/router/router.ts
+++ b/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,
                },

diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 0895bd060abe982ca8187d6934aa35dcc50b7ae0..5ec650569b2d89063fe0041abadc1780898f5b5e 100644 (file)
--- a/apps/files/src/views/Navigation.vue
+++ b/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(view)"
                                :icon="view.iconClass"
                                :name="view.name"
                                :open="isExpanded(view)"
@@ -41,7 +41,7 @@
                                <NcAppNavigationItem v-for="child in childViews[view.id]"
                                        :key="child.id"
                                        :data-cy-files-navigation-item="child.id"
-                                       :exact="true"
+                                       :exact-path="true"
                                        :icon="child.iconClass"
                                        :name="child.name"
                                        :to="generateToNavigation(child)">
@@ -75,6 +75,8 @@
 </template>
 
 <script lang="ts">
+import type { View } from '@nextcloud/files'
+
 import { emit } from '@nextcloud/event-bus'
 import { translate } from '@nextcloud/l10n'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -85,7 +87,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 { View } from '@nextcloud/files'
 import NavigationQuota from '../components/NavigationQuota.vue'
 import SettingsModal from './Settings.vue'
 
@@ -120,7 +121,7 @@ export default {
                },
 
                currentView(): View {
-                       return this.views.find(view => view.id === this.currentViewId)
+                       return this.views.find(view => view.id === this.currentViewId)!
                },
 
                views(): View[] {
@@ -137,19 +138,19 @@ 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[]>)
                },
        },
 
@@ -157,7 +158,7 @@ export default {
                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)
                        }
@@ -172,6 +173,16 @@ export default {
        },
 
        methods: {
+               /**
+                * Only use exact route matching on routes with child views
+                * Because if a view does not have children (like the files view) then multiple routes might be matched for it
+                * Like for the 'files' view this does not work because of optional 'fileid' param so /files and /files/1234 are both in the 'files' view
+                * @param view The view to check
+                */
+               useExactRouteMatching(view: View) {
+                       return this.childViews[view.id]?.length > 0
+               },
+
                showView(view: View) {
                        // Closing any opened sidebar
                        window?.OCA?.Files?.Sidebar?.close?.()
@@ -183,7 +194,7 @@ export default {
                /**
                 * Expand/collapse a a view with children and permanently
                 * save this setting in the server.
-                * @param view
+                * @param view View to toggle
                 */
                onToggleExpand(view: View) {
                        // Invert state
@@ -196,7 +207,7 @@ export default {
                /**
                 * Check if a view is expanded by user config
                 * or fallback to the default value.
-                * @param view
+                * @param view View to check if expanded
                 */
                isExpanded(view: View): boolean {
                        return typeof this.viewConfigStore.getConfig(view.id)?.expanded === 'boolean'
@@ -206,7 +217,7 @@ export default {
 
                /**
                 * Generate the route to a view
-                * @param view
+                * @param view View to generate "to" navigation for
                 */
                generateToNavigation(view: View) {
                        if (view.params) {