From 9705c8cd574d2b814024d0e56bda5a6ed99d56eb Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sun, 24 Mar 2024 18:05:29 +0100
Subject: [PATCH] [web] Refactor the Spotify album page

---
 .../src/components/ListItemAlbumSpotify.vue   | 13 ++++++++--
 web-src/src/pages/PageArtistSpotify.vue       |  7 ------
 web-src/src/pages/PageMusicSpotify.vue        | 14 +++--------
 .../src/pages/PageMusicSpotifyNewReleases.vue | 24 ++++++-------------
 web-src/src/pages/PageSearchSpotify.vue       |  7 ------
 5 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/web-src/src/components/ListItemAlbumSpotify.vue b/web-src/src/components/ListItemAlbumSpotify.vue
index 92159170..526cb113 100644
--- a/web-src/src/components/ListItemAlbumSpotify.vue
+++ b/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>
 
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 222c7eb2..4208de13 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/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
diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue
index 3eaed492..96945d35 100644
--- a/web-src/src/pages/PageMusicSpotify.vue
+++ b/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: {},
-
-      show_playlist_details_modal: false,
-      selected_playlist: {}
+      selected_playlist: {},
+      show_album_details_modal: false,
+      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
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index ab73225a..3b45025c 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/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) {
-      this.$router.push({
-        name: 'music-spotify-album',
-        params: { id: album.id }
-      })
+    artwork_url(album) {
+      return album.images?.[0]?.url || ''
     },
-
     open_album_dialog(album) {
       this.selected_album = album
       this.show_details_modal = true
-    },
-
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
     }
   }
 }
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index ec165839..46eac834 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/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