Upgrading non-track lists
This commit is contained in:
@ -46,19 +46,21 @@ class List extends React.Component{
|
||||
}
|
||||
|
||||
renderValue(row, key_string){
|
||||
var key = key_string.split('.')
|
||||
var value = row
|
||||
var key = key_string.split('.');
|
||||
var value = row;
|
||||
|
||||
for (var i = 0; i < key.length; i++){
|
||||
if (value[key[i]] === undefined){
|
||||
return <span>-</span>
|
||||
return null
|
||||
} else if (typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == ''){
|
||||
return <span>-</span>
|
||||
return null
|
||||
} else {
|
||||
value = value[key[i]]
|
||||
}
|
||||
}
|
||||
|
||||
if (key_string === 'tracks_total') return <span>{value} tracks</span>
|
||||
if (key_string === 'followers') return <span>{value.toLocaleString()} followers</span>
|
||||
if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
|
||||
if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
|
||||
if (key_string === 'popularity') return <Popularity full popularity={value} />
|
||||
@ -82,7 +84,9 @@ class List extends React.Component{
|
||||
this.props.rows.map((row, row_index) => {
|
||||
|
||||
var class_name = 'list__item'
|
||||
if (row.type ) class_name += ' '+row.type
|
||||
if (row.type ){
|
||||
class_name += ' list__item--'+row.type;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -90,17 +94,46 @@ class List extends React.Component{
|
||||
key={row_index}
|
||||
onClick={e => this.handleClick(e, row.uri)}
|
||||
onContextMenu={e => this.handleContextMenu(e,row)}>
|
||||
{
|
||||
this.props.columns.map((col, col_index) => {
|
||||
var className = 'col '+col.name.replace('.','_')
|
||||
return (
|
||||
<div className={className} key={col_index}>
|
||||
{ this.renderValue(row, col.name) }
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.props.nocontext ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, row)} />}
|
||||
|
||||
<div className="list__item__actions">
|
||||
{
|
||||
(this.props.actions ? this.props.actions.map((action, index) => {
|
||||
return (
|
||||
<li className={'list__item__actions__item list__item__actions__item--'+action.replace('.','_')} key={index}>
|
||||
{this.renderValue(row, action)}
|
||||
</li>
|
||||
)
|
||||
}) : null)
|
||||
}
|
||||
|
||||
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.handleContextMenu(e, row)} />}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="list__item__content">
|
||||
|
||||
<div className="list__item__name">
|
||||
{this.renderValue(row, 'name')}
|
||||
</div>
|
||||
|
||||
<ul className="list__item__details">
|
||||
{
|
||||
this.props.details.map((detail, index) => {
|
||||
var value = this.renderValue(row, detail);
|
||||
|
||||
if (!value){
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={'list__item__details__item list__item__details__item--'+detail.replace('.','_')} key={index}>
|
||||
{value}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
@ -310,7 +310,7 @@ export default class Track extends React.Component{
|
||||
<div className="list__item__name">
|
||||
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
|
||||
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
|
||||
{track.playing ? <Icon name="playing" type="gif"></Icon> : null}
|
||||
{track.playing ? <Icon name="equalizer"></Icon> : null}
|
||||
</div>
|
||||
<ul className="list__item__details">
|
||||
{track_details}
|
||||
|
||||
@ -389,6 +389,7 @@ export let formatAlbum = function(data){
|
||||
'provider',
|
||||
'name',
|
||||
'type',
|
||||
'added_at',
|
||||
'release_date',
|
||||
'popularity',
|
||||
'images',
|
||||
@ -440,6 +441,7 @@ export let formatArtist = function(data){
|
||||
'popularity',
|
||||
'followers',
|
||||
'listeners',
|
||||
'added_at',
|
||||
'biography',
|
||||
'biography_link',
|
||||
'biography_publish_date',
|
||||
@ -505,6 +507,7 @@ export let formatPlaylist = function(data){
|
||||
'images',
|
||||
'popularity',
|
||||
'followers',
|
||||
'added_at',
|
||||
'last_modified_date',
|
||||
'can_edit',
|
||||
'owner',
|
||||
|
||||
@ -216,8 +216,9 @@ class LibraryAlbums extends React.Component{
|
||||
<List
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={albums}
|
||||
columns={columns}
|
||||
className="album-list"
|
||||
details={['artists','tracks_total']}
|
||||
extra_detail={['added_at']}
|
||||
className="albums"
|
||||
link_prefix={global.baseURL+"album/"} />
|
||||
<LazyLoadListener
|
||||
loadKey={this.state.limit}
|
||||
|
||||
@ -174,27 +174,14 @@ class LibraryArtists extends React.Component{
|
||||
artists = artists.slice(0, this.state.limit);
|
||||
|
||||
if (this.props.view == 'list'){
|
||||
var columns = [
|
||||
{
|
||||
label: 'Name',
|
||||
name: 'name'
|
||||
},
|
||||
{
|
||||
label: 'Followers',
|
||||
name: 'followers.total'
|
||||
},
|
||||
{
|
||||
label: 'Popularity',
|
||||
name: 'popularity'
|
||||
}
|
||||
]
|
||||
return (
|
||||
<section className="content-wrapper">
|
||||
<List
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={artists}
|
||||
columns={columns}
|
||||
className="artist-list"
|
||||
details={['followers','popularity']}
|
||||
extra_detail={['source']}
|
||||
className="artists"
|
||||
link_prefix={global.baseURL+"artist/"} />
|
||||
<LazyLoadListener
|
||||
loadKey={this.state.limit}
|
||||
|
||||
@ -124,36 +124,14 @@ class LibraryPlaylists extends React.Component{
|
||||
playlists = playlists.slice(0, this.state.limit);
|
||||
|
||||
if (this.props.view == 'list'){
|
||||
var columns = [
|
||||
{
|
||||
label: 'Name',
|
||||
name: 'name'
|
||||
},
|
||||
{
|
||||
label: 'Owner',
|
||||
name: 'owner'
|
||||
},
|
||||
{
|
||||
label: 'Tracks',
|
||||
name: 'tracks_total'
|
||||
},
|
||||
{
|
||||
label: 'Editable',
|
||||
name: 'can_edit'
|
||||
},
|
||||
{
|
||||
label: 'Source',
|
||||
name: 'source'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="content-wrapper">
|
||||
<List
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={playlists}
|
||||
columns={columns}
|
||||
className="playlist-list"
|
||||
details={['owner','tracks_total']}
|
||||
extra_detail={['source']}
|
||||
className="playlists"
|
||||
link_prefix={global.baseURL+"playlist/"} />
|
||||
<LazyLoadListener
|
||||
loadKey={this.state.limit}
|
||||
|
||||
Reference in New Issue
Block a user