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

Sorting of search results in UI (#198)

Browse Source
This commit is contained in:
James Barnsley
2017-12-04 08:43:09 +13:00
parent 98c5ea886d
commit 5c49b6a859
5 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/Track.js
View File

@ -224,7 +224,7 @@ export default class Track extends React.Component{
)
track_columns.push(
<span className="col duration" key="duration">
{track.duration ? <Dater type="length" data={track.duration} /> : null}
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</span>
)
}

4
src/js/services/mopidy/middleware.js
View File

@ -838,7 +838,7 @@ const MopidyMiddleware = (function(){
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
context: action.data.context,
results: tracks
results: helpers.formatTracks(tracks)
});
}
continue_process();
@ -873,7 +873,7 @@ const MopidyMiddleware = (function(){
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: tracks
results: helpers.formatTracks(tracks)
});
}

2
src/js/services/spotify/actions.js
View File

@ -565,7 +565,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: response.tracks.items,
results: helpers.formatTracks(response.tracks.items),
more: response.tracks.next,
});
}

2
src/js/services/spotify/middleware.js
View File

@ -359,7 +359,7 @@ const SpotifyMiddleware = (function(){
store.dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
results: action.data.tracks.items,
results: helpers.formatTracks(action.data.tracks.items),
more: action.data.tracks.next
});
break

43
src/js/views/Search.js
View File

@ -73,6 +73,17 @@ class Search extends React.Component{
//this.props.spotifyActions.getURL(this.props['spotify_'+type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
}
setSort(value){
var reverse = false
if (this.props.sort == value ) reverse = !this.props.sort_reverse
var data = {
search_results_sort_reverse: reverse,
search_results_sort: value
}
this.props.uiActions.set(data)
}
renderResults(){
var spotify_search_enabled = (this.props.search_settings && this.props.search_settings.spotify)
@ -83,14 +94,16 @@ class Search extends React.Component{
if (this.props.spotify_search_results.artists){
artists = [...artists, ...helpers.getIndexedRecords(this.props.artists,this.props.spotify_search_results.artists)]
}
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
var albums = []
if (this.props.mopidy_search_results.albums){
albums = [...albums, ...helpers.getIndexedRecords(this.props.albums,this.props.mopidy_search_results.albums)]
albums = [...albums, ...helpers.getIndexedRecords(this.props.albums,this.props.mopidy_search_results.albums)];
}
if (this.props.spotify_search_results.albums){
albums = [...albums, ...helpers.getIndexedRecords(this.props.albums,this.props.spotify_search_results.albums)]
}
}
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
var playlists = []
if (this.props.mopidy_search_results.playlists){
@ -99,6 +112,7 @@ class Search extends React.Component{
if (this.props.spotify_search_results.playlists){
playlists = [...playlists, ...helpers.getIndexedRecords(this.props.playlists,this.props.spotify_search_results.playlists)]
}
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
var tracks = []
if (this.props.mopidy_search_results.tracks){
@ -107,6 +121,7 @@ class Search extends React.Component{
if (this.props.spotify_search_results.tracks){
tracks = [...tracks, ...this.props.spotify_search_results.tracks]
}
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse);
switch (this.props.view){
@ -244,8 +259,28 @@ class Search extends React.Component{
}
]
var sort_options = [
{
value: 'name',
label: 'Name'
},
{
value: 'artists.name',
label: 'Artist'
},
{
value: 'duration',
label: 'Duration'
},
{
value: 'source',
label: 'Source'
}
]
var options = (
<span>
<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({ search_view: val }); this.props.uiActions.hideContextMenu() }} />
<button className="no-hover" onClick={e => this.props.uiActions.openModal('search_uri_schemes', {query: this.props.params.query})}>
<FontAwesome name="wrench" />&nbsp;
@ -277,7 +312,9 @@ const mapStateToProps = (state, ownProps) => {
tracks: (state.core.tracks ? state.core.tracks : []),
search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
mopidy_search_results: (state.mopidy.search_results ? state.mopidy.search_results : {}),
spotify_search_results: (state.spotify.search_results ? state.spotify.search_results : {})
spotify_search_results: (state.spotify.search_results ? state.spotify.search_results : {}),
sort: (state.ui.search_results_sort ? state.ui.search_results_sort : 'name'),
sort_reverse: (state.ui.search_results_sort_reverse ? true : false),
}
}