Merge pull request #1196 from ElixirTeSS/per-page

Dropdown to adjust page size. Fixes #1195

Author: fbacall

app/assets/javascripts/application.js

@@ -41,36 +41,41 @@
 //= require ol
 //= require ol-geocoder
 
-function redirect_to_sort_url(){
-    url = new URL(window.location.href);
-    url.searchParams.set(
-        "sort",
-        $("#sort").find(":selected").val()
-    );
-    window.location.replace(url.toString());
-}
-
-function redirect_with_updated_search(param, paramVal) {
-    url = new URL(window.location.href);
-    // special case for empty range types
-    if (param == 'start' && paramVal == '/') {
-        url.searchParams.delete(param);
-    } else {
-        url.searchParams.set(param, paramVal);
-    }
-    window.location.replace(url.toString());
-}
-
-function reposition_tiles(container, tileClass){
-    var $container = $("." + container);
-
-    $container.imagesLoaded(function () {
-        $container.masonry({
-            // options...
-            itemSelector: "." + tileClass,
-            columnWidth: 20
+const Index = {
+    applySorting: function () {
+        Index.setParam("sort", $("#sort").val());
+    },
+
+    applyPerPage: function () {
+        Index.setParam("per_page", $("#per_page").val());
+    },
+
+    applyDateParam: function (param, value) {
+        const url = new URL(window.location.href);
+        if (param === 'start' && value === '/') {
+            url.searchParams.delete(param);
+        } else {
+            url.searchParams.set(param, value);
+        }
+        window.location.replace(url.toString());
+    },
+
+    setParam: function (param, value) {
+        const url = new URL(window.location.href);
+        url.searchParams.set(param, value);
+        window.location.replace(url.toString());
+    },
+
+    repositionTiles(containerSelector, itemSelector) {
+        const container = $(containerSelector);
+        container.imagesLoaded(function () {
+            container.masonry({
+                // options...
+                itemSelector: itemSelector,
+                columnWidth: 20
+            });
         });
-    });
+    }
 }
 
 // Perform an ajax request to load the calendar and replace the contents
@@ -152,7 +157,7 @@ document.addEventListener("turbolinks:load", function(e) {
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
         addTabToFilters(e.target.href.split('#').pop());
         // and reposition masonry tiles
-        reposition_tiles('masonry', 'masonry-brick');
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
 
     // Manually trigger bootstrap tab history (we should probably remove the dependency and reimplement in a turbolink-compatible way)
@@ -168,12 +173,14 @@ document.addEventListener("turbolinks:load", function(e) {
 
     // Masonry
     $(".nav-tabs a").on("shown.bs.tab", function(e) {
-        reposition_tiles('masonry', 'masonry-brick');
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
+
     $(window).on("orientationchange", function() {
-        reposition_tiles("masonry", "masonry-brick");
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
-    reposition_tiles("masonry", "masonry-brick");
+
+    Index.repositionTiles('.masonry', '.masonry-brick');
 
     new Clipboard(".clipboard-btn");
 

app/assets/stylesheets/application.scss

@@ -418,10 +418,21 @@ ul.unstyled {
 }
 
 .search-results-count {
-  margin-right: 5px;
+  margin-right: 1em;
   display: inline-block
 }
 
+.search-results-per-page {
+  display: inline-block;
+
+  select {
+    border: none;
+    padding: 0;
+    background: transparent;
+    border-bottom: 1px dashed $text-color;
+  }
+}
+
 .index-display-options {
   margin: 5px 0;
 }

app/controllers/concerns/searchable_index.rb

@@ -1,5 +1,8 @@
 # The concern for searchable index
 module SearchableIndex
+  DEFAULT_PAGE_SIZE = 10
+  PER_PAGE_OPTIONS = [10, 20, 50, 100]
+
   extend ActiveSupport::Concern
 
   included do
@@ -19,7 +22,7 @@ def count
   def fetch_resources
     if TeSS::Config.solr_enabled
       page = page_param.blank? ? 1 : page_param.to_i
-      per_page = per_page_param.blank? ? 10 : per_page_param.to_i
+      per_page = per_page_param.blank? ? DEFAULT_PAGE_SIZE : per_page_param.to_i
 
       @search_results = @model.search_and_filter(current_user, @search_params, @facet_params,
                                     page: page, per_page: per_page, sort_by: @sort_by)

app/helpers/application_helper.rb

@@ -708,4 +708,9 @@ def omniauth_login_link(provider, config)
       method: :post
     )
   end
+
+  def per_page_options_for_select
+    options_for_select(SearchableIndex::PER_PAGE_OPTIONS.map { |k| [k, k] },
+                       params[:per_page].presence || SearchableIndex::DEFAULT_PAGE_SIZE)
+  end
 end

app/views/search/common/_facet_sidebar_date_filter.html.erb

@@ -10,9 +10,9 @@
     </li>
 
     <li class="nav-item active" style="display: none; font-size: 15px; text-align: center;">
-      <input type="date" name="<%= facet_field %>_lb" value="<%= lb %>" style="width: 47%;" onchange="redirect_with_updated_search('<%= facet_field %>', this.value + '/' + '<%= ub %>');">
+      <input type="date" name="<%= facet_field %>_lb" value="<%= lb %>" style="width: 47%;" onchange="Index.applyDate('<%= facet_field %>', this.value + '/' + '<%= ub %>');">
        - 
-      <input type="date" name="<%= facet_field %>_ub" value="<%= ub %>" style="width: 47%;" onchange="redirect_with_updated_search('<%= facet_field %>', '<%= lb %>' + '/' + this.value);">
+      <input type="date" name="<%= facet_field %>_ub" value="<%= ub %>" style="width: 47%;" onchange="Index.applyDate('<%= facet_field %>', '<%= lb %>' + '/' + this.value);">
     </li>
   </ul>
 </li>

app/views/search/common/_search_panel.html.erb

@@ -27,6 +27,10 @@
         <div class="search-results-count">
           <%= pluralize(resources.total, resource_type.model_name.human.downcase ) %> found
         </div>
+        <div class="search-results-per-page form-inline pull-right">
+            <label for="per_page"><%= t('sidebar.per_page') %></label>
+            <%= select_tag('per_page', per_page_options_for_select, onchange: 'Index.applyPerPage()', class: 'font-size-sm') %>
+        </div>
       <% end %>
     </div>
   </div>

app/views/search/common/_sort_by.html.erb

@@ -29,7 +29,7 @@ e.g.
       <li class="facet-sort-group">
         <span class="icon icon-lg sort-icon facet-sort-icon"></span>
         <%= select_tag(:sort, options_for_select(options, @sort_by),
-                       onchange: 'redirect_to_sort_url()', class: 'form-control facet-select font-size-sm facet-sort')
+                       onchange: 'Index.applySorting()', class: 'form-control facet-select font-size-sm facet-sort')
         %>
       </li>
     </ul>

config/locales/en.yml

@@ -910,6 +910,7 @@ en:
       values:
         show_hidden: 'Show hidden items'
         hide_hidden: 'Hide hidden items'
+    per_page: 'Results per page: '
   collections:
     show:
       curate_materials: "Curate materials"