From 93d3fdc85ae714ffe55a3fbf6c2330c2b6c4c89d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Marseault?=
 <22910497+Larsluph@users.noreply.github.com>
Date: Wed, 3 May 2023 17:49:19 +0200
Subject: [PATCH] perf: Add mark all as read button in RssArticles view (#798)

---
 src/lang/en.json          |  1 +
 src/views/RssArticles.vue | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 6a9d62a9..8e2f04ea 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -190,6 +190,7 @@
     "rss": {
       "title": "RSS Articles",
       "filterRead": "Unread articles only",
+      "markAllAsRead": "Mark all as read",
       "columnTitle": {
         "feedName": "Feed Name",
         "author": "Author",
diff --git a/src/views/RssArticles.vue b/src/views/RssArticles.vue
index f227f5be..531feb7c 100644
--- a/src/views/RssArticles.vue
+++ b/src/views/RssArticles.vue
@@ -19,7 +19,7 @@
       <v-data-table
         id="articlesTable"
         :headers="headers"
-        :items="articles"
+        :items="filterUnread ? unreadArticles : articles"
         :items-per-page="15"
         :search="filter"
         :custom-filter="customFilter"
@@ -30,7 +30,16 @@
         <template #top>
           <div class="mx-4">
             <v-text-field v-model="filter" :label="$t('filter')" />
-            <v-checkbox v-model="filterUnread" :label="$t('modals.rss.filterRead')" hide-details />
+            <v-row>
+              <v-col>
+                <v-checkbox class="my-0" v-model="filterUnread" :label="$t('modals.rss.filterRead')" hide-details />
+              </v-col>
+              <v-col>
+                <v-btn style="float: right" small elevation="3" @click="markAllAsRead">
+                  {{  $t('modals.rss.markAllAsRead') }}
+                </v-btn>
+              </v-col>
+            </v-row>
           </div>
         </template>
         <template #[`item.title`]="{ item }">
@@ -103,7 +112,10 @@ export default defineComponent({
       ;(this.rss as RssState).feeds.forEach((feed: Feed) => {
         feed.articles && articles.push(...feed.articles.map(article => ({ feedName: feed.name, parsedDate: new Date(article.date), ...article })))
       })
-      return articles.filter(article => (this.filterUnread ? !article.isRead : true))
+      return articles
+    },
+    unreadArticles() {
+      return this.articles.filter(article => !article.isRead)
     }
   },
   methods: {
@@ -124,6 +136,11 @@ export default defineComponent({
       await qbit.markAsRead(item.feedName, item.id)
       this.$store.commit('FETCH_FEEDS')
     },
+    async markAllAsRead() {
+      for (const article of this.unreadArticles) {
+        await this.markAsRead(article)
+      }
+    },
     handleKeyboardShortcut(e: KeyboardEvent) {
       if (e.key === 'Escape') {
         this.close()