Sorting for artists and albums

This commit is contained in:
James Barnsley
2017-01-23 09:24:59 +13:00
parent 530416eaf8
commit 49809337f0
2 changed files with 75 additions and 3 deletions

View File

@ -13,6 +13,7 @@ import ArtistSentence from '../../components/ArtistSentence'
import DropdownField from '../../components/DropdownField'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -32,6 +33,17 @@ class LibraryAlbums extends React.Component{
this.props.spotifyActions.getURL( this.props.library_albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED' );
}
setSort(value){
var reverse = false
if( this.props.sort == value ) reverse = !this.props.sort_reverse
var data = {
library_albums_sort_reverse: reverse,
library_albums_sort: value
}
this.props.uiActions.set(data)
}
renderView(albums){
if (!albums || albums.length <= 0) return null
@ -110,6 +122,10 @@ class LibraryAlbums extends React.Component{
albums.push(this.props.albums[uri])
}
}
if( this.props.sort ){
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse)
}
}
var view_options = [
@ -127,8 +143,30 @@ class LibraryAlbums extends React.Component{
}
]
var sort_options = [
{
value: 'name',
label: 'Name'
},
{
value: 'added_at',
label: 'Added'
},
{
value: 'release_date',
label: 'Released'
},
{
value: 'tracks_total',
label: 'Tracks'
}
]
var actions = (
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_albums_view: value }) } />
<span>
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={ sort_options } handleChange={ value => this.setSort(value) } />
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_albums_view: value }) } />
</span>
)
return (
@ -152,6 +190,8 @@ const mapStateToProps = (state, ownProps) => {
return {
view: state.ui.library_albums_view,
albums: state.ui.albums,
sort: state.ui.library_albums_sort,
sort_reverse: state.ui.library_albums_sort_reverse,
library_albums: state.ui.library_albums,
library_albums_more: state.ui.library_albums_more,
}

View File

@ -10,6 +10,7 @@ import ArtistGrid from '../../components/ArtistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -29,11 +30,22 @@ class LibraryArtists extends React.Component{
this.props.spotifyActions.getURL( this.props.library_artists_more, 'SPOTIFY_LIBRARY_ARTISTS_LOADED' );
}
setSort(value){
var reverse = false
if( this.props.sort == value ) reverse = !this.props.sort_reverse
var data = {
library_artists_sort_reverse: reverse,
library_artists_sort: value
}
this.props.uiActions.set(data)
}
renderView(artists){
if( this.props.view == 'list' ){
var columns = [
{
width: 30,
width: 60,
label: 'Name',
name: 'name'
},
@ -67,6 +79,10 @@ class LibraryArtists extends React.Component{
artists.push(this.props.artists[uri])
}
}
if( this.props.sort ){
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse)
}
}
var view_options = [
@ -80,8 +96,22 @@ class LibraryArtists extends React.Component{
}
]
var sort_options = [
{
value: 'name',
label: 'Name'
},
{
value: 'followers.total',
label: 'Followers'
}
]
var actions = (
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
<span>
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={ sort_options } handleChange={ value => this.setSort(value) } />
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
</span>
)
return (
@ -104,6 +134,8 @@ class LibraryArtists extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
artists: state.ui.artists,
sort: state.ui.library_artists_sort,
sort_reverse: state.ui.library_artists_sort_reverse,
library_artists: state.ui.library_artists,
library_artists_more: state.ui.library_artists_more,
view: state.ui.library_artists_view