feat(webui): display number of pages left on book details view

Closes: #1012
gotson · Jan 17, 2023 · 77424b1 · 77424b1
1 parent 4d97172
commit 77424b1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/komga-webui/src/functions/book-progress.ts b/komga-webui/src/functions/book-progress.ts
@@ -14,3 +14,10 @@ export function getReadProgressPercentage (book: BookDto): number {
   }
   return 0
 }
+
+export function getPagesLeft (book: BookDto): number {
+  if (book.readProgress?.completed === false) {
+    return book.media.pagesCount - book.readProgress?.page
+  }
+  return 0
+}
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
@@ -219,6 +219,7 @@
     "page": "Page",
     "page_number": "Page number",
     "pages": "pages",
+    "pages_left": "No pages left | 1 page left | {count} pages left",
     "pages_n": "No pages | 1 page | {count} pages",
     "password": "Password",
     "pending_tasks": "No pending tasks | 1 pending task | {count} pending tasks",

diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
@@ -111,6 +111,12 @@
             no-link
             :action-menu="false"
           ></item-card>
+          <div v-if="isInProgress"
+               class="text-caption text-center mt-1"
+               :title="$t('common.read_on', {date: readProgressDate})"
+          >
+            {{ $tc('common.pages_left', pagesLeft) }}
+          </div>
         </v-col>
 
         <v-col cols="8">
@@ -395,7 +401,7 @@ import ItemCard from '@/components/ItemCard.vue'
 import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
 import {groupAuthorsByRole} from '@/functions/authors'
 import {getBookFormatFromMediaType} from '@/functions/book-format'
-import {getReadProgress, getReadProgressPercentage} from '@/functions/book-progress'
+import {getPagesLeft, getReadProgress, getReadProgressPercentage} from '@/functions/book-progress'
 import {getBookTitleCompact} from '@/functions/book-title'
 import {bookFileUrl, bookThumbnailUrl} from '@/functions/urls'
 import {MediaStatus, ReadStatus} from '@/types/enum-books'
@@ -504,6 +510,9 @@ export default Vue.extend({
     isInProgress(): boolean {
       return getReadProgress(this.book) === ReadStatus.IN_PROGRESS
     },
+    pagesLeft(): number {
+      return getPagesLeft(this.book)
+    },
     readProgressPercentage(): number {
       return getReadProgressPercentage(this.book)
     },