mirror of
https://github.com/owntone/owntone-server.git
synced 2025-01-07 04:53:24 -05:00
5e85e0b024
This will allow to open a dialog outside of the ListItem component. Also reduces the size of the generated DOM tree by only including one dialog per page (per object type) and not for each list item.
81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<content-with-heading>
|
|
<template slot="heading-left">
|
|
<p class="title is-4">{{ genre }}</p>
|
|
</template>
|
|
<template slot="heading-right">
|
|
<a class="button is-small is-dark is-rounded" @click="play">
|
|
<span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
|
|
</a>
|
|
</template>
|
|
<template slot="content">
|
|
<p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_genre">albums</a> | {{ tracks.total }} tracks</p>
|
|
<list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" :position="index" :context_uri="tracks.items.map(a => a.uri).join(',')" :links="links">
|
|
<template slot="actions">
|
|
<a @click="open_dialog(track)">
|
|
<span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
|
|
</a>
|
|
</template>
|
|
</list-item-track>
|
|
<modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
|
|
</template>
|
|
</content-with-heading>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { LoadDataBeforeEnterMixin } from './mixin'
|
|
import ContentWithHeading from '@/templates/ContentWithHeading'
|
|
import ListItemTrack from '@/components/ListItemTrack'
|
|
import ModalDialogTrack from '@/components/ModalDialogTrack'
|
|
import webapi from '@/webapi'
|
|
|
|
const tracksData = {
|
|
load: function (to) {
|
|
return webapi.library_genre_tracks(to.params.genre)
|
|
},
|
|
|
|
set: function (vm, response) {
|
|
vm.genre = vm.$route.params.genre
|
|
vm.tracks = response.data.tracks
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'PageGenreTracks',
|
|
mixins: [ LoadDataBeforeEnterMixin(tracksData) ],
|
|
components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
|
|
|
|
data () {
|
|
return {
|
|
tracks: {},
|
|
genre: '',
|
|
links: [],
|
|
|
|
show_details_modal: false,
|
|
selected_track: {}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
open_genre: function () {
|
|
this.show_details_modal = false
|
|
this.$router.push({ path: '/music/genres/' + this.genre })
|
|
},
|
|
|
|
play: function () {
|
|
webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
|
|
},
|
|
|
|
open_dialog: function (track) {
|
|
this.selected_track = track
|
|
this.show_details_modal = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|