search items

template/index.html

@@ -72,10 +72,13 @@
             </div>
         </div>
         <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 class="d-flex">
+                <input class="form-control" type="" v-model="itemSearch">
+                <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>
             <div class="p-2 overflow-auto" v-scroll="loadMoreItems">
                 <label v-for="item in items" :key="item.id"

template/static/javascripts/app.js

@@ -3,10 +3,10 @@
 var debounce = function(callback, wait) {
   var timeout
   return function() {
-    var context = this, args = arguments
+    var ctx = this, args = arguments
     clearTimeout(timeout)
     timeout = setTimeout(function() {
-      callback.apply(this, args)
+      callback.apply(ctx, args)
     }, wait)
   }
 }
@@ -43,6 +43,7 @@ var vm = new Vue({
       },
       'itemSelected': null,
       'itemSelectedDetails': {},
+      'itemSearch': '',
       'settings': 'create',
       'loading': {
         'newfeed': false,
@@ -121,6 +122,11 @@ var vm = new Vue({
         api.items.update(this.itemSelectedDetails.id, {status: this.itemSelectedDetails.status})
       }
     },
+    'itemSearch': debounce(function(newVal) {
+      if (newVal) {
+        this.refreshItems()
+      }
+    }, 500),
   },
   methods: {
     refreshStats: function() {
@@ -147,6 +153,9 @@ var vm = new Vue({
       if (this.filterSelected) {
         query.status = this.filterSelected
       }
+      if (this.itemSearch) {
+        query.search = this.itemSearch
+      }
       return query
     },
     refreshFeeds: function() {