[web-src] Add option to artist albums list to sort by release date

web-src/src/lib/Albums.js

@@ -21,6 +21,8 @@ export default class Albums {
       return album.time_added.substring(0, 4)
     } else if (this.options.sort === 'Recently released') {
       return album.date_released ? album.date_released.substring(0, 4) : '0000'
+    } else if (this.options.sort === 'Release date') {
+      return album.date_released ? album.date_released.substring(0, 4) : '0000'
     }
     return album.name_sort.charAt(0).toUpperCase()
   }
@@ -57,6 +59,16 @@ export default class Albums {
         }
         return b.date_released.localeCompare(a.date_released)
       })
+    } else if (this.options.sort === 'Release date') {
+      albumsSorted = [...albumsSorted].sort((a, b) => {
+        if (!a.date_released) {
+          return -1
+        }
+        if (!b.date_released) {
+          return 1
+        }
+        return a.date_released.localeCompare(b.date_released)
+      })
     }
     this.sortedAndFiltered = albumsSorted
   }

web-src/src/pages/PageArtist.vue

@@ -1,5 +1,13 @@
 <template>
   <content-with-heading>
+      <template slot="options">
+        <div class="columns">
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Sort by</p>
+            <dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
+          </div>
+        </div>
+      </template>
     <template slot="heading-left">
       <p class="title is-4">{{ artist.name }}</p>
     </template>
@@ -15,7 +23,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | <a class="has-text-link" @click="open_tracks">{{ artist.track_count }} tracks</a></p>
-      <list-albums :albums="albums.items"></list-albums>
+      <list-albums :albums="albums_list"></list-albums>
       <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
     </template>
   </content-with-heading>
@@ -26,7 +34,10 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListAlbums from '@/components/ListAlbums'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
+import DropdownMenu from '@/components/DropdownMenu'
 import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+import Albums from '@/lib/Albums'
 
 const artistData = {
   load: function (to) {
@@ -45,17 +56,36 @@ const artistData = {
 export default {
   name: 'PageArtist',
   mixins: [LoadDataBeforeEnterMixin(artistData)],
-  components: { ContentWithHeading, ListAlbums, ModalDialogArtist },
+  components: { ContentWithHeading, ListAlbums, ModalDialogArtist, DropdownMenu },
 
   data () {
     return {
       artist: {},
-      albums: {},
+      albums: { items: [] },
 
+      sort_options: ['Name', 'Release date'],
       show_artist_details_modal: false
     }
   },
 
+  computed: {
+    albums_list () {
+      return new Albums(this.albums.items, {
+        sort: this.sort,
+        group: false
+      })
+    },
+
+    sort: {
+      get () {
+        return this.$store.state.artist_albums_sort
+      },
+      set (value) {
+        this.$store.commit(types.ARTIST_ALBUMS_SORT, value)
+      }
+    }
+  },
+
   methods: {
     open_tracks: function () {
       this.$router.push({ path: '/music/artists/' + this.artist.id + '/tracks' })

web-src/src/router/index.js

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

web-src/src/store/index.js

@@ -55,6 +55,7 @@ export default new Vuex.Store({
     hide_singles: false,
     hide_spotify: false,
     artists_sort: 'Name',
+    artist_albums_sort: 'Name',
     albums_sort: 'Name',
     show_only_next_items: false,
     show_burger_menu: false,
@@ -192,6 +193,9 @@ export default new Vuex.Store({
     [types.ARTISTS_SORT] (state, sort) {
       state.artists_sort = sort
     },
+    [types.ARTIST_ALBUMS_SORT] (state, sort) {
+      state.artist_albums_sort = sort
+    },
     [types.ALBUMS_SORT] (state, sort) {
       state.albums_sort = sort
     },

web-src/src/store/mutation_types.js

@@ -21,6 +21,7 @@ export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
 export const HIDE_SINGLES = 'HIDE_SINGLES'
 export const HIDE_SPOTIFY = 'HIDE_SPOTIFY'
 export const ARTISTS_SORT = 'ARTISTS_SORT'
+export const ARTIST_ALBUMS_SORT = 'ARTIST_ALBUMS_SORT'
 export const ALBUMS_SORT = 'ALBUMS_SORT'
 export const SHOW_ONLY_NEXT_ITEMS = 'SHOW_ONLY_NEXT_ITEMS'
 export const SHOW_BURGER_MENU = 'SHOW_BURGER_MENU'

web-src/src/templates/ContentWithHeading.vue

@@ -4,7 +4,7 @@
       <div class="columns is-centered">
         <div class="column is-four-fifths">
           <section v-if="$slots['options']">
-            <div v-observe-visibility="observer_options"></div>
+            <div v-observe-visibility="observer_options" style="height:2px;"></div>
             <slot name="options"></slot>
             <nav class="buttons is-centered" style="margin-bottom: 6px; margin-top: 16px;">
               <a v-if="!options_visible" class="button is-small is-white" @click="scroll_to_top"><span class="icon is-small"><i class="mdi mdi-chevron-up"></i></span></a>