mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-28 00:10:59 -04:00
66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<template v-for="item in items" :key="item.itemId">
|
|
<div v-if="!item.isItem" class="py-5">
|
|
<div class="media-content">
|
|
<span
|
|
:id="`index_${item.index}`"
|
|
class="tag is-info is-light is-small has-text-weight-bold"
|
|
v-text="item.index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-else class="media is-align-items-center" @click="open(item.item)">
|
|
<div class="media-content is-clickable is-clipped">
|
|
<p class="title is-6" v-text="item.item.name" />
|
|
</div>
|
|
<div class="media-right">
|
|
<a @click.prevent.stop="open_dialog(item.item)">
|
|
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<teleport to="#app">
|
|
<modal-dialog-genre
|
|
:item="selected_item"
|
|
:media_kind="media_kind"
|
|
:show="show_details_modal"
|
|
@close="show_details_modal = false"
|
|
/>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script>
|
|
import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
|
|
|
|
export default {
|
|
name: 'ListGenres',
|
|
components: { ModalDialogGenre },
|
|
props: {
|
|
items: { required: true, type: Object },
|
|
media_kind: { required: true, type: String }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
selected_item: {},
|
|
show_details_modal: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
open(item) {
|
|
this.$router.push({
|
|
name: 'genre-albums',
|
|
params: { name: item.name },
|
|
query: { media_kind: this.media_kind }
|
|
})
|
|
},
|
|
open_dialog(item) {
|
|
this.selected_item = item
|
|
this.show_details_modal = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|