2021-10-23 05:48:11 -04:00
|
|
|
<template>
|
2022-02-19 01:47:54 -05:00
|
|
|
<template v-for="composer in composers" :key="composer.itemId">
|
|
|
|
<div v-if="!composer.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
|
|
|
|
<div class="media-content is-clipped">
|
2022-05-29 12:49:00 -04:00
|
|
|
<span
|
|
|
|
:id="'index_' + composer.groupKey"
|
|
|
|
class="tag is-info is-light is-small has-text-weight-bold"
|
|
|
|
v-text="composer.groupKey"
|
|
|
|
/>
|
2021-10-23 05:48:11 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-05-29 12:49:00 -04:00
|
|
|
<div
|
|
|
|
v-else-if="composer.isItem"
|
|
|
|
class="media"
|
|
|
|
@click="open_composer(composer.item)"
|
|
|
|
>
|
2022-02-19 01:47:54 -05:00
|
|
|
<div class="media-content fd-has-action is-clipped">
|
2022-05-20 07:44:22 -04:00
|
|
|
<h1 class="title is-6" v-text="composer.item.name" />
|
2022-02-19 01:47:54 -05:00
|
|
|
</div>
|
|
|
|
<div class="media-right">
|
|
|
|
<a @click.prevent.stop="open_dialog(composer.item)">
|
2022-06-15 13:24:51 -04:00
|
|
|
<span class="icon has-text-dark"
|
|
|
|
><mdicon name="dots-vertical" size="16"
|
|
|
|
/></span>
|
2022-02-19 01:47:54 -05:00
|
|
|
</a>
|
|
|
|
</div>
|
2021-10-23 05:48:11 -04:00
|
|
|
</div>
|
2022-02-19 01:47:54 -05:00
|
|
|
</template>
|
|
|
|
<teleport to="#app">
|
2022-05-29 12:49:00 -04:00
|
|
|
<modal-dialog-composer
|
|
|
|
:show="show_details_modal"
|
|
|
|
:composer="selected_composer"
|
|
|
|
:media_kind="media_kind"
|
|
|
|
@close="show_details_modal = false"
|
|
|
|
/>
|
2022-02-19 01:47:54 -05:00
|
|
|
</teleport>
|
2021-10-23 05:48:11 -04:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-02-19 00:18:01 -05:00
|
|
|
import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
|
2021-10-23 05:48:11 -04:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ListComposers',
|
2022-02-19 01:47:54 -05:00
|
|
|
components: { ModalDialogComposer },
|
|
|
|
props: ['composers', 'media_kind', 'hide_group_title'],
|
2021-10-23 05:48:11 -04:00
|
|
|
|
2022-02-19 00:39:14 -05:00
|
|
|
data() {
|
2021-10-23 05:48:11 -04:00
|
|
|
return {
|
|
|
|
show_details_modal: false,
|
|
|
|
selected_composer: {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2023-06-07 15:25:54 -04:00
|
|
|
media_kind_resolved() {
|
2022-02-19 00:39:14 -05:00
|
|
|
return this.media_kind
|
|
|
|
? this.media_kind
|
|
|
|
: this.selected_composer.media_kind
|
2021-10-23 05:48:11 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2023-06-07 15:25:54 -04:00
|
|
|
open_composer(composer) {
|
2021-10-23 05:48:11 -04:00
|
|
|
this.selected_composer = composer
|
2022-02-19 00:39:14 -05:00
|
|
|
this.$router.push({
|
2022-06-04 10:40:21 -04:00
|
|
|
name: 'ComposerAlbums',
|
2022-02-19 00:39:14 -05:00
|
|
|
params: { composer: composer.name }
|
|
|
|
})
|
2021-10-23 05:48:11 -04:00
|
|
|
},
|
|
|
|
|
2023-06-07 15:25:54 -04:00
|
|
|
open_dialog(composer) {
|
2021-10-23 05:48:11 -04:00
|
|
|
this.selected_composer = composer
|
|
|
|
this.show_details_modal = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2022-02-19 00:39:14 -05:00
|
|
|
<style></style>
|