From 4962f170284c8d43961798a77b7c27a103977821 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 3 Jun 2020 17:39:04 +0800
Subject: [PATCH] feat(webui): display unread count on series card

related to #25
---
 komga-webui/src/components/ItemCard.vue | 14 ++++++++++++++
 komga-webui/src/types/komga-series.ts   |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
index c49109d2ea..8690340f47 100644
--- 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
index 75563eba1d..cc938473a9 100644
--- 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
 }