perf: Add mark all as read button in RssArticles view (#798)

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",

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()