[feature] paginate public list of members

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Project collaborators selection is now using a list dynamically loaded as you type 
 - Admin: select a training before monitoring its reservations -> improves page load time
 - API: GET /api/trainings do not load nor send the associated availabilities until they are requested
+- List of members is now loaded 10 members by 10, to improve page load time
 - [TODO DEPLOY] Regenerate the theme stylesheet (easy way: Customization/General/Main colour -> "Save")
 - [TODO DEPLOY] `bundle install` and `rake db:migrate`
 

app/assets/javascripts/controllers/members.coffee

@@ -3,11 +3,58 @@
 ##
 # Controller used in the members listing page
 ##
-Application.Controllers.controller "MembersController", ["$scope", 'membersPromise', ($scope, membersPromise) ->
+Application.Controllers.controller "MembersController", ["$scope", 'Member', 'membersPromise', ($scope, Member, membersPromise) ->
 
+
+  ### PRIVATE STATIC CONSTANTS ###
+
+  # number of invoices loaded each time we click on 'load more...'
+  MEMBERS_PER_PAGE = 10
+
+
+
+  ### PUBLIC SCOPE ###
+  
+  ## currently displayed page of members
+  $scope.page = 1
+  
   ## members list
   $scope.members = membersPromise
 
+  # true when all members are loaded
+  $scope.noMoreResults = false
+
+  ##
+  # Callback for the 'load more' button.
+  # Will load the next results of the current search, if any
+  ##
+  $scope.showNextMembers = ->
+    $scope.page += 1
+    Member.query {
+      requested_attributes:'[profile]', 
+      page: $scope.page, 
+      size: MEMBERS_PER_PAGE
+    }, (members) ->
+      $scope.members = $scope.members.concat(members)
+      
+      if (!members[0] || members[0].maxMembers <= $scope.members.length)
+        $scope.noMoreResults = true
+
+
+  ### PRIVATE SCOPE ###
+
+  ##
+  # Kind of constructor: these actions will be realized first when the controller is loaded
+  ##
+  initialize = ->
+    if (!membersPromise[0] || membersPromise[0].maxMembers <= $scope.members.length)
+      $scope.noMoreResults = true
+
+
+
+  ## !!! MUST BE CALLED AT THE END of the controller
+  initialize()
+
 ]
 
 

app/assets/javascripts/router.coffee.erb

@@ -221,7 +221,7 @@ angular.module('application.router', ['ui.router']).
             controller: 'MembersController'
         resolve:
           membersPromise: ['Member', (Member)->
-            Member.query({requested_attributes:'[profile]'}).$promise
+            Member.query({requested_attributes:'[profile]', page: 1, size: 10}).$promise
           ]
           translations: [ 'Translations', (Translations) ->
             Translations.query('app.logged.members').$promise

app/assets/templates/members/index.html.erb

@@ -48,6 +48,10 @@
           </tr>
         </tbody>
       </table>
+      <div class="text-center">
+        <button class="btn btn-warning" ng-click="showNextMembers()" ng-hide="noMoreResults"><i class="fa fa-search-plus" aria-hidden="true"></i> {{ 'display_more_members' | translate }}</button>
+      </div>
+      <p ng-if="members.length == 0" translate>{{ 'no_members_for_now' }}</p>
     </div>
   </div>
 </section>

app/controllers/api/members_controller.rb

@@ -6,6 +6,10 @@ class API::MembersController < API::ApiController
   def index
     @requested_attributes = params[:requested_attributes]
     @members = policy_scope(User)
+
+    unless params[:page].nil? and params[:size].nil?
+      @members = @members.page(params[:page].to_i).per(params[:size].to_i)
+    end
   end
 
   def last_subscribed

app/views/api/members/index.json.jbuilder

@@ -1,6 +1,8 @@
 user_is_admin = (current_user and current_user.is_admin?)
+maxMembers = @members.except(:offset, :limit, :order).count
 
 json.array!(@members) do |member|
+  json.maxMembers maxMembers
   json.id member.id
   json.username member.username
   json.slug member.slug

config/locales/app.logged.en.yml

@@ -76,6 +76,8 @@ en:
       members:
         # list of members accepting to be contacted
         the_fablab_members: "The Fab Lab members"
+        display_more_members: "Display more members..."
+        no_members_for_now: "No members for now"
         avatar: "Avatar"
 
       projects_new:

config/locales/app.logged.fr.yml

@@ -76,6 +76,8 @@ fr:
       members:
         #  liste des membres qui acceptent d'être contactés
         the_fablab_members: "Les membres du Fab Lab"
+        display_more_members: "Afficher plus de membres ..."
+        no_members_for_now: "Pas de membres pour le moment"
         avatar: "Avatar"
 
       projects_new: