feat(webui): display unread count on series card

related to #25
gotson · Jun 4, 2020 · 4962f17 · 4962f17
1 parent 3ca50d7
commit 4962f17
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
@@ -12,7 +12,17 @@
           lazy-src="../assets/cover.svg"
           aspect-ratio="0.7071"
         >
+          <!-- unread tick for books -->
           <div class="unread" v-if="isUnread"/>
+
+          <!-- unread count for series -->
+          <span v-if="unreadCount"
+                class="white--text pa-1 px-2 subtitle-2"
+                :style="{background: 'orange', position: 'absolute', right: 0}"
+          >
+            {{ unreadCount }}
+          </span>
+
           <v-fade-transition>
             <v-overlay
               v-if="hover || selected || preselect"
@@ -129,6 +139,10 @@ export default Vue.extend({
       if ('seriesId' in this.item) return getReadProgress(this.item) === ReadProgress.UNREAD
       return false
     },
+    unreadCount (): number | undefined {
+      if (!('seriesId' in this.item)) return this.item.booksUnreadCount
+      return undefined
+    },
     readProgressPercentage (): number {
       if ('seriesId' in this.item) return getReadProgressPercentage(this.item)
       return 0

diff --git a/komga-webui/src/types/komga-series.ts b/komga-webui/src/types/komga-series.ts
@@ -5,6 +5,8 @@ interface SeriesDto {
   url: string,
   lastModified: string,
   booksCount: number,
+  booksReadCount: number,
+  booksUnreadCount: number,
   metadata: SeriesMetadata
 }