Batch updating and deleting, multi-select

client/components/app/Appbar.vue

@@ -17,6 +17,16 @@
 
         <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" />
       </div>
+
+      <div v-show="numAudiobooksSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
+        <h1 class="text-2xl px-4">{{ numAudiobooksSelected }} Selected</h1>
+        <ui-btn small class="text-sm mx-2" @click="toggleSelectAll">{{ isAllSelected ? 'Select None' : 'Select All' }}</ui-btn>
+
+        <div class="flex-grow" />
+        <ui-btn v-show="!processingBatchDelete" color="warning" small class="mx-2" @click="batchEditClick"><span class="material-icons text-gray-200 pt-1">edit</span></ui-btn>
+        <ui-btn color="error" small class="mx-2" :loading="processingBatchDelete" @click="batchDeleteClick"><span class="material-icons text-gray-200 pt-1">delete</span></ui-btn>
+        <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+      </div>
     </div>
   </div>
 </template>
@@ -35,7 +45,8 @@ export default {
           value: 'logout',
           text: 'Logout'
         }
-      ]
+      ],
+      processingBatchDelete: false
     }
   },
   computed: {
@@ -47,6 +58,18 @@ export default {
     },
     username() {
       return this.user ? this.user.username : 'err'
+    },
+    numAudiobooksSelected() {
+      return this.selectedAudiobooks.length
+    },
+    selectedAudiobooks() {
+      return this.$store.state.selectedAudiobooks
+    },
+    isAllSelected() {
+      return this.audiobooksShowing.length === this.selectedAudiobooks.length
+    },
+    audiobooksShowing() {
+      return this.$store.getters['audiobooks/getFiltered']()
     }
   },
   methods: {
@@ -57,10 +80,6 @@ export default {
         this.$router.push('/')
       }
     },
