Added: Sort Album Table on Artist Details Page

Fixes #171

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 ?
                     <Table
                       columns={columns}
+                      sortKey={sortKey}
+                      sortDirection={sortDirection}
+                      onSortPress={onSortPress}
                       onTableOptionChange={onTableOptionChange}
                     >
                       <TableBody>
@@ -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
 };
 

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 (
       <ArtistDetailsSeason
         {...this.props}
+        onSortPress={this.onSortPress}
         onTableOptionChange={this.onTableOptionChange}
         onMonitorAlbumPress={this.onMonitorAlbumPress}
       />
@@ -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
 };
 

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