From 26973b879314172015a61963029fa595ca666bef Mon Sep 17 00:00:00 2001
From: Finn Bacall <finn.bacall@manchester.ac.uk>
Date: Mon, 24 Jul 2023 12:42:26 +0100
Subject: [PATCH] Display collection items in given order

also show comment if available
---
 app/assets/stylesheets/collection.scss        | 18 ++++
 app/assets/stylesheets/masonry.scss           |  2 +-
 app/helpers/collections_helper.rb             |  8 ++
 .../_collection_item.html.erb                 |  2 +
 app/views/collections/show.html.erb           | 10 +--
 app/views/events/_event.html.erb              | 87 ++++++++++---------
 app/views/materials/_material.html.erb        |  4 +
 .../collections_controller_test.rb            | 81 +++++++++++++++++
 8 files changed, 165 insertions(+), 47 deletions(-)
 create mode 100644 app/views/collection_items/_collection_item.html.erb

diff --git a/app/assets/stylesheets/collection.scss b/app/assets/stylesheets/collection.scss
index 81f51e141..9d625d951 100644
--- a/app/assets/stylesheets/collection.scss
+++ b/app/assets/stylesheets/collection.scss
@@ -46,3 +46,21 @@
     }
   }
 }
+
+.collection-item-order-badge {
+  position: absolute;
+  left: -0.5em;
+  top: -0.5em;
+  border-radius: 50%;
+  width: 2em;
+  line-height: 2em;
+  height: 2em;
+  text-align: center;
+  background: $badge-bg;
+  color: $badge-color;
+}
+
+.collection-item-comment {
+  margin: 10px 0 0 0;
+  font-style: italic;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/masonry.scss b/app/assets/stylesheets/masonry.scss
index d709cf502..f789ad5d3 100644
--- a/app/assets/stylesheets/masonry.scss
+++ b/app/assets/stylesheets/masonry.scss
@@ -98,7 +98,7 @@
     margin-bottom: 0;
   }
 
