Lazy bookshelf finalized

client/components/modals/EditModal.vue

@@ -179,10 +179,16 @@ export default {
     }
   },
   methods: {
-    goPrevBook() {
+    async goPrevBook() {
       if (this.currentBookshelfIndex - 1 < 0) return
       var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
-      var prevBook = this.$store.getters['audiobooks/getAudiobook'](prevBookId)
+      this.processing = true
+      var prevBook = await this.$axios.$get(`/api/books/${prevBookId}`).catch((error) => {
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
       if (prevBook) {
         this.$store.commit('showEditModalOnTab', { audiobook: prevBook, tab: this.selectedTab })
         this.$nextTick(this.init)
@@ -190,11 +196,16 @@ export default {
         console.error('Book not found', prevBookId)
       }
     },
-    goNextBook() {
+    async goNextBook() {
       if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
-
+      this.processing = true
       var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
-      var nextBook = this.$store.getters['audiobooks/getAudiobook'](nextBookId)
+      var nextBook = await this.$axios.$get(`/api/books/${nextBookId}`).catch((error) => {
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
       if (nextBook) {
         this.$store.commit('showEditModalOnTab', { audiobook: nextBook, tab: this.selectedTab })
         this.$nextTick(this.init)

client/components/modals/UserCollectionsModal.vue

@@ -10,7 +10,7 @@
       <div v-if="show" class="w-full h-full">
         <div class="py-4 px-4">
           <h1 v-if="!showBatchUserCollectionModal" class="text-2xl">Add to Collection</h1>
-          <h1 v-else class="text-2xl">Add {{ selectedBooks.length }} Books to Collection</h1>
+          <h1 v-else class="text-2xl">Add {{ selectedBookIds.length }} Books to Collection</h1>
         </div>
         <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
           <transition-group name="list-complete" tag="div">
@@ -65,12 +65,7 @@ export default {
     },
     title() {
       if (this.showBatchUserCollectionModal) {
-        var title = this.selectedBooks[0] ? this.selectedBooks[0].book.title || '' : ''
-        if (this.selectedBooks.length > 1 && this.selectedBooks[1]) {
-          title += ', ' + this.selectedBooks[1].book.title || ''
-          if (this.selectedBooks.length > 2) title += `, and ${this.selectedBooks.length - 2} other${this.selectedBooks.length > 3 ? 's' : ''}`
-        }
-        return title
+        return `${this.selectedBookIds.length} Books Selected`
       }
       return this.selectedAudiobook ? this.selectedAudiobook.book.title : ''
     },
@@ -107,11 +102,6 @@ export default {
     },
     selectedBookIds() {
       return this.$store.state.selectedAudiobooks || []
-    },
-    selectedBooks() {
-      return this.selectedBookIds.map((id) => {
-        return this.$store.getters['audiobooks/getAudiobook'](id)
-      })
     }
   },
   methods: {

client/components/modals/edit-tabs/Details.vue

@@ -17,7 +17,7 @@
 
         <div class="flex mt-2 -mx-1">
           <div class="w-3/4 px-1">
-            <ui-input-dropdown v-model="details.series" label="Series" :items="series" />
+            <ui-input-dropdown ref="seriesDropdown" v-model="details.series" label="Series" :items="series" />
           </div>
           <div class="flex-grow px-1">
             <ui-text-input-with-label v-model="details.volumeNumber" label="Volume #" />
@@ -28,10 +28,10 @@
 
         <div class="flex mt-2 -mx-1">
           <div class="w-1/2 px-1">
-            <ui-multi-select v-model="details.genres" label="Genres" :items="genres" />
+            <ui-multi-select ref="genresSelect" v-model="details.genres" label="Genres" :items="genres" />
           </div>
           <div class="flex-grow px-1">
-            <ui-multi-select v-model="newTags" label="Tags" :items="tags" />
+            <ui-multi-select ref="tagsSelect" v-model="newTags" label="Tags" :items="tags" />
           </div>
         </div>
 
@@ -133,13 +133,16 @@ export default {
       return this.$store.getters['user/getUserCanDelete']
     },
     genres() {
-      return this.$store.state.audiobooks.genres
+      return this.filterData.genres || []
     },
     tags() {
-      return this.$store.state.audiobooks.tags
+      return this.filterData.tags || []
     },
     series() {
-      return this.$store.state.audiobooks.series
+      return this.filterData.series || []
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
     },
     libraryId() {
       return this.audiobook ? this.audiobook.libraryId : null
@@ -185,11 +188,23 @@ export default {
       this.$root.socket.once('save_metadata_complete', this.saveMetadataComplete)
       this.$root.socket.emit('save_metadata', this.audiobookId)
     },
-    async submitForm() {
+    submitForm() {
       if (this.isProcessing) {
         return
       }
       this.isProcessing = true
+      if (this.$refs.seriesDropdown && this.$refs.seriesDropdown.isFocused) {
+        this.$refs.seriesDropdown.blur()
+      }
+      if (this.$refs.genresSelect && this.$refs.genresSelect.isFocused) {
+        this.$refs.genresSelect.forceBlur()
+      }
+      if (this.$refs.tagsSelect && this.$refs.tagsSelect.isFocused) {
+        this.$refs.tagsSelect.forceBlur()
+      }
+      this.$nextTick(this.handleForm)
+    },
+    async handleForm() {
       const updatePayload = {
         book: this.details,
         tags: this.newTags

client/components/modals/edit-tabs/Download.vue

@@ -125,7 +125,7 @@ export default {
       return this.audioFiles.length + this.otherFiles.length
     },
     showM4bDownload() {
-      return !this._audiobook.isMissing && !this._audiobook.isIncomplete && this._audiobook.tracks.length
+      return !this._audiobook.isMissing && !this._audiobook.isInvalid && this._audiobook.tracks.length
     }
   },
   methods: {