diff --git a/changes/changelog.d/116.feature b/changes/changelog.d/116.feature new file mode 100644 index 0000000000000000000000000000000000000000..e1734340142ba84693dff9fbe3829e895e20543c --- /dev/null +++ b/changes/changelog.d/116.feature @@ -0,0 +1 @@ +On artist page, albums are not sorted by release date, if any (#116) diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue index ea42f06a8392871cca63b6d5fbe62d5f26d75455..bb37b2b2f86635e3324652f4245b08e3fa4a26a9 100644 --- a/front/src/components/audio/album/Card.vue +++ b/front/src/components/audio/album/Card.vue @@ -6,12 +6,13 @@ <img v-else src="../../../assets/audio/default-cover.png"> </div> <div class="header"> - <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">{{ album.title }}</router-link> + <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">{{ album.title }} </router-link> </div> <div class="meta"> - By <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}"> - {{ album.artist.name }} - </router-link> + <span> + By <router-link tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}"> + {{ album.artist.name }}</router-link> + </span><span class="time" v-if="album.release_date">– {{ album.release_date | year }}</span> </div> <div class="description" v-if="mode === 'rich'"> <table class="ui very basic fixed single line compact unstackable table"> diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue index 7724428cac36ced03671c461dd76bea3acdd6364..9a546aa0e9fa98aa4bdda13fcde57fd6ad4b2986 100644 --- a/front/src/components/library/Artist.vue +++ b/front/src/components/library/Artist.vue @@ -31,7 +31,7 @@ <div class="ui vertical stripe segment"> <h2>Albums by this artist</h2> <div class="ui stackable doubling three column grid"> - <div class="column" :key="album.id" v-for="album in albums"> + <div class="column" :key="album.id" v-for="album in sortedAlbums"> <album-card :mode="'rich'" class="fluid" :album="album"></album-card> </div> </div> @@ -41,6 +41,7 @@ </template> <script> +import _ from 'lodash' import axios from 'axios' import logger from '@/logging' import backend from '@/audio/backend' @@ -83,6 +84,10 @@ export default { } }, computed: { + sortedAlbums () { + let a = this.albums || [] + return _.orderBy(a, ['release_date'], ['asc']) + }, totalTracks () { return this.albums.map((album) => { return album.tracks.length diff --git a/front/src/filters.js b/front/src/filters.js index 22d93149bb402657e56d37d9ef68cf2959d9c767..afc393d402e8f80e046d2bd4443e3f03da2f07a7 100644 --- a/front/src/filters.js +++ b/front/src/filters.js @@ -35,6 +35,12 @@ export function momentFormat (date, format) { Vue.filter('moment', momentFormat) +export function year (date) { + return moment(date).year() +} + +Vue.filter('year', year) + export function capitalize (str) { return str.charAt(0).toUpperCase() + str.slice(1) } diff --git a/front/test/unit/specs/filters/filters.spec.js b/front/test/unit/specs/filters/filters.spec.js index c2b43da44a83eb0a983d981c7891853a634fb31a..f4789ca48c640c0da83ab7d89cf148f60270854c 100644 --- a/front/test/unit/specs/filters/filters.spec.js +++ b/front/test/unit/specs/filters/filters.spec.js @@ -1,4 +1,4 @@ -import {truncate, markdown, ago, capitalize} from '@/filters' +import {truncate, markdown, ago, capitalize, year} from '@/filters' describe('filters', () => { describe('truncate', () => { @@ -32,6 +32,13 @@ describe('filters', () => { expect(output).to.equal('a few seconds ago') }) }) + describe('year', () => { + it('works', () => { + const input = '2017-07-13' + let output = year(input) + expect(output).to.equal(2017) + }) + }) describe('capitalize', () => { it('works', () => { const input = 'hello world'