Fix sort by volume number, show batch read/not read update for users

client/components/app/Appbar.vue

@@ -39,8 +39,9 @@
         <ui-btn small class="text-sm mx-2" @click="toggleSelectAll">{{ isAllSelected ? 'Select None' : 'Select All' }}</ui-btn>
 
         <div class="flex-grow" />
-        <ui-tooltip v-if="userCanUpdate" :text="`Mark as ${selectedIsRead ? 'Not Read' : 'Read'}`" direction="bottom">
+
-          <ui-read-icon-btn :is-read="selectedIsRead" @click="toggleBatchRead" class="mx-1.5" />
+        <ui-tooltip :text="`Mark as ${selectedIsRead ? 'Not Read' : 'Read'}`" direction="bottom">
+          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsRead" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
         <template v-if="userCanUpdate">
           <ui-icon-btn v-show="!processingBatchDelete" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
@@ -101,6 +102,9 @@ export default {
         var userAb = this.userAudiobooks[ab]
         return !userAb || !userAb.isRead
       })
+    },
+    processingBatch() {
+      return this.$store.state.processingBatch
     }
   },
   methods: {
@@ -124,6 +128,7 @@ export default {
       }
     },
     toggleBatchRead() {
+      this.$store.commit('setProcessingBatch', true)
       var newIsRead = !this.selectedIsRead
       var updateProgressPayloads = this.selectedAudiobooks.map((ab) => {
         return {

client/components/cards/BookCard.vue

@@ -24,7 +24,7 @@
               <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
             </div>
 
-            <div v-if="userCanUpdate || userCanDelete" 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">
+            <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>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/store/audiobooks.js

@@ -45,9 +45,12 @@ export const getters = {
     var direction = settings.orderDesc ? 'desc' : 'asc'
 
     var filtered = getters.getFiltered()
+    var orderByNumber = settings.orderBy === 'book.volumeNumber'
     return sort(filtered)[direction]((ab) => {
       // Supports dot notation strings i.e. "book.title"
-      return settings.orderBy.split('.').reduce((a, b) => a[b], ab)
+      var value = settings.orderBy.split('.').reduce((a, b) => a[b], ab)
+      if (orderByNumber && !isNaN(value)) return Number(value)
+      return value
     })
   },
   getUniqueAuthors: (state) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Self-hosted audiobook server for managing and playing audiobooks.",
   "main": "index.js",
   "scripts": {