Upgrading non-track lists

This commit is contained in:
James Barnsley
2018-11-08 17:01:02 +13:00
parent 9226a842fd
commit 5c885f3ccb
13 changed files with 13904 additions and 10623 deletions

View File

@ -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>
)
})

View File

@ -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}

View File

@ -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',

View File

@ -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}

View File

@ -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}

View File

@ -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}