From e5e7702fc5cafeedf70df915da93bdc2235e1f85 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 3 Apr 2024 20:31:13 +0200
Subject: [PATCH] [web] Streamline search pages

---
 web-src/src/pages/PageSearchLibrary.vue | 14 ++++-----
 web-src/src/pages/PageSearchSpotify.vue | 39 ++++++++++++-------------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 6304bb36..e088ae7d 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -148,7 +148,7 @@ export default {
 
   mounted() {
     this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
-    this.search(this.$route)
+    this.search()
   },
 
   methods: {
@@ -175,16 +175,16 @@ export default {
         query: { query: this.$route.query.query, type }
       })
     },
-    search(route) {
-      this.search_query = route.query.query?.trim()
+    search() {
+      this.search_query = this.$route.query.query?.trim()
       if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
         this.$refs.search_field.focus()
         return
       }
-      route.query.query = this.search_query
-      this.searchMusic(route.query)
-      this.searchType(route.query, 'audiobook')
-      this.searchType(route.query, 'podcast')
+      this.$route.query.query = this.search_query
+      this.searchMusic(this.$route.query)
+      this.searchType(this.$route.query, 'audiobook')
+      this.searchType(this.$route.query, 'podcast')
       this.$store.dispatch('add_recent_search', this.search_query)
     },
     searchMusic(query) {
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 54424eba..28849ebc 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -39,7 +39,7 @@
       </template>
       <template #content>
         <component :is="components[type]" :items="results[type].items" />
-        <VueEternalLoading v-if="query.type === type" :load="search_next">
+        <VueEternalLoading v-if="$route.query.type === type" :load="search_next">
           <template #loading>
             <div class="columns is-centered">
               <div class="column has-text-centered">
@@ -106,7 +106,6 @@ export default {
         playlist: ListPlaylistsSpotify.name,
         track: ListTracksSpotify.name
       },
-      query: {},
       results: {
         album: { items: [], total: 0 },
         artist: { items: [], total: 0 },
@@ -129,14 +128,12 @@ export default {
 
   watch: {
     $route(to, from) {
-      this.query = to.query
       this.search()
     }
   },
 
   mounted() {
     this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
-    this.query = this.$route.query
     this.search()
   },
 
@@ -171,23 +168,23 @@ export default {
     },
     search() {
       this.reset()
-      this.search_query = this.query.query?.trim()
+      this.search_query = this.$route.query.query?.trim()
       if (!this.search_query || this.search_query.startsWith('query:')) {
         this.search_query = ''
         this.$refs.search_field.focus()
         return
       }
-      this.query.query = this.search_query
-      this.search_param.limit = this.query.limit ?? PAGE_SIZE
-      this.search_param.offset = this.query.offset ?? 0
-      this.$store.dispatch('add_recent_search', this.query.query)
+      this.$route.query.query = this.search_query
       this.search_all()
+      this.$store.dispatch('add_recent_search', this.search_query)
     },
     search_all() {
-      const types = this.query.type
+      this.search_param.limit = this.$route.query.limit ?? PAGE_SIZE
+      this.search_param.offset = this.$route.query.offset ?? 0
+      const types = this.$route.query.type
         .split(',')
         .filter((type) => this.search_types.includes(type))
-      this.spotify_search(types).then((data) => {
+      this.search_spotify(types).then((data) => {
         this.results.track = data.tracks ?? { items: [], total: 0 }
         this.results.artist = data.artists ?? { items: [], total: 0 }
         this.results.album = data.albums ?? { items: [], total: 0 }
@@ -195,8 +192,8 @@ export default {
       })
     },
     search_next({ loaded }) {
-      const items = this.results[this.query.type]
-      this.spotify_search([this.query.type]).then((data) => {
+      const items = this.results[this.$route.query.type]
+      this.search_spotify([this.$route.query.type]).then((data) => {
         const [next] = Object.values(data)
         items.items.push(...next.items)
         items.total = next.total
@@ -204,20 +201,20 @@ export default {
         loaded(next.items.length, PAGE_SIZE)
       })
     },
+    search_spotify(types) {
+      return webapi.spotify().then(({ data }) => {
+        this.search_param.market = data.webapi_country
+        const spotifyApi = new SpotifyWebApi()
+        spotifyApi.setAccessToken(data.webapi_token)
+        return spotifyApi.search(this.$route.query.query, types, this.search_param)
+      })
+    },
     show(type) {
       return this.$route.query.type?.includes(type) ?? false
     },
     show_all_button(type) {
       const items = this.results[type]
       return items.total > items.items.length
-    },
-    spotify_search(types) {
-      return webapi.spotify().then(({ data }) => {
-        this.search_param.market = data.webapi_country
-        const spotifyApi = new SpotifyWebApi()
-        spotifyApi.setAccessToken(data.webapi_token)
-        return spotifyApi.search(this.query.query, types, this.search_param)
-      })
     }
   }
 }