add album view to genre page

src/library/genre/GenreDetails.vue

@@ -1,27 +1,57 @@
 <template>
-  <div v-if="item">
+  <div>
-    <h1>{{ item.name }}</h1>
+    <h1>{{ id }}</h1>
-    <TrackList :tracks="item.tracks" show-album />
+    <ul class="nav-underlined">
+      <li>
+        <router-link :to="{... $route, params: { }}">
+          Albums
+        </router-link>
+      </li>
+      <li>
+        <router-link :to="{... $route, params: { section: 'tracks' }}">
+          Tracks
+        </router-link>
+      </li>
+    </ul>
+    <template v-if="section === 'tracks'">
+      <Spinner v-slot="{ data }" :data="tracks">
+        <TrackList :tracks="data" show-album />
+      </Spinner>
+    </template>
+    <template v-else>
+      <Spinner v-slot="{ data }" :data="albums">
+        <AlbumList :items="data" />
+      </Spinner>
+    </template>
   </div>
 </template>
 <script lang="ts">
   import Vue from 'vue'
+  import AlbumList from '@/library/album/AlbumList.vue'
   import TrackList from '@/library/TrackList.vue'
 
   export default Vue.extend({
     components: {
+      AlbumList,
       TrackList,
     },
     props: {
-      id: { type: String, required: true }
+      id: { type: String, required: true },
+      section: { type: String, default: '' },
     },
     data() {
       return {
-        item: null as any,
+        albums: null as null | any[],
+        tracks: null as null | any[],
       }
     },
-    async created() {
+    created() {
-      this.item = await this.$api.getGenreDetails(this.id)
+      this.$api.getAlbumsByGenre(this.id).then(result => {
+        this.albums = result
+      })
+      this.$api.getTracksByGenre(this.id).then(result => {
+        this.tracks = result
+      })
     }
   })
 </script>

src/shared/api.ts

@@ -107,17 +107,25 @@ export class API {
       .sort((a: any, b:any) => a.name.localeCompare(b.name))
   }
 
-  async getGenreDetails(id: string) {
+  async getAlbumsByGenre(id: string) {
+    const params = {
+      type: 'byGenre',
+      genre: id,
+      count: 500,
+      offset: 0,
+    }
+    const response = await this.get('rest/getAlbumList2', params)
+    return (response.albumList2?.album || []).map(this.normalizeAlbum, this)
+  }
+
+  async getTracksByGenre(id: string) {
     const params = {
       genre: id,
       count: 500,
       offset: 0,
     }
     const response = await this.get('rest/getSongsByGenre', params)
-    return {
+    return (response.songsByGenre?.song || []).map(this.normalizeTrack, this)
-      name: id,
-      tracks: (response.songsByGenre?.song || []).map(this.normalizeTrack, this),
-    }
   }
 
   async getArtists(): Promise<Artist[]> {

src/shared/router.ts

@@ -69,7 +69,7 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'genre',
-        path: '/genre/:id',
+        path: '/genre/:id/:section?',
         component: GenreDetails,
         props: true,
       },