Filterable
This commit is contained in:
@ -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" />
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user