allow browsing additional search results

fixes #132

Author: tamland

src/library/search/SearchForm.vue

@@ -17,7 +17,7 @@
     },
     methods: {
       search(): void {
-        this.$router.push({ name: 'search', query: { q: this.query } })
+        this.$router.push({ name: 'search', query: { query: this.query } })
       }
     }
   })

src/library/search/SearchResult.vue

@@ -1,19 +1,39 @@
 <template>
-  <ContentLoader v-slot :loading="result == null">
-    <div v-if="result.artists.length > 0" class="mb-5">
-      <h1>Artists</h1>
-      <ArtistList :items="result.artists" />
-    </div>
+  <div>
     <div v-if="result.albums.length > 0" class="mb-5">
-      <h1>Albums</h1>
+      <h1 v-if="!type">
+        Albums
+        <router-link v-if="!type" :to="{params: {type: 'album'}, query: $route.query}" class="text-muted">
+          <Icon icon="chevron-right" />
+        </router-link>
+      </h1>
       <AlbumList :items="result.albums" />
     </div>
+
+    <div v-if="result.artists.length > 0" class="mb-5">
+      <h1 v-if="!type">
+        Artists
+        <router-link v-if="!type" :to="{params: {type: 'artist'}, query: $route.query}" class="text-muted">
+          <Icon icon="chevron-right" />
+        </router-link>
+      </h1>
+      <ArtistList :items="result.artists" />
+    </div>
+
     <div v-if="result.tracks.length > 0">
-      <h1>Tracks</h1>
+      <h1 v-if="!type">
+        Tracks
+        <router-link :to="{params: {type: 'track'}, query: $route.query}" class="text-muted">
+          <Icon icon="chevron-right" />
+        </router-link>
+      </h1>
       <TrackList :tracks="result.tracks" />
     </div>
-    <EmptyIndicator v-if="!hasResult" label="No results" />
-  </ContentLoader>
+
+    <EmptyIndicator v-if="!loading && !hasResult" label="No results" />
+
+    <InfiniteLoader :key="key" :loading="loading" :has-more="type ? hasMore : false" @load-more="loadMore" />
+  </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
@@ -28,30 +48,58 @@
       TrackList,
     },
     props: {
-      query: { type: String, required: true }
+      query: { type: String, required: true },
+      type: { type: String, default: null },
     },
     data() {
       return {
-        result: null as any,
+        result: {
+          albums: [] as any[],
+          artists: [] as any[],
+          tracks: [] as any[],
+        },
+        loading: true,
+        offset: 0 as number,
+        hasMore: true,
       }
     },
     computed: {
+      key(): string {
+        return '' + this.type + this.query
+      },
       hasResult(): boolean {
-        return this.result && (
+        return this.result.albums.length > 0 ||
           this.result.artists.length > 0 ||
-          this.result.albums.length > 0 ||
-          this.result.tracks.length > 0)
-      }
+          this.result.tracks.length > 0
+      },
     },
     watch: {
-      query: {
+      key: {
         immediate: true,
-        handler(value: string) {
-          this.$api.search(value).then(result => {
-            this.result = result
-          })
+        handler() {
+          this.result.artists = []
+          this.result.albums = []
+          this.result.tracks = []
+          this.offset = 0
+          this.hasMore = true
+          this.loading = true
         }
-      }
+      },
     },
+    methods: {
+      async loadMore() {
+        this.loading = true
+        const result = await this.$api.search(this.query, this.type, this.offset)
+        const size = result.albums.length + result.artists.length + result.tracks.length
+
+        this.result.albums.push(...result.albums)
+        this.result.artists.push(...result.artists)
+        this.result.tracks.push(...result.tracks)
+
+        this.offset += size
+        this.hasMore = size > 0
+        this.loading = false
+      }
+    }
   })
 </script>

src/shared/api.ts

@@ -390,15 +390,22 @@ export class API {
     await this.fetch('rest/unstar', params)
   }
 
-  async search(query: string): Promise<SearchResult> {
+  async search(query: string, type?: string, offset?: number): Promise<SearchResult> {
+    const size = 20
     const params = {
       query,
+      albumCount: !type || type === 'album' ? size : 0,
+      artistCount: !type || type === 'artist' ? size : 0,
+      songCount: !type || type === 'track' ? size : 0,
+      albumOffset: offset ?? 0,
+      artistOffset: offset ?? 0,
+      songOffset: offset ?? 0,
     }
     const data = await this.fetch('rest/search3', params)
     return {
-      tracks: (data.searchResult3.song || []).map(this.normalizeTrack, this),
       albums: (data.searchResult3.album || []).map(this.normalizeAlbum, this),
       artists: (data.searchResult3.artist || []).map(this.normalizeArtist, this),
+      tracks: (data.searchResult3.song || []).map(this.normalizeTrack, this),
     }
   }
 

src/shared/router.ts

@@ -139,10 +139,11 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'search',
-        path: '/search',
+        path: '/search/:type?',
         component: SearchResult,
         props: (route) => ({
-          query: route.query.q,
+          ...route.params,
+          ...route.query,
         })
       },
     ]