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

---
 .../src/components/ListItemAlbumSpotify.vue   | 24 +++++++++++++++----
 web-src/src/pages/PageAlbumSpotify.vue        | 13 ++++------
 web-src/src/pages/PageArtistSpotify.vue       | 23 ------------------
 web-src/src/pages/PageMusicSpotify.vue        | 21 ----------------
 .../src/pages/PageMusicSpotifyNewReleases.vue | 21 ----------------
 web-src/src/pages/PageSearchSpotify.vue       | 22 -----------------
 6 files changed, 25 insertions(+), 99 deletions(-)

diff --git a/web-src/src/components/ListItemAlbumSpotify.vue b/web-src/src/components/ListItemAlbumSpotify.vue
index b387d204..80d0e027 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" @click="open_album">
+  <div class="media is-align-items-center" @click="open">
     <div v-if="show_artwork" class="media-left is-clickable">
       <cover-artwork
         :artwork_url="artwork_url"
@@ -20,19 +20,35 @@
       />
     </div>
     <div class="media-right">
-      <slot name="actions" />
+      <a @click.prevent.stop="show_details_modal = true">
+        <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+      </a>
     </div>
   </div>
+  <teleport to="#app">
+    <modal-dialog-album-spotify
+      :show="show_details_modal"
+      :album="item"
+      @close="show_details_modal = false"
+    />
+  </teleport>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 
 export default {
   name: 'ListItemAlbumSpotify',
-  components: { CoverArtwork },
+  components: { CoverArtwork, ModalDialogAlbumSpotify },
   props: { item: { required: true, type: Object } },
 
+  data() {
+    return {
+      show_details_modal: false
+    }
+  },
+
   computed: {
     artwork_url() {
       return this.item.images?.[0]?.url ?? ''
@@ -46,7 +62,7 @@ export default {
   },
 
   methods: {
-    open_album() {
+    open() {
       this.$router.push({
         name: 'music-spotify-album',
         params: { id: this.item.id }
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index fe139cb8..34a98bda 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -130,24 +130,21 @@ export default {
 
   methods: {
     artwork_url(album) {
-      return album.images?.[0]?.url || ''
+      return album.images?.[0]?.url ?? ''
     },
-
     open_artist() {
       this.$router.push({
         name: 'music-spotify-artist',
         params: { id: this.album.artists[0].id }
       })
     },
-
-    play() {
-      this.show_details_modal = false
-      webapi.player_play_uri(this.album.uri, true)
-    },
-
     open_track_dialog(track) {
       this.selected_track = track
       this.show_track_details_modal = true
+    },
+    play() {
+      this.show_details_modal = false
+      webapi.player_play_uri(this.album.uri, true)
     }
   }
 }
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 6f0a01ec..2cd617b7 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -28,15 +28,6 @@
           :key="album.id"
           :item="album"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-album-spotify>
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
@@ -53,11 +44,6 @@
           :artist="artist"
           @close="show_details_modal = false"
         />
-        <modal-dialog-album-spotify
-          :show="show_album_details_modal"
-          :album="selected_album"
-          @close="show_album_details_modal = false"
-        />
       </template>
     </content-with-heading>
   </div>
@@ -66,7 +52,6 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
-import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@@ -92,7 +77,6 @@ const dataObject = {
 
   set(vm, response) {
     vm.artist = response[0]
-
     vm.albums = []
     vm.total = 0
     vm.offset = 0
@@ -105,7 +89,6 @@ export default {
   components: {
     ContentWithHeading,
     ListItemAlbumSpotify,
-    ModalDialogAlbumSpotify,
     ModalDialogArtistSpotify,
     VueEternalLoading
   },
@@ -128,8 +111,6 @@ export default {
       albums: [],
       artist: {},
       offset: 0,
-      selected_album: {},
-      show_album_details_modal: false,
       show_details_modal: false,
       total: 0
     }
@@ -155,10 +136,6 @@ export default {
           loaded(data.items.length, PAGE_SIZE)
         })
     },
-    open_dialog(album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
     play() {
       this.show_album_details_modal = false
       webapi.player_play_uri(this.artist.uri, true)
diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue
index bc4fb248..010b8227 100644
--- a/web-src/src/pages/PageMusicSpotify.vue
+++ b/web-src/src/pages/PageMusicSpotify.vue
@@ -12,21 +12,7 @@
           :key="album.id"
           :item="album"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-album-spotify>
-        <modal-dialog-album-spotify
-          :show="show_album_details_modal"
-          :album="selected_album"
-          @close="show_album_details_modal = false"
-        />
       </template>
       <template #footer>
         <nav class="level">
@@ -136,7 +122,6 @@ export default {
     ContentWithHeading,
     ListItemAlbumSpotify,
     ListItemPlaylistSpotify,
-    ModalDialogAlbumSpotify,
     ModalDialogPlaylistSpotify,
     TabsMusic
   },
@@ -156,9 +141,7 @@ export default {
 
   data() {
     return {
-      selected_album: {},
       selected_playlist: {},
-      show_album_details_modal: false,
       show_playlist_details_modal: false
     }
   },
@@ -173,10 +156,6 @@ export default {
   },
 
   methods: {
-    open_album_dialog(album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
     open_playlist_dialog(playlist) {
       this.selected_playlist = playlist
       this.show_playlist_details_modal = true
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index be8c148b..8c79e49a 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -21,11 +21,6 @@
             </a>
           </template>
         </list-item-album-spotify>
-        <modal-dialog-album-spotify
-          :show="show_details_modal"
-          :album="selected_album"
-          @close="show_details_modal = false"
-        />
       </template>
     </content-with-heading>
   </div>
@@ -35,7 +30,6 @@
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
-import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
 import store from '@/store'
@@ -66,7 +60,6 @@ export default {
   components: {
     ContentWithHeading,
     ListItemAlbumSpotify,
-    ModalDialogAlbumSpotify,
     TabsMusic
   },
 
@@ -83,24 +76,10 @@ export default {
     })
   },
 
-  data() {
-    return {
-      selected_album: {},
-      show_details_modal: false
-    }
-  },
-
   computed: {
     new_releases() {
       return this.$store.state.spotify_new_releases
     }
-  },
-
-  methods: {
-    open_album_dialog(album) {
-      this.selected_album = album
-      this.show_details_modal = true
-    }
   }
 }
 </script>
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 9c423e75..b593a0a5 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -170,15 +170,6 @@
           :key="album.id"
           :item="album"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-album-spotify>
         <VueEternalLoading
           v-if="query.type === 'album'"
@@ -193,11 +184,6 @@
           </template>
           <template #no-more>&nbsp;</template>
         </VueEternalLoading>
-        <modal-dialog-album-spotify
-          :show="show_album_details_modal"
-          :album="selected_album"
-          @close="show_album_details_modal = false"
-        />
       </template>
       <template #footer>
         <nav v-if="show_all_button(albums)" class="level">
@@ -291,7 +277,6 @@ import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ListItemArtistSpotify from '@/components/ListItemArtistSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
-import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
@@ -311,7 +296,6 @@ export default {
     ListItemArtistSpotify,
     ListItemPlaylistSpotify,
     ListItemTrackSpotify,
-    ModalDialogAlbumSpotify,
     ModalDialogArtistSpotify,
     ModalDialogPlaylistSpotify,
     ModalDialogTrackSpotify,
@@ -327,11 +311,9 @@ export default {
       query: {},
       search_param: {},
       search_query: '',
-      selected_album: {},
       selected_artist: {},
       selected_playlist: {},
       selected_track: {},
-      show_album_details_modal: false,
       show_artist_details_modal: false,
       show_playlist_details_modal: false,
       show_track_details_modal: false,
@@ -376,10 +358,6 @@ export default {
       })
       this.$refs.search_field.blur()
     },
-    open_album_dialog(album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
     open_artist_dialog(artist) {
       this.selected_artist = artist
       this.show_artist_details_modal = true