From b6dd37b7f614d582a8632e1441961148030d098c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 19 Nov 2021 10:29:26 -0600
Subject: [PATCH] Add: Library list view

---
 components/home/BookshelfToolbar.vue |  3 ++-
 pages/bookshelf/library.vue          | 29 ++++++++++++++++++++++------
 store/index.js                       |  6 +++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index 66ae754a..0cf785e4 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -96,6 +96,7 @@ export default {
 
       var bookshelfView = this.isListView ? 'list' : 'grid'
       this.$localStore.setBookshelfView(bookshelfView)
+      this.$store.commit('setBookshelfView', bookshelfView)
     },
     updateOrder() {
       this.saveSettings()
@@ -113,7 +114,7 @@ export default {
       var bookshelfView = await this.$localStore.getBookshelfView()
       this.isListView = bookshelfView === 'list'
       this.bookshelfReady = true
-      console.log('Bookshelf view', bookshelfView)
+      this.$store.commit('setBookshelfView', bookshelfView)
     },
     settingsUpdated(settings) {
       for (const key in settings) {
diff --git a/pages/bookshelf/library.vue b/pages/bookshelf/library.vue
index 4887a016..ecfb6057 100644
--- a/pages/bookshelf/library.vue
+++ b/pages/bookshelf/library.vue
@@ -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>
\ No newline at end of file
+</script>
diff --git a/store/index.js b/store/index.js
index 51b2990a..86c3bd01 100644
--- a/store/index.js
+++ b/store/index.js
@@ -16,7 +16,8 @@ export const state = () => ({
   showReader: false,
   downloadFolder: null,
   mediaScanResults: {},
-  showSideDrawer: false
+  showSideDrawer: false,
+  bookshelfView: 'grid'
 })
 
 export const getters = {
@@ -104,5 +105,8 @@ export const mutations = {
   },
   setShowSideDrawer(state, val) {
     state.showSideDrawer = val
+  },
+  setBookshelfView(state, val) {
+    state.bookshelfView = val
   }
 }
\ No newline at end of file