[web-src] dedicated 'genre tracks' page

web-src/src/pages/PageGenre.vue

@@ -5,7 +5,7 @@
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">{{ name }}</p>
-        <p class="heading">{{ genreAlbums.total }} albums</p>
+        <p class="heading">{{ genreAlbums.total }} albums | <a class="has-text-link" @click="open_tracks">{{ tracks }} tracks</a></p>
       </template>
       <template slot="heading-right">
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -65,6 +65,11 @@ export default {
   },
 
   methods: {
+    open_tracks: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/genres/' + this.name + '/tracks' })
+    },
+
     play: function () {
       webapi.player_play_uri(this.genreAlbums.items.map(a => a.uri).join(','), true)
     }

web-src/src/pages/PageGenreTracks.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">{{ genre }}</p>
+        <p class="heading">{{ tracks.total }} tracks</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
+        </a>
+      </template>
+      <template slot="content">
+        <p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_genre">albums</a> | tracks</p>
+        <list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" :position="index" :context_uri="track.uri" :links="links"></list-item-track>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const tracksData = {
+  load: function (to) {
+    return webapi.library_genre_tracks(to.params.genre)
+  },
+
+  set: function (vm, response) {
+    vm.genre = vm.$route.params.genre
+    vm.tracks = response.data.tracks
+  }
+}
+
+export default {
+  name: 'PageGenreTracks',
+  mixins: [ LoadDataBeforeEnterMixin(tracksData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      tracks: {},
+      genre: '',
+      links: []
+    }
+  },
+
+  methods: {
+    open_genre: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/genres/' + this.genre })
+    },
+
+    play: function () {
+      webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/router/index.js

@@ -13,6 +13,7 @@ import PageAlbums from '@/pages/PageAlbums'
 import PageAlbum from '@/pages/PageAlbum'
 import PageGenres from '@/pages/PageGenres'
 import PageGenre from '@/pages/PageGenre'
+import PageGenreTracks from '@/pages/PageGenreTracks'
 import PageTracks from '@/pages/PageTracks'
 import PagePodcasts from '@/pages/PagePodcasts'
 import PagePodcast from '@/pages/PagePodcast'
@@ -113,6 +114,12 @@ export const router = new VueRouter({
       component: PageGenre,
       meta: { show_progress: true }
     },
+    {
+      path: '/music/genres/:genre/tracks',
+      name: 'GenreTracks',
+      component: PageGenreTracks,
+      meta: { show_progress: true }
+    },
     {
       path: '/podcasts',
       name: 'Podcasts',

web-src/src/webapi/index.js

@@ -163,6 +163,17 @@ export default {
     })
   },
 
+  library_genre_tracks (genre) {
+    var genreParams = {
+      'type': 'tracks',
+      'media_kind': 'music',
+      'expression': 'genre is "' + genre + '"'
+    }
+    return axios.get('/api/search', {
+      params: genreParams
+    })
+  },
+
   library_artist_tracks (artist) {
     if (artist) {
       var artistParams = {