From 59aa462b05da2001cd87dbb2eff6d18e67338647 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Mon, 10 Jul 2023 20:54:52 +0200
Subject: [PATCH] [web] Use named route for genres

Switching to named routes in order to reduce future maintenance.
---
 web-src/src/components/ListGenres.vue         |  2 +-
 web-src/src/components/ModalDialogGenre.vue   |  5 +++-
 .../src/components/ModalDialogQueueItem.vue   |  5 +++-
 web-src/src/components/ModalDialogTrack.vue   |  5 +++-
 web-src/src/components/NavbarTop.vue          |  2 +-
 web-src/src/components/TabsMusic.vue          |  6 ++---
 web-src/src/pages/PageGenre.vue               |  2 +-
 web-src/src/pages/PageGenreTracks.vue         |  7 +++--
 web-src/src/router/index.js                   | 26 +++++++++----------
 9 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 2cf53f17..ab1e0194 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -57,7 +57,7 @@ export default {
 
   methods: {
     open_genre(genre) {
-      this.$router.push({ name: 'Genre', params: { genre: genre.name } })
+      this.$router.push({ name: 'music-genre', params: { genre: genre.name } })
     },
 
     open_dialog(genre) {
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 83faa52c..06848ac1 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -90,7 +90,10 @@ export default {
 
     open_genre() {
       this.$emit('close')
-      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
+      this.$router.push({
+        name: 'music-genre',
+        params: { genre: this.genre.name }
+      })
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index d9d6f587..4bb04b9c 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -234,7 +234,10 @@ export default {
     },
 
     open_genre() {
-      this.$router.push({ name: 'Genre', params: { genre: this.item.genre } })
+      this.$router.push({
+        name: 'music-genre',
+        params: { genre: this.item.genre }
+      })
     },
 
     open_spotify_artist() {
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 9dd5f58c..86124fd8 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -269,7 +269,10 @@ export default {
     },
 
     open_genre() {
-      this.$router.push({ name: 'Genre', params: { genre: this.track.genre } })
+      this.$router.push({
+        name: 'music-genre',
+        params: { genre: this.track.genre }
+      })
     },
 
     open_spotify_artist() {
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 0d6be672..fc1f215a 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -71,7 +71,7 @@
             <navbar-item-link :to="{ name: 'music-albums' }">
               <span class="pl-5" v-text="$t('navigation.albums')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music/genres' }">
+            <navbar-item-link :to="{ name: 'music-genres' }">
               <span class="pl-5" v-text="$t('navigation.genres')" />
             </navbar-item-link>
             <navbar-item-link
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index 5de08ede..a3052ddb 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -19,7 +19,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/artists"
+                :to="{ name: 'music-artists' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -35,7 +35,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/albums"
+                :to="{ name: 'music-albums' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -47,7 +47,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/genres"
+                :to="{ name: 'music-genres' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue
index b9e8cb3d..0d48244f 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/web-src/src/pages/PageGenre.vue
@@ -106,7 +106,7 @@ export default {
     open_tracks() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'GenreTracks',
+        name: 'music-genre-tracks',
         params: { genre: this.genre.name }
       })
     },
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 8a51ef26..f098c6ea 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -55,9 +55,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -146,7 +146,10 @@ export default {
   methods: {
     open_genre() {
       this.show_details_modal = false
-      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
+      this.$router.push({
+        name: 'music-genre',
+        params: { genre: this.genre.name }
+      })
     },
 
     play() {
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 74ff5efd..d1650db8 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -11,6 +11,9 @@ import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageFiles from '@/pages/PageFiles.vue'
+import PageGenre from '@/pages/PageGenre.vue'
+import PageGenreTracks from '@/pages/PageGenreTracks.vue'
+import PageGenres from '@/pages/PageGenres.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
 import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
@@ -21,9 +24,6 @@ import PageQueue from '@/pages/PageQueue.vue'
 import PageBrowse from '@/pages/PageBrowse.vue'
 import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
 import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
-import PageGenres from '@/pages/PageGenres.vue'
-import PageGenre from '@/pages/PageGenre.vue'
-import PageGenreTracks from '@/pages/PageGenreTracks.vue'
 import PageComposers from '@/pages/PageComposers.vue'
 import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
@@ -137,23 +137,23 @@ export const router = createRouter({
       path: '/files'
     },
     {
-      path: '/music/genres',
-      name: 'Genres',
-      component: PageGenres,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/genres/:genre',
-      name: 'Genre',
       component: PageGenre,
-      meta: { show_progress: true, has_index: true }
+      meta: { has_index: true, show_progress: true },
+      path: '/music/genres/:genre',
+      name: 'music-genre'
     },
     {
       path: '/music/genres/:genre/tracks',
-      name: 'GenreTracks',
+      name: 'music-genre-tracks',
       component: PageGenreTracks,
       meta: { show_progress: true, has_index: true }
     },
+    {
+      component: PageGenres,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      path: '/music/genres',
+      name: 'music-genres'
+    },
     {
       path: '/music/composers',
       name: 'Composers',