VRFS-2795 paginating
This commit is contained in:
Jonathan Kolyer
parent
e4795d9297
commit
0890aee9da
|
|
@ -13,36 +13,42 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
@helpBubble = context.JK.HelpBubbleHelper
|
||||
@searchResults = null
|
||||
@instrument_logo_map = context.JK.getInstrumentIconMap24()
|
||||
|
||||
|
||||
init: (app) =>
|
||||
@screenBindings = { 'beforeShow': this.beforeShow, 'afterShow': this.afterShow }
|
||||
app.bindScreen('musicians', @screenBindings);
|
||||
@results = $('#musician-search-filter-results-list')
|
||||
app.bindScreen('musicians', @screenBindings)
|
||||
|
||||
$('#btn-perform-musician-search').on 'click', =>
|
||||
@screen = $('#musicians-screen')
|
||||
@resultsContainer = @screen.find('#musician-search-filter-results-list')
|
||||
@spinner = @screen.find('.paginate-wait')
|
||||
|
||||
# this.registerResultsPagination()
|
||||
|
||||
@screen.find('#btn-perform-musician-search').on 'click', =>
|
||||
this.performSearch()
|
||||
|
||||
$('#btn-musician-search-builder').on 'click', =>
|
||||
@screen.find('#btn-musician-search-builder').on 'click', =>
|
||||
this.showBuilder()
|
||||
|
||||
$('#btn-musician-search-reset').on 'click', =>
|
||||
@screen.find('#btn-musician-search-reset').on 'click', =>
|
||||
this.resetFilter()
|
||||
|
||||
$('#btn-musician-search-cancel').on 'click', =>
|
||||
@screen.find('#btn-musician-search-cancel').on 'click', =>
|
||||
this.cancelFilter()
|
||||
|
||||
beforeShow: (data) =>
|
||||
userId = data.id
|
||||
|
||||
afterShow: () =>
|
||||
$('#musician-search-filter-results').show()
|
||||
$('#musician-search-filter-builder').hide()
|
||||
@screen.find('#musician-search-filter-results').show()
|
||||
@screen.find('#musician-search-filter-builder').hide()
|
||||
this.getUserFilterResults()
|
||||
|
||||
showBuilder: () =>
|
||||
$('#musician-search-filter-results').hide()
|
||||
$('#musician-search-filter-builder').show()
|
||||
$('#musician-search-filter-results-list').empty()
|
||||
@screen.find('#musician-search-filter-results').hide()
|
||||
@screen.find('#musician-search-filter-builder').show()
|
||||
@resultsContainer.empty()
|
||||
|
||||
renderSearchFilter: () =>
|
||||
$.when(this.rest.getMusicianSearchFilter()).done (sFilter) =>
|
||||
|
|
@ -56,9 +62,9 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
studio_sessions: @searchFilter.studio_sessions
|
||||
concert_gigs: @searchFilter.concert_gigs
|
||||
|
||||
template = context.JK.fillTemplate($('#template-musician-search-filter').html(), args)
|
||||
template = context.JK.fillTemplate(@screen.find('#template-musician-search-filter').html(), args)
|
||||
|
||||
content_root = $('#musician-search-filter-builder-form')
|
||||
content_root = @screen.find('#musician-search-filter-builder-form')
|
||||
content_root.html template
|
||||
|
||||
this._populateSkill()
|
||||
|
|
@ -111,10 +117,10 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
this._populateSelectWithInt(@profileUtils.skillLevelMap, @searchFilter.skill_level.toString(), elem)
|
||||
|
||||
_populateAges: () =>
|
||||
$('#search-filter-ages').empty()
|
||||
@screen.find('#search-filter-ages').empty()
|
||||
ages_map = gon.musician_search_meta['ages']['map']
|
||||
$.each gon.musician_search_meta['ages']['keys'], (index, key) =>
|
||||
ageTemplate = $('#template-search-filter-setup-ages').html()
|
||||
ageTemplate = @screen.find('#template-search-filter-setup-ages').html()
|
||||
selected = ''
|
||||
ageLabel = ages_map[key]
|
||||
if 0 < @searchFilter.ages.length
|
||||
|
|
@ -128,12 +134,12 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
id: key
|
||||
description: ageLabel
|
||||
checked: selected)
|
||||
$('#search-filter-ages').append ageHtml
|
||||
@screen.find('#search-filter-ages').append ageHtml
|
||||
|
||||
_populateGenres: () =>
|
||||
$('#search-filter-genres').empty()
|
||||
@screen.find('#search-filter-genres').empty()
|
||||
@rest.getGenres().done (genres) =>
|
||||
genreTemplate = $('#template-search-filter-setup-genres').html()
|
||||
genreTemplate = @screen.find('#template-search-filter-setup-genres').html()
|
||||
selected = ''
|
||||
$.each genres, (index, genre) =>
|
||||
if 0 < @searchFilter.genres.length
|
||||
|
|
@ -148,13 +154,13 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
id: genre.id
|
||||
description: genre.description
|
||||
checked: selected)
|
||||
$('#search-filter-genres').append genreHtml
|
||||
@screen.find('#search-filter-genres').append genreHtml
|
||||
|
||||
_populateInstruments: () =>
|
||||
$('#search-filter-instruments').empty()
|
||||
@screen.find('#search-filter-instruments').empty()
|
||||
@rest.getInstruments().done (instruments) =>
|
||||
$.each instruments, (index, instrument) =>
|
||||
instrumentTemplate = $('#template-search-filter-setup-instrument').html()
|
||||
instrumentTemplate = @screen.find('#template-search-filter-setup-instrument').html()
|
||||
selected = ''
|
||||
proficiency = '1'
|
||||
if 0 < @searchFilter.instruments.length
|
||||
|
|
@ -169,7 +175,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
description: instrument.description
|
||||
checked: selected
|
||||
)
|
||||
$('#search-filter-instruments').append instrumentHtml
|
||||
@screen.find('#search-filter-instruments').append instrumentHtml
|
||||
profsel = '#search-filter-instruments tr[data-instrument-id="'+instrument.id+'"] select'
|
||||
$(profsel).val(proficiency)
|
||||
return true
|
||||
|
|
@ -194,15 +200,15 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
vals
|
||||
|
||||
willSearch: () =>
|
||||
$('#musician-search-filter-spinner').show()
|
||||
$('#musician-search-filter-results-list').empty()
|
||||
$('#musician-search-filter-builder').hide()
|
||||
$('#musician-search-filter-results').show()
|
||||
@screen.find('#musician-search-filter-spinner').show()
|
||||
@resultsContainer.empty()
|
||||
@screen.find('#musician-search-filter-builder').hide()
|
||||
@screen.find('#musician-search-filter-results').show()
|
||||
|
||||
didSearch: (response) =>
|
||||
this.loadSearchFilter(response.filter_json)
|
||||
@searchResults = response
|
||||
$('#musician-search-filter-spinner').hide()
|
||||
@screen.find('#musician-search-filter-spinner').hide()
|
||||
this.renderMusicians()
|
||||
|
||||
resetFilter: () =>
|
||||
|
|
@ -228,26 +234,26 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
@rest.postMusicianSearchFilter({ filter: JSON.stringify(@searchFilter), page: 1 }).done(this.didSearch)
|
||||
|
||||
renderResultsHeader: () =>
|
||||
$('#musician-search-filter-description').html(@searchResults.description)
|
||||
@screen.find('#musician-search-filter-description').html(@searchResults.description)
|
||||
if @searchResults.is_blank_filter
|
||||
$('#btn-perform-musician-search-reset').show()
|
||||
@screen.find('#btn-perform-musician-search-reset').show()
|
||||
else
|
||||
$('#btn-perform-musician-search-reset').hide()
|
||||
@screen.find('#btn-perform-musician-search-reset').hide()
|
||||
|
||||
renderMusicians: () =>
|
||||
this.renderResultsHeader()
|
||||
musicians = @searchResults.musicians
|
||||
len = musicians.length
|
||||
if 0 == len
|
||||
$('#musician-search-filter-results-list-blank').show()
|
||||
$('#musician-search-filter-results-list-blank').html('No results found')
|
||||
@screen.find('#musician-search-filter-results-list-blank').show()
|
||||
@screen.find('#musician-search-filter-results-list-blank').html('No results found')
|
||||
return
|
||||
else
|
||||
$('#musician-search-filter-results-list-blank').hide()
|
||||
@screen.find('#musician-search-filter-results-list-blank').hide()
|
||||
|
||||
ii = 0
|
||||
mTemplate = $('#template-search-musician-row').html()
|
||||
aTemplate = $('#template-search-musician-action-btns').html()
|
||||
mTemplate = @screen.find('#template-search-musician-row').html()
|
||||
aTemplate = @screen.find('#template-search-musician-action-btns').html()
|
||||
mVals = undefined
|
||||
musician = undefined
|
||||
renderings = ''
|
||||
|
|
@ -296,7 +302,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
latency_badge: latencyBadge
|
||||
musician_first_name: musician['first_name']
|
||||
$rendering = $(context.JK.fillTemplate(mTemplate, mVals))
|
||||
$offsetParent = @results.closest('.content')
|
||||
$offsetParent = @resultsContainer.closest('.content')
|
||||
data = entity_type: 'musician'
|
||||
options =
|
||||
positions: [
|
||||
|
|
@ -312,12 +318,12 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
context.JK.helpBubble($('.recording-count', $rendering), 'recording-count', data, options);
|
||||
context.JK.helpBubble($('.session-count', $rendering), 'session-count', data, options);
|
||||
@helpBubble.scoreBreakdown $('.latency', $rendering), false, musician['full_score'], myAudioLatency, musician['audio_latency'], musician['score'], scoreOptions
|
||||
@results.append $rendering
|
||||
@resultsContainer.append $rendering
|
||||
$rendering.find('.biography').dotdotdot()
|
||||
ii++
|
||||
$('.search-m-friend').on 'click', this.friendMusician
|
||||
$('.search-m-follow').on 'click', this.followMusician
|
||||
$('.search-m-message').on 'click', this.messageMusician
|
||||
@screen.find('.search-m-friend').on 'click', this.friendMusician
|
||||
@screen.find('.search-m-follow').on 'click', this.followMusician
|
||||
@screen.find('.search-m-message').on 'click', this.messageMusician
|
||||
context.JK.bindHoverEvents()
|
||||
return
|
||||
|
||||
|
|
@ -352,7 +358,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
data: JSON.stringify(newFollowing)
|
||||
processData: false
|
||||
success: (response) ->
|
||||
# remove the orange look to indicate it's not selectable # @FIXME -- this will need to be tweaked when we allow unfollowing $('div[data-musician-id=' + newFollowing.user_id + '] .search-m-follow').removeClass('button-orange').addClass 'button-grey'
|
||||
# remove the orange look to indicate it's not selectable # @FIXME -- this will need to be tweaked when we allow unfollowing @screen.find('div[data-musician-id=' + newFollowing.user_id + '] .search-m-follow').removeClass('button-orange').addClass 'button-grey'
|
||||
return
|
||||
error: app.ajaxError
|
||||
return
|
||||
|
|
@ -372,3 +378,13 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter
|
|||
else
|
||||
'Location Unavailable'
|
||||
|
||||
registerResultsPagination: =>
|
||||
@resultsContainer.scroll =>
|
||||
wintop = @resultsContainer.scrollTop()
|
||||
winheight = @resultsContainer.height()
|
||||
docheight = @screen.find('#musician-search-filter').height() - @screen.find('#musician-search-filter-header').height()
|
||||
scrollTrigger = 0.90
|
||||
# console.log("notification scroll: wintop="+wintop+" docheight="+docheight+" winheight="+winheight+" ratio="+(wintop / (docheight - winheight)));
|
||||
if (wintop / (docheight - winheight)) > scrollTrigger
|
||||
paginate()
|
||||
|
||||
|
|
@ -12,8 +12,12 @@
|
|||
div#musician-search-filter-description
|
||||
a#btn-musician-search-reset.button-grey href="#" RESET
|
||||
div#musician-search-filter-spinner.spinner-large
|
||||
div#musician-search-filter-results-list-blank
|
||||
div#musician-search-filter-results-list.content-wrapper
|
||||
div#musician-search-filter-results-wrapper
|
||||
div#musician-search-filter-results-list-blank
|
||||
div#musician-search-filter-results-list.content-wrapper
|
||||
div.paginate-wait
|
||||
Fetching more results...
|
||||
div.spinner-small
|
||||
|
||||
script#template-musician-search-filter type="text/template"
|
||||
.field
|
||||
|
|
|
|||
Loading…
Reference in New Issue