[Enhancement] Added search to source forms (#259)

* Changed sqlite FTS to use a trigram tokenizer

* Added search UI to source tables

* Fix bug with special chars in search form

* improved main search results form

* Improved centering for media table header elements

lib/pinchflat_web/components/layouts/partials/header.html.heex

@@ -22,7 +22,7 @@
             type="text"
             name="q"
             value={@params["q"]}
-            placeholder="Type to search..."
+            placeholder="Search all media..."
             class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none"
           />
         </form>

lib/pinchflat_web/controllers/searches/search_html/show.html.heex

@@ -10,19 +10,13 @@
       <%= if match?([_|_], @search_results) do %>
         <.table rows={@search_results} table_class="text-black dark:text-white">
           <:col :let={result} label="Title">
-            <%= result.title %>
+            <.subtle_link href={~p"/sources/#{result.source_id}/media/#{result.id}"}>
+              <%= StringUtils.truncate(result.title, 35) %>
+            </.subtle_link>
           </:col>
           <:col :let={result} label="Excerpt">
             <.highlight_search_terms text={result.matching_search_term} />
           </:col>
-          <:col :let={result} label="" class="flex place-content-evenly">
-            <.link
-              href={~p"/sources/#{result.source_id}/media/#{result.id}"}
-              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-            >
-              <.icon name="hero-eye" />
-            </.link>
-          </:col>
         </.table>
       <% else %>
         <p class="font-bold text-lg text-center text-black dark:text-white">No results found</p>

lib/pinchflat_web/controllers/sources/source_html/media_item_table_live.ex

@@ -8,7 +8,7 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
 
   @limit 10
 
-  def render(%{records: []} = assigns) do
+  def render(%{total_record_count: 0} = assigns) do
     ~H"""
     <div class="mb-4 flex items-center">
       <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" />
@@ -20,10 +20,29 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
   def render(assigns) do
     ~H"""
     <div>
-      <span class="mb-4 flex items-center">
-        <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" tooltip="Refresh" />
-        <span class="ml-2">Showing <%= length(@records) %> of <%= @total_record_count %></span>
-      </span>
+      <header class="flex justify-between items-center mb-4">
+        <span class="flex items-center">
+          <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" tooltip="Refresh" />
+          <span class="ml-2">Showing <%= length(@records) %> of <%= @filtered_record_count %></span>
+        </span>
+        <div class="bg-meta-4 rounded-md">
+          <div class="relative">
+            <span class="absolute left-2 top-1/2 -translate-y-1/2 flex">
+              <.icon name="hero-magnifying-glass" />
+            </span>
+            <form phx-change="search_term" phx-submit="search_term">
+              <input
+                type="text"
+                name="q"
+                value={@search_term}
+                placeholder="Search in table..."
+                class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none"
+                phx-debounce="200"
+              />
+            </form>
+          </div>
+        </div>
+      </header>
       <.table rows={@records} table_class="text-white">
         <:col :let={media_item} label="Title">
           <.subtle_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"}>
@@ -51,7 +70,7 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
     media_state = session["media_state"]
     source = Sources.get_source!(session["source_id"])
     base_query = generate_base_query(source, media_state)
-    pagination_attrs = fetch_pagination_attributes(base_query, page)
+    pagination_attrs = fetch_pagination_attributes(base_query, page, nil)
 
     new_assigns =
       Map.merge(
@@ -69,7 +88,14 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
   def handle_event("page_change", %{"direction" => direction}, %{assigns: assigns} = socket) do
     direction = if direction == "inc", do: 1, else: -1
     new_page = assigns.page + direction
-    new_assigns = fetch_pagination_attributes(assigns.base_query, new_page)
+    new_assigns = fetch_pagination_attributes(assigns.base_query, new_page, assigns.search_term)
+
+    {:noreply, assign(socket, new_assigns)}
+  end
+
+  def handle_event("search_term", params, socket) do
+    search_term = Map.get(params, "q", nil)
+    new_assigns = fetch_pagination_attributes(socket.assigns.base_query, 1, search_term)
 
     {:noreply, assign(socket, new_assigns)}
   end
@@ -83,18 +109,28 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
   end
 
   def handle_info(%{topic: "media_table", event: "reload"}, %{assigns: assigns} = socket) do
-    new_assigns = fetch_pagination_attributes(assigns.base_query, assigns.page)
+    new_assigns = fetch_pagination_attributes(assigns.base_query, assigns.page, assigns.search_term)
 
     {:noreply, assign(socket, new_assigns)}
   end
 
-  defp fetch_pagination_attributes(base_query, page) do
-    total_record_count = Repo.aggregate(base_query, :count, :id)
-    total_pages = max(ceil(total_record_count / @limit), 1)
-    page = NumberUtils.clamp(page, 1, total_pages)
-    records = fetch_records(base_query, page)
+  defp fetch_pagination_attributes(base_query, page, search_term) do
+    filtered_base_query = filter_base_query(base_query, search_term)
 
-    %{page: page, total_pages: total_pages, records: records, total_record_count: total_record_count}
+    total_record_count = Repo.aggregate(base_query, :count, :id)
+    filtered_record_count = Repo.aggregate(filtered_base_query, :count, :id)
+    total_pages = max(ceil(filtered_record_count / @limit), 1)
+    page = NumberUtils.clamp(page, 1, total_pages)
+    records = fetch_records(filtered_base_query, page)
+
+    %{
+      page: page,
+      total_pages: total_pages,
+      records: records,
+      search_term: search_term,
+      total_record_count: total_record_count,
+      filtered_record_count: filtered_record_count
+    }
   end
 
   defp fetch_records(base_query, page) do
@@ -109,25 +145,33 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
   defp generate_base_query(source, "pending") do
     MediaQuery.new()
     |> MediaQuery.require_assoc(:media_profile)
+    |> MediaQuery.require_assoc(:media_items_search_index)
     |> where(^dynamic(^MediaQuery.for_source(source) and ^MediaQuery.pending()))
-    |> order_by(desc: :id)
+    |> order_by(desc: fragment("rank"), desc: :id)
   end
 
   defp generate_base_query(source, "downloaded") do
     MediaQuery.new()
+    |> MediaQuery.require_assoc(:media_items_search_index)
     |> where(^dynamic(^MediaQuery.for_source(source) and ^MediaQuery.downloaded()))
-    |> order_by(desc: :id)
+    |> order_by(desc: fragment("rank"), desc: :id)
   end
 
   defp generate_base_query(source, "other") do
     MediaQuery.new()
     |> MediaQuery.require_assoc(:media_profile)
+    |> MediaQuery.require_assoc(:media_items_search_index)
     |> where(
       ^dynamic(
         ^MediaQuery.for_source(source) and
           (not (^MediaQuery.downloaded()) and not (^MediaQuery.pending()))
       )
     )
-    |> order_by(desc: :id)
+    |> order_by(desc: fragment("rank"), desc: :id)
+  end
+
+  defp filter_base_query(base_query, search_term) do
+    base_query
+    |> where(^MediaQuery.matches_search_term(search_term))
   end
 end