Merge pull request #4542 from advplyr/progress_updated_sort

Add book library sort by progress updated #1215

client/components/cards/LazyBookCard.vue

@@ -101,7 +101,8 @@
         <!-- Podcast Episode # -->
         <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
           <p :style="{ fontSize: 0.8 + 'em' }">
-            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+            Episode
+            <span v-if="recentEpisodeNumber">#{{ recentEpisodeNumber }}</span>
           </p>
         </div>
 
@@ -200,6 +201,9 @@ export default {
     dateFormat() {
       return this.store.getters['getServerSetting']('dateFormat')
     },
+    timeFormat() {
+      return this.store.getters['getServerSetting']('timeFormat')
+    },
     _libraryItem() {
       return this.libraryItem || {}
     },
@@ -345,6 +349,10 @@ export default {
         if (this.mediaMetadata.publishedYear) return this.$getString('LabelPublishedDate', [this.mediaMetadata.publishedYear])
         return '\u00A0'
       }
+      if (this.orderBy === 'progress') {
+        if (!this.userProgressLastUpdated) return '\u00A0'
+        return this.$getString('LabelLastProgressDate', [this.$formatDatetime(this.userProgressLastUpdated, this.dateFormat, this.timeFormat)])
+      }
       return null
     },
     episodeProgress() {
@@ -377,6 +385,10 @@ export default {
       let progressPercent = this.itemIsFinished ? 1 : this.booksInSeries ? this.seriesProgressPercent : this.useEBookProgress ? this.userProgress?.ebookProgress || 0 : this.userProgress?.progress || 0
       return Math.max(Math.min(1, progressPercent), 0)
     },
+    userProgressLastUpdated() {
+      if (!this.userProgress) return null
+      return this.userProgress.lastUpdate
+    },
     itemIsFinished() {
       if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false

client/components/controls/LibrarySortSelect.vue

@@ -7,7 +7,7 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+    <ul v-show="showMenu" class="librarySortMenu absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
       <template v-for="item in selectItems">
         <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
           <div class="flex items-center">
@@ -130,6 +130,10 @@ export default {
           text: this.$strings.LabelFileModified,
           value: 'mtimeMs'
         },
+        {
+          text: this.$strings.LabelLibrarySortByProgress,
+          value: 'progress'
+        },
         {
           text: this.$strings.LabelRandomly,
           value: 'random'
@@ -191,3 +195,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.librarySortMenu {
+  max-height: calc(100vh - 125px);
+}
+</style>

client/store/user.js

@@ -92,7 +92,7 @@ export const actions = {
       if (state.settings.orderBy == 'media.duration') {
         settingsUpdate.orderBy = 'media.numTracks'
       }
-      if (state.settings.orderBy == 'media.metadata.publishedYear') {
+      if (state.settings.orderBy == 'media.metadata.publishedYear' || state.settings.orderBy == 'progress') {
         settingsUpdate.orderBy = 'media.metadata.title'
       }
       const invalidFilters = ['series', 'authors', 'narrators', 'publishers', 'publishedDecades', 'languages', 'progress', 'issues', 'ebooks', 'abridged']

client/strings/en-us.json

@@ -418,6 +418,7 @@
   "LabelLanguages": "Languages",
   "LabelLastBookAdded": "Last Book Added",
   "LabelLastBookUpdated": "Last Book Updated",
+  "LabelLastProgressDate": "Last progress: {0}",
   "LabelLastSeen": "Last Seen",
   "LabelLastTime": "Last Time",
   "LabelLastUpdate": "Last Update",
@@ -430,6 +431,7 @@
   "LabelLibraryFilterSublistEmpty": "No {0}",
   "LabelLibraryItem": "Library Item",
   "LabelLibraryName": "Library Name",
+  "LabelLibrarySortByProgress": "Progress Updated",
   "LabelLimit": "Limit",
   "LabelLineSpacing": "Line spacing",
   "LabelListenAgain": "Listen Again",

server/utils/queries/libraryItemsBookFilters.js

@@ -399,9 +399,6 @@ module.exports = {
     if (filterGroup !== 'series' && sortBy === 'sequence') {
       sortBy = 'media.metadata.title'
     }
-    if (filterGroup !== 'progress' && sortBy === 'progress') {
-      sortBy = 'media.metadata.title'
-    }
     const includeRSSFeed = include.includes('rssfeed')
     const includeMediaItemShare = !!user?.isAdminOrUp && include.includes('share')
 
@@ -532,6 +529,18 @@ module.exports = {
       }
     }
 
+    // When sorting by progress but not filtering by progress, include media progresses
+    if (filterGroup !== 'progress' && sortBy === 'progress') {
+      bookIncludes.push({
+        model: Database.mediaProgressModel,
+        attributes: ['id', 'isFinished', 'currentTime', 'ebookProgress', 'updatedAt'],
+        where: {
+          userId: user.id
+        },
+        required: false
+      })
+    }
+
     let { mediaWhere, replacements } = this.getMediaGroupQuery(filterGroup, filterValue)
     let bookWhere = Array.isArray(mediaWhere) ? mediaWhere : [mediaWhere]