From 10cee6d1c07d76875a96f8ef85f608bc8103a8ef Mon Sep 17 00:00:00 2001
From: marcsello <punkosdmarcell@rocketmail.com>
Date: Sat, 28 Nov 2020 18:47:08 +0100
Subject: [PATCH] Added "Search"

---
 src/views/Collection.vue | 78 ++++++++++++++++++++++++++++------------
 1 file changed, 55 insertions(+), 23 deletions(-)

diff --git a/src/views/Collection.vue b/src/views/Collection.vue
index 4727e79..af9e13b 100644
--- a/src/views/Collection.vue
+++ b/src/views/Collection.vue
@@ -11,33 +11,44 @@
       </b-col>
     </b-row>
     <big-chungus-loader text="Fetching track list..." v-if="processing"/>
-    <b-row v-else>
-      <b-col class="my-4">
+    <div  class="my-4" v-else>
+      <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"
-                 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"
-                        v-if="!!data.item.cover_url_small"/>
-            <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
-          </template>
+          <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"
+                          v-if="!!data.item.cover_url_small"/>
+              <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
+            </template>
 
-          <template #cell(id)="data">
-            <div class="text-right">
-              <b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
-                <b-icon icon="play-fill"/>
-                Play
-              </b-button>
-            </div>
-          </template>
-        </b-table>
+            <template #cell(id)="data">
+              <div class="text-right">
+                <b-button variant="success" :disabled="!data.item.spotify_id"
+                          @click="startPlayer(data.item.spotify_id)">
+                  <b-icon icon="play-fill"/>
+                  Play
+                </b-button>
+              </div>
+            </template>
+          </b-table>
 
-        <div v-if="totalPages > 1">
-          <b-pagination-nav :number-of-pages="totalPages" use-router align="center" :link-gen="paginateLinkGenerator"/>
-        </div>
+          <div v-if="totalPages > 1">
+            <b-pagination-nav :number-of-pages="totalPages" use-router align="center"
+                              :link-gen="paginateLinkGenerator"/>
+          </div>
 
-      </b-col>
-    </b-row>
+        </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>