Add: Library list view

This commit is contained in:
advplyr 2021-11-19 10:29:26 -06:00
parent fd79baed61
commit b6dd37b7f6
3 changed files with 30 additions and 8 deletions

View file

@ -1,8 +1,15 @@
<template>
<div class="w-full h-full">
<template v-for="(shelf, index) in shelves">
<bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
</template>
<div class="w-full h-full" v-show="!isListView">
<template v-for="(shelf, index) in shelves">
<bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
</template>
</div>
<div class="w-full h-full px-4 py-2" v-show="isListView">
<template v-for="book in books">
<app-bookshelf-list-row :key="book.id" :audiobook="book" :page-width="pageWidth" class="my-2" />
</template>
</div>
</div>
</template>
@ -10,10 +17,17 @@
export default {
data() {
return {
booksPerRow: 3
booksPerRow: 3,
pageWidth: 0
}
},
computed: {
bookshelfView() {
return this.$store.state.bookshelfView
},
isListView() {
return this.bookshelfView === 'list'
},
books() {
return this.$store.getters['audiobooks/getFilteredAndSorted']()
},
@ -37,12 +51,15 @@ export default {
}
}
if (shelf.books.length) {
shelf.id++
shelves.push(shelf)
}
return shelves
}
},
methods: {},
mounted() {}
mounted() {
this.pageWidth = window.innerWidth
}
}
</script>
</script>