secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

View toggling; Enhanced List component

Browse Source
This commit is contained in:
James Barnsley
2016-11-21 16:26:47 +13:00
parent 8d1436996c
commit 6588790476
10 changed files with 197 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/js/views/library/LibraryAlbums.js
View File

@ -5,9 +5,12 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import AlbumGrid from '../../components/AlbumGrid'
import List from '../../components/List'
import Header from '../../components/Header'
import DropdownField from '../../components/DropdownField'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -26,16 +29,77 @@ class LibraryAlbums extends React.Component{
this.props.spotifyActions.getURL( this.props.albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE' );
}
render(){
return (
<div className="view library-albums-view">
<Header
icon="cd"
title="My albums"
/>
renderView(){
if( !this.props.albums ) return null
if( this.props.view == 'list' ){
var columns = [
{
width: 35,
label: 'Name',
name: 'name'
},
{
width: 35,
label: 'Artists',
name: 'artists'
},
{
width: 15,
label: 'Added',
name: 'added_at'
},
{
width: 15,
label: 'Tracks',
name: 'tracks.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.albums} columns={columns} link_prefix="/album/" />
</section>
)
}else if( this.props.view == 'thumbnails' ){
return (
<section className="grid-wrapper">
{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
</section>
</section>
)
}else{
return (
<section className="grid-wrapper">
{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
</section>
)
}
}
render(){
var view_options = [
{
value: 'detail',
label: 'Detail'
},
{
value: 'thumbnails',
label: 'Thumbnails'
},
{
value: 'list',
label: 'List'
}
]
var actions = (
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_albums_view: value }) } />
)
return (
<div className="view library-albums-view">
<Header icon="cd" title="My albums" actions={actions} />
{ this.renderView() }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);
@ -51,6 +115,7 @@ class LibraryAlbums extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
view: state.ui.library_albums_view,
albums: state.spotify.library_albums,
albums_more: state.spotify.library_albums_more,
}
@ -58,6 +123,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}

4
src/js/views/library/LibraryArtists.js
View File

@ -37,16 +37,18 @@ class LibraryArtists extends React.Component{
var columns = [
{
width: 30,
label: 'Name',
name: 'name'
},
{
width: 10,
label: 'Followers',
name: 'followers.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.artists} columns={columns} link_prefix="/artist/" />
<List rows={this.props.artists} columns={columns} link_prefix="/artist/" show_source_icon={true} />
</section>
)
}else{

77
src/js/views/library/LibraryPlaylists.js
View File

@ -6,6 +6,8 @@ import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
import PlaylistGrid from '../../components/PlaylistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import Header from '../../components/Header'
import * as uiActions from '../../services/ui/actions'
@ -18,31 +20,73 @@ class LibraryPlaylists extends React.Component{
super(props);
}
render(){
renderView(){
if( !this.props.playlists ) return null
var columns = [
{ name: 'name', width: '30'},
{ name: 'tracks.total', width: '15'},
{ name: 'can_edit', width: '15'},
{ name: 'uri', width: '40'}
if( this.props.view == 'list' ){
var columns = [
{
width: 30,
label: 'Name',
name: 'name'
},
{
width: 30,
label: 'Owner',
name: 'owner.id'
},
{
width: 10,
label: 'Can edit',
name: 'can_edit'
},
{
width: 10,
label: 'Tracks',
name: 'tracks.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.playlists} columns={columns} link_prefix="/playlist/" show_source_icon={true} />
</section>
)
}else{
return (
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />
</section>
)
}
}
render(){
var view_options = [
{
value: 'thumbnails',
label: 'Thumbnails'
},
{
value: 'list',
label: 'List'
}
]
var actions = (
<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
</button>
<div>
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_playlists_view: value }) } />
<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
</button>
</div>
)
return (
<div className="view library-playlists-view">
<Header icon="playlist" title="My playlists" actions={actions} />
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />
</section>
{ this.renderView() }
</div>
)
}
@ -57,6 +101,7 @@ class LibraryPlaylists extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
view: state.ui.library_playlists_view,
playlists: state.ui.playlists
}
}