From 4d7e243d3aa8729139d3311a8e670e101b3a1bbb Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 3 Jun 2020 16:06:11 +0800
Subject: [PATCH] feat(webui): mark series as read/unread

related to #25
---
 .../src/services/komga-series.service.ts      | 24 ++++++++++++
 komga-webui/src/views/BrowseLibraries.vue     | 37 ++++++++++++++++++-
 komga-webui/src/views/BrowseSeries.vue        | 24 ++++++++++--
 3 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/komga-webui/src/services/komga-series.service.ts b/komga-webui/src/services/komga-series.service.ts
index c9a6dcf5a..ddac3717d 100644
--- a/komga-webui/src/services/komga-series.service.ts
+++ b/komga-webui/src/services/komga-series.service.ts
@@ -128,4 +128,28 @@ export default class KomgaSeriesService {
       throw new Error(msg)
     }
   }
+
+  async markAsRead (seriesId: number) {
+    try {
+      await this.http.post(`${API_SERIES}/${seriesId}/read-progress`)
+    } catch (e) {
+      let msg = `An error occurred while trying to mark as read for series '${seriesId}'`
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
+
+  async markAsUnread (seriesId: number) {
+    try {
+      await this.http.delete(`${API_SERIES}/${seriesId}/read-progress`)
+    } catch (e) {
+      let msg = `An error occurred while trying to mark as unread for series '${seriesId}'`
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
 }
diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index 1f435da8c..9f157c56f 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -47,6 +47,7 @@
 
     </toolbar-sticky>
 
+    <!--  Selection sticky bar  -->
     <v-scroll-y-transition hide-on-leave>
       <toolbar-sticky v-if="selected.length > 0" :elevation="5" color="white">
         <v-btn icon @click="selected=[]">
@@ -58,6 +59,24 @@
 
         <v-spacer/>
 
+        <v-btn icon @click="markSelectedRead()">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-icon v-on="on">mdi-bookmark-check</v-icon>
+            </template>
+            <span>Mark as Read</span>
+          </v-tooltip>
+        </v-btn>
+
+        <v-btn icon @click="markSelectedUnread()">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-icon v-on="on">mdi-bookmark-remove</v-icon>
+            </template>
+            <span>Mark as Unread</span>
+          </v-tooltip>
+        </v-btn>
+
         <v-btn icon @click="dialogEdit = true" v-if="isAdmin">
           <v-icon>mdi-pencil</v-icon>
         </v-btn>
@@ -94,7 +113,7 @@
           :items="series"
           :selected.sync="selected"
           :edit-function="this.singleEdit"
-          class="px-6"
+          class="px-4"
         />
       </template>
     </v-container>
@@ -319,6 +338,22 @@ export default Vue.extend({
       this.editSeriesSingle = series
       this.dialogEditSingle = true
     },
+    async markSelectedRead () {
+      await Promise.all(this.selectedSeries.map(s =>
+        this.$komgaSeries.markAsRead(s.id),
+      ))
+      this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
+        this.$komgaSeries.getOneSeries(s.id),
+      ))
+    },
+    async markSelectedUnread () {
+      await Promise.all(this.selectedSeries.map(s =>
+        this.$komgaSeries.markAsUnread(s.id),
+      ))
+      this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
+        this.$komgaSeries.getOneSeries(s.id),
+      ))
+    },
   },
 })
 </script>
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index bccb7fd86..1be134119 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -10,19 +10,27 @@
       </v-btn>
 
       <!--   Action menu   -->
-      <v-menu offset-y v-if="isAdmin">
+      <v-menu offset-y>
         <template v-slot:activator="{ on }">
           <v-btn icon v-on="on">
             <v-icon>mdi-dots-vertical</v-icon>
           </v-btn>
         </template>
         <v-list>
-          <v-list-item @click="analyze()">
+          <v-list-item @click="analyze()" v-if="isAdmin">
             <v-list-item-title>Analyze</v-list-item-title>
           </v-list-item>
-          <v-list-item @click="refreshMetadata()">
+          <v-list-item @click="refreshMetadata()" v-if="isAdmin">
             <v-list-item-title>Refresh metadata</v-list-item-title>
           </v-list-item>
+          <v-list-item
+            @click="markRead()">
+            <v-list-item-title>Mark as read</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            @click="markUnread()">
+            <v-list-item-title>Mark as unread</v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-menu>
 
@@ -124,7 +132,7 @@
         :length="totalPages"
       />
 
-      <item-browser :items="books" :selected.sync="selected" :edit-function="this.singleEdit" class="px-6"/>
+      <item-browser :items="books" :selected.sync="selected" :edit-function="this.singleEdit" class="px-4"/>
 
     </v-container>
 
@@ -347,6 +355,14 @@ export default Vue.extend({
         this.$komgaBooks.getBook(b.id),
       ))
     },
+    async markRead () {
+      await this.$komgaSeries.markAsRead(this.seriesId)
+      this.loadSeries(this.seriesId)
+    },
+    async markUnread () {
+      await this.$komgaSeries.markAsUnread(this.seriesId)
+      this.loadSeries(this.seriesId)
+    },
   },
 })
 </script>