Bound with redesign

app/assets/stylesheets/modules/access-panel-library-locations.scss

@@ -74,13 +74,4 @@
   .bi { // for location request link
     margin-right: 4px;
   }
-}
-
-.bound-with-note {
-  margin-left: 10px;
-
-  ul {
-    list-style-type: none;
-    padding-left: 0;
-  }
-}
+}

app/assets/stylesheets/modules/availability.scss

@@ -75,22 +75,36 @@
 }
 
 .availability-item {
-  border-top: 1px solid $sul-availability-table-cell-border;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  border-top: 1px solid $fog-light;
 
-  &>.callnumber {
+  .callnumber {
     flex-grow: 1;
   }
 
-  &>.public-note {
+  .public-note {
     order: 2;
     width: 100%;
   }
 
-  &>.item-availability {
+  .item-availability {
     text-align: right;
   }
+
+  .bound-with {
+    --link-decoration-line: none;
+
+    background-color: $fog-light;
+
+    .bound-with-type {
+      color: $cardinal-red;
+    }
+    .bound-with-title {
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding-bottom: 2px; // So we can see the text-decoration on the link.
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
 }

app/assets/stylesheets/sul-variables.scss

@@ -10,6 +10,7 @@ $clay: #5f574f;
 $cloud: #dad7cb;
 $cool-grey: #4d4f53;
 $driftwood: #b6b1a9;
+$fog-light: #f4f4f4;
 $gray-80-percent: #ccc;
 $lagunita: #007C92;
 $light-grey: #f3f3f3;

app/components/access_panels/library_location_component.html.erb

@@ -1,7 +1,5 @@
 <%= render partial: "catalog/stackmap_link", locals: { document: document, location: location, location_name_class: "location-name" } %>
-<% if location.bound_with? && document.bound_with_note? %>
-  <%= content_tag(:div, class: 'bound-with-note note-highlight') { render document.bound_with_note_for_access_panel } %>
-<% else %>
+<% if !location.bound_with? %>
   <span class="pull-right"><%= render location_request_link %></span>
 <% end %>
 <% if location.mhld.present? %>
@@ -17,16 +15,13 @@
     <% end %>
   <% end %>
 <% end %>
-<table class='availability record-view'>
-  <caption class="sr-only">Items in <%= location.name %></caption>
-  <thead>
-    <tr class="sr-only">
-      <th scope="col">Call number</th>
-      <th class="sr-only" scope="col">Note</th>
-      <th scope="col">Status</th>
-    </tr>
-  </thead>
-  <%= render LongTableComponent.new(node_id: "location_#{location.code}", size: location.items.size) do %>
-    <%= render AccessPanels::LocationItemComponent.with_collection(location.items, document:, classes: 'availability-item', render_item_level_request_link: !location_request_link.render?) %>
+<%= tag.ul class: "availability record-view list-unstyled", id: list_identifier, data: truncate? ? { controller: "long-list" } : nil do %>
+  <%= render AccessPanels::LocationItemComponent.with_collection(location.items, document:, classes: 'availability-item', render_item_level_request_link: !location_request_link.render?) %>
+  <% if truncate? %>
+    <li>
+      <button class="btn btn-secondary btn-xs" aria-expanded="false" aria-controls="<%= list_identifier %>" data-action="click->long-list#expand" data-long-list-target="expandButton">show all<span class="sr-only"> at location</span></button>
+      <button class="btn btn-secondary btn-xs" aria-expanded="true" aria-controls="<%= list_identifier %>" data-action="click->long-list#collapse" data-long-list-target="collapseButton">show less<span class="sr-only"> at location</span></button>
+    </li>
   <% end %>
-</table>
+
+<% end %>

app/components/access_panels/library_location_component.rb

@@ -18,5 +18,13 @@ def initialize(location:, library:, document:)
     def location_request_link
       @location_request_link ||= LocationRequestLinkComponent.for(document:, library_code: library.code, location:)
     end
+
+    def truncate?
+      location.items.size > 5
+    end
+
+    def list_identifier
+      "location_#{location.code}"
+    end
   end
 end

app/components/access_panels/location_item_component.html.erb

@@ -1,35 +1,42 @@
-<%= tag.tr class: classes, data: { barcode: item.barcode } do %>
-  <td class="callnumber">
-    <%= item.callnumber %>
-  </td>
-  <% if render_item_note? %>
-    <td class="public-note">
-      <% if item.public_note.present? %>
-        <div class='public-note note-highlight'>Note: <%= inject_line_break_opportunities item.public_note %></div>
-      <% end %>
-    </td>
-  <% end %>
-  <% if render_item_details? %>
-    <td class="item-availability" data-update-status="<%= !has_in_process_availability_class? %>" data-live-lookup-id="<%= item.live_lookup_instance_id %>" data-status-target=".availability-icon" data-item-id="<%= item.live_lookup_item_id %>" <%= "data-request-url='#{helpers.request_url(document, library: item.library, location: item.effective_permanent_location_code, barcode: item.barcode)}'".html_safe if render_real_time_availability_request_link? %>>
-      <span class="availability-icon-wrapper">
-        <i class="availability-icon <%= item.status.availability_class %>"></i>
-        <span data-available-text="<%= t('searchworks.availability.available') %>" data-unavailable-text="<%= t('searchworks.availability.unavailable') %>" class='status-text'>
-          <%= availability_text %>
+<%= tag.li class: classes, data: html_data do %>
+  <div class="d-flex">
+    <div class="callnumber">
+      <%= item.callnumber %>
+    </div>
+    <% if render_item_details? %>
+      <div class="item-availability" data-update-status="<%= !has_in_process_availability_class? %>" data-live-lookup-id="<%= item.live_lookup_instance_id %>" data-status-target=".availability-icon" data-item-id="<%= item.live_lookup_item_id %>" <%= "data-request-url='#{helpers.request_url(document, library: item.library, location: item.effective_permanent_location_code, barcode: item.barcode)}'".html_safe if render_real_time_availability_request_link? %>>
+        <span class="availability-icon-wrapper">
+          <i class="availability-icon <%= item.status.availability_class %>"></i>
+          <span data-available-text="<%= t('searchworks.availability.available') %>" data-unavailable-text="<%= t('searchworks.availability.unavailable') %>" class='status-text'>
+            <%= availability_text %>
+          </span>
         </span>
-      </span>
-      <span class="temporary-location">
-        <%= temporary_location_text %>
-      </span>
-      <% if item.on_reserve? %>
-        <%= item.loan_period %>
-      <% end %>
-      <% if render_item_level_request_link? %>
-        <span class="request-link">
-          <%= render item.request_link %>
+        <span class="temporary-location">
+          <%= temporary_location_text %>
         </span>
-      <% end %>
-    </td>
-  <% else %>
-    <td></td>
+        <% if item.on_reserve? %>
+          <%= item.loan_period %>
+        <% end %>
+        <% if render_item_level_request_link? %>
+          <span class="request-link">
+            <%= render item.request_link %>
+          </span>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="public-note">
+    <% if item.public_note.present? %>
+      <div class='public-note note-highlight'>Note: <%= inject_line_break_opportunities item.public_note %></div>
+    <% end %>
+  </div>
+
+  <% if bound_with_parent? %>
+    <div class="bound-with p-2 mt-2">
+      <div class="bound-with-type">Bound and shelved with</div>
+      <div class="bound-with-title"><%= link_to bound_with_title, solr_document_path(item.bound_with_hrid) %></div>
+      <div class="bound-with-callnumber"><%= bound_with_callnumber %></div>
+    </div>
   <% end %>
 <% end %>

app/components/access_panels/location_item_component.rb

@@ -3,16 +3,37 @@
 module AccessPanels
   class LocationItemComponent < ViewComponent::Base
     with_collection_parameter :item
-    attr_reader :item, :document, :classes
+    attr_reader :item, :document, :classes, :counter
 
-    def initialize(item:, document:, classes: nil, render_item_level_request_link: true, render_item_note: true)
+    def initialize(item:, document:, item_counter:, classes: nil, render_item_level_request_link: true)
       super
 
       @item = item
       @classes = classes
       @document = document
       @render_item_level_request_link = render_item_level_request_link
-      @render_item_note = render_item_note
+      @counter = item_counter
+    end
+
+    delegate :bound_with_parent, to: :item
+
+    def html_data
+      data = { barcode: item.barcode }
+      return data if counter < 5
+
+      data.merge(long_list_target: 'hideable')
+    end
+
+    def bound_with_parent?
+      bound_with_parent.present?
+    end
+
+    def bound_with_title
+      bound_with_parent['title']
+    end
+
+    def bound_with_callnumber
+      [bound_with_parent['call_number'], bound_with_parent['volume'], bound_with_parent['enumeration'], bound_with_parent['chronology']].compact.join(' ')
     end
 
     def availability_text
@@ -36,10 +57,6 @@ def render_item_details?
       !item.suppressed?
     end
 
-    def render_item_note?
-      @render_item_note
-    end
-
     def render_item_level_request_link?
       @render_item_level_request_link
     end

app/components/search_result/location_component.html.erb

@@ -43,7 +43,7 @@
         </td>
       </tr>
       <% if show_items? %>
-        <%= render AccessPanels::LocationItemComponent.with_collection(location.items, document:, render_item_level_request_link: !location_request_link.render?, render_item_note: false) %>
+        <%= render SearchResult::LocationItemComponent.with_collection(location.items, document:, render_item_level_request_link: !location_request_link.render?) %>
       <% else %>
         <tr>
           <td colspan='2'><%= link_to_record %></td>

app/components/search_result/location_item_component.html.erb

@@ -0,0 +1,29 @@
+<%= tag.tr class: classes, data: { barcode: item.barcode } do %>
+  <td class="callnumber">
+    <%= item.callnumber %>
+  </td>
+
+  <% if render_item_details? %>
+    <td class="item-availability" data-update-status="<%= !has_in_process_availability_class? %>" data-live-lookup-id="<%= item.live_lookup_instance_id %>" data-status-target=".availability-icon" data-item-id="<%= item.live_lookup_item_id %>" <%= "data-request-url='#{helpers.request_url(document, library: item.library, location: item.effective_permanent_location_code, barcode: item.barcode)}'".html_safe if render_real_time_availability_request_link? %>>
+      <span class="availability-icon-wrapper">
+        <i class="availability-icon <%= item.status.availability_class %>"></i>
+        <span data-available-text="<%= t('searchworks.availability.available') %>" data-unavailable-text="<%= t('searchworks.availability.unavailable') %>" class='status-text'>
+          <%= availability_text %>
+        </span>
+      </span>
+      <span class="temporary-location">
+        <%= temporary_location_text %>
+      </span>
+      <% if item.on_reserve? %>
+        <%= item.loan_period %>
+      <% end %>
+      <% if render_item_level_request_link? %>
+        <span class="request-link">
+          <%= render item.request_link %>
+        </span>
+      <% end %>
+    </td>
+  <% else %>
+    <td></td>
+  <% end %>
+<% end %>

app/components/search_result/location_item_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module SearchResult
+  class LocationItemComponent < ViewComponent::Base
+    with_collection_parameter :item
+    attr_reader :item, :document, :classes
+
+    def initialize(item:, document:, classes: nil, render_item_level_request_link: true)
+      super
+
+      @item = item
+      @classes = classes
+      @document = document
+      @render_item_level_request_link = render_item_level_request_link
+    end
+
+    def availability_text
+      item.status.status_text unless temporary_location_text
+    end
+
+    def temporary_location_text
+      return if item.effective_location&.details&.key?('availabilityClass') ||
+                item.effective_location&.details&.key?('searchworksTreatTemporaryLocationAsPermanentLocation') ||
+                item.effective_permanent_location_code == item.temporary_location_code
+
+      item.temporary_location&.name
+    end
+
+    def has_in_process_availability_class?
+      availability_class = item.effective_location&.details&.dig('availabilityClass')
+      availability_class.present? && availability_class == 'In_process'
+    end
+
+    def render_item_details?
+      !item.suppressed?
+    end
+
+    def render_item_level_request_link?
+      @render_item_level_request_link
+    end
+
+    def render_real_time_availability_request_link?
+      # we're not rendering item-level request links (because e.g. there's already alocation level request link)
+      return false unless render_item_level_request_link?
+
+      # don't render unless item is requestable
+      return false unless item.requestable?
+
+      # non-circulating items don't need real time availability
+      return false unless item.circulates?
+
+      # items that definitely have an item-level request link at render time don't need real time availability
+      return false if item.request_link.render?
+
+      true
+    end
+  end
+end

lib/holdings/item.rb

@@ -62,6 +62,10 @@ def type
       item_display[:type]
     end
 
+    def bound_with_hrid
+      bound_with_parent[:hrid]
+    end
+
     def truncated_callnumber
       item_display[:lopped_callnumber]
     end
@@ -107,14 +111,10 @@ def on_reserve?
     end
 
     def bound_with_parent
-      return nil unless document&.folio_holdings&.any?
-
-      match = document.folio_holdings.find do |holding|
-        holding.bound_with_parent&.dig('item', 'id') == id
-      end
-      match&.bound_with_parent
+      item_display[:bound_with]
     end
 
+    # @return [Bool] true if this is a bound-with child
     def bound_with?
       bound_with_parent.present?
     end

lib/holdings/location.rb

@@ -31,10 +31,15 @@ def details
       Folio::Locations.details(code: @code) || {}
     end
 
+    # @return [Bool] true if any of the items in this location bound-with children
     def bound_with?
       items.any?(&:bound_with?)
     end
 
+    def bound_with_parents
+      items.filter_map(&:bound_with_parent)
+    end
+
     # Intentionally left blank
     def location_link; end
 
@@ -52,7 +57,7 @@ def sort
 
     # This prevents logging too much data when there is an error.
     def inspect
-      "<##{this.class.class_name} @code=#{@code}>"
+      "<##{self.class.class_name} @code=#{@code}>"
     end
 
     private