From 33cdb33f372b0054d54d76758a6e8509903a25ed Mon Sep 17 00:00:00 2001 From: Jonathan Kolyer Date: Thu, 7 May 2015 15:21:39 +0000 Subject: [PATCH] VRFS-3036 refactoring musician_search into base_search --- .../javascripts/base_search_filter.js.coffee | 226 ++++++++++++++++++ .../musician_search_filter.js.coffee | 198 ++------------- 2 files changed, 251 insertions(+), 173 deletions(-) create mode 100644 web/app/assets/javascripts/base_search_filter.js.coffee diff --git a/web/app/assets/javascripts/base_search_filter.js.coffee b/web/app/assets/javascripts/base_search_filter.js.coffee new file mode 100644 index 000000000..efc876b77 --- /dev/null +++ b/web/app/assets/javascripts/base_search_filter.js.coffee @@ -0,0 +1,226 @@ +$ = jQuery +context = window +context.JK ||= {}; + +context.JK.BaseSearchFilter = class BaseSearchFilter + + constructor: () -> + @rest = context.JK.Rest() + @logger = context.JK.logger + @searchFilter = null + @profileUtils = context.JK.ProfileUtils + @helpBubble = context.JK.HelpBubbleHelper + @searchResults = null + @isSearching = false + @pageNumber = 1 + @instrument_logo_map = context.JK.getInstrumentIconMap24() + @searchType = '' + @searchTypeS = '' + @restGet = null + @restPost = null + @searchMeta = null + + init: (app) => + @app = app + @screenBindings = { 'afterShow': this.afterShow, 'afterHide': this.afterHide } + @app.bindScreen(@searchTypeS, @screenBindings) + + @screen = $('#'+@searchTypeS+'-screen') + @resultsListContainer = @screen.find('#'+@searchType+'-search-filter-results-list') + @spinner = @screen.find('.paginate-wait') + + this.registerResultsPagination() + + @screen.find('#btn-'+@searchType+'-search-builder').on 'click', => + this.showBuilder() + + @screen.find('#btn-'+@searchType+'-search-reset').on 'click', => + this.resetFilter() + + afterShow: () => + @screen.find('#'+@searchType+'-search-filter-results').show() + @screen.find('#'+@searchType+'-search-filter-builder').hide() + this.getUserFilterResults() + + showBuilder: () => + @screen.find('#'+@searchType+'-search-filter-results').hide() + @screen.find('#'+@searchType+'-search-filter-builder').show() + @resultsListContainer.empty() + + afterHide: () => + @resultsListContainer.empty() + + renderSearchFilter: () => + + loadSearchFilter: (sFilter) => + + + _populateSelectWithKeys: (struct, selection, keys, element) => + element.children().remove() + $.each keys, (idx, value) => + label = struct[value] + blankOption = $ '' + blankOption.text label + blankOption.attr 'value', value + blankOption.attr 'selected', '' if value == selection + element.append(blankOption) + context.JK.dropdown(element) + + _populateSelectIdentifier: (identifier) => + elem = $ '#'+@searchType+'-search-filter-builder select[name='+identifier+']' + struct = gon.band_search_meta[identifier]['map'] + keys = gon.band_search_meta[identifier]['keys'] + this._populateSelectWithKeys(struct, @searchFilter[identifier], keys, elem) + + _populateSelectWithInt: (sourceStruct, selection, element) => + struct = + '-1': 'Any' + $.extend(struct, sourceStruct) + this._populateSelectWithKeys(struct, selection, Object.keys(struct).sort(), element) + + _populateSortOrder: () => + this._populateSelectIdentifier('sort_order') + + _populateGenres: () => + @screen.find('#search-filter-genres').empty() + @rest.getGenres().done (genres) => + genreTemplate = @screen.find('#template-search-filter-setup-genres').html() + selected = '' + $.each genres, (index, genre) => + if 0 < @searchFilter.data_blob.genres.length + genreMatch = $.grep(@searchFilter.data_blob.genres, (n, i) -> + n == genre.id) + else + genreMatch = [] + selected = 'checked' if genreMatch.length > 0 + genreHtml = context.JK.fillTemplate(genreTemplate, + id: genre.id + description: genre.description + checked: selected) + @screen.find('#search-filter-genres').append genreHtml + + _populateInstruments: () => + @screen.find('#search-filter-instruments').empty() + @rest.getInstruments().done (instruments) => + $.each instruments, (index, instrument) => + instrumentTemplate = @screen.find('#template-search-filter-setup-instrument').html() + selected = '' + proficiency = '1' + if 0 < @searchFilter.data_blob.instruments.length + instMatch = $.grep(@searchFilter.data_blob.instruments, (inst, i) -> + yn = inst.instrument_id == instrument.id + proficiency = inst.proficiency_level if yn + yn) + selected = 'checked' if instMatch.length > 0 + instrumentHtml = context.JK.fillTemplate(instrumentTemplate, + id: instrument.id + description: instrument.description + checked: selected) + @screen.find('#search-filter-instruments').append instrumentHtml + profsel = '#search-filter-instruments tr[data-instrument-id="'+instrument.id+'"] select' + jprofsel = @screen.find(profsel) + jprofsel.val(proficiency) + context.JK.dropdown(jprofsel) + return true + + _builderSelectValue: (identifier) => + elem = $ '#'+@searchType+'-search-filter-builder select[name='+identifier+']' + elem.val() + + _builderSelectMultiValue: (identifier) => + vals = [] + elem = $ '#search-filter-'+identifier+' input[type=checkbox]:checked' + if 'instruments' == identifier + elem.each (idx) -> + row = $(this).parent().parent() + instrument = + instrument_id: row.data('instrument-id') + proficiency_level: row.find('select').val() + vals.push instrument + else + elem.each (idx) -> + vals.push $(this).val() + vals + + willSearch: (reload) => + return false if @isSearching + @isSearching = true + if reload + @pageNumber = 1 + @screen.find('#'+@searchType+'-search-filter-spinner').show() + @resultsListContainer.empty() + @screen.find('#'+@searchType+'-search-filter-builder').hide() + @screen.find('#'+@searchType+'-search-filter-results').show() + true + + didSearch: (response) => + this.loadSearchFilter(response.filter_json) + @searchResults = response + @screen.find('#'+@searchType+'-search-filter-spinner').hide() + this.renderResultsPage() + @screen.find('.paginate-wait').hide() + @isSearching = false + + resetFilter: () => + if this.willSearch(true) + @restPost({ filter: 'reset' }).done(this.didSearch) + + cancelFilter: () => + this.resetFilter() + + getUserFilterResults: () => + if this.willSearch(true) + @restGet('results=true').done(this.didSearch) + + performSearch: () => + if this.willSearch(true) + $.each @searchMeta.filter_keys.single, (index, key) => + @searchFilter[key] = this._builderSelectValue(key) + $.each @searchMeta.filter_keys.multi, (index, key) => + @searchFilter[key] = this._builderSelectMultiValue(key) + @restPost({ filter: JSON.stringify(@searchFilter), page: @pageNumber }).done(this.didSearch) + + renderResultsHeader: () => + @screen.find('#'+@searchType+'-search-filter-description').html(@searchResults.description) + if @searchResults.is_blank_filter + @screen.find('#btn-'+@searchType+'-search-reset').hide() + else + @screen.find('#btn-'+@searchType+'-search-reset').show() + + renderResultsPage: () => + + _formatLocation: (band) -> + if band.city and band.state + band.city + ', ' + band.state + else if band.city + band.city + else if band.regionname + band.regionname + else + 'Location Unavailable' + + friendRequestCallback: (user_id)=> + # TODO: + + paginate: () => + if @pageNumber < @searchResults.page_count && this.willSearch(false) + @screen.find('.paginate-wait').show() + @pageNumber += 1 + @rest.postBandSearchFilter({ filter: JSON.stringify(@searchFilter), page: @pageNumber }).done(this.didSearch) + return true + false + + registerResultsPagination: () => + _resultsListContainer = @resultsListContainer + _headerHeight = @screen.find('#'+@searchType+'-search-filter-results-header').height() + _paginator = this.paginate + + @screen.find('.content-body-scroller').scroll -> + if _resultsListContainer.is(':visible') + jthis = $(this) + wintop = jthis.scrollTop() + winheight = jthis.innerHeight() + docheight = jthis[0].scrollHeight - _headerHeight + scrollTrigger = 0.98; + if ((wintop / (docheight - winheight)) >= scrollTrigger) + _paginator() diff --git a/web/app/assets/javascripts/musician_search_filter.js.coffee b/web/app/assets/javascripts/musician_search_filter.js.coffee index 4187d6acd..3aaa44440 100644 --- a/web/app/assets/javascripts/musician_search_filter.js.coffee +++ b/web/app/assets/javascripts/musician_search_filter.js.coffee @@ -2,54 +2,26 @@ $ = jQuery context = window context.JK ||= {}; -context.JK.MusicianSearchFilter = class MusicianSearchFilter +context.JK.MusicianSearchFilter = class MusicianSearchFilter extends BaseSearchFilter constructor: () -> - @rest = context.JK.Rest() - @logger = context.JK.logger - @searchFilter = null - @profileUtils = context.JK.ProfileUtils - @helpBubble = context.JK.HelpBubbleHelper - @searchResults = null - @isSearching = false - @pageNumber = 1 - @instrument_logo_map = context.JK.getInstrumentIconMap24() + super() + @searchType = 'musician' + @searchTypeS = @searchTypeS+'s' + @restGet = @rest.getMusicianSearchFilter + @restPost = @rest.postMusicianSearchFilter + @searchMeta = gon.musician_search_meta init: (app) => - @app = app - @screenBindings = { 'afterShow': this.afterShow, 'afterHide': this.afterHide } - @app.bindScreen('musicians', @screenBindings) - - @screen = $('#musicians-screen') - @resultsListContainer = @screen.find('#musician-search-filter-results-list') - @spinner = @screen.find('.paginate-wait') - - this.registerResultsPagination() - - @screen.find('#btn-musician-search-builder').on 'click', => - this.showBuilder() - - @screen.find('#btn-musician-search-reset').on 'click', => - this.resetFilter() - - afterShow: () => - @screen.find('#musician-search-filter-results').show() - @screen.find('#musician-search-filter-builder').hide() - this.getUserFilterResults() - - showBuilder: () => - @screen.find('#musician-search-filter-results').hide() - @screen.find('#musician-search-filter-builder').show() - @resultsListContainer.empty() - - afterHide: () => - @resultsListContainer.empty() + super(app) renderSearchFilter: () => $.when(this.rest.getMusicianSearchFilter()).done (sFilter) => this.loadSearchFilter(sFilter) loadSearchFilter: (sFilter) => + super(sFilter) + @searchFilter = JSON.parse(sFilter) args = interests: @searchFilter.data_blob.interests @@ -77,31 +49,6 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter this._populateInstruments() this._populateSortOrder() - - - _populateSelectWithKeys: (struct, selection, keys, element) => - element.children().remove() - $.each keys, (idx, value) => - label = struct[value] - blankOption = $ '' - blankOption.text label - blankOption.attr 'value', value - blankOption.attr 'selected', '' if value == selection - element.append(blankOption) - context.JK.dropdown(element) - - _populateSelectIdentifier: (identifier) => - elem = $ '#musician-search-filter-builder select[name='+identifier+']' - struct = gon.musician_search_meta[identifier]['map'] - keys = gon.musician_search_meta[identifier]['keys'] - this._populateSelectWithKeys(struct, @searchFilter[identifier], keys, elem) - - _populateSelectWithInt: (sourceStruct, selection, element) => - struct = - '-1': 'Any' - $.extend(struct, sourceStruct) - this._populateSelectWithKeys(struct, selection, Object.keys(struct).sort(), element) - _populateSortOrder: () => this._populateSelectIdentifier('sort_order') @@ -122,8 +69,8 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter _populateAges: () => @screen.find('#search-filter-ages').empty() - ages_map = gon.musician_search_meta['ages']['map'] - $.each gon.musician_search_meta['ages']['keys'], (index, key) => + ages_map = @searchMeta['ages']['map'] + $.each @searchMeta['ages']['keys'], (index, key) => ageTemplate = @screen.find('#template-search-filter-setup-ages').html() selected = '' ageLabel = ages_map[key] @@ -139,112 +86,34 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter @screen.find('#search-filter-ages').append ageHtml _populateGenres: () => - @screen.find('#search-filter-genres').empty() - @rest.getGenres().done (genres) => - genreTemplate = @screen.find('#template-search-filter-setup-genres').html() - selected = '' - $.each genres, (index, genre) => - if 0 < @searchFilter.data_blob.genres.length - genreMatch = $.grep(@searchFilter.data_blob.genres, (n, i) -> - n == genre.id) - else - genreMatch = [] - selected = 'checked' if genreMatch.length > 0 - genreHtml = context.JK.fillTemplate(genreTemplate, - id: genre.id - description: genre.description - checked: selected) - @screen.find('#search-filter-genres').append genreHtml + super() _populateInstruments: () => - @screen.find('#search-filter-instruments').empty() - @rest.getInstruments().done (instruments) => - $.each instruments, (index, instrument) => - instrumentTemplate = @screen.find('#template-search-filter-setup-instrument').html() - selected = '' - proficiency = '1' - if 0 < @searchFilter.data_blob.instruments.length - instMatch = $.grep(@searchFilter.data_blob.instruments, (inst, i) -> - yn = inst.instrument_id == instrument.id - proficiency = inst.proficiency_level if yn - yn) - selected = 'checked' if instMatch.length > 0 - instrumentHtml = context.JK.fillTemplate(instrumentTemplate, - id: instrument.id - description: instrument.description - checked: selected) - @screen.find('#search-filter-instruments').append instrumentHtml - profsel = '#search-filter-instruments tr[data-instrument-id="'+instrument.id+'"] select' - jprofsel = @screen.find(profsel) - jprofsel.val(proficiency) - context.JK.dropdown(jprofsel) - return true - - _builderSelectValue: (identifier) => - elem = $ '#musician-search-filter-builder select[name='+identifier+']' - elem.val() - - _builderSelectMultiValue: (identifier) => - vals = [] - elem = $ '#search-filter-'+identifier+' input[type=checkbox]:checked' - if 'instruments' == identifier - elem.each (idx) -> - row = $(this).parent().parent() - instrument = - instrument_id: row.data('instrument-id') - proficiency_level: row.find('select').val() - vals.push instrument - else - elem.each (idx) -> - vals.push $(this).val() - vals + super() willSearch: (reload) => - return false if @isSearching - @isSearching = true - if reload - @pageNumber = 1 - @screen.find('#musician-search-filter-spinner').show() - @resultsListContainer.empty() - @screen.find('#musician-search-filter-builder').hide() - @screen.find('#musician-search-filter-results').show() - true + super(reload) didSearch: (response) => - this.loadSearchFilter(response.filter_json) - @searchResults = response - @screen.find('#musician-search-filter-spinner').hide() - this.renderMusicians() - @screen.find('.paginate-wait').hide() - @isSearching = false + super(response) resetFilter: () => - if this.willSearch(true) - @rest.postMusicianSearchFilter({ filter: 'reset' }).done(this.didSearch) + super() cancelFilter: () => - this.resetFilter() + super() getUserFilterResults: () => - if this.willSearch(true) - @rest.getMusicianSearchFilter('results=true').done(this.didSearch) + super() performSearch: () => - if this.willSearch(true) - $.each gon.musician_search_meta.filter_keys.single, (index, key) => - @searchFilter[key] = this._builderSelectValue(key) - $.each gon.musician_search_meta.filter_keys.multi, (index, key) => - @searchFilter[key] = this._builderSelectMultiValue(key) - @rest.postMusicianSearchFilter({ filter: JSON.stringify(@searchFilter), page: @pageNumber }).done(this.didSearch) + super() renderResultsHeader: () => - @screen.find('#musician-search-filter-description').html(@searchResults.description) - if @searchResults.is_blank_filter - @screen.find('#btn-musician-search-reset').hide() - else - @screen.find('#btn-musician-search-reset').show() + super() - renderMusicians: () => + renderResultsPage: () => + super() this.renderResultsHeader() if @pageNumber == 1 musicians = @searchResults.musicians len = musicians.length @@ -394,24 +263,7 @@ context.JK.MusicianSearchFilter = class MusicianSearchFilter # TODO: paginate: () => - if @pageNumber < @searchResults.page_count && this.willSearch(false) - @screen.find('.paginate-wait').show() - @pageNumber += 1 - @rest.postMusicianSearchFilter({ filter: JSON.stringify(@searchFilter), page: @pageNumber }).done(this.didSearch) - return true - false + super() registerResultsPagination: () => - _resultsListContainer = @resultsListContainer - _headerHeight = @screen.find('#musician-search-filter-results-header').height() - _paginator = this.paginate - - @screen.find('.content-body-scroller').scroll -> - if _resultsListContainer.is(':visible') - jthis = $(this) - wintop = jthis.scrollTop() - winheight = jthis.innerHeight() - docheight = jthis[0].scrollHeight - _headerHeight - scrollTrigger = 0.98; - if ((wintop / (docheight - winheight)) >= scrollTrigger) - _paginator() + super()