[web] Use named route for Spotify playlists

Switching to named routes in order to reduce future maintenance.

web-src/src/pages/PageSearchSpotify.vue

@@ -216,7 +216,7 @@
         <p class="title is-4" v-text="$t('page.spotify.search.playlists')" />
       </template>
       <template #content>
-        <spotify-list-item-playlist
+        <list-item-playlist-spotify
           v-for="playlist in playlists.items"
           :key="playlist.id"
           :playlist="playlist"
@@ -230,7 +230,7 @@
               />
             </a>
           </template>
-        </spotify-list-item-playlist>
+        </list-item-playlist-spotify>
         <VueEternalLoading
           v-if="query.type === 'playlist'"
           :load="search_playlists_next"
@@ -272,11 +272,11 @@ import * as types from '@/store/mutation_types'
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
 import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
-import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
 import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
 import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
@@ -293,10 +293,10 @@ export default {
     ContentText,
     ContentWithHeading,
     CoverArtwork,
+    ListItemPlaylistSpotify,
     ModalDialogPlaylistSpotify,
     SpotifyListItemAlbum,
     SpotifyListItemArtist,
-    SpotifyListItemPlaylist,
     SpotifyListItemTrack,
     SpotifyModalDialogAlbum,
     SpotifyModalDialogArtist,

web-src/src/pages/SpotifyPageBrowse.vue

@@ -60,7 +60,7 @@
         />
       </template>
       <template #content>
-        <spotify-list-item-playlist
+        <list-item-playlist-spotify
           v-for="playlist in featured_playlists"
           :key="playlist.id"
           :playlist="playlist"
@@ -74,7 +74,7 @@
               />
             </a>
           </template>
-        </spotify-list-item-playlist>
+        </list-item-playlist-spotify>
         <modal-dialog-playlist-spotify
           :show="show_playlist_details_modal"
           :playlist="selected_playlist"
@@ -97,16 +97,16 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
-import store from '@/store'
-import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
+import TabsMusic from '@/components/TabsMusic.vue'
 
 const dataObject = {
   load(to) {
@@ -147,9 +147,9 @@ export default {
   components: {
     ContentWithHeading,
     CoverArtwork,
+    ListItemPlaylistSpotify,
     ModalDialogPlaylistSpotify,
     SpotifyListItemAlbum,
-    SpotifyListItemPlaylist,
     SpotifyModalDialogAlbum,
     TabsMusic
   },

web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue

@@ -9,7 +9,7 @@
         />
       </template>
       <template #content>
-        <spotify-list-item-playlist
+        <list-item-playlist-spotify
           v-for="playlist in featured_playlists"
           :key="playlist.id"
           :playlist="playlist"
@@ -23,7 +23,7 @@
               />
             </a>
           </template>
-        </spotify-list-item-playlist>
+        </list-item-playlist-spotify>
         <modal-dialog-playlist-spotify
           :show="show_playlist_details_modal"
           :playlist="selected_playlist"
@@ -37,8 +37,8 @@
 <script>
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
-import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -68,8 +68,8 @@ export default {
   name: 'SpotifyPageBrowseFeaturedPlaylists',
   components: {
     ContentWithHeading,
+    ListItemPlaylistSpotify,
     ModalDialogPlaylistSpotify,
-    SpotifyListItemPlaylist,
     TabsMusic
   },