Show book sequences for collapsed series when filtering by series

This commit is contained in:
Scott Ruoti 2022-10-30 11:38:00 -04:00
parent b322d0207b
commit c1035d97e8
4 changed files with 159 additions and 51 deletions

View file

@ -1,12 +1,15 @@
<template>
<div id="bookshelf" class="w-full overflow-y-auto">
<template v-for="shelf in totalShelves">
<div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
<div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
<div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative"
:class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
<div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20"
:class="`h-${shelfDividerHeightIndex}`" />
</div>
</template>
<div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
<div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'"
class="w-full flex flex-col items-center justify-center py-12">
<p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
<div v-if="userIsAdminOrUp" class="flex">
<ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
@ -319,7 +322,6 @@ export default {
this.totalEntities = payload.total
this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
this.entities = new Array(this.totalEntities)
this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
}
for (let i = 0; i < payload.results.length; i++) {
@ -329,8 +331,21 @@ export default {
this.entityComponentRefs[index].setEntity(this.entities[index])
}
}
this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
}
},
getEntitiesCount() {
let uniqueEntities = new Set()
this.entities.forEach(entity => {
if (entity.collapsedSeries) {
entity.collapsedSeries.libraryItemIds.forEach(uniqueEntities.add, uniqueEntities)
} else {
uniqueEntities.add(entity.id)
}
});
return uniqueEntities.size
},
loadPage(page) {
this.pagesLoaded[page] = true
this.fetchEntites(page)
@ -513,7 +528,7 @@ export default {
if (indexOf >= 0) {
this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
this.totalEntities = this.entities.length
this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
this.executeRebuild()
}
}
@ -551,7 +566,7 @@ export default {
if (indexOf >= 0) {
this.entities = this.entities.filter((ent) => ent.id !== collection.id)
this.totalEntities = this.entities.length
this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
this.$eventBus.$emit('bookshelf-total-entities', this.getEntitiesCount())
this.executeRebuild()
}
},
@ -715,6 +730,7 @@ export default {
.bookshelfRow {
background-image: var(--bookshelf-texture-img);
}
.bookshelfDivider {
background: rgb(149, 119, 90);
background: var(--bookshelf-divider-bg);