owntone-server/web-src/src/pages/PageAudiobooksAlbums.vue

63 lines
1.4 KiB
Vue
Raw Normal View History

<template>
<div>
<tabs-audiobooks></tabs-audiobooks>
<content-with-heading>
2020-09-27 13:22:33 -04:00
<template slot="options">
<index-button-list :index="index_list"></index-button-list>
</template>
<template slot="heading-left">
<p class="title is-4">Audiobooks</p>
<p class="heading">{{ albums.total }} audiobooks</p>
</template>
<template slot="content">
<list-albums :albums="albums.items"></list-albums>
</template>
</content-with-heading>
</div>
</template>
<script>
import { LoadDataBeforeEnterMixin } from './mixin'
import TabsAudiobooks from '@/components/TabsAudiobooks'
2020-09-27 13:22:33 -04:00
import IndexButtonList from '@/components/IndexButtonList'
import ContentWithHeading from '@/templates/ContentWithHeading'
import ListAlbums from '@/components/ListAlbums'
import webapi from '@/webapi'
const albumsData = {
load: function (to) {
return webapi.library_albums('audiobook')
},
set: function (vm, response) {
vm.albums = response.data
}
}
export default {
name: 'PageAudiobooksAlbums',
mixins: [LoadDataBeforeEnterMixin(albumsData)],
2020-09-27 13:22:33 -04:00
components: { TabsAudiobooks, ContentWithHeading, IndexButtonList, ListAlbums },
data () {
return {
albums: { items: [] }
}
},
2020-09-27 13:22:33 -04:00
computed: {
index_list () {
return [...new Set(this.albums.items
.map(album => album.name_sort.charAt(0).toUpperCase()))]
}
},
methods: {
}
}
</script>
<style>
</style>