From 67311c2c9a9935b0c0408aa16a727f0c9f2d757c Mon Sep 17 00:00:00 2001
From: Alejandro Fanjul <afanjul@palbin.com>
Date: Fri, 14 Mar 2025 14:08:56 +0100
Subject: [PATCH] feat: Implement search results functionality with improved UX
 in PublicArticleSearch component - Now you can use
 /hc/{account}/en/search?query=XXX to view search results

---
 .../api/v1/portals/search_controller.rb       |  19 +++
 .../portal/components/PublicArticleSearch.vue |  23 +++-
 .../api/v1/portals/search/index.html.erb      | 115 ++++++++++++++++++
 config/locales/en.yml                         |   7 ++
 config/locales/es.yml                         |   7 ++
 config/routes.rb                              |   1 +
 6 files changed, 166 insertions(+), 6 deletions(-)
 create mode 100644 app/controllers/public/api/v1/portals/search_controller.rb
 create mode 100644 app/views/public/api/v1/portals/search/index.html.erb

diff --git a/app/controllers/public/api/v1/portals/search_controller.rb b/app/controllers/public/api/v1/portals/search_controller.rb
new file mode 100644
index 000000000..7d2cc2f56
--- /dev/null
+++ b/app/controllers/public/api/v1/portals/search_controller.rb
@@ -0,0 +1,19 @@
+class Public::Api::V1::Portals::SearchController < Public::Api::V1::Portals::BaseController
+  before_action :portal
+  layout 'portal'
+
+  def index
+    @query = params[:query]
+    @articles = @portal.articles.published
+
+    @articles = @articles.search(search_params) if @query.present?
+
+    @articles = @articles.page(params[:page]).per(10) # Add pagination
+  end
+
+  private
+
+  def search_params
+    params.permit(:query, :locale, :sort, :status, :page)
+  end
+end
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index 809755e46..1ac4bcfd5 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -90,18 +90,29 @@ export default {
         this.isLoading = false;
       }
     },
+    handleSubmit() {
+      if (this.searchTerm.trim()) {
+        const url = `/hc/${this.portalSlug}/${this.localeCode}/search?query=${encodeURIComponent(this.searchTerm)}`;
+        window.location.href = url;
+      }
+    },
   },
 };
 </script>
 
 <template>
   <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
-    <PublicSearchInput
-      :search-term="searchTerm"
-      :search-placeholder="searchTranslations.searchPlaceholder"
-      @update:search-term="onUpdateSearchTerm"
-      @focus="openSearch"
-    />
+    <form @submit.prevent="handleSubmit">
+      <PublicSearchInput
+        :search-term="searchTerm"
+        :search-placeholder="searchTranslations.searchPlaceholder"
+        @update:search-term="onUpdateSearchTerm"
+        @focus="openSearch"
+      />
+      <button type="submit" class="sr-only">
+        {{ searchTranslations.submit || 'Search' }}
+      </button>
+    </form>
     <div
       v-if="shouldShowSearchBox"
       class="absolute w-full top-14"
