[web] Refactor the Spotify playlist item page

web-src/src/components/ListItemPlaylistSpotify.vue

@@ -5,16 +5,34 @@
       <h2 class="subtitle is-7" v-text="item.owner.display_name" />
     </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-playlist-spotify
+      :show="show_details_modal"
+      :playlist="item"
+      @close="show_details_modal = false"
+    />
+  </teleport>
 </template>
 
 <script>
+import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
+
 export default {
   name: 'ListItemPlaylistSpotify',
+  components: {
+    ModalDialogPlaylistSpotify
+  },
   props: { item: { required: true, type: Object } },
 
+  data() {
+    return { show_details_modal: false }
+  },
+
   methods: {
     open_playlist() {
       this.$router.push({

web-src/src/pages/PageMusicSpotify.vue

@@ -40,21 +40,7 @@
           :key="playlist.id"
           :item="playlist"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-playlist-spotify>
-        <modal-dialog-playlist-spotify
-          :show="show_playlist_details_modal"
-          :playlist="selected_playlist"
-          @close="show_playlist_details_modal = false"
-        />
       </template>
       <template #footer>
         <nav class="level">
@@ -76,8 +62,6 @@ import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
-import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
-import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
 import store from '@/store'
@@ -122,7 +106,6 @@ export default {
     ContentWithHeading,
     ListItemAlbumSpotify,
     ListItemPlaylistSpotify,
-    ModalDialogPlaylistSpotify,
     TabsMusic
   },
 
@@ -139,13 +122,6 @@ export default {
     })
   },
 
-  data() {
-    return {
-      selected_playlist: {},
-      show_playlist_details_modal: false
-    }
-  },
-
   computed: {
     featured_playlists() {
       return this.$store.state.spotify_featured_playlists.slice(0, 3)
@@ -153,13 +129,6 @@ export default {
     new_releases() {
       return this.$store.state.spotify_new_releases.slice(0, 3)
     }
-  },
-
-  methods: {
-    open_playlist_dialog(playlist) {
-      this.selected_playlist = playlist
-      this.show_playlist_details_modal = true
-    }
   }
 }
 </script>

web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue

@@ -14,21 +14,7 @@
           :key="playlist.id"
           :item="playlist"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-playlist-spotify>
-        <modal-dialog-playlist-spotify
-          :show="show_details_modal"
-          :playlist="selected_playlist"
-          @close="show_details_modal = false"
-        />
       </template>
     </content-with-heading>
   </div>
@@ -38,7 +24,6 @@
 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 SpotifyWebApi from 'spotify-web-api-js'
 import TabsMusic from '@/components/TabsMusic.vue'
 import store from '@/store'
@@ -69,7 +54,6 @@ export default {
   components: {
     ContentWithHeading,
     ListItemPlaylistSpotify,
-    ModalDialogPlaylistSpotify,
     TabsMusic
   },
 
@@ -86,24 +70,10 @@ export default {
     })
   },
 
-  data() {
-    return {
-      selected_playlist: {},
-      show_details_modal: false
-    }
-  },
-
   computed: {
     featured_playlists() {
       return this.$store.state.spotify_featured_playlists
     }
-  },
-
-  methods: {
-    open_playlist_dialog(playlist) {
-      this.selected_playlist = playlist
-      this.show_details_modal = true
-    }
   }
 }
 </script>

web-src/src/pages/PageSearchSpotify.vue

@@ -217,15 +217,6 @@
           :key="playlist.id"
           :item="playlist"
         >
-          <template #actions>
-            <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
-            </a>
-          </template>
         </list-item-playlist-spotify>
         <VueEternalLoading
           v-if="query.type === 'playlist'"
@@ -240,11 +231,6 @@
           </template>
           <template #no-more>&nbsp;</template>
         </VueEternalLoading>
-        <modal-dialog-playlist-spotify
-          :show="show_playlist_details_modal"
-          :playlist="selected_playlist"
-          @close="show_playlist_details_modal = false"
-        />
       </template>
       <template #footer>
         <nav v-if="show_all_button(playlists)" class="level">
@@ -278,7 +264,6 @@ import ListItemArtistSpotify from '@/components/ListItemArtistSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
-import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsSearch from '@/components/TabsSearch.vue'
@@ -297,7 +282,6 @@ export default {
     ListItemPlaylistSpotify,
     ListItemTrackSpotify,
     ModalDialogArtistSpotify,
-    ModalDialogPlaylistSpotify,
     ModalDialogTrackSpotify,
     TabsSearch,
     VueEternalLoading
@@ -312,10 +296,8 @@ export default {
       search_param: {},
       search_query: '',
       selected_artist: {},
-      selected_playlist: {},
       selected_track: {},
       show_artist_details_modal: false,
-      show_playlist_details_modal: false,
       show_track_details_modal: false,
       tracks: { items: [], total: 0 },
       validSearchTypes: ['track', 'artist', 'album', 'playlist']
@@ -362,10 +344,6 @@ export default {
       this.selected_artist = artist
       this.show_artist_details_modal = true
     },
-    open_playlist_dialog(playlist) {
-      this.selected_playlist = playlist
-      this.show_playlist_details_modal = true
-    },
     open_recent_search(query) {
       this.search_query = query
       this.new_search()