diff --git a/frontend/src/Artist/Details/ArtistDetailsSeason.js b/frontend/src/Artist/Details/ArtistDetailsSeason.js index a0e8a548b..548011ded 100644 --- a/frontend/src/Artist/Details/ArtistDetailsSeason.js +++ b/frontend/src/Artist/Details/ArtistDetailsSeason.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import isAfter from 'Utilities/Date/isAfter'; import getToggledRange from 'Utilities/Table/getToggledRange'; -import { icons } from 'Helpers/Props'; +import { icons, sortDirections } from 'Helpers/Props'; import Icon from 'Components/Icon'; import IconButton from 'Components/Link/IconButton'; import Link from 'Components/Link/Link'; @@ -114,6 +114,9 @@ class ArtistDetailsSeason extends Component { columns, isExpanded, artistMonitored, + sortKey, + sortDirection, + onSortPress, isSmallScreen, onTableOptionChange } = this.props; @@ -171,6 +174,9 @@ class ArtistDetailsSeason extends Component { items.length ? @@ -225,6 +231,8 @@ ArtistDetailsSeason.propTypes = { artistId: PropTypes.number.isRequired, name: PropTypes.string.isRequired, label: PropTypes.string.isRequired, + sortKey: PropTypes.string, + sortDirection: PropTypes.oneOf(sortDirections.all), items: PropTypes.arrayOf(PropTypes.object).isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired, isExpanded: PropTypes.bool, @@ -232,6 +240,7 @@ ArtistDetailsSeason.propTypes = { isSmallScreen: PropTypes.bool.isRequired, onTableOptionChange: PropTypes.func.isRequired, onExpandPress: PropTypes.func.isRequired, + onSortPress: PropTypes.func.isRequired, onMonitorAlbumPress: PropTypes.func.isRequired }; diff --git a/frontend/src/Artist/Details/ArtistDetailsSeasonConnector.js b/frontend/src/Artist/Details/ArtistDetailsSeasonConnector.js index 4884a6377..bbc949380 100644 --- a/frontend/src/Artist/Details/ArtistDetailsSeasonConnector.js +++ b/frontend/src/Artist/Details/ArtistDetailsSeasonConnector.js @@ -8,7 +8,7 @@ import { findCommand } from 'Utilities/Command'; import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector'; import createArtistSelector from 'Store/Selectors/createArtistSelector'; import createCommandsSelector from 'Store/Selectors/createCommandsSelector'; -import { toggleAlbumsMonitored, setAlbumsTableOption } from 'Store/Actions/albumActions'; +import { toggleAlbumsMonitored, setAlbumsTableOption, setAlbumsSort } from 'Store/Actions/albumActions'; import { executeCommand } from 'Store/Actions/commandActions'; import * as commandNames from 'Commands/commandNames'; import ArtistDetailsSeason from './ArtistDetailsSeason'; @@ -23,11 +23,20 @@ function createMapStateToProps() { (label, albums, artist, commands, dimensions) => { const albumsInGroup = _.filter(albums.items, { albumType: label }); - const sortedAlbums = _.orderBy(albumsInGroup, 'releaseDate', 'desc'); + + let sortDir = 'asc'; + + if (albums.sortDirection === 'descending') { + sortDir = 'desc'; + } + + const sortedAlbums = _.orderBy(albumsInGroup, albums.sortKey, sortDir); return { items: sortedAlbums, columns: albums.columns, + sortKey: albums.sortKey, + sortDirection: albums.sortDirection, artistMonitored: artist.monitored, isSmallScreen: dimensions.isSmallScreen }; @@ -38,6 +47,7 @@ function createMapStateToProps() { const mapDispatchToProps = { toggleAlbumsMonitored, setAlbumsTableOption, + dispatchSetAlbumSort: setAlbumsSort, executeCommand }; @@ -50,6 +60,10 @@ class ArtistDetailsSeasonConnector extends Component { this.props.setAlbumsTableOption(payload); } + onSortPress = (sortKey) => { + this.props.dispatchSetAlbumSort({ sortKey }); + } + onMonitorAlbumPress = (albumIds, monitored) => { this.props.toggleAlbumsMonitored({ albumIds, @@ -64,6 +78,7 @@ class ArtistDetailsSeasonConnector extends Component { return ( @@ -75,6 +90,7 @@ ArtistDetailsSeasonConnector.propTypes = { artistId: PropTypes.number.isRequired, toggleAlbumsMonitored: PropTypes.func.isRequired, setAlbumsTableOption: PropTypes.func.isRequired, + dispatchSetAlbumSort: PropTypes.func.isRequired, executeCommand: PropTypes.func.isRequired }; diff --git a/frontend/src/Store/Actions/albumActions.js b/frontend/src/Store/Actions/albumActions.js index 0dfeb87b2..efc5541b2 100644 --- a/frontend/src/Store/Actions/albumActions.js +++ b/frontend/src/Store/Actions/albumActions.js @@ -42,16 +42,19 @@ export const defaultState = { { name: 'title', label: 'Title', + isSortable: true, isVisible: true }, { name: 'releaseDate', label: 'Release Date', + isSortable: true, isVisible: true }, { name: 'secondaryTypes', label: 'Secondary Types', + isSortable: true, isVisible: false }, { @@ -67,6 +70,7 @@ export const defaultState = { { name: 'duration', label: 'Duration', + isSortable: true, isVisible: false }, { @@ -84,6 +88,8 @@ export const defaultState = { }; export const persistState = [ + 'albums.sortKey', + 'albums.sortDirection', 'albums.columns' ]; @@ -223,6 +229,8 @@ export const actionHandlers = handleThunks({ export const reducers = createHandleActions({ + [SET_ALBUMS_SORT]: createSetClientSideCollectionSortReducer(section), + [SET_ALBUMS_TABLE_OPTION]: createSetTableOptionReducer(section), [SET_ALBUM_VALUE]: createSetSettingValueReducer(section), @@ -234,8 +242,6 @@ export const reducers = createHandleActions({ error: null, items: [] }); - }, - - [SET_ALBUMS_SORT]: createSetClientSideCollectionSortReducer(section) + } }, defaultState, section);