Bold matching keyword on basic view

Gesture-and-Sign-Corpus-of-Australia · Nov 29, 2024 · f7cc2cb · f7cc2cb
1 parent 0441616
commit f7cc2cb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/lib/signbank_web/live/entry_live/basic_view.ex b/lib/signbank_web/live/entry_live/basic_view.ex
@@ -44,6 +44,14 @@ defmodule SignbankWeb.SignLive.BasicView do
     end
   end
 
+  def bold_matching_keyword(keyword, search_term) do
+    if keyword == search_term do
+      "has-text-weight-bold"
+    else
+      ""
+    end
+  end
+
   # TODO: fix the page title
   defp page_title(:show), do: gettext("Show sign")
   defp page_title(:edit), do: gettext("Edit sign")

diff --git a/lib/signbank_web/live/entry_live/basic_view.html.heex b/lib/signbank_web/live/entry_live/basic_view.html.heex
@@ -38,7 +38,23 @@
 <div class="columns">
   <div class="column">
     <.live_component module={VideoScroller} counter={0} id={@sign.id} sign={@sign} />
-    <p><strong>Keywords:</strong> <%= Enum.join(@sign.keywords || [], ", ") %></p>
+    <p>
+      <strong>Keywords:</strong>
+      <%= case @sign.keywords do %>
+        <% [] -> %>
+          <em>this entry has no keywords</em>
+        <% [keyword] -> %>
+          <span class={bold_matching_keyword(keyword, @search_term)}>
+            <%= keyword %>
+          </span>
+        <% keywords -> %>
+          <%= for {keyword, index} <- Enum.with_index(keywords, 1) do %>
+            <span class={bold_matching_keyword(keyword, @search_term)}>
+              <%= keyword %><%= if index < Enum.count(keywords), do: ", " %>
+            </span>
+          <% end %>
+      <% end %>
+    </p>
     <div :if={Enum.count(@sign.suggested_signs) > 0} style="margin-top: 0.5em">
       <h2 class="is-size-5">Suggested signs</h2>
       <p><%= @sign.suggested_signs_description %></p>