-    scan() {
-      console.log('Call Start Init')
-      this.$root.socket.emit('scan')
-    },
     logout() {
       this.$axios.$post('/logout').catch((error) => {
         console.error(error)
@@ -74,6 +93,43 @@ export default {
       if (action === 'logout') {
         this.logout()
       }
+    },
+    cancelSelectionMode() {
+      if (this.processingBatchDelete) return
+      this.$store.commit('setSelectedAudiobooks', [])
+    },
+    toggleSelectAll() {
+      if (this.isAllSelected) {
+        this.cancelSelectionMode()
+      } else {
+        var audiobookIds = this.audiobooksShowing.map((a) => a.id)
+        this.$store.commit('setSelectedAudiobooks', audiobookIds)
+      }
+    },
+    batchDeleteClick() {
+      if (confirm(`Are you sure you want to delete these ${this.numAudiobooksSelected} audiobook(s)?`)) {
+        this.processingBatchDelete = true
+        this.$store.commit('setProcessingBatch', true)
+        this.$axios
+          .$post(`/api/audiobooks/delete`, {
+            audiobookIds: this.selectedAudiobooks
+          })
+          .then(() => {
+            this.$toast.success('Batch delete success!')
+            this.processingBatchDelete = false
+            this.$store.commit('setProcessingBatch', false)
+            this.$store.commit('setSelectedAudiobooks', [])
+          })
+          .catch((error) => {
+            this.$toast.error('Batch delete failed')
+            console.error('Failed to batch delete', error)
+            this.processingBatchDelete = false
+            this.$store.commit('setProcessingBatch', false)
+          })
+      }
+    },
+    batchEditClick() {
+      this.$router.push('/batch')
     }
   },
   mounted() {}

client/components/app/BookShelf.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-auto relative">
     <!-- Cover size widget -->
-    <div class="fixed bottom-2 right-4 z-20">
+    <div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-20">
       <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
         <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
         <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
@@ -62,6 +62,9 @@ export default {
     },
     bookWidth() {
       return this.bookCoverWidth + this.paddingX * 2
+    },
+    isSelectionMode() {
+      return this.$store.getters['getNumAudiobooksSelected']
     }
   },
   methods: {
@@ -102,8 +105,6 @@ export default {
       this.width = Math.max(0, this.width - this.rowPaddingX * 2)
       var booksPerRow = Math.floor(this.width / this.bookWidth)
       this.booksPerRow = booksPerRow
-      console.warn('this.selectedSizeIndex', this.selectedSizeIndex, 'Book Cover Size', this.bookCoverWidth)
-      console.warn('Books Per Row', this.booksPerRow, 'Width', this.width, 'Book Width', this.bookWidth)
     },
     getAudiobookCard(id) {
       if (this.$refs[`audiobookCard-${id}`] && this.$refs[`audiobookCard-${id}`].length) {

client/components/app/StreamContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-20 bg-primary p-4">
+  <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-40 bg-primary p-4">
     <div class="absolute -top-16 left-4">
       <cards-book-cover :audiobook="streamAudiobook" :width="88" />
     </div>

client/components/cards/BookCard.vue

@@ -1,28 +1,32 @@
 <template>
-  <nuxt-link :to="`/audiobook/${audiobookId}`" :style="{ padding: `16px ${paddingX}px` }" class="cursor-pointer">
-    <div class="rounded-sm h-full overflow-hidden relative bookCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+  <div class="rounded-sm h-full overflow-hidden relative bookCard" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
+    <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
       <div class="w-full relative" :style="{ height: height + 'px' }">
         <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
 
-        <div v-show="isHovering" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40">
-          <div class="h-full flex items-center justify-center">
+        <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
+          <div v-show="!isSelectionMode" class="h-full flex items-center justify-center">
             <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
               <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
             </div>
           </div>
-          <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
+          <div v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
             <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
           </div>
+          <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+          </div>
         </div>
-        <div class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
+        <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
+
+        <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
+          <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+            <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+          </div>
+        </ui-tooltip>
       </div>
-      <ui-tooltip v-if="showError" :text="errorText" class="absolute top-4 left-0">
-        <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-          <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-        </div>
-      </ui-tooltip>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>
 
 <script>
@@ -50,6 +54,18 @@ export default {
     audiobookId() {
       return this.audiobook.id
     },
+    isSelectionMode() {
+      return this.$store.getters['getNumAudiobooksSelected']
+    },
+    selectedAudiobooks() {
+      return this.$store.state.selectedAudiobooks
+    },
+    selected() {
+      return this.$store.getters['getIsAudiobookSelected'](this.audiobookId)
+    },
+    processingBatch() {
+      return this.$store.state.processingBatch
+    },
     book() {
       return this.audiobook.book || {}
     },
@@ -112,9 +128,22 @@ export default {
         txt += `${this.hasInvalidParts} invalid parts.`
       }
       return txt || 'Unknown Error'
+    },
+    overlayWrapperClasslist() {
+      var classes = []
+      if (this.isSelectionMode) classes.push('bg-opacity-60')
+      else classes.push('bg-opacity-40')
+      if (this.selected) {
+        classes.push('border-2 border-yellow-400')
+      }
+      return classes
     }
   },
   methods: {
+    selectBtnClick() {
+      if (this.processingBatch) return
+      this.$store.commit('toggleAudiobookSelected', this.audiobookId)
+    },
     clickError(e) {
       e.stopPropagation()
       this.$router.push(`/audiobook/${this.audiobookId}`)
@@ -125,6 +154,13 @@ export default {
     },
     editClick() {
       this.$store.commit('showEditModal', this.audiobook)
+    },
+    clickCard(e) {
+      if (this.isSelectionMode) {
+        e.stopPropagation()
+        e.preventDefault()
+        this.selectBtnClick()
+      }
     }
   },
   mounted() {}

client/components/ui/InputDropdown.vue

@@ -91,12 +91,20 @@ export default {
         }
         this.isFocused = false
         if (this.input !== this.textInput) {
-          this.input = this.$cleanString(this.textInput) || null
+          var val = this.$cleanString(this.textInput) || null
+          this.input = val
+          if (val && !this.items.includes(val)) {
+            this.$emit('newItem', val)
+          }
         }
       }, 50)
     },
     submitForm() {
-      this.input = this.$cleanString(this.textInput) || null
+      var val = this.$cleanString(this.textInput) || null
+      this.input = val
+      if (val && !this.items.includes(val)) {
+        this.$emit('newItem', val)
+      }
       this.currentSearch = null
     },
     clickedOption(e, item) {