MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-27 15:45:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Refactor the Spotify artist item page

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-03-24 20:41:21 +01:00
parent e1b6f9eb2b
commit 0657535d04
2 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web-src/src/components/ListItemArtistSpotify.vue
View File

@ -4,16 +4,31 @@
<h1 class="title is-6" v-text="item.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-artist-spotify
:show="show_details_modal"
:artist="item"
@close="show_details_modal = false"
/>
</teleport>
</template>
<script>
import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
export default {
name: 'ListItemArtistSpotify',
components: { ModalDialogArtistSpotify },
props: { item: { required: true, type: Object } },
data() {
return { show_details_modal: false }
},
methods: {
open_artist() {
this.$router.push({

22
web-src/src/pages/PageSearchSpotify.vue
View File

@ -109,15 +109,6 @@
:key="artist.id"
:item="artist"
>
<template #actions>
<a @click.prevent.stop="open_artist_dialog(artist)">
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</list-item-artist-spotify>
<VueEternalLoading
v-if="query.type === 'artist'"
@ -132,11 +123,6 @@
</template>
<template #no-more>&nbsp;</template>
</VueEternalLoading>
<modal-dialog-artist-spotify
:show="show_artist_details_modal"
:artist="selected_artist"
@close="show_artist_details_modal = false"
/>
</template>
<template #footer>
<nav v-if="show_all_button(artists)" class="level">
@ -263,7 +249,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 ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import TabsSearch from '@/components/TabsSearch.vue'
@ -281,7 +266,6 @@ export default {
ListItemArtistSpotify,
ListItemPlaylistSpotify,
ListItemTrackSpotify,
ModalDialogArtistSpotify,
ModalDialogTrackSpotify,
TabsSearch,
VueEternalLoading
@ -295,9 +279,7 @@ export default {
query: {},
search_param: {},
search_query: '',
selected_artist: {},
selected_track: {},
show_artist_details_modal: false,
show_track_details_modal: false,
tracks: { items: [], total: 0 },
validSearchTypes: ['track', 'artist', 'album', 'playlist']
@ -340,10 +322,6 @@ export default {
})
this.$refs.search_field.blur()
},
open_artist_dialog(artist) {
this.selected_artist = artist
this.show_artist_details_modal = true
},
open_recent_search(query) {
this.search_query = query
this.new_search()