feat(webui): mark series as read/unread

related to #25

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)
+    }
+  }
 }

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>

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>