mark items read

template/index.html

@@ -71,8 +71,13 @@
                 </div>
             </div>
         </div>
-        <div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
-            <div class="my-2 mx-2">
+        <div class="vh-100 d-flex flex-column border-right flex-shrink-0" style="width: 300px">
+            <div class="p-2 border-bottom" v-if="filterSelected != 'starred'">
+                <button class="btn btn-outline-secondary p-0" @click="markItemsRead()">
+                    <img src="./static/images/check.svg" alt="" style="width: 20px; height: 20px;">
+                </button>
+            </div>
+            <div class="p-2 overflow-auto">
                 <label v-for="item in items" :key="item.id"
                        class="nav-select mb-1"
                        :class="{'text-muted'  : filterSelected=='all' && item.status=='read',

template/static/images/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>

template/static/javascripts/api.js

@@ -61,7 +61,10 @@
       },
       update: function(id, data) {
         return api('put', '/api/items/' + id, data)
-      }
+      },
+      mark_read: function(query) {
+        return api('put', '/api/items' + param(query))
+      },
     },
     settings: {
       get: function() {

template/static/javascripts/app.js

@@ -66,17 +66,7 @@ var vm = new Vue({
     },
   },
   methods: {
-    refreshFeeds: function() {
-      var vm = this
-      Promise
-        .all([api.folders.list(), api.feeds.list()])
-        .then(function(values) {
-          vm.folders = values[0]
-          vm.feeds = values[1]
-        })
-    },
-    refreshItems: function() {
-      var promise = null
+    getItemsQuery: function() {
       var query = {}
       if (this.feedSelected) {
         var parts = this.feedSelected.split(':', 2)
@@ -91,10 +81,34 @@ var vm = new Vue({
       if (this.filterSelected) {
         query.status = this.filterSelected
       }
+      return query
+    },
+    refreshFeeds: function() {
+      var vm = this
+      Promise
+        .all([api.folders.list(), api.feeds.list()])
+        .then(function(values) {
+          vm.folders = values[0]
+          vm.feeds = values[1]
+        })
+    },
+    refreshItems: function() {
+      var query = this.getItemsQuery()
       api.items.list(query).then(function(items) {
         vm.items = items
       })
     },
+    markItemsRead: function() {
+      var vm = this
+      var query = this.getItemsQuery()
+      api.items.mark_read(query).then(function() {
+        vm.items.forEach(function(item) {
+          if (item.status != 'starred') {
+            item.status = 'read'
+          }
+        })
+      })
+    },
     toggleFolderExpanded: function(folder) {
       folder.is_expanded = !folder.is_expanded
     },