perf: Add RSS unread filter (#657) @Larsluph

src/components/Modals/SearchModal/SearchModal.vue

@@ -37,7 +37,7 @@
           :mobile-breakpoint="0"
         >
           <template #top>
-            <v-text-field ref="filterRef" v-model="filter" label="Filter" class="mx-4" />
+            <v-text-field ref="filterRef" v-model="filter" :label="$t('filter')" class="mx-4" />
           </template>
           <template #[`item.fileName`]="{ item }">
             <a :href="item.descrLink" target="_blank" v-text="item.fileName" />

src/lang/en.json

@@ -49,6 +49,7 @@
   "of": "of",
   "yes": "yes",
   "no": "no",
+  "filter": "Filter",
   "dashboard": {
     "tooltips": {
       "toggleSearch": "Toggle Search Filter",
@@ -143,6 +144,7 @@
     },
     "rss": {
       "title": "RSS Articles",
+      "filterRead": "Unread articles only",
       "columnTitle": {
         "feedName": "Feed Name",
         "author": "Author",

src/lang/fr.json

@@ -46,6 +46,7 @@
   "then": "Alors",
   "yes": "oui",
   "no": "non",
+  "filter": "Filtre",
   "dashboard": {
     "tooltips": {
       "toggleSearch": "Rechercher un torrent",
@@ -139,6 +140,7 @@
     },
     "rss": {
       "title": "Articles RSS",
+      "filterUnread": "Articles non-lu uniquement",
       "columnTitle": {
         "feedName": "Nom du Flux",
         "author": "Auteur",

src/views/RssArticles.vue

@@ -28,7 +28,10 @@
         :item-class="getRowStyle"
       >
         <template #top>
-          <v-text-field ref="filterRef" v-model="filter" label="Filter" class="mx-4" />
+          <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 />
+          </div>
         </template>
         <template #[`item.title`]="{ item }">
           <a :href="item.link" target="_blank" v-text="item.title" />
@@ -76,6 +79,7 @@ export default defineComponent({
         { text: this.$t('modals.rss.columnTitle.actions'), value: 'actions', sortable: false }
       ],
       filter: '',
+      filterUnread: false,
       sortBy: 'parsedDate',
       reverse: true,
       mdiEmailOpen,
@@ -99,7 +103,7 @@ 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
+      return articles.filter(article => (this.filterUnread ? !article.isRead : true))
     }
   },
   methods: {
@@ -107,7 +111,8 @@ export default defineComponent({
       this.$router.back()
     },
     customFilter(value: string, query: string, item?: any): boolean {
-      return (item as FeedArticle).title.toLowerCase().indexOf(query.toLowerCase()) !== -1
+      const article = item as FeedArticle
+      return article.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
     },
     getRowStyle(item: FeedArticle) {
       return item.isRead ? 'rss-read' : 'rss-unread'
@@ -135,7 +140,6 @@ export default defineComponent({
 .rss-actions {
   display: flex;
   flex-direction: row;
-  /*column-gap: 5px;*/
 }
 </style>