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);