diff --git a/app/views/public/api/v1/portals/search/index.html.erb b/app/views/public/api/v1/portals/search/index.html.erb
new file mode 100644
index 000000000..e14024b8c
--- /dev/null
+++ b/app/views/public/api/v1/portals/search/index.html.erb
@@ -0,0 +1,115 @@
+<% content_for :head do %>
+  <title><%= I18n.t('public_portal.search.results_for', query: @query) %> | <%= @portal.name %></title>
+<% end %>
+
+<% if !@is_plain_layout_enabled %>
+<div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
+  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
+    <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
+      <div class="flex flex-row items-center gap-px mb-6">
+        <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer hover:underline leading-8 font-semibold"
+           href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
+          <%= I18n.t('public_portal.common.home') %>
+        </a>
+        <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
+          <%= render partial: 'icons/chevron-right' %>
+        </span>
+        <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+          <%= I18n.t('public_portal.search.results') %>
+        </span>
+      </div>
+      
+      <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+        <%= I18n.t('public_portal.search.results_for', query: @query) %>
+      </h1>
+      
+      <!-- Search form for the results page -->
+      <div id="search-wrap" class="w-full my-4"></div>
+    </div>
+  </div>
+</div>
+<% else %>
+<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 py-4">
+  <div class="flex items-center flex-row">
+    <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:underline hover:cursor-pointer leading-8 font-semibold"
+       href="<%= generate_home_link(@portal.slug, params[:locale], @theme_from_params, @is_plain_layout_enabled) %>">
+      <%= I18n.t('public_portal.common.home') %>
+    </a>
+    <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300">
+      <%= render partial: 'icons/chevron-right' %>
+    </span>
+    <span class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+      <%= I18n.t('public_portal.search.results') %>
+    </span>
+  </div>
+  
+  <h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+    <%= I18n.t('public_portal.search.results_for', query: @query) %>
+  </h1>
+  
+  <!-- Search form for the results page -->
+  <div id="search-wrap" class="w-full my-4"></div>
+</div>
+<% end %>
+
+<div class="max-w-5xl w-full mx-auto px-4 md:px-8 py-6 flex flex-col items-center justify-center flex-grow">
+  <div class="w-full flex flex-col gap-6 flex-grow">
+    <% if @articles.empty? %>
+      <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
+        <p class="text-sm text-slate-500"><%= I18n.t('public_portal.search.no_results', query: @query) %></p>
+      </div>
+    <% else %>
+      <p class="text-sm text-slate-600 dark:text-slate-400">
+        <%= I18n.t('public_portal.search.found_results', count: @articles.size) %>
+      </p>
+      
+      <% @articles.each do |article| %>
+        <div class="border border-solid border-slate-100 dark:border-slate-800 rounded-lg">
+          <a class="p-4 text-slate-800 dark:text-slate-50 flex justify-between content-center hover:cursor-pointer"
+             href="<%= generate_article_link(@portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
+            <div class="flex flex-col gap-5">
+              <div class="flex flex-col gap-1">
+                <h3 class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold">
+                  <%= article.title %>
+                </h3>
+                <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-2 break-all">
+                  <%= render_category_content(article.content) %>
+                </p>
+              </div>
+              <div class="flex flex-row items-center gap-2">
+                <% if article.category.present? %>
+                  <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                    <%= article.category.name %>
+                  </span>
+                  <span class="text-slate-600 dark:text-slate-400">•</span>
+                <% end %>
+                <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">
+                  <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+                </span>
+              </div>
+            </div>
+          </a>
+        </div>
+      <% end %>
+      
+      <!-- Pagination -->
+      <% if @articles.respond_to?(:total_pages) && @articles.total_pages > 1 %>
+        <div class="flex justify-center mt-6">
+          <nav class="inline-flex">
+            <% if @articles.prev_page %>
+              <a href="<%= url_for(page: @articles.prev_page) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-l-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.previous') %>
+              </a>
+            <% end %>
+            
+            <% if @articles.next_page %>
+              <a href="<%= url_for(page: @articles.next_page) %>" class="px-3 py-2 border border-slate-200 dark:border-slate-700 rounded-r-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">
+                <%= I18n.t('public_portal.common.next') %>
+              </a>
+            <% end %>
+          </nav>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4183c873d..af8aaed99 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -240,6 +240,13 @@ en:
       empty_placeholder: No results found.
       loading_placeholder: Searching...
       results_title: Search results
+      results: Search Results
+      results_for: "Search Results for '%{query}'"
+      no_results: "No results found for '%{query}'"
+      found_results:
+        one: Found 1 result
+        other: "Found %{count} results"
+      submit: Search
     toc_header: 'On this page'
     hero:
       sub_title: Search for the articles here or browse the categories below.
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 63e176c5c..407224287 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -226,6 +226,13 @@ es:
       empty_placeholder: No se encontraron resultados.
       loading_placeholder: Buscando...
       results_title: Buscar resultados
+      results: Resultados de búsqueda
+      results_for: "Resultados de búsqueda para '%{query}'"
+      no_results: "No se encontraron resultados para '%{query}'"
+      found_results:
+        one: Se encontró 1 resultado
+        other: "Se encontraron %{count} resultados"
+      submit: Buscar
     toc_header: 'En esta página'
     hero:
       sub_title: Busque aquí los artículos o busque las categorías de abajo.
diff --git a/config/routes.rb b/config/routes.rb
index 56704d9aa..1329189fa 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -422,6 +422,7 @@ Rails.application.routes.draw do
   get 'hc/:slug', to: 'public/api/v1/portals#show'
   get 'hc/:slug/sitemap.xml', to: 'public/api/v1/portals#sitemap'
   get 'hc/:slug/:locale', to: 'public/api/v1/portals#show'
+  get 'hc/:slug/:locale/search', to: 'public/api/v1/portals/search#index', as: :portal_search
   get 'hc/:slug/:locale/articles', to: 'public/api/v1/portals/articles#index'
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/categories/:category_slug', to: 'public/api/v1/portals/categories#show'