Filterable

This commit is contained in:
James Barnsley
2017-08-14 20:02:41 +12:00
parent 2dd08fa489
commit 6f0088204b
8 changed files with 194 additions and 40 deletions

View File

@ -9,6 +9,7 @@ import PlaylistGrid from '../../components/PlaylistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import Header from '../../components/Header'
import FilterField from '../../components/FilterField'
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions'
@ -19,21 +20,25 @@ import * as spotifyActions from '../../services/spotify/actions'
class LibraryPlaylists extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
filter: ''
}
}
componentDidMount(){
if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.filter == 'all' || this.props.filter == 'local')){
if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
this.props.mopidyActions.getLibraryPlaylists()
}
if (!this.props.spotify_library_playlists && this.props.spotify_connected && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (!this.props.spotify_library_playlists && this.props.spotify_connected && (this.props.source == 'all' || this.props.source == 'spotify')){
this.props.spotifyActions.getLibraryPlaylists()
}
}
componentWillReceiveProps(newProps){
if (newProps.mopidy_connected && (newProps.filter == 'all' || newProps.filter == 'local')){
if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')){
// We've just connected
if (!this.props.mopidy_connected){
@ -41,12 +46,12 @@ class LibraryPlaylists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'local' && !newProps.mopidy_library_playlists){
if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_playlists){
this.props.mopidyActions.getLibraryPlaylists()
}
}
if (newProps.spotify_connected && (newProps.filter == 'all' || newProps.filter == 'spotify')){
if (newProps.spotify_connected && (newProps.source == 'all' || newProps.source == 'spotify')){
// We've just connected
if (!this.props.spotify_connected){
@ -54,7 +59,7 @@ class LibraryPlaylists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'spotify' && !newProps.spotify_library_playlists){
if (this.props.source != 'all' && this.props.source != 'spotify' && !newProps.spotify_library_playlists){
this.props.spotifyActions.getLibraryPlaylists()
}
}
@ -85,7 +90,7 @@ class LibraryPlaylists extends React.Component{
var playlists = []
// Spotify library items
if (this.props.spotify_library_playlists && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (this.props.spotify_library_playlists && (this.props.source == 'all' || this.props.source == 'spotify')){
for (var i = 0; i < this.props.spotify_library_playlists.length; i++){
var uri = this.props.spotify_library_playlists[i]
if (this.props.playlists.hasOwnProperty(uri)){
@ -95,7 +100,7 @@ class LibraryPlaylists extends React.Component{
}
// Mopidy library items
if (this.props.mopidy_library_playlists && (this.props.filter == 'all' || this.props.filter == 'local')){
if (this.props.mopidy_library_playlists && (this.props.source == 'all' || this.props.source == 'local')){
for (var i = 0; i < this.props.mopidy_library_playlists.length; i++){
var uri = this.props.mopidy_library_playlists[i]
if (this.props.playlists.hasOwnProperty(uri)){
@ -107,6 +112,10 @@ class LibraryPlaylists extends React.Component{
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse)
playlists = helpers.removeDuplicates(playlists)
if (this.state.filter !== ''){
playlists = helpers.applyFilter('name', this.state.filter, playlists)
}
if (this.props.view == 'list'){
if (this.props.slim_mode){
var columns = [
@ -167,7 +176,7 @@ class LibraryPlaylists extends React.Component{
render(){
var filter_options = [
var source_options = [
{
value: 'all',
label: 'All'
@ -218,9 +227,10 @@ class LibraryPlaylists extends React.Component{
var options = (
<span>
<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_playlists_filter: val}); this.props.uiActions.hideContextMenu() }} />
<FilterField handleChange={value => this.setState({filter: value})} />
<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_playlists_view: val}); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_playlists_source: val}); this.props.uiActions.hideContextMenu() }} />
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
@ -254,7 +264,7 @@ const mapStateToProps = (state, ownProps) => {
load_queue: state.ui.load_queue,
me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)),
view: state.ui.library_playlists_view,
filter: (state.ui.library_playlists_filter ? state.ui.library_playlists_filter : 'all'),
source: (state.ui.library_playlists_source ? state.ui.library_playlists_source : 'all'),
sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : 'name'),
sort_reverse: (state.ui.library_playlists_sort_reverse ? true : false),
playlists: state.core.playlists