2021-12-03 02:02:38 +01:00
|
|
|
<template>
|
2022-03-14 01:34:31 +01:00
|
|
|
<div class="page" :class="streamLibraryItem ? 'streaming' : ''">
|
2021-12-03 02:02:38 +01:00
|
|
|
<div class="flex h-full">
|
|
|
|
<app-side-rail class="hidden md:block" />
|
|
|
|
<div class="flex-grow">
|
|
|
|
<app-book-shelf-toolbar is-home />
|
|
|
|
<div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
|
|
|
|
<div class="flex flex-wrap justify-center">
|
|
|
|
<template v-for="author in authors">
|
2022-03-13 01:50:31 +01:00
|
|
|
<nuxt-link :key="author.id" :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`">
|
2022-03-13 16:35:35 +01:00
|
|
|
<cards-author-card :author="author" :width="160" :height="200" class="p-3" />
|
2021-12-03 02:02:38 +01:00
|
|
|
</nuxt-link>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
async asyncData({ store, params, redirect, query, app }) {
|
|
|
|
var libraryId = params.library
|
|
|
|
var library = await store.dispatch('libraries/fetch', libraryId)
|
|
|
|
if (!library) {
|
|
|
|
return redirect('/oops?message=Library not found')
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
libraryId
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
loading: true,
|
|
|
|
authors: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2022-03-14 01:34:31 +01:00
|
|
|
streamLibraryItem() {
|
|
|
|
return this.$store.state.streamLibraryItem
|
2021-12-03 02:02:38 +01:00
|
|
|
},
|
|
|
|
currentLibraryId() {
|
|
|
|
return this.$store.state.libraries.currentLibraryId
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async init() {
|
|
|
|
this.authors = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors`).catch((error) => {
|
|
|
|
console.error('Failed to load authors', error)
|
|
|
|
return []
|
|
|
|
})
|
|
|
|
this.loading = false
|
2022-03-13 16:35:35 +01:00
|
|
|
},
|
|
|
|
authorAdded(author) {
|
|
|
|
if (!this.authors.some((au) => au.id === author.id)) {
|
|
|
|
this.authors.push(author)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
authorUpdated(author) {
|
|
|
|
this.authors = this.authors.map((au) => {
|
|
|
|
if (au.id === author.id) {
|
|
|
|
return author
|
|
|
|
}
|
|
|
|
return au
|
|
|
|
})
|
|
|
|
},
|
|
|
|
authorRemoved(author) {
|
|
|
|
this.authors = this.authors.filter((au) => au.id !== author.id)
|
2021-12-03 02:02:38 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.init()
|
2022-03-13 16:35:35 +01:00
|
|
|
this.$root.socket.on('author_added', this.authorAdded)
|
|
|
|
this.$root.socket.on('author_updated', this.authorUpdated)
|
|
|
|
this.$root.socket.on('author_removed', this.authorRemoved)
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
this.$root.socket.off('author_added', this.authorAdded)
|
|
|
|
this.$root.socket.off('author_updated', this.authorUpdated)
|
|
|
|
this.$root.socket.off('author_removed', this.authorRemoved)
|
2021-12-03 02:02:38 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|