[web] Refactor the Spotify album page

web-src/src/components/ListItemAlbumSpotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media is-align-items-center">
+  <div class="media is-align-items-center" @click="open_album">
     <div v-if="$slots['artwork']" class="media-left is-clickable">
       <slot name="artwork" />
     </div>
@@ -23,7 +23,16 @@
 <script>
 export default {
   name: 'ListItemAlbumSpotify',
-  props: { item: { required: true, type: Object } }
+  props: { item: { required: true, type: Object } },
+
+  methods: {
+    open_album() {
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: this.item.id }
+      })
+    }
+  }
 }
 </script>
 

web-src/src/pages/PageArtistSpotify.vue

@@ -27,7 +27,6 @@
           v-for="album in albums"
           :key="album.id"
           :item="album"
-          @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
             <cover-artwork
@@ -181,12 +180,6 @@ export default {
           loaded(data.items.length, PAGE_SIZE)
         })
     },
-    open_album(album) {
-      this.$router.push({
-        name: 'music-spotify-album',
-        params: { id: album.id }
-      })
-    },
     open_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true

web-src/src/pages/PageMusicSpotify.vue

@@ -11,7 +11,6 @@
           v-for="album in new_releases"
           :key="album.id"
           :item="album"
-          @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
             <cover-artwork
@@ -167,11 +166,10 @@ export default {
 
   data() {
     return {
-      show_album_details_modal: false,
       selected_album: {},
-
+      selected_playlist: {},
-      show_playlist_details_modal: false,
+      show_album_details_modal: false,
-      selected_playlist: {}
+      show_playlist_details_modal: false
     }
   },
 
@@ -194,12 +192,6 @@ export default {
     artwork_url(album) {
       return album.images?.[0]?.url || ''
     },
-    open_album(album) {
-      this.$router.push({
-        name: 'music-spotify-album',
-        params: { id: album.id }
-      })
-    },
     open_album_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -10,7 +10,6 @@
           v-for="album in new_releases"
           :key="album.id"
           :item="album"
-          @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
             <cover-artwork
@@ -96,39 +95,30 @@ export default {
 
   data() {
     return {
-      show_details_modal: false,
+      selected_album: {},
-      selected_album: {}
+      show_details_modal: false
     }
   },
 
   computed: {
-    new_releases() {
-      return this.$store.state.spotify_new_releases
-    },
-
     is_visible_artwork() {
       return this.$store.getters.settings_option(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value
+    },
+    new_releases() {
+      return this.$store.state.spotify_new_releases
     }
   },
 
   methods: {
-    open_album(album) {
+    artwork_url(album) {
-      this.$router.push({
+      return album.images?.[0]?.url || ''
-        name: 'music-spotify-album',
-        params: { id: album.id }
-      })
     },
-
     open_album_dialog(album) {
       this.selected_album = album
       this.show_details_modal = true
-    },
-
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
     }
   }
 }

web-src/src/pages/PageSearchSpotify.vue

@@ -169,7 +169,6 @@
           v-for="album in albums.items"
           :key="album.id"
           :item="album"
-          @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
             <cover-artwork
@@ -396,12 +395,6 @@ export default {
       })
       this.$refs.search_field.blur()
     },
-    open_album(album) {
-      this.$router.push({
-        name: 'music-spotify-album',
-        params: { id: album.id }
-      })
-    },
     open_album_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true