From 2bec9e18861b64f7ec6446731035b8b326b94abd Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 12 Jul 2023 17:47:16 +0200
Subject: [PATCH] [web] Use named route for the browse page

Switching to named routes in order to reduce future maintenance.
---
 web-src/src/components/TabsMusic.vue |  2 +-
 web-src/src/pages/PageBrowse.vue     | 22 ++++++++--------------
 web-src/src/router/index.js          | 24 ++++++++++++------------
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index a3052ddb..60837694 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -7,7 +7,7 @@
             <ul>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/browse"
+                :to="{ name: 'music-browse' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
diff --git a/web-src/src/pages/PageBrowse.vue b/web-src/src/pages/PageBrowse.vue
index 8314a710..522b436b 100644
--- a/web-src/src/pages/PageBrowse.vue
+++ b/web-src/src/pages/PageBrowse.vue
@@ -13,10 +13,10 @@
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_browse('recently_added')"
+            <router-link
               v-text="$t('page.browse.show-more')"
+              class="button is-light is-small is-rounded"
+              :to="{ name: 'music-browse-recently-added' }"
             />
           </p>
         </nav>
@@ -37,10 +37,10 @@
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_browse('recently_played')"
+            <router-link
               v-text="$t('page.browse.show-more')"
+              class="button is-light is-small is-rounded"
+              :to="{ name: 'music-browse-recently-played' }"
             />
           </p>
         </nav>
@@ -51,11 +51,11 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
+import { GroupByList } from '@/lib/GroupByList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ListTracks from '@/components/ListTracks.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -107,12 +107,6 @@ export default {
       show_track_details_modal: false,
       selected_track: {}
     }
-  },
-
-  methods: {
-    open_browse(type) {
-      this.$router.push({ path: '/music/browse/' + type })
-    }
   }
 }
 </script>
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 06f3bc20..c46f2735 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -10,6 +10,9 @@ import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
+import PageBrowse from '@/pages/PageBrowse.vue'
+import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
+import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@@ -25,9 +28,6 @@ import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
 import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
-import PageBrowse from '@/pages/PageBrowse.vue'
-import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
-import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
 import PageComposers from '@/pages/PageComposers.vue'
 import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
@@ -115,22 +115,22 @@ export const router = createRouter({
       redirect: '/music/browse'
     },
     {
-      path: '/music/browse',
-      name: 'Browse',
       component: PageBrowse,
-      meta: { show_progress: true, has_tabs: true }
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-browse',
+      path: '/music/browse'
     },
     {
-      path: '/music/browse/recently_added',
-      name: 'Browse Recently Added',
       component: PageBrowseRecentlyAdded,
-      meta: { show_progress: true, has_tabs: true }
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-browse-recently-added',
+      path: '/music/browse/recently-added'
     },
     {
-      path: '/music/browse/recently_played',
-      name: 'Browse Recently Played',
       component: PageBrowseRecentlyPlayed,
-      meta: { show_progress: true, has_tabs: true }
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-browse-recently-played',
+      path: '/music/browse/recently-played'
     },
     {
       component: PageFiles,