Added "Search"

src/views/Collection.vue

@@ -11,10 +11,18 @@
       </b-col>
     </b-row>
     <big-chungus-loader text="Fetching track list..." v-if="processing"/>
-    <b-row v-else>
+    <div  class="my-4" v-else>
-      <b-col class="my-4">
+      <b-row>
+        <b-col cols="12" sm="6" lg="3" class="ml-auto">
+          <div>
+            <b-input v-model="searchTerm" placeholder="Filter"></b-input>
+          </div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
 
-        <b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked"
+          <b-table :items="filteredList" :fields="fields" hover borderless @row-clicked="rowClicked"
                    tbody-tr-class="clickable-table-row-thing" responsive="md">
             <template #cell(cover_url)="data">
               <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
@@ -24,7 +32,8 @@
 
             <template #cell(id)="data">
               <div class="text-right">
-              <b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
+                <b-button variant="success" :disabled="!data.item.spotify_id"
+                          @click="startPlayer(data.item.spotify_id)">
                   <b-icon icon="play-fill"/>
                   Play
                 </b-button>
@@ -33,11 +42,13 @@
           </b-table>
 
           <div v-if="totalPages > 1">
-          <b-pagination-nav :number-of-pages="totalPages" use-router align="center" :link-gen="paginateLinkGenerator"/>
+            <b-pagination-nav :number-of-pages="totalPages" use-router align="center"
+                              :link-gen="paginateLinkGenerator"/>
           </div>
 
         </b-col>
       </b-row>
+    </div>
   </b-container>
 </template>
 
@@ -55,6 +66,7 @@ export default {
       collectionName: "",
       totalItems: 0,
       itemsPerPage: 10,
+      searchTerm: "",
       fields: [
         {
           key: "cover_url",
@@ -117,9 +129,29 @@ export default {
   computed: {
     totalPages() {
       return Math.ceil(this.totalItems / this.itemsPerPage);
+    },
+    filteredList() {
+
+      if (!this.searchTerm) {
+        return this.tracklist;
+      }
+
+      return this.tracklist.filter(item => {
+        if (item.title.toLowerCase().includes(this.searchTerm.toLowerCase())) {
+          return true;
+        }
+        if (item.album.toLowerCase().includes(this.searchTerm.toLowerCase())) {
+          return true;
+        }
+        if (item.artist.toLowerCase().includes(this.searchTerm.toLowerCase())) {
+          return true;
+        }
+        return false;
+      })
     }
   }
 }
+
 </script>
 
 <style>