From 37b1431c01f7d8917f5fa53c48b9768959d0fec0 Mon Sep 17 00:00:00 2001
From: jazairi <16103405+jazairi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:53:16 -0500
Subject: [PATCH] Add search summary panel

Why these changes are being introduced:

It would be helpful if users could see what filters they've
applied to a search directly below the search bar, which would
also provide another path to remove filters.

Relevant ticket(s):

https://mitlibraries.atlassian.net/browse/GDT-142

How this addresses that need:

This provides the requested panel. We had been calling this a
"filter removal" panel, but I ended up naming it "search summary"
to avoid any confusion with the filter sidebar.

Side effects of this change:

The "You searched for" list has been removed, as this feature
replaces it.
---
 app/assets/stylesheets/partials/_panels.scss | 33 ++++++++++++++++
 app/assets/stylesheets/partials/_search.scss |  2 +-
 app/views/search/_search_summary.html.erb    | 19 +++++++++
 app/views/search/results.html.erb            | 41 ++------------------
 4 files changed, 56 insertions(+), 39 deletions(-)
 create mode 100644 app/views/search/_search_summary.html.erb

diff --git a/app/assets/stylesheets/partials/_panels.scss b/app/assets/stylesheets/partials/_panels.scss
index e40cb284..cb1d36ca 100644
--- a/app/assets/stylesheets/partials/_panels.scss
+++ b/app/assets/stylesheets/partials/_panels.scss
@@ -99,3 +99,36 @@
     }
   }
 }
+
+.search-summary {
+  color: $black;
+  background-color: $gray-l3;
+  margin-top: 0;
+  border: 0;
+  padding: 2rem;
+  padding-top: 1.5rem;
+  display: flex;
+  .hd-search-summary {
+    margin-right: 2rem;
+    padding-top: 0.3rem;
+  }
+  a {
+    font-size: $fs-small;
+    text-decoration: none;
+    padding: .5rem;
+    &::before {
+      font-family: FontAwesome;
+      content: '\f00d';
+      padding-right: .25rem;
+    }
+    &:hover,
+    &:focus {
+      color: $white;
+      background-color: $black;
+    }
+    margin-right: 2rem;
+  }
+  @media (max-width: $bp-screen-md) {
+    display: block;
+  }
+}
diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss
index f8768cd5..cfba3f46 100644
--- a/app/assets/stylesheets/partials/_search.scss
+++ b/app/assets/stylesheets/partials/_search.scss
@@ -5,7 +5,7 @@
 /* basic search bar */
 .basic-search {
   background-color: #989898;
-  margin-bottom: 1rem;
+  margin-bottom: 0rem;
   padding: 1.6rem 2rem;
 
   details {
diff --git a/app/views/search/_search_summary.html.erb b/app/views/search/_search_summary.html.erb
new file mode 100644
index 00000000..91664ca6
--- /dev/null
+++ b/app/views/search/_search_summary.html.erb
@@ -0,0 +1,19 @@
+<% return if @filters.empty? %>
+
+<div class="search-summary">
+  <h2 class="hd-search-summary hd-5">You searched for: </h2>
+  <ul class="list-search-summary list-inline">
+  <% @filters.each do |category, values| %>
+    <% values.each do |term| %>
+      <li>
+        <% if filter_applied?(@enhanced_query[category.to_sym], term['key']) %>
+          <a href="<%= results_path(remove_filter(@enhanced_query, category.to_sym, term['key'])) %>">
+            <%= "#{category}: #{term['key']}" %>
+            <span class="sr">Remove applied filter?</span>
+          </a>
+        <% end %>
+      </li>
+    <% end %>
+  <% end %>
+  </ul>
+</div>
diff --git a/app/views/search/results.html.erb b/app/views/search/results.html.erb
index 58aad5d4..78d4500d 100644
--- a/app/views/search/results.html.erb
+++ b/app/views/search/results.html.erb
@@ -1,43 +1,8 @@
 <%= content_for(:title, "Search Results | MIT Libraries") %>
 
 <div class="space-wrap">
-
-  <p>Showing results for:
-      <ul>
-        <% if @enhanced_query[:q].present? %>
-          <li>Keyword anywhere: <%= @enhanced_query[:q] %></li>
-        <% end %>
-        <% if @enhanced_query[:citation].present? %>
-          <li>Citation: <%= @enhanced_query[:citation] %></li>
-        <% end %>
-        <% if @enhanced_query[:contentType].present? %>
-          <li>Content type: <%= @enhanced_query[:contentType] %></li>
-        <% end %>
-        <% if @enhanced_query[:contributors].present? %>
-          <li>Contributors: <%= @enhanced_query[:contributors] %></li>
-        <% end %>
-        <% if @enhanced_query[:fundingInformation].present? %>
-          <li>Funders: <%= @enhanced_query[:fundingInformation] %></li>
-        <% end %>
-        <% if @enhanced_query[:identifiers].present? %>
-          <li>Identifiers: <%= @enhanced_query[:identifiers] %></li>
-        <% end %>
-        <% if @enhanced_query[:locations].present? %>
-          <li>Locations: <%= @enhanced_query[:locations] %></li>
-        <% end %>
-        <% if @enhanced_query[:subjects].present? %>
-          <li>Subjects: <%= @enhanced_query[:subjects] %></li>
-        <% end %>
-        <% if @enhanced_query[:title].present? %>
-          <li>Title: <%= @enhanced_query[:title] %></li>
-        <% end %>
-        <% if @enhanced_query[:source].present? %>
-          <li>Source: <%= @enhanced_query[:source] %></li>
-        <% end %>
-      </ul>
-  </p>
-
   <%= render partial: "form" %>
+  <%= render partial: "search_summary" %>
 
   <div id="hint" aria-live="polite">
     <%= render(partial: 'search/issn') %>
@@ -56,9 +21,9 @@
           <h3 class="hd-4"><em><%= results_summary(@pagination[:hits]) %></em></h3>
           <% @filters&.each_with_index do |(category, values), index| %>
             <% if index == 0 %>
-              <%= render(partial: 'search/filter', locals: {category: category, values: values, first: true }) %>
+              <%= render(partial: 'search/filter', locals: { category: category, values: values, first: true }) %>
             <% else %>
-              <%= render(partial: 'search/filter', locals: {category: category, values: values, first: false }) %>
+              <%= render(partial: 'search/filter', locals: { category: category, values: values, first: false }) %>
             <% end %>
           <% end %>
         </div>