From cbfea854d2898a5e5279cbefa1d16f46abdaeb24 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sat, 21 Nov 2020 10:57:39 +0100
Subject: [PATCH] [web-src] Search tab buttons now trigger search

---
 web-src/src/components/TabsSearch.vue   | 48 +++++++++++++++++++++----
 web-src/src/pages/PageSearch.vue        |  2 +-
 web-src/src/pages/SpotifyPageSearch.vue |  2 +-
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index 6b580588..5f6a9744 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -5,18 +5,18 @@
         <div class="column is-four-fifths">
           <div class="tabs is-centered is-small is-toggle is-toggle-rounded">
             <ul>
-              <router-link tag="li" :to="{ path: '/search/library', query: $route.query }" active-class="is-active">
-                <a>
+              <li :class="{ 'is-active': $route.path === '/search/library' }">
+                <a @click="search_library">
                   <span class="icon is-small"><i class="mdi mdi-library-books"></i></span>
                   <span class="">Library</span>
                 </a>
-              </router-link>
-              <router-link tag="li" :to="{ path: '/search/spotify', query: $route.query }" active-class="is-active">
-                <a>
+              </li>
+              <li :class="{ 'is-active': $route.path === '/search/spotify' }">
+                <a @click="search_spotify">
                   <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
                   <span class="">Spotify</span>
                 </a>
-              </router-link>
+              </li>
             </ul>
           </div>
         </div>
@@ -29,10 +29,46 @@
 export default {
   name: 'TabsSearch',
 
+  props: ['query'],
+
   computed: {
     spotify_enabled () {
       return this.$store.state.spotify.webapi_token_valid
     }
+  },
+
+  methods: {
+    search_library: function () {
+      if (!this.query) {
+        return
+      }
+
+      this.$router.push({
+        path: '/search/library',
+        query: {
+          type: 'track,artist,album,playlist,audiobook,podcast',
+          query: this.query,
+          limit: 3,
+          offset: 0
+        }
+      })
+    },
+
+    search_spotify: function () {
+      if (!this.query) {
+        return
+      }
+
+      this.$router.push({
+        path: '/search/spotify',
+        query: {
+          type: 'track,artist,album,playlist,audiobook,podcast',
+          query: this.query,
+          limit: 3,
+          offset: 0
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index dd52e80e..c4d86215 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -26,7 +26,7 @@
       </div>
     </section>
 
-    <tabs-search></tabs-search>
+    <tabs-search :query="search_query"></tabs-search>
 
     <!-- Tracks -->
     <content-with-heading v-if="show_tracks && tracks.total">
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index 5a373bd1..4be35191 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -23,7 +23,7 @@
       </div>
     </section>
 
-    <tabs-search></tabs-search>
+    <tabs-search :query="search_query"></tabs-search>
 
     <!-- Tracks -->
     <content-with-heading v-if="show_tracks && tracks.total">