[web-src] Add index navigation to artist tracks page

web-src/src/pages/PageArtistTracks.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="index_list"></index-button-list>
+      </template>
       <template slot="heading-left">
         <p class="title is-4">{{ artist.name }}</p>
       </template>
@@ -27,6 +30,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
+import IndexButtonList from '@/components/IndexButtonList'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import webapi from '@/webapi'
@@ -48,18 +52,25 @@ const tracksData = {
 export default {
   name: 'PageArtistTracks',
   mixins: [ LoadDataBeforeEnterMixin(tracksData) ],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, IndexButtonList, ModalDialogTrack },
 
   data () {
     return {
       artist: {},
-      tracks: {},
+      tracks: { items: [] },
 
       show_details_modal: false,
       selected_track: {}
     }
   },
 
+  computed: {
+    index_list () {
+      return [...new Set(this.tracks.items
+        .map(track => track.title.charAt(0).toUpperCase()))]
+    }
+  },
+
   methods: {
     open_artist: function () {
       this.show_details_modal = false

web-src/src/router/index.js

@@ -88,7 +88,7 @@ export const router = new VueRouter({
       path: '/music/artists/:artist_id/tracks',
       name: 'Tracks',
       component: PageArtistTracks,
-      meta: { show_progress: true }
+      meta: { show_progress: true, has_index: true }
     },
     {
       path: '/music/albums',