consolidate search bar component templates and refactor searchpag for mobile (DLC-1118)

- add a missing translation for query field labels

Author: barmintor

app/assets/stylesheets/stylesheets/_bootstrap_layout.scss

@@ -89,3 +89,13 @@
     }
 
 }
+
+.rounded-left-0 {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.rounded-right-0 {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}

app/components/dcv/response/collapsible_pagination_component.html.erb

@@ -1 +1 @@
-<%= helpers.paginate @response, :page_entries_info => helpers.page_entries_info(@response), :theme => :dcv_collapsible %>
+<%= helpers.paginate @response, page_entries_info: helpers.page_entries_info(@response), theme: :dcv_collapsible, paginator_class: paginator_class %>

app/components/dcv/response/collapsible_pagination_component.rb

@@ -4,11 +4,40 @@ module Dcv::Response
   class CollapsiblePaginationComponent < Blacklight::Response::PaginationComponent
     def will_render?(controller:, helpers:)
       return false unless controller.has_search_parameters?
-      @response && helpers.show_pagination? and @response.total_pages > 1
+      @response && helpers.show_pagination? and @response.total_pages > 0
     end
 
     def render?
       will_render?(controller: controller, helpers: helpers)
     end
+
+    def paginator_class
+      return OnlyPagePaginator if (@response && @response.total_pages < 2)
+      Kaminari::Helpers::Paginator
+    end
+
+    class OnlyPagePaginator < Kaminari::Helpers::Paginator
+      def first?
+        true
+      end
+
+      def current?
+        true
+      end
+
+      def last?
+        true
+      end
+
+      def partial_path
+        "#{@views_prefix}/kaminari/#{@theme}/paginator".gsub('//', '/')
+      end
+
+      # this is an override to render unconditionally, cf Kaminari::Helpers::Paginator#render
+      def render(&block)
+        instance_eval(&block)
+        @output_buffer.presence
+      end
+    end
   end
 end

app/components/dcv/search_bar/catalog_component.html.erb

@@ -2,5 +2,8 @@
 
 module Dcv::SearchBar
   class CatalogComponent < Dcv::SearchBar::DefaultComponent
+    def search_fields_component_class
+      Dcv::SearchBar::SearchFields::HiddenComponent
+    end
   end
 end

app/components/dcv/search_bar/catalog_component.rb

@@ -1,34 +1,34 @@
-  <%= form_tag @url, method: :get, class: ['d-flex','flex-md-row-reverse','flex-sm-column','w-100'] do %>
-    <%= render_hash_as_hidden_fields(@params.except(:q, :search_field, :qt, :page, :utf8, :format, :slug, :site_slug)) %>
-    <%= render_hash_as_hidden_fields(search_action_params) %>
-    <div class="input-group flex-sm-row flex-md-fill">
-      <%= render pagination_component %>
-      <div class="input-group-prepend collapseSearch flex-fill p-0<%= ' collapse' if pagination_component.render?%>" id="collapseQuery">
-        <% unless search_fields.empty? %>
-          <span class="input-group-append p-0<%= ' hidden' if search_fields.length == 1 %>">
-            <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
-            <%= select_tag(
-                :search_field,
-                options_for_select(
-                  search_fields,
-                  h(params[:search_field])
-                ),
-                title: t('blacklight.search.form.search_field.title'), class: 'btn search-btn btn-primary rounded-0'
-              )
-            %>
-            <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
-          </span>
-        <% end %>
+<%= form_tag @url, method: :get, class: ['form-inline','flex-md-row-reverse','flex-sm-column','w-100'] do %>
+  <%= render_hash_as_hidden_fields(params_for_new_search) %>
+  <%- rendering_pagination = pagination_will_render? -%>
+  <div class="input-group flex-fill flex-nowrap align-content-end">
+    <div class="btn-group input-group-prepend btn-group-toggle flex-shrink-0" data-toggle="buttons">
+      <label for="show-search-mode" class="btn btn-secondary border-info rounded-left<%= ' active' unless rendering_pagination %>" onclick="if ($('#collapseQuery').hasClass('show')) return false;">
+        <input type="radio" name="searchpag-mode" id="show-search-mode" aria-label="Show search box" aria-controls="collapseQuery collapsePag" <%=  'disabled ' unless rendering_pagination %>data-toggle="collapse" data-target=".collapseSearch" aria-expanded="false">
+        <i class="previous fa fa-binoculars" title="Show search box" data-toggle="tooltip" data-original-title="Show search box"></i>
+      </label>
+      <label for="show-pag-mode" class="btn btn-secondary border-info<%= rendering_pagination ? ' active' : ' disabled'  %>" onclick="if ($('#collapsePag').hasClass('show')) return false;">
+        <input type="radio" name="searchpag-mode" id="show-pag-mode" aria-label="Navigate results" aria-controls="collapseQuery collapsePag" <%=  rendering_pagination ? 'checked ' : ' disabled' %>data-toggle="collapse" data-target=".collapseSearch" aria-expanded="false">
+        <i class="previous fa fa-book-open-reader" title="Navigate results" data-toggle="tooltip" data-original-title="Navigate results"></i>
+      </label>
+    </div>
+    <%= render pagination_component %>
+    <div class="input-group-prepend p-0 flex-grow-1 collapseSearch<%= ' collapse' if rendering_pagination %>" id="collapseQuery">
+      <%= render search_fields_component %>
+      <div class="flex-fill flex-shrink-1">
+        <input type="hidden" name="search_field" value="all_text_teim">
         <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-        <%= text_field_tag :q, params[:q], :placeholder => search_placeholder_text, :class => "search_q q flex-fill bg-white", :id => "q" %>
-        <div class="input-group-append">
-          <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn bg-body btn-outline-info reset-btn' if query_has_constraints? %>
-          <button class="btn btn-splash" type="submit" aria-label="Submit">
-            <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
-            <span class="fa fa-search"></span>
-          </button>
-        </div>
+        <%= text_field_tag :q, params[:q], placeholder: search_placeholder_text, class: "search_q q bg-white form-control w-100", id: "q", tabindex: "1" %>
+      </div>
+      <div class="btn-group input-group-append">
+        <%= render format_filter_component %>
+        <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
+        <button class="btn btn-splash" type="submit">
+          <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
+          <span class="fa fa-search"></span>
+        </button>
       </div>
     </div>
+  </div>
 
-  <% end %>
+<% end %>

app/components/dcv/search_bar/default_component.html.erb

@@ -4,6 +4,22 @@ module Dcv::SearchBar
   class DefaultComponent < Blacklight::SearchBarComponent
     delegate :query_has_constraints?, :search_action_params, :search_placeholder_text, to: :helpers
 
+    def search_fields_component_class
+      Dcv::SearchBar::SearchFields::SelectComponent
+    end
+
+    def search_placeholder_text
+      (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe)
+    end
+
+    def params_for_new_search
+      @params_for_new_search ||= begin
+        _pfns = @params.except(:q, :search_field, :qt, :page, :utf8, :format, :"searchpag-mode")
+        _pfns[:f] = _pfns[:f].except(:lib_format_sim) if _pfns.has_key?(:f)
+        _pfns
+      end
+   end
+
     def start_over_params
       params.slice(:search_field, :utf8).permit!
     end
@@ -28,7 +44,10 @@ def pagination_component
           response: helpers.instance_variable_get(:@response), theme: 'dcv_collapsible',
           outer_window: 1, window: 1
         )
-        unless _comp.will_render?(controller: controller, helpers: helpers)
+
+        if _comp.will_render?(controller: controller, helpers: helpers)
+          @pagination_will_render = true
+        else
           _comp = Dcv::SearchContext::CollapsiblePaginationComponent.new(
             search_context: helpers.instance_variable_get(:@search_context),
             search_session: helpers.instance_variable_get(:@search_session)
@@ -37,5 +56,24 @@ def pagination_component
         _comp
       end
     end
+
+    def pagination_will_render?
+      if @pagination_will_render.nil?
+        @pagination_will_render = pagination_component.will_render?(controller: controller, helpers: helpers)
+      end
+      @pagination_will_render
+    end
+
+    def search_fields_component
+      @search_fields_component ||= search_fields_component_class.new(search_fields: search_fields)
+    end
+
+    def format_filter_list
+      nil
+    end
+
+    def format_filter_component
+      @format_filter_component ||= FormatFilterDropdownComponent.new(format_filter_list: format_filter_list)
+    end
   end
 end

app/components/dcv/search_bar/default_component.rb

@@ -3,5 +3,14 @@
 module Dcv::SearchBar
   class DurstComponent < Dcv::SearchBar::DefaultComponent
     delegate :durst_format_list, :query_has_constraints?, to: :helpers
+
+    def format_filter_list
+      @format_filter_list ||= durst_format_list
+    end
+
+    def search_placeholder_text
+      return 'Modify current search&hellip;'.html_safe if query_has_constraints?
+      'Search Postcards, Maps, Photographs, Books, Etc&hellip;'.html_safe
+    end
   end
 end

app/components/dcv/search_bar/durst_component.html.erb

@@ -0,0 +1,11 @@
+<div class="dropdown">
+  <button id="format_type_select" type="button" class="btn btn-splash dropdown-toggle d-inline" data-toggle="dropdown" aria-expanded="false" onclick="$(this).dropdown(); return false;" aria-controls="format_filter" aria-pressed="false" data-reference="parent"><span class="d-none d-md-inline">Formats</span>
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <ul id="format_filter" class="dropdown-menu dropdown-menu-left hide" role="menu">
+    <li class="dropdown-header text-light">Limit search to:</li>
+    <% format_filter_list.each do | key, display_label | %>
+      <li class="dropdown-item text-light"><input type="checkbox" name="f[lib_format_sim][]" <%= (params[:f] && params[:f]['lib_format_sim'] && params[:f]['lib_format_sim'].include?(key)) ? 'checked="checked"' : '' %> value="<%= key %>"> <%= display_label %></li>
+    <% end %>
+  </ul>
+</div>

app/components/dcv/search_bar/durst_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Dcv::SearchBar
+  class FormatFilterDropdownComponent < Blacklight::Component
+    def initialize(format_filter_list: nil)
+      @format_filter_list = format_filter_list
+    end
+
+    def render?
+      @format_filter_list
+    end
+
+    def format_filter_list
+      @format_filter_list
+    end
+  end
+end

app/components/dcv/search_bar/format_filter_dropdown_component.html.erb

@@ -9,6 +9,10 @@ def initialize(content_availability: nil, **_opts)
       @content_availability = content_availability
     end
 
+    def params_for_new_search
+      super.tap { |p| p[:'f[content_availability][]'] = @content_availability if @content_availability }
+    end
+
     def start_over_params
       if @params.dig(:f, :content_availability).present?
         super.to_h.merge("f[content_availability][]" => @params.dig(:f, :content_availability))

app/components/dcv/search_bar/format_filter_dropdown_component.rb

@@ -0,0 +1,5 @@
+<% unless search_fields.blank? %>
+  <span class="input-group-append">
+    <%= hidden_field_tag(:search_field, h(params[:search_field] || search_fields.first[1]), :title => t('blacklight.search.form.search_field.title')) %>
+  </span>
+<% end %>

app/components/dcv/search_bar/repositories_component.html.erb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Dcv::SearchBar::SearchFields
+  class HiddenComponent < SelectComponent
+  end
+end

app/components/dcv/search_bar/repositories_component.rb

@@ -0,0 +1,7 @@
+<% unless search_fields.empty? %>
+<span class="input-group-prepend <%= 'hidden' if search_fields && search_fields.length < 2 %>">
+  <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
+  <%= select_tag(:search_field, options_for_select(search_fields, h(params[:search_field])), :title => t('blacklight.search.form.search_field.title'), :class=>"search_field") %>
+  <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
+</span>
+<% end %>

app/components/dcv/search_bar/search_fields/hidden_component.html.erb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Dcv::SearchBar::SearchFields
+  class SelectComponent < Blacklight::Component
+    def initialize(search_fields: nil)
+      @search_fields = search_fields
+    end
+
+    def render?
+      search_fields
+    end
+
+    def search_fields
+      @search_fields
+    end
+  end
+end