Add contents hierarchy to collection display (ARC-149)

app/assets/stylesheets/_base.scss

@@ -131,3 +131,11 @@ mark, .mark {
   margin-bottom: 2rem;
   padding-top: 1rem;
 }
+
+/* Navbars */
+
+.sticky-toolbar-top {
+  position: sticky !important;
+  top: 0;
+  z-index: 2;
+}

app/assets/stylesheets/_collection.scss

@@ -8,13 +8,22 @@
   position: relative;
   margin-bottom: .5rem;
   border-bottom: solid 1px var.$color-teal-300;
-  box-shadow: 0px 3px 3px -3px rgba(23, 130, 166, 0.58);
-  background-image: linear-gradient(to top, var.$gray-cool, var.$gray-white, var.$soft-white, var.$near-white, var.$color-background-primary);
+  box-shadow: 0 3px 3px -3px rgba(23, 130, 166, 0.58);
+  background-image: linear-gradient(
+    to top, var.$gray-cool, var.$gray-white, var.$soft-white, var.$near-white, var.$color-background-primary
+  );
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
 
   .al-request {
     margin-right: 2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
+
+  .btn-primary {
+    margin-right: 0.5rem;
+  }
+
 }
 
 .al-show-sub-heading {

app/assets/stylesheets/_contents.scss

@@ -0,0 +1,43 @@
+@use "variables" as var;
+
+.contents-action {
+  min-width: 2.875rem;
+  min-height: 2.875rem;
+  i {
+    font-size: 2rem;
+  }
+}
+
+.nested-contents-container {
+  margin-left: 3rem;
+}
+
+.contents-item-card {
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.blended {
+  color: var.$color-neutral-100;
+  opacity: 0.0;
+}
+
+.button-placeholder {
+  padding: 0.375rem;
+}
+
+
+#contents button[aria-expanded="true"] {
+  i::before {
+    content: "\F2E6" !important;
+  }
+}
+
+.btn-outline-request {
+  border: 1px solid var.$color-neutral-100;
+  color: var.$color-blue-400;
+}
+
+.button-placeholder {
+  padding: 0.875rem;
+}

app/assets/stylesheets/_search_results.scss

@@ -193,10 +193,6 @@ article.document .blacklight-icons.blacklight-icons-online {
   }
 }
 
-.truncator button {
-  display: unset;
-}
-
 #content .al-grouped-results .al-grouped-title-bar {
   background-color: var.$facet-gray;
   border: 1px solid rgba(0, 0, 0, 0.075);

app/assets/stylesheets/_variables.scss

@@ -38,10 +38,10 @@ $main-gray: #ced4da;
 $gray-cool: #f7f8f9;
 $gray-white: #f9fafb;
 $soft-white: #fdfdfd;
-$near-white: fdfdfd;
+$near-white: #fdfdfd;
 
 /* var used in Finding Aids: set to standard white */
-$color-background-primary: #fffff;
+$color-background-primary: #ffffff;
 
 /* typography */
 $font-base-family: var(--font-family, "Mulish", sans-serif);

app/assets/stylesheets/application.scss

@@ -3,6 +3,7 @@
 @use "banners";
 @use "buttons";
 @use "card";
+@use "contents";
 @use "collection";
 @use "context_navigation";
 @use "footer";

app/components/um_aeon_request_checkbox_component.html.erb

@@ -0,0 +1,11 @@
+<div class="checkbox request-checkbox">
+  <label class="btn btn-outline-secondary btn-outline-request contents-action">
+    <input type="checkbox" name="Request" value="<%= document.id %>">
+    <input type="hidden" name="Request" value="<%= document.id %>">
+    <input type="hidden" name="ItemSubTitle_<%= document.id %>" value="<%= document.aeon_item_sub_title_value %>">
+    <input type="hidden" name="ItemVolume_<%= document.id %>" value="<%= document.aeon_item_volume_value %>">
+    <input type="hidden" name="ItemCitation_<%= document.id %>" value="<%= document.aeon_item_citation_value %>">
+    <input type="hidden" name="ItemInfo1" value="<%= document.aeon_item_info_1_value %>">
+    <span class="visually-hidden">Request "<%= document.aeon_item_sub_title_visually_hidden %>"</span>
+  </label>
+</div>

app/components/um_aeon_request_checkbox_component.rb

@@ -0,0 +1,7 @@
+class UmAeonRequestCheckboxComponent < ViewComponent::Base
+  def initialize(document:)
+    @document = document
+  end
+
+  attr_reader :document
+end

app/components/um_collection_sidebar_component.html.erb

@@ -11,5 +11,16 @@
         %>
       </li>
     <% end %>
+    <li class="nav-item">
+      <%= link_to "Contents", "#contents", class: 'nav-link pl-0 ps-0 py-1', data: { turbolinks: 'false' } %>
+    </li>
+    <li class="nav-item">
+      <%= link_to(
+        t('arclight.views.show.sections.access_field'),
+        "#using-these-materials",
+        class: 'nav-link pl-0 ps-0 py-1',
+        data: { turbolinks: 'false' }
+      ) %>
+    </li>
   </ul>
 </nav>

app/components/um_contents_document_collection_hierarchy_component.html.erb

@@ -0,0 +1,84 @@
+<div>
+  <div class="row">
+    <div class="col-auto">
+      <% if document.children? %>
+        <%= content_tag(
+          :button,
+          class: "btn btn-light contents-action",
+          aria: { label: t("arclight.hierarchy.view_all"), expanded: show_expanded? },
+          data: {
+            bs_toggle: "collapse", toggle: "collapse", bs_target: "#collapsible-contents-hierarchy-#{document.id}"
+          }
+        ) do %>
+          <i class="bi <%= show_expanded? ? 'bi-dash-circle' : 'bi-plus-circle' %>"></i>
+        <% end %>
+      <% else %>
+        <span class="contents-action button-placeholder blended"><i class="bi bi-circle"></i></span>
+      <% end %>
+    </div>
+    <div class="card contents-item-card col">
+      <div class="row">
+        <% if document.collection_has_requestable_components? %>
+          <% if document.is_checkbox_requestable? %>
+            <div class="col-auto">
+              <%= render UmAeonRequestCheckboxComponent.new(document: document) %>
+            </div>
+          <% end %>
+        <% end %>
+        <div class="col">
+          <hgroup data-document-id="<%= document.id %>" role="group" aria-roledescription="Heading group">
+            <h3 xclass="index_title document-title-heading">
+              <% if helpers.is_interesting_component?(document) %>
+                <%= helpers.link_to_document document %>
+              <% else %>
+                <%= presenter.label %>
+              <% end %>
+              <% if document.children? %>
+                <span class="badge badge-pill badge-secondary al-number-of-children-badge">
+                  <%= document.number_of_children %> <%= t(:'um_arclight.views.index.number_of_components', count: document.number_of_children) %>
+                </span>
+              <% end %>
+            </h3>
+            <%= content_tag('p', class: 'al-document-extent border border-light rounded', 'aria-roledescription' => 'subtitle') do %>
+              <%= document.extent %>
+            <% end unless document.extent.empty? %>
+          </hgroup>
+        </div>
+      </div>
+      <div xclass="documentContent">
+        <%= helpers.render_index_doc_actions document, wrapping_class: 'd-flex justify-content-end' %>
+      </div>
+      <div>
+        <%= content_tag('div', class: 'al-document-highlight') do %>
+          <%= document.highlights.join('[...]').html_safe %>
+        <% end if document.highlights %>
+      </div>
+      <div>
+        <%= content_tag('div', class: 'al-document-creator') do %>
+          <%= document.creator %>
+        <% end if document.creator %>
+      </div>
+      <div>
+        <%= abstract_or_scope %>
+      </div>
+    </div>
+
+  </div>
+  <% if document.number_of_children > 0 %>
+    <%= content_tag(
+      :div,
+      id: "collapsible-contents-hierarchy-#{document.id}",
+      class: "collapse al-collection-context-collapsible al-hierarchy-level-#{document.component_level} #{'show' if show_expanded?}"
+    ) do %>
+      <div class="nested-contents-container">
+        <%= helpers.turbo_frame_tag(
+              "al-hierarchy-#{document.id}-document",
+              loading: 'lazy',
+              src: helpers.hierarchy_solr_document_path(
+                id: document.id, key: '-document', contents: true
+              )
+            ) %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

app/components/um_contents_document_collection_hierarchy_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UmContentsDocumentCollectionHierarchyComponent < Arclight::DocumentCollectionHierarchyComponent
+  def abstract_or_scope
+    render Arclight::IndexMetadataFieldComponent.new(
+      field: Blacklight::FieldPresenter.new(
+        view_context,
+        document,
+        Blacklight::Configuration::Field.new(
+          field: "abstract_or_scope",
+          key: "abstract_or_scope",
+          accessor: true,
+          truncate: true,
+          helper_method: :render_html_tags
+        )
+      )
+    )
+  end
+end

app/components/um_document_component.html.erb

@@ -1,4 +1,4 @@
-<div class="al-show-actions-toolbar">
+<div class="al-show-actions-toolbar sticky-toolbar-top">
   <%= render 'arclight/requests', document: document %>
 </div>
 
@@ -32,10 +32,15 @@
       metadata_attr: { layout: UmUpperMetadataLayoutComponent },
       presenter: presenter, heading: true, classes: "") %>
   </div>
-<% elsif document.children? %>
   <div id="contents">
     <h2 class="al-show-sub-heading"><%= t 'arclight.views.show.contents' %></h2>
-    <%= helpers.turbo_frame_tag "al-hierarchy-#{document.id}-document", loading: 'lazy', src: helpers.hierarchy_solr_document_path(id: document.id, paginate: true, key: '-document', per_page: 50) %>
+    <%= helpers.turbo_frame_tag(
+      "al-hierarchy-#{document.id}-document",
+      loading: 'lazy',
+      src: helpers.hierarchy_solr_document_path(
+        id: document.id, key: '-document', paginate: true, contents: true
+      )
+    ) %>
   </div>
 <% end %>
 

app/controllers/catalog_controller.rb

@@ -96,7 +96,6 @@ class CatalogController < ApplicationController
       background_field
       related_field
       indexed_terms_field
-      access_field
     ]
 
     config.show.collection_access_items = %i[

app/helpers/um_arclight_helper.rb

@@ -10,4 +10,19 @@ def formatted_last_indexed(timestamp)
     date = DateTime.parse(timestamp)
     date.strftime("%F")
   end
+
+  SKIPPABLE_KEYS = [
+    "containers",
+    "physdesc_tesim",
+    "creators_ssim",
+    "abstract_tesim",
+    "scopecontent_tesim",
+    "note_tesim",
+    "odd_tesim"
+  ]
+  def is_interesting_component?(document)
+    blacklight_config.component_fields.keys.find do |key|
+      SKIPPABLE_KEYS.exclude?(key) && document.fetch(key, nil).present?
+    end || document.is_linkable?
+  end
 end