WIP moving search view controls around

Author: barmintor

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

@@ -0,0 +1,13 @@
+<div class="view-type hidden-xs btn-group btn-group-sm search-index-tool-group">
+  <span class="sr-only visually-hidden"><%= t('blacklight.search.view_title') %></span>
+  <div class="view-type-group btn-group">
+    <%= helpers.search_mode_button(:grid, classes: ['btn-sm']) %>
+    <%= helpers.search_mode_button(:list, classes: ['btn-sm']) %>
+    <% if show_other_sources? && @response.params[:q].present? %>
+      <button id="extended-search-mode" type="button" class="btn btn-sm btn-outline-secondary result-type-button" title="Search Other Sources"><i class="fa fa-link"></i></button>
+    <% end %>
+    <% if timeline_views? %>
+      <button id="date-graph-toggle" type="button" class="btn btn-sm btn-outline-secondary result-type-button" data-toggle="tooltip" aria-label="timeline view" title="timeline view"><i class="fa fa-bar-chart"></i></button>
+    <% end %>
+  </div>
+</div>

app/components/dcv/response/view_type_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Dcv::Response
+  class ViewTypeComponent < Blacklight::Response::ViewTypeComponent
+    # @param [Blacklight::Response] response
+    def initialize(response:, views: {}, search_state:, selected: nil, subsite_config:, **_args)
+      super(response: response, views: views, search_state: search_state, selected: selected)
+      @response = response
+      @views = views
+      @search_state = search_state
+      @selected = selected
+      @subsite_config = subsite_config
+      puts @subsite_config.inspect
+    end
+
+    def timeline_views?
+      @subsite_config.dig('date_search_configuration', 'show_timeline')
+    end
+
+    def show_other_sources?
+      @subsite_config.dig('date_search_configuration', 'show_other_sources')
+    end
+
+    def before_render
+      return if views.any?
+
+      @views.each do |key, config|
+        view(key: key, view: config, selected: @selected == key, search_state: @search_state)
+      end
+    end
+
+    def render?
+      true
+    end
+  end
+end

app/helpers/dcv/subsite_helper.rb

@@ -90,8 +90,8 @@ def subsite_search_mode
     end
   end
 
-  def search_mode_button(mode=:grid)
-    classes = 'btn result-type-button'
+  def search_mode_button(mode=:grid, classes: [])
+    classes = 'btn result-type-button ' + classes.join(' ')
     classes << ((mode == subsite_search_mode) ? ' btn-success' : ' btn-outline-secondary')
     icon_classes = (mode == :list) ? 'fa fa-th-list' : 'fa fa-th'
     content_tag(:button, type: 'button', class: classes, :"data-toggle" => "tooltip", "aria-label": "#{mode} view", title: "#{mode} view", id: "#{mode}-mode") do

app/views/shared/_per_page_widget.html.erb

@@ -2,7 +2,7 @@
 
 <div id="per_page-dropdown" class="btn-group btn-group-sm">
   <span class="sr-only"><%= t('blacklight.search.per_page.title') %></span>
-	<%= link_to("<i class=\"fa fa-arrows-v\"></i> #{current_per_page} <span class=\"caret\"></span>".html_safe, "#", :class=> "btn btn-outline-secondary dropdown-toggle", :'data-toggle'=>"dropdown", :"data-tt" => 'tooltip', :"aria-label"=>t(:'blacklight.search.per_page.button_label', :count => current_per_page), :title=>t(:'blacklight.search.per_page.button_label', :count => current_per_page)) %>
+	<%= link_to("<i class=\"fa fa-arrows-v\"></i> #{current_per_page} <span class=\"caret\"></span>".html_safe, "#", :class=> "btn btn-sm btn-outline-secondary dropdown-toggle", :'data-toggle'=>"dropdown", :"data-tt" => 'tooltip', :"aria-label"=>t(:'blacklight.search.per_page.button_label', :count => current_per_page), :title=>t(:'blacklight.search.per_page.button_label', :count => current_per_page)) %>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
     <%- per_page_options_for_select.each do |(label, count)| %>
       <% label = "#{label} <i class=\"fa fa-check\"></i>".html_safe if count == current_per_page -%>

app/views/shared/_sort_and_per_page.html.erb

@@ -1,25 +1,10 @@
-<div id="sortAndPerPage" class="border-bottom-0 d-flex justify-content-between">
-  <div id="search-result-pagination">
-  <%= render(partial: "paginate_compact", object: @response) if has_search_parameters? %>
+<div id="sortAndPerPage" class="border-bottom-0 d-flex justify-content-center">
+  <div id="search-widgets" class="btn-group btn-group-sm search-index-tool-group col-12">
+    <%= render :partial => 'sort_widget' %>
+    <%= render :partial => 'per_page_widget' %>
+    <%= render :partial => 'view_type_group' %>
   </div>
-  <div id="search-index-tools">
-    <div id="search-widgets" class="btn-group btn-group-sm float-right search-index-tool-group">
-      <%= render :partial => 'sort_widget' %>
-      <%= render :partial => 'per_page_widget' %>
-      <%= render :partial => 'view_type_group' %>
-    </div>
-    <div id="view-options" class="hidden-xs btn-group btn-group-sm float-right search-index-tool-group">
-      <%= search_mode_button(:grid) %>
-      <%= search_mode_button(:list) %>
-      <% if controller.subsite_config.dig('display_options', 'show_other_sources') && @response.params[:q].present? %>
-        <button id="extended-search-mode" type="button" class="btn btn-outline-secondary result-type-button" title="Search Other Sources"><i class="fa fa-link"></i></button>
-      <% end %>
-    </div>
+  <div>
     <%= render Dcv::Search::Ui::CsvExportComponent.new %>
-    <% if controller.subsite_config.dig('date_search_configuration', 'show_timeline') %>
-      <div id="date-toggle" class="btn-group btn-group-sm float-right search-index-tool-group">
-        <button id="date-graph-toggle" type="button" class="btn btn-outline-secondary result-type-button" data-toggle="tooltip" aria-label="timeline view" title="timeline view"><i class="fa fa-bar-chart"></i></button>
-      </div>
-    <% end %>
   </div>
 </div>

app/views/shared/_sort_widget.html.erb

@@ -1,6 +1,6 @@
 <% if show_sort_and_per_page? and !active_sort_fields.blank? %>
 <div id="sort-dropdown" class="btn-group btn-group-sm">
-  <%= link_to('<i class="fa fa-sort-alpha-asc"></i> <span class="caret"></span>'.html_safe, "#", :class=>"btn btn-outline-secondary dropdown-toggle", :'data-toggle'=>"dropdown", :"data-tt" => 'tooltip', :"aria-label"=>t('blacklight.search.sort.label', :field =>current_sort_field.label), :title=>t('blacklight.search.sort.label', :field =>current_sort_field.label)) %>
+  <%= link_to('<i class="fa fa-sort-alpha-asc"></i> <span class="caret"></span>'.html_safe, "#", :class=>"btn btn-sm btn-outline-secondary dropdown-toggle", :'data-toggle'=>"dropdown", :"data-tt" => 'tooltip', :"aria-label"=>t('blacklight.search.sort.label', :field =>current_sort_field.label), :title=>t('blacklight.search.sort.label', :field =>current_sort_field.label)) %>
 
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
       <%- active_sort_fields.each do |sort_key, field_config| %>

app/views/shared/_view_type_group.html.erb

@@ -0,0 +1,7 @@
+<%= render(Dcv::Response::ViewTypeComponent.new(
+      response: @response,
+      views: document_index_view_controls,
+      search_state: search_state,
+      selected: document_index_view_type,
+      controller_name: controller.controller_name,
+      subsite_config: controller.subsite_config)) if show_sort_and_per_page? -%>

app/views/shared/index.html.erb

@@ -1,8 +1,8 @@
 <div class="row">
-	<div id="nav" class="col-md-12">
+	<div id="sidebar" class="col-md-3">
+	<div id="nav">
 		<%= render 'sort_and_per_page' %>
 	</div>
-	<div id="sidebar" class="col-md-3">
 		<%= render 'search_sidebar' %>
 	</div>
 
@@ -41,8 +41,6 @@
 				</div>
 			</div>
 
-			<%= render 'results_pagination' %>
-
 			<% if show_other_sources? %>
 				<div class="text-right">
 					<button title="return to results" class="pagination btn btn-sm btn-link hidden" id="return-to-results" type="button">&laquo; Return to Results</button>