From 845f111c29a0efd57728fc9dd84fc67c7de61295 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 12 Jul 2023 21:30:52 +0200
Subject: [PATCH] [web] Use named route for Spotify pages

Switching to named routes in order to reduce future maintenance.
---
 .../src/components/ModalDialogQueueItem.vue   |  6 +-
 web-src/src/components/ModalDialogTrack.vue   |  6 +-
 web-src/src/components/NavbarTop.vue          |  2 +-
 .../src/components/SpotifyListItemArtist.vue  |  5 +-
 .../components/SpotifyModalDialogAlbum.vue    | 10 ++-
 .../components/SpotifyModalDialogArtist.vue   |  5 +-
 .../components/SpotifyModalDialogTrack.vue    |  8 ++-
 web-src/src/components/TabsMusic.vue          |  2 +-
 ...tifyPageAlbum.vue => PageAlbumSpotify.vue} | 13 ++--
 ...fyPageArtist.vue => PageArtistSpotify.vue} | 19 ++---
 ...fyPageBrowse.vue => PageBrowseSpotify.vue} |  9 ++-
 ...=> PageBrowseSpotifyFeaturedPlaylists.vue} |  0
 ...s.vue => PageBrowseSpotifyNewReleases.vue} |  9 ++-
 web-src/src/pages/PageSearchSpotify.vue       |  5 +-
 web-src/src/router/index.js                   | 71 +++++++++----------
 15 files changed, 100 insertions(+), 70 deletions(-)
 rename web-src/src/pages/{SpotifyPageAlbum.vue => PageAlbumSpotify.vue} (95%)
 rename web-src/src/pages/{SpotifyPageArtist.vue => PageArtistSpotify.vue} (95%)
 rename web-src/src/pages/{SpotifyPageBrowse.vue => PageBrowseSpotify.vue} (96%)
 rename web-src/src/pages/{SpotifyPageBrowseFeaturedPlaylists.vue => PageBrowseSpotifyFeaturedPlaylists.vue} (100%)
 rename web-src/src/pages/{SpotifyPageBrowseNewReleases.vue => PageBrowseSpotifyNewReleases.vue} (96%)

diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 4bb04b9c..eece47eb 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -243,14 +243,16 @@ export default {
     open_spotify_artist() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.spotify_track.artists[0].id }
       })
     },
 
     open_spotify_album() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/albums/' + this.spotify_track.album.id
+        name: 'music-spotify-album',
+        params: { id: this.spotify_track.album.id }
       })
     }
   }
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 86124fd8..7ed77718 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -278,14 +278,16 @@ export default {
     open_spotify_artist() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.spotify_track.artists[0].id }
       })
     },
 
     open_spotify_album() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/albums/' + this.spotify_track.album.id
+        name: 'music-spotify-album',
+        params: { id: this.spotify_track.album.id }
       })
     },
 
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 758a444e..1cc0bce5 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -76,7 +76,7 @@
             </navbar-item-link>
             <navbar-item-link
               v-if="spotify_enabled"
-              :to="{ path: '/music/spotify' }"
+              :to="{ name: 'music-spotify' }"
             >
               <span class="pl-5" v-text="$t('navigation.spotify')" />
             </navbar-item-link>
diff --git a/web-src/src/components/SpotifyListItemArtist.vue b/web-src/src/components/SpotifyListItemArtist.vue
index fa28e8a3..f012ff4c 100644
--- a/web-src/src/components/SpotifyListItemArtist.vue
+++ b/web-src/src/components/SpotifyListItemArtist.vue
@@ -16,7 +16,10 @@ export default {
 
   methods: {
     open_artist() {
-      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-spotify-artist',
+        params: { id: this.artist.id }
+      })
     }
   }
 }
diff --git a/web-src/src/components/SpotifyModalDialogAlbum.vue b/web-src/src/components/SpotifyModalDialogAlbum.vue
index 663a8598..33d515fc 100644
--- a/web-src/src/components/SpotifyModalDialogAlbum.vue
+++ b/web-src/src/components/SpotifyModalDialogAlbum.vue
@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import webapi from '@/webapi'
 
 export default {
   name: 'SpotifyModalDialogAlbum',
@@ -129,12 +129,16 @@ export default {
     },
 
     open_album() {
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: this.album.id }
+      })
     },
 
     open_artist() {
       this.$router.push({
-        path: '/music/spotify/artists/' + this.album.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.album.artists[0].id }
       })
     },
 
diff --git a/web-src/src/components/SpotifyModalDialogArtist.vue b/web-src/src/components/SpotifyModalDialogArtist.vue
index 4707bb3f..7d7e3f56 100644
--- a/web-src/src/components/SpotifyModalDialogArtist.vue
+++ b/web-src/src/components/SpotifyModalDialogArtist.vue
@@ -95,7 +95,10 @@ export default {
     },
 
     open_artist() {
-      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-spotify-artist',
+        params: { id: this.artist.id }
+      })
     }
   }
 }
diff --git a/web-src/src/components/SpotifyModalDialogTrack.vue b/web-src/src/components/SpotifyModalDialogTrack.vue
index 4c06bc61..2149d45a 100644
--- a/web-src/src/components/SpotifyModalDialogTrack.vue
+++ b/web-src/src/components/SpotifyModalDialogTrack.vue
@@ -130,12 +130,16 @@ export default {
     },
 
     open_album() {
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: this.album.id }
+      })
     },
 
     open_artist() {
       this.$router.push({
-        path: '/music/spotify/artists/' + this.album.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.album.artists[0].id }
       })
     }
   }
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index 60837694..c177776c 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -76,7 +76,7 @@
               <router-link
                 v-if="spotify_enabled"
                 v-slot="{ navigate, isActive }"
-                to="/music/spotify"
+                :to="{ name: 'music-spotify' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/PageAlbumSpotify.vue
similarity index 95%
rename from web-src/src/pages/SpotifyPageAlbum.vue
rename to web-src/src/pages/PageAlbumSpotify.vue
index 589de5d8..3a91a3a5 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -74,19 +74,19 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
 import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import webapi from '@/webapi'
-import SpotifyWebApi from 'spotify-web-api-js'
 
 const dataObject = {
   load(to) {
     const spotifyApi = new SpotifyWebApi()
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    return spotifyApi.getAlbum(to.params.album_id, {
+    return spotifyApi.getAlbum(to.params.id, {
       market: store.state.spotify.webapi_country
     })
   },
@@ -100,10 +100,10 @@ export default {
   name: 'PageAlbum',
   components: {
     ContentWithHero,
+    CoverArtwork,
     SpotifyListItemTrack,
     SpotifyModalDialogTrack,
-    SpotifyModalDialogAlbum,
-    CoverArtwork
+    SpotifyModalDialogAlbum
   },
 
   beforeRouteEnter(to, from, next) {
@@ -142,7 +142,8 @@ export default {
   methods: {
     open_artist() {
       this.$router.push({
-        path: '/music/spotify/artists/' + this.album.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.album.artists[0].id }
       })
     },
 
diff --git a/web-src/src/pages/SpotifyPageArtist.vue b/web-src/src/pages/PageArtistSpotify.vue
similarity index 95%
rename from web-src/src/pages/SpotifyPageArtist.vue
rename to web-src/src/pages/PageArtistSpotify.vue
index 79865152..a131d6d3 100644
--- a/web-src/src/pages/SpotifyPageArtist.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -69,14 +69,14 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
 import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
-import store from '@/store'
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
 
@@ -85,8 +85,8 @@ const dataObject = {
     const spotifyApi = new SpotifyWebApi()
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
     return Promise.all([
-      spotifyApi.getArtist(to.params.artist_id),
-      spotifyApi.getArtistAlbums(to.params.artist_id, {
+      spotifyApi.getArtist(to.params.id),
+      spotifyApi.getArtistAlbums(to.params.id, {
         limit: PAGE_SIZE,
         offset: 0,
         include_groups: 'album,single',
@@ -109,11 +109,11 @@ export default {
   name: 'SpotifyPageArtist',
   components: {
     ContentWithHeading,
+    CoverArtwork,
     SpotifyListItemAlbum,
     SpotifyModalDialogAlbum,
     SpotifyModalDialogArtist,
-    VueEternalLoading,
-    CoverArtwork
+    VueEternalLoading
   },
 
   beforeRouteEnter(to, from, next) {
@@ -180,7 +180,10 @@ export default {
     },
 
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_dialog(album) {
diff --git a/web-src/src/pages/SpotifyPageBrowse.vue b/web-src/src/pages/PageBrowseSpotify.vue
similarity index 96%
rename from web-src/src/pages/SpotifyPageBrowse.vue
rename to web-src/src/pages/PageBrowseSpotify.vue
index ce692dfa..2993d7c3 100644
--- a/web-src/src/pages/SpotifyPageBrowse.vue
+++ b/web-src/src/pages/PageBrowseSpotify.vue
@@ -43,7 +43,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              to="/music/spotify/new-releases"
+              :to="{ name: 'music-spotify-new-releases' }"
               class="button is-light is-small is-rounded"
               >{{ $t('page.spotify.browse.show-more') }}</router-link
             >
@@ -85,7 +85,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              to="/music/spotify/featured-playlists"
+              :to="{ name: 'music-spotify-featured-playlists' }"
               class="button is-light is-small is-rounded"
               >{{ $t('page.spotify.browse.show-more') }}</router-link
             >
@@ -196,7 +196,10 @@ export default {
 
   methods: {
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_album_dialog(album) {
diff --git a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue b/web-src/src/pages/PageBrowseSpotifyFeaturedPlaylists.vue
similarity index 100%
rename from web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
rename to web-src/src/pages/PageBrowseSpotifyFeaturedPlaylists.vue
diff --git a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue b/web-src/src/pages/PageBrowseSpotifyNewReleases.vue
similarity index 96%
rename from web-src/src/pages/SpotifyPageBrowseNewReleases.vue
rename to web-src/src/pages/PageBrowseSpotifyNewReleases.vue
index e03c6bc5..c0e02c6a 100644
--- a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
+++ b/web-src/src/pages/PageBrowseSpotifyNewReleases.vue
@@ -77,10 +77,10 @@ export default {
   name: 'SpotifyPageBrowseNewReleases',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    CoverArtwork,
     SpotifyListItemAlbum,
     SpotifyModalDialogAlbum,
-    CoverArtwork
+    TabsMusic
   },
 
   beforeRouteEnter(to, from, next) {
@@ -118,7 +118,10 @@ export default {
 
   methods: {
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_album_dialog(album) {
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 57116520..4f5d76b8 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -568,7 +568,10 @@ export default {
     },
 
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     artwork_url(album) {
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index c46f2735..693c1c2e 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -2,8 +2,10 @@ import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import PageAbout from '@/pages/PageAbout.vue'
 import PageAlbum from '@/pages/PageAlbum.vue'
+import PageAlbumSpotify from '@/pages/PageAlbumSpotify.vue'
 import PageAlbums from '@/pages/PageAlbums.vue'
 import PageArtist from '@/pages/PageArtist.vue'
+import PageArtistSpotify from '@/pages/PageArtistSpotify.vue'
 import PageArtistTracks from '@/pages/PageArtistTracks.vue'
 import PageArtists from '@/pages/PageArtists.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
@@ -13,6 +15,9 @@ 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 PageBrowseSpotify from '@/pages/PageBrowseSpotify.vue'
+import PageBrowseSpotifyNewReleases from '@/pages/PageBrowseSpotifyNewReleases.vue'
+import PageBrowseSpotifyFeaturedPlaylists from '@/pages/PageBrowseSpotifyFeaturedPlaylists.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@@ -34,12 +39,6 @@ import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
-import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
-import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
-import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
-import SpotifyPageArtist from '@/pages/SpotifyPageArtist.vue'
-import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum.vue'
-
 import store from '@/store'
 
 export const router = createRouter({
@@ -56,6 +55,12 @@ export const router = createRouter({
       name: 'music-album',
       path: '/music/albums/:id'
     },
+    {
+      component: PageAlbumSpotify,
+      meta: { show_progress: true },
+      name: 'music-spotify-album',
+      path: '/music/spotify/albums/:id'
+    },
     {
       component: PageAlbums,
       meta: { has_index: true, has_tabs: true, show_progress: true },
@@ -68,6 +73,12 @@ export const router = createRouter({
       name: 'music-artist',
       path: '/music/artists/:id'
     },
+    {
+      component: PageArtistSpotify,
+      meta: { show_progress: true },
+      name: 'music-spotify-artist',
+      path: '/music/spotify/artists/:id'
+    },
     {
       component: PageArtists,
       meta: { has_index: true, has_tabs: true, show_progress: true },
@@ -132,6 +143,24 @@ export const router = createRouter({
       name: 'music-browse-recently-played',
       path: '/music/browse/recently-played'
     },
+    {
+      component: PageBrowseSpotify,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify',
+      path: '/music/spotify'
+    },
+    {
+      component: PageBrowseSpotifyFeaturedPlaylists,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify-featured-playlists',
+      path: '/music/spotify/featured-playlists'
+    },
+    {
+      component: PageBrowseSpotifyNewReleases,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify-new-releases',
+      path: '/music/spotify/new-releases'
+    },
     {
       component: PageFiles,
       meta: { show_progress: true },
@@ -258,36 +287,6 @@ export const router = createRouter({
       component: PageSettingsRemotesOutputs,
       name: 'settings-remotes-outputs',
       path: '/settings/remotes-outputs'
-    },
-    {
-      path: '/music/spotify',
-      name: 'Spotify',
-      component: SpotifyPageBrowse,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/new-releases',
-      name: 'Spotify Browse New Releases',
-      component: SpotifyPageBrowseNewReleases,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/featured-playlists',
-      name: 'Spotify Browse Featured Playlists',
-      component: SpotifyPageBrowseFeaturedPlaylists,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/artists/:artist_id',
-      name: 'Spotify Artist',
-      component: SpotifyPageArtist,
-      meta: { show_progress: true }
-    },
-    {
-      path: '/music/spotify/albums/:album_id',
-      name: 'Spotify Album',
-      component: SpotifyPageAlbum,
-      meta: { show_progress: true }
     }
   ],
   scrollBehavior(to, from, savedPosition) {