Added: Sort Album Table on Artist Details Page

Fixes #171
pull/6/head
Qstick 7 years ago
parent b0fb369290
commit 289647b6b1

@ -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
};

@ -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
};

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

Loading…
Cancel
Save