From d0fbd685231411acd0adccfb3232bb6e6a201e6e Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Mon, 10 Jul 2023 20:43:10 +0200
Subject: [PATCH] [web] Use named route for music albums

Switching to named routes in order to reduce future maintenance.
---
 web-src/src/components/ListAlbums.vue         |  2 +-
 web-src/src/components/ModalDialogAlbum.vue   |  5 +++-
 .../src/components/ModalDialogQueueItem.vue   |  7 ++++--
 web-src/src/components/ModalDialogTrack.vue   |  7 ++++--
 web-src/src/components/NavbarTop.vue          |  2 +-
 web-src/src/pages/PageAlbum.vue               |  4 +--
 web-src/src/router/index.js                   | 25 +++++++++----------
 7 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index f8dd5f3f..58cdb3e2 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -112,7 +112,7 @@ export default {
           params: { id: album.id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + album.id })
+        this.$router.push({ name: 'music-album', params: { id: album.id } })
       }
     },
 
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 0546743a..aa7d2d91 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -165,7 +165,10 @@ export default {
           params: { id: this.album.id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.album.id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.album.id }
+        })
       }
     },
 
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 32f3b938..d9d6f587 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -166,8 +166,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
@@ -219,7 +219,10 @@ export default {
           params: { id: this.item.album_id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.item.album_id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.item.album_id }
+        })
       }
     },
 
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index e27842db..9dd5f58c 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -193,8 +193,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
@@ -253,7 +253,10 @@ export default {
           params: { id: this.track.album_id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.track.album_id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.track.album_id }
+        })
       }
     },
 
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index f12a8716..0d6be672 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -68,7 +68,7 @@
             <navbar-item-link :to="{ name: 'music-artists' }">
               <span class="pl-5" v-text="$t('navigation.artists')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music/albums' }">
+            <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' }">
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 25e2a60b..1f5ebc96 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -55,8 +55,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_album(to.params.album_id),
-      webapi.library_album_tracks(to.params.album_id)
+      webapi.library_album(to.params.id),
+      webapi.library_album_tracks(to.params.id)
     ])
   },
 
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 55a3c5b4..74ff5efd 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -49,7 +49,18 @@ export const router = createRouter({
       name: 'about',
       path: '/about'
     },
-
+    {
+      component: PageAlbum,
+      meta: { show_progress: true },
+      name: 'music-album',
+      path: '/music/albums/:id'
+    },
+    {
+      component: PageAlbums,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'music-albums',
+      path: '/music/albums'
+    },
     {
       component: PageArtist,
       meta: { show_progress: true, has_index: true },
@@ -119,18 +130,6 @@ export const router = createRouter({
       component: PageBrowseRecentlyPlayed,
       meta: { show_progress: true, has_tabs: true }
     },
-    {
-      path: '/music/albums',
-      name: 'Albums',
-      component: PageAlbums,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/albums/:album_id',
-      name: 'Album',
-      component: PageAlbum,
-      meta: { show_progress: true }
-    },
     {
       component: PageFiles,
       meta: { show_progress: true },