-  &.with-left-icon {
+  .with-left-icon {
     display: flex;
 
     .icon-container {
diff --git a/app/helpers/collections_helper.rb b/app/helpers/collections_helper.rb
index 0b2f815ea..48e08eb4d 100644
--- a/app/helpers/collections_helper.rb
+++ b/app/helpers/collections_helper.rb
@@ -16,4 +16,12 @@ def item_fields(item_class)
       []
     end
   end
+
+  def item_order_badge(collection_item)
+    content_tag(:div, collection_item.order, class: 'collection-item-order-badge')
+  end
+
+  def item_comment(collection_item)
+    content_tag(:blockquote, collection_item.comment, class: 'collection-item-comment')
+  end
 end
diff --git a/app/views/collection_items/_collection_item.html.erb b/app/views/collection_items/_collection_item.html.erb
new file mode 100644
index 000000000..d3203946b
--- /dev/null
+++ b/app/views/collection_items/_collection_item.html.erb
@@ -0,0 +1,2 @@
+<% resource = collection_item.resource %>
+<%= render partial: resource, locals: { collection_item: collection_item } %>
diff --git a/app/views/collections/show.html.erb b/app/views/collections/show.html.erb
index 34e128400..a2d3b7add 100644
--- a/app/views/collections/show.html.erb
+++ b/app/views/collections/show.html.erb
@@ -22,10 +22,10 @@
       </div>
     </div>
     <div class="my-3">
-      <% materials = @collection.materials %>
-      <% materials_count =  @collection.materials.count %>
-      <% events = @collection.events %>
-      <% events_count =  @collection.events.count %>
+      <% materials = @collection.material_items %>
+      <% materials_count = materials.count %>
+      <% events = @collection.event_items %>
+      <% events_count = events.count %>
       <% activator = tab_activator %>
       <ul class="nav nav-tabs">
         <%= tab('Materials', icon_class_for_model('materials'), 'materials', activator: activator,
@@ -38,7 +38,7 @@
       </ul>
     </div>
 
-    <div class="tab-content">
+    <div class="tab-content ml-3">
       <% if TeSS::Config.feature['materials'] %>
         <%= render partial: 'common/associated_resources',
                    locals: { model: Material,
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index 14a0a18d6..ecc144bf1 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -1,56 +1,61 @@
 <li class="masonry-brick media-item long">
   <%= link_to event, class: 'link-overlay with-left-icon' do %>
-    <div class="icon-container hidden-xs">
-      <!--    TODO: hybrid events-->
-      <% if event.online? %>
-        <i class="icon icon-h2 virtual-event-icon"></i><br/>
-        <span class="muted">Online</span>
-      <% else %>
-        <i class="icon icon-h2 onsite-event-icon"></i><br/>
-        <span class="muted">Face-to-face</span>
-      <% end %>
-    </div>
+    <%= item_order_badge(collection_item) if defined? collection_item %>
+    <div class="with-left-icon">
+      <div class="icon-container hidden-xs">
+        <!--    TODO: hybrid events-->
+        <% if event.online? %>
+          <i class="icon icon-h2 virtual-event-icon"></i><br/>
+          <span class="muted">Online</span>
+        <% else %>
+          <i class="icon icon-h2 onsite-event-icon"></i><br/>
+          <span class="muted">Face-to-face</span>
+        <% end %>
+      </div>
 
-    <div class="right-container">
-      <div class="masonry-brick-heading">
-        <div class="masonry-icons">
-          <% if current_user&.is_admin? %>
-            <%= missing_icon(event) %>
-            <%= scrape_status_icon(event) %>
-            <%= suggestion_icon(event) %>
-          <% end %>
+      <div class="right-container">
+        <div class="masonry-brick-heading">
+          <div class="masonry-icons">
+            <% if current_user&.is_admin? %>
+              <%= missing_icon(event) %>
+              <%= scrape_status_icon(event) %>
+              <%= suggestion_icon(event) %>
+            <% end %>
 
-          <%= event_status_icon(event) %>
-        </div>
-        <% if event.event_types.any? %>
-          <% event.event_types.each do |t| %>
-            <div class="sub-heading"><%= EventTypeDictionary.instance.lookup_value(t, 'title') %></div>
+            <%= event_status_icon(event) %>
+          </div>
+          <% if event.event_types.any? %>
+            <% event.event_types.each do |t| %>
+              <div class="sub-heading"><%= EventTypeDictionary.instance.lookup_value(t, 'title') %></div>
+            <% end %>
           <% end %>
-        <% end %>
-        <h4>
-          <%= event.title %>
-        </h4>
-      </div>
+          <h4>
+            <%= event.title %>
+          </h4>
+        </div>
 
-      <% if event.has_node? -%>
-        <%= elixir_node_icon %>
-      <% end -%>
+        <% if event.has_node? -%>
+          <%= elixir_node_icon %>
+        <% end -%>
 
-      <p><%= neatly_printed_date_range(event.start, event.end) %></p>
+        <p><%= neatly_printed_date_range(event.start, event.end) %></p>
 
-      <% if event.online? %>
+        <% if event.online? %>
           <p class="visible-xs-block">
             <i class="icon icon-md virtual-event-icon"></i> <span class="muted">Online</span>
           </p>
-      <% else %>
-        <% location = [event.city, event.country].reject { |field_value| field_value.blank? }.join(", ") %>
-        <% if location.present? %>
-          <p class="dont-break-out"><i class="fa fa-map-marker"></i> <%= location %></p>
+        <% else %>
+          <% location = [event.city, event.country].reject { |field_value| field_value.blank? }.join(", ") %>
+          <% if location.present? %>
+            <p class="dont-break-out"><i class="fa fa-map-marker"></i> <%= location %></p>
+          <% end %>
+          <p class="visible-xs-block">
+            <i class="icon icon-md onsite-event-icon"></i> <span class="muted">Face-to-face</span>
+          </p>
         <% end %>
-        <p class="visible-xs-block">
-          <i class="icon icon-md onsite-event-icon"></i> <span class="muted">Face-to-face</span>
-        </p>
-      <% end %>
+      </div>
     </div>
+
+    <%= item_comment(collection_item) if defined? collection_item %>
   <% end %>
 </li>
diff --git a/app/views/materials/_material.html.erb b/app/views/materials/_material.html.erb
index f657666b7..d0f05bdf7 100644
--- a/app/views/materials/_material.html.erb
+++ b/app/views/materials/_material.html.erb
@@ -1,5 +1,7 @@
 <li class="masonry-brick media-item long">
   <%= link_to material, class: 'link-overlay' do %>
+    <%= item_order_badge(collection_item) if defined? collection_item %>
+
     <div class="masonry-brick-heading">
       <div class="masonry-icons">
         <% if current_user&.is_admin? %>
@@ -28,5 +30,7 @@
 
       <%= keywords_and_topics(material) %>
     </div>
+
+    <%= item_comment(collection_item) if defined? collection_item %>
   <% end %>
 </li>
diff --git a/test/controllers/collections_controller_test.rb b/test/controllers/collections_controller_test.rb
index edcf6da00..523b5edc1 100644
--- a/test/controllers/collections_controller_test.rb
+++ b/test/controllers/collections_controller_test.rb
@@ -459,6 +459,16 @@ class CollectionsControllerTest < ActionController::TestCase
   end
 
   #API Actions
+  test "should add materials to collection" do
+    sign_in users(:regular_user)
+    collection = collections(:with_resources)
+    assert_difference('CollectionItem.count', 2) do
+      assert_difference('collection.materials.count', 2) do
+        patch :update, params: { collection: { material_ids: [materials(:biojs), materials(:interpro)] }, id: collection.id }
+      end
+    end
+  end
+
   test "should remove materials from collection" do
     sign_in users(:regular_user)
     collection = collections(:with_resources)
@@ -600,4 +610,75 @@ class CollectionsControllerTest < ActionController::TestCase
     end
     assert_response :forbidden
   end
+
+  test 'should render collection items in order' do
+    materials = [materials(:good_material), materials(:biojs), materials(:interpro)]
+    events = [events(:two), events(:one)]
+    @collection.items.create!(resource: materials[0], order: 2, comment: 'A good material')
+    @collection.items.create!(resource: materials[1], order: 1, comment: 'Start here')
+    @collection.items.create!(resource: materials[2], order: 3, comment: 'End here')
+    @collection.items.create!(resource: events[0], order: 2, comment: 'End here')
+    @collection.items.create!(resource: events[1], order: 1, comment: 'Start here')
+
+    get :show, params: { id: @collection }
+
+    assert_response :success
+
+    assert_select '#materials ul li:nth-child(1) .link-overlay' do
+      assert_select 'h4', text: 'BioJS'
+      assert_select '.collection-item-comment', text: 'Start here'
+      assert_select '.collection-item-order-badge', text: '1'
+    end
+
+    assert_select '#materials ul li:nth-child(2) .link-overlay' do
+      assert_select 'h4', text: 'Training Material Example'
+      assert_select '.collection-item-comment', text: 'A good material'
+      assert_select '.collection-item-order-badge', text: '2'
+    end
+
+    assert_select '#materials ul li:nth-child(3) .link-overlay' do
+      assert_select 'h4', text: 'InterPro'
+      assert_select '.collection-item-comment', text: 'End here'
+      assert_select '.collection-item-order-badge', text: '3'
+    end
+
+    assert_select '#events ul li:nth-child(1) .link-overlay' do
+      assert_select 'h4', text: 'event one'
+      assert_select '.collection-item-comment', text: 'Start here'
+      assert_select '.collection-item-order-badge', text: '1'
+    end
+
+    assert_select '#events ul li:nth-child(2) .link-overlay' do
+      assert_select 'h4', text: 'event two'
+      assert_select '.collection-item-comment', text: 'End here'
+      assert_select '.collection-item-order-badge', text: '2'
+    end
+  end
+
+  test 'should render collection items in order as json-api' do
+    materials = [materials(:good_material), materials(:biojs), materials(:interpro)]
+    events = [events(:two), events(:one)]
+    @collection.items.create!(resource: materials[0], order: 2, comment: 'A good material')
+    @collection.items.create!(resource: materials[1], order: 1, comment: 'Start here')
+    @collection.items.create!(resource: materials[2], order: 3, comment: 'End here')
+    @collection.items.create!(resource: events[0], order: 2, comment: 'End here')
+    @collection.items.create!(resource: events[1], order: 1, comment: 'Start here')
+
+    get :show, params: { id: @collection, format: :json_api }
+
+    assert_response :success
+    assert assigns(:collection)
+    assert_valid_json_api_response
+
+    body = nil
+    assert_nothing_raised do
+      body = JSON.parse(response.body)
+    end
+
+    response_materials = body.dig('data', 'relationships', 'materials', 'data')
+    assert_equal [materials[1].id, materials[0].id, materials[2].id], response_materials.map { |m| m['id'].to_i }
+
+    response_events = body.dig('data', 'relationships', 'events', 'data')
+    assert_equal [events[1].id, events[0].id], response_events.map { |e| e['id'].to_i }
+  end
 end