Add:Authors page #618

This commit is contained in:
advplyr 2023-03-02 17:59:11 -06:00
parent 322f7d75dd
commit a81f50878e
3 changed files with 71 additions and 13 deletions

View file

@ -101,15 +101,15 @@ export default {
icon: 'collections_bookmark', icon: 'collections_bookmark',
iconClass: 'text-xl', iconClass: 'text-xl',
text: 'Collections' text: 'Collections'
},
{
to: '/bookshelf/authors',
routeName: 'bookshelf-authors',
iconPack: 'abs-icons',
icon: 'authors',
iconClass: 'text-2xl',
text: 'Authors'
} }
// {
// to: '/bookshelf/authors',
// routeName: 'bookshelf-authors',
// iconPack: 'abs-icons',
// icon: 'authors',
// iconClass: 'text-2xl pb-px',
// text: 'Authors'
// }
] ]
} }

View file

@ -66,6 +66,8 @@ export default {
return 'Collections' return 'Collections'
} else if (this.page === 'playlists') { } else if (this.page === 'playlists') {
return 'Playlists' return 'Playlists'
} else if (this.page === 'authors') {
return 'Authors'
} }
return '' return ''
}, },

View file

@ -1,14 +1,70 @@
<template> <template>
<div>Authors</div> <div>
<div id="bookshelf" class="w-full h-full p-4 overflow-y-auto">
<div class="flex flex-wrap justify-center">
<template v-for="author in authors">
<cards-author-card :key="author.id" :author="author" :width="96" :height="120" class="p-2" />
</template>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {} return {
loading: true,
authors: []
}
}, },
watch: {}, computed: {
computed: {}, currentLibraryId() {
methods: {} return this.$store.state.libraries.currentLibraryId
}
},
methods: {
async init() {
this.authors = await this.$axios
.$get(`/api/libraries/${this.currentLibraryId}/authors`)
.then((response) => response.authors)
.catch((error) => {
console.error('Failed to load authors', error)
return []
})
console.log('Loaded authors', this.authors)
this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
this.loading = false
},
authorAdded(author) {
if (!this.authors.some((au) => au.id === author.id)) {
this.authors.push(author)
this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
}
},
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)
this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
}
},
mounted() {
this.init()
this.$socket.$on('author_added', this.authorAdded)
this.$socket.$on('author_updated', this.authorUpdated)
this.$socket.$on('author_removed', this.authorRemoved)
},
beforeDestroy() {
this.$socket.$off('author_added', this.authorAdded)
this.$socket.$off('author_updated', this.authorUpdated)
this.$socket.$off('author_removed', this.authorRemoved)
}
} }
</script> </script>