2017-09-04 02:20:56 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
|
|
|
import selectAll from 'Utilities/Table/selectAll';
|
|
|
|
import toggleSelected from 'Utilities/Table/toggleSelected';
|
|
|
|
import { align, sortDirections } from 'Helpers/Props';
|
|
|
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
|
|
import PageContent from 'Components/Page/PageContent';
|
|
|
|
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
|
|
|
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
|
|
|
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
|
|
|
import FilterMenu from 'Components/Menu/FilterMenu';
|
|
|
|
import MenuContent from 'Components/Menu/MenuContent';
|
|
|
|
import FilterMenuItem from 'Components/Menu/FilterMenuItem';
|
|
|
|
import Table from 'Components/Table/Table';
|
|
|
|
import TableBody from 'Components/Table/TableBody';
|
|
|
|
import NoArtist from 'Artist/NoArtist';
|
2017-09-12 03:11:32 +00:00
|
|
|
import AlbumStudioRowConnector from './AlbumStudioRowConnector';
|
|
|
|
import AlbumStudioFooter from './AlbumStudioFooter';
|
2017-09-04 02:20:56 +00:00
|
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
name: 'status',
|
|
|
|
isVisible: true
|
|
|
|
},
|
|
|
|
{
|
2017-09-12 03:11:32 +00:00
|
|
|
name: 'sortName',
|
|
|
|
label: 'Name',
|
2017-09-04 02:20:56 +00:00
|
|
|
isSortable: true,
|
|
|
|
isVisible: true
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'monitored',
|
|
|
|
isVisible: true
|
|
|
|
},
|
|
|
|
{
|
2017-09-12 03:11:32 +00:00
|
|
|
name: 'albumCount',
|
|
|
|
label: 'Albums',
|
2017-09-04 02:20:56 +00:00
|
|
|
isSortable: true,
|
|
|
|
isVisible: true
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
2017-09-12 03:11:32 +00:00
|
|
|
class AlbumStudio extends Component {
|
2017-09-04 02:20:56 +00:00
|
|
|
|
|
|
|
//
|
|
|
|
// Lifecycle
|
|
|
|
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
allSelected: false,
|
|
|
|
allUnselected: false,
|
|
|
|
lastToggled: null,
|
|
|
|
selectedState: {}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
const {
|
|
|
|
isSaving,
|
|
|
|
saveError
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (prevProps.isSaving && !isSaving && !saveError) {
|
|
|
|
this.onSelectAllChange({ value: false });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
// Control
|
|
|
|
|
|
|
|
getSelectedIds = () => {
|
|
|
|
return getSelectedIds(this.state.selectedState);
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
// Listeners
|
|
|
|
|
|
|
|
onSelectAllChange = ({ value }) => {
|
|
|
|
this.setState(selectAll(this.state.selectedState, value));
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectedChange = ({ id, value, shiftKey = false }) => {
|
|
|
|
this.setState((state) => {
|
|
|
|
return toggleSelected(state, this.props.items, id, value, shiftKey);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onUpdateSelectedPress = (changes) => {
|
|
|
|
this.props.onUpdateSelectedPress({
|
|
|
|
artistIds: this.getSelectedIds(),
|
|
|
|
...changes
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
|
|
|
// Render
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
isFetching,
|
|
|
|
isPopulated,
|
|
|
|
error,
|
|
|
|
items,
|
|
|
|
filterKey,
|
|
|
|
filterValue,
|
|
|
|
sortKey,
|
|
|
|
sortDirection,
|
|
|
|
isSaving,
|
|
|
|
saveError,
|
|
|
|
onSortPress,
|
|
|
|
onFilterSelect
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const {
|
|
|
|
allSelected,
|
|
|
|
allUnselected,
|
|
|
|
selectedState
|
|
|
|
} = this.state;
|
|
|
|
|
|
|
|
return (
|
2017-09-12 03:11:32 +00:00
|
|
|
<PageContent title="Album Studio">
|
2017-09-04 02:20:56 +00:00
|
|
|
<PageToolbar>
|
|
|
|
<PageToolbarSection />
|
|
|
|
<PageToolbarSection alignContent={align.RIGHT}>
|
|
|
|
<FilterMenu alignMenu={align.RIGHT}>
|
|
|
|
<MenuContent>
|
|
|
|
<FilterMenuItem
|
|
|
|
filterKey={filterKey}
|
|
|
|
filterValue={filterValue}
|
|
|
|
onPress={onFilterSelect}
|
|
|
|
>
|
|
|
|
All
|
|
|
|
</FilterMenuItem>
|
|
|
|
|
|
|
|
<FilterMenuItem
|
|
|
|
name="monitored"
|
|
|
|
value={true}
|
|
|
|
filterKey={filterKey}
|
|
|
|
filterValue={filterValue}
|
|
|
|
onPress={onFilterSelect}
|
|
|
|
>
|
|
|
|
Monitored Only
|
|
|
|
</FilterMenuItem>
|
|
|
|
|
|
|
|
<FilterMenuItem
|
|
|
|
name="status"
|
|
|
|
value="continuing"
|
|
|
|
filterKey={filterKey}
|
|
|
|
filterValue={filterValue}
|
|
|
|
onPress={onFilterSelect}
|
|
|
|
>
|
|
|
|
Continuing Only
|
|
|
|
</FilterMenuItem>
|
|
|
|
|
|
|
|
<FilterMenuItem
|
|
|
|
name="status"
|
|
|
|
value="ended"
|
|
|
|
filterKey={filterKey}
|
|
|
|
filterValue={filterValue}
|
|
|
|
onPress={onFilterSelect}
|
|
|
|
>
|
|
|
|
Ended Only
|
|
|
|
</FilterMenuItem>
|
|
|
|
|
|
|
|
<FilterMenuItem
|
|
|
|
name="missing"
|
|
|
|
value={true}
|
|
|
|
filterKey={filterKey}
|
|
|
|
filterValue={filterValue}
|
|
|
|
onPress={onFilterSelect}
|
|
|
|
>
|
2017-09-16 20:22:06 +00:00
|
|
|
Missing Albums
|
2017-09-04 02:20:56 +00:00
|
|
|
</FilterMenuItem>
|
|
|
|
</MenuContent>
|
|
|
|
</FilterMenu>
|
|
|
|
</PageToolbarSection>
|
|
|
|
</PageToolbar>
|
|
|
|
|
|
|
|
<PageContentBodyConnector>
|
|
|
|
{
|
|
|
|
isFetching && !isPopulated &&
|
|
|
|
<LoadingIndicator />
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
!isFetching && !!error &&
|
|
|
|
<div>Unable to load the calendar</div>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
!error && isPopulated && !!items.length &&
|
|
|
|
<div>
|
|
|
|
<Table
|
|
|
|
columns={columns}
|
|
|
|
sortKey={sortKey}
|
|
|
|
sortDirection={sortDirection}
|
|
|
|
selectAll={true}
|
|
|
|
allSelected={allSelected}
|
|
|
|
allUnselected={allUnselected}
|
|
|
|
onSortPress={onSortPress}
|
|
|
|
onSelectAllChange={this.onSelectAllChange}
|
|
|
|
>
|
|
|
|
<TableBody>
|
|
|
|
{
|
|
|
|
items.map((item) => {
|
|
|
|
return (
|
2017-09-12 03:11:32 +00:00
|
|
|
<AlbumStudioRowConnector
|
2017-09-04 02:20:56 +00:00
|
|
|
key={item.id}
|
|
|
|
artistId={item.id}
|
|
|
|
isSelected={selectedState[item.id]}
|
|
|
|
onSelectedChange={this.onSelectedChange}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</TableBody>
|
|
|
|
</Table>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
|
|
|
|
{
|
|
|
|
!error && isPopulated && !items.length &&
|
|
|
|
<NoArtist />
|
|
|
|
}
|
|
|
|
</PageContentBodyConnector>
|
|
|
|
|
2017-09-12 03:11:32 +00:00
|
|
|
<AlbumStudioFooter
|
2017-09-04 02:20:56 +00:00
|
|
|
selectedCount={this.getSelectedIds().length}
|
|
|
|
isSaving={isSaving}
|
|
|
|
saveError={saveError}
|
|
|
|
onUpdateSelectedPress={this.onUpdateSelectedPress}
|
|
|
|
/>
|
|
|
|
</PageContent>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-12 03:11:32 +00:00
|
|
|
AlbumStudio.propTypes = {
|
2017-09-04 02:20:56 +00:00
|
|
|
isFetching: PropTypes.bool.isRequired,
|
|
|
|
isPopulated: PropTypes.bool.isRequired,
|
|
|
|
error: PropTypes.object,
|
|
|
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
|
|
sortKey: PropTypes.string,
|
|
|
|
sortDirection: PropTypes.oneOf(sortDirections.all),
|
|
|
|
filterKey: PropTypes.string,
|
|
|
|
filterValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
|
|
|
|
isSaving: PropTypes.bool.isRequired,
|
|
|
|
saveError: PropTypes.object,
|
|
|
|
onSortPress: PropTypes.func.isRequired,
|
|
|
|
onFilterSelect: PropTypes.func.isRequired,
|
|
|
|
onUpdateSelectedPress: PropTypes.func.isRequired
|
|
|
|
};
|
|
|
|
|
2017-09-12 03:11:32 +00:00
|
|
|
export default AlbumStudio;
|