vrfs-774: added pagination support; fixed some layout issues

2013-11-06 04:16:47 -06:00 · 2013-11-06 04:16:47 -06:00 · 897e83fd73
parent d33b6d13fb
commit 897e83fd73
7 changed files with 94 additions and 57 deletions
--- a/ruby/lib/jam_ruby/models/search.rb
+++ b/ruby/lib/jam_ruby/models/search.rb
@ -1,12 +1,13 @@
 module JamRuby
  # not a active_record model; just a search result
  class Search
-    attr_accessor :bands, :musicians, :fans, :recordings, :friends, :search_type, :user_mappings
+    attr_accessor :bands, :musicians, :fans, :recordings, :friends, :search_type
+    attr_accessor :user_mappings, :page_num, :page_count

    PARAM_MUSICIAN = :search_m

    LIMIT = 10
-    M_PER_PAGE = 20
+    M_PER_PAGE = 4

    M_ORDER_FOLLOWS = ['Most Followed', :followed]
    M_ORDER_PLAYS = ['Most Plays', :plays]
@ -37,14 +38,17 @@ module JamRuby
        if current_user.lat.nil?
          if params[:remote_ip]
            if geo = MaxMindGeo.ip_lookup(params[:remote_ip])
-              latlng = [geo.lat, geo.lng]
+              latlng = [geo.lat, geo.lng] if geo.lat && geo.lng
            end
          end
        else
          latlng = [current_user.lat, current_user.lng]
        end
        distance = location_distance || 50
-        rel = rel.within(distance, :origin => latlng) unless latlng.blank?
+        unless latlng.blank?
+          rel = rel.where(['lat IS NOT NULL AND lng IS NOT NULL'])
+            .within(distance, :origin => latlng)
+        end
      end

      sel_str = 'users.*'
@ -71,7 +75,9 @@ module JamRuby
      rel = rel.paginate(:page => page, :per_page => perpage)
      rel.includes([:instruments, :followings, :friends])

-      Search.new.musician_results_for_user(rel.all, current_user)
+      srch = Search.new
+      srch.page_num, srch.page_count = page, rel.all.total_pages
+      srch.musician_results_for_user(rel.all, current_user)
    end

    # performs a site-white search
@ -175,6 +181,7 @@ module JamRuby
        rel = rel.joins("LEFT JOIN friendships AS friends ON friends.friend_id = '#{user.id}'")
        rel = rel.where(["users.id IN (#{mids}) AND friends.user_id = users.id"])
        rel.all.each { |val| @user_mappings[val.uid] << RESULT_FRIEND }
+
      else
        @user_mappings = {}
      end
--- a/ruby/lib/jam_ruby/models/user.rb
+++ b/ruby/lib/jam_ruby/models/user.rb
@ -18,6 +18,8 @@ module JamRuby
    # updating_password corresponds to a lost_password
    attr_accessor :updating_password, :updating_email, :updated_email, :update_email_confirmation_url, :administratively_created, :current_password, :setting_password, :confirm_current_password, :updating_avatar, :updating_progression_field

+    attr_accessor :search_followings
+
    # authorizations (for facebook, etc -- omniauth)
    has_many :user_authorizations, :class_name => "JamRuby::UserAuthorization"

--- a/web/app/assets/javascripts/findMusician.js
+++ b/web/app/assets/javascripts/findMusician.js
@ -8,6 +8,8 @@
        var musicians = {};
        var musicianList;
        var instrument_logo_map = context.JK.getInstrumentIconMap24();
+	var did_show_musician_page = false;
+	var page_num=1, page_count=0;

        function removeSpinner() {
            $('<div[layout-id=findMusician] .content .spinner').remove();
@ -35,9 +37,8 @@
        }

        function search() {
-            logger.debug("Searching for musicians...");
-            clearResults();
-            var queryString = 'search_m=1&';
+	    did_show_musician_page = true;
+            var queryString = 'search_m=1&page='+page_num+'&';

            // order by
 	    var orderby = $('.musician-order-by').val();
@ -62,20 +63,26 @@
        }

        function refreshDisplay() {
-            var priorVisible;
+	    clearResults();
+	    search();
        }

-        function afterLoadMusicians(musicianList) {
+        function afterLoadMusicians(mList) {
            // display the 'no musicians' banner if appropriate
            var $noMusiciansFound = $('#musicians-none-found');
+	    musicianList = mList;
+
            if(musicianList.length == 0) {
                $noMusiciansFound.show();
 		musicians = [];
-            }
-            else {
+            } else {
                $noMusiciansFound.hide();
 		musicians = musicianList['musicians'];
 		if (!(typeof musicians === 'undefined')) {
+		    $('#musician-filter-city').text(musicianList['city']);
+		    if (0 == page_count) {
+			page_count = musicianList['page_count'];
+		    }
 		    renderMusicians();
 		}
            }
@ -91,6 +98,7 @@
 	    var mVals, mm, renderings='';
 	    var instr_logos, instr;
 	    var follows, followVals, aFollow;
+	    
 	    for (ii=0, len=musicians.length; ii < len; ii++) {
 		mm = musicians[ii];
 		instr_logos = '';
@ -142,13 +150,16 @@
        }

        function afterShow(data) {
-            clearResults();
-            refreshDisplay();
-            loadMusicians();
+	    if (!did_show_musician_page) {
+		refreshDisplay();
+	    }
        }

        function clearResults() {
            musicians = {};
+	    $('#musician-filter-results').empty();
+	    page_num = 1;
+	    page_count = 0;
        }

        function events() {
@ -162,7 +173,17 @@
                    search();
                }
            });
-            $('#btn-refresh-musicians').on("click", search);
+            $('#btn-refresh-musicians').on("click", refreshDisplay);
+
+	    $('#musician-filter-results').bind('scroll', function() {
+                if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
+		    logger.debug("*** scrolling: page_num="+page_num.toString()+" page_count="+page_count.toString());
+		    if (page_num < page_count) {
+			page_num += 1;
+			search();
+		    }
+                }
+            });
        }

        /**
--- a/web/app/views/api_search/index.rabl
+++ b/web/app/views/api_search/index.rabl
@ -7,6 +7,15 @@ unless @search.bands.nil? || @search.bands.size == 0
 end

 unless @search.musicians.nil? || @search.musicians.size == 0
+  
+  node :city do |user|
+    current_user.try(:location)
+  end
+
+  node :page_count do |foo|
+    @search.page_count
+  end
+         
  child(:musicians => :musicians) {
      attributes :id, :first_name, :last_name, :name, :city, :state, :country, :email, :online, :musician, :photo_url, :biography

@ -15,7 +24,7 @@ unless @search.musicians.nil? || @search.musicians.size == 0
      end

      node :is_following do |musician|
-        @search.is_following?(musician)
+        @search.is_follower?(musician)
      end

      node :is_liker do |musician|
--- a/web/app/views/clients/_musician_filter.html.erb
+++ b/web/app/views/clients/_musician_filter.html.erb
@ -19,7 +19,7 @@
    <div class="query-distance-params" style="height:25px; ">
      <input id="musician_query_distance" type="text" name="query_distance" value="100" placeholder="100" />
    </div>
-    <div style="float:left">miles from <%= current_user.current_city(request.remote_ip) %></div>
+    <div style="float:left">miles of <span id="musician-filter-city"><%= current_user.current_city(request.remote_ip) %></span></div>
  </div>
  <div class="right mr10">
    <a id="btn-refresh-musicians" style="text-decoration:none;" class="button-grey">REFRESH</a>
--- a/web/app/views/clients/_musicians.html.erb
+++ b/web/app/views/clients/_musicians.html.erb
@ -2,48 +2,50 @@
 <div layout="screen" layout-id="musicians" class="screen secondary">
  <div class="content">
    <div class="content-head">
-        <div class="content-icon">
-            <%= image_tag "content/icon_musicians.png", {:height => 19, :width => 19} %>
-        </div>
+      <div class="content-icon">
+        <%= image_tag "content/icon_musicians.png", {:height => 19, :width => 19} %>
+      </div>

-        <h1>musicians</h1>
-        <%= render "screen_navigation" %>
+      <h1>musicians</h1>
+      <%= render "screen_navigation" %>
    </div>
    <form id="find-musician-form">
-        <div class="musician-filter" id="session-controls">
-	  <%= render :partial => "musician_filter" %>
-        </div>
-        <div class="content-scroller">
-            <div class="content-wrapper" style="padding-left:35px;padding-top:10px;">
-              <div id="musician-filter-results">
-	      </div>
-            </div>
+      <div class="musician-filter" id="session-controls">
+	<%= render :partial => "musician_filter" %>
+      </div>
+      <div class="content-scroller" style="overflow:scroll">
+        <div class="content-wrapper" style="padding-left:35px;padding-top:10px;overflow:scroll">
+          <div id="musician-filter-results" style="overflow:scroll; height:480px">
+	  </div>
        </div>
+      </div>
    </form>

    <div id="musicians-none-found">
-        There are no musicians found.
+      There are no musicians found.
    </div>
  </div>
 </div>

 <!-- Session Row Template -->
 <script type="text/template" id="template-find-musician-row">
-  <div class="list-result">
+  <div class="profile-band-list-result">
    
-    <!-- avatar -->
-    <div class="avatar-small"><img src="{avatar_url}" /></div>
-    
-    <!-- name & location -->
-    <div class="result-name">{musician_name}<br />
-      <span class="result-location">{musician_location}
-        <br /><br />
-        <div id="result_instruments" class="nowrap">
-          {instruments}
-        </div>
-	<br clear="all" /><br />
-	{friend_count} <img src="../assets/content/icon_friend.png" width="14" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;{follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;{recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;{session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></span><br /><br />
+    <div style="float:left">
+      <!-- avatar -->
+      <div class="avatar-small"><img src="{avatar_url}" /></div>
+      
+      <!-- name & location -->
+      <div style="width:220px;" class="result-name">{musician_name}<br />
+	<span class="result-location">{musician_location}
+          <br /><br />
+          <div id="result_instruments" class="nowrap">
+            {instruments}
+          </div>
+	  <br clear="all" /><br />
+	  {friend_count} <img src="../assets/content/icon_friend.png" width="14" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;{follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;{recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;{session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></span><br /><br />

+      </div>
    </div>
    <div class="left ml35 f11 whitespace w40"><br />
      {biography}<br />
@ -61,13 +63,13 @@
 </script>

 <script type="text/template" id="template-musician-follow-info">
-    <tr>
-        <td width="24">
-            <a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
-        </td>
-        <td>
-            <a href="{profile_url}"><strong>{musician_name}</strong></a>
-        </td>
-    </tr>
+  <tr>
+    <td width="24">
+      <a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
+    </td>
+    <td>
+      <a href="{profile_url}"><strong>{musician_name}</strong></a>
+    </td>
+  </tr>
 </script>

--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@ -145,10 +145,6 @@

            var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
            findMusicianScreen.initialize();
-            /*if (!("jamClient" in window)) {
-              var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
-              findMusicianScreen.initialize();
-            }*/

            var sessionScreen = new JK.SessionScreen(JK.app);
            sessionScreen.initialize();