From 405778ad9a81fc7558c83bd6db2068583197fff6 Mon Sep 17 00:00:00 2001
From: Arunima George <arunima.george@nhs.net>
Date: Tue, 10 Sep 2024 15:38:22 +0100
Subject: [PATCH] TD-4038: Implemented search bar in AllCatalogue search
 results page

---
 .../Views/Catalogue/AllCatalogue.cshtml       |  2 +-
 .../Views/Catalogue/AllCatalogueSearch.cshtml | 37 ++++++++++++++-----
 .../Catalogue/_AllCatalogueSearchBar.cshtml   |  4 +-
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogue.cshtml b/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogue.cshtml
index 118a5c5f8..702e4277c 100644
--- a/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogue.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogue.cshtml
@@ -20,7 +20,7 @@
         <div class="nhsuk-grid-row">
             <div id="searchTab" class="search-page">
                 <div class="nhsuk-grid-column-two-thirds">
-                    @await Html.PartialAsync("_AllCatalogueSearchBar", Model)
+                    @await Html.PartialAsync("_AllCatalogueSearchBar", string.Empty)
                 </div>
             </div>
             
diff --git a/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogueSearch.cshtml b/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogueSearch.cshtml
index 1d3bee421..be167f34f 100644
--- a/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogueSearch.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogueSearch.cshtml
@@ -14,26 +14,31 @@
 
 @section styles {
     <link rel="stylesheet" type="text/css" href="~/css/nhsuk/pages/catalogue.css" asp-append-version="true" />
+    <link rel="stylesheet" type="text/css" href="~/css/nhsuk/pages/search.css" asp-append-version="true" />
 }
-
 <div class="nhsuk-width-container app-width-container" style="width:100%">
     @if (hasSearchTerm)
     {
         var parms = new Dictionary<string, string> { { "term", searchTerm } };
         <vc:back-link asp-controller="Catalogue" asp-action="GetAllCatalogue" link-text="Back to A-Z of catalogues" />
     }
-    else
-    {
-        <vc:back-link asp-controller="Home" asp-action="Index" link-text="Back to: Learning Hub" />
-    }
     <h1 class="nhsuk-u-margin-bottom-5">
         @(hasSearchTerm ? $"Search results for {searchTerm}" : "All catalogues")
     </h1>
 
-    <h2 class="nhsuk-u-margin-bottom-5">
-        @($"{Model.TotalCount} catalogue results")
-    </h2>
-
+    <div class="nhsuk-grid-row">
+        <div id="searchTab" class="search-page">
+            <div class="nhsuk-grid-column-two-thirds">
+            @await Html.PartialAsync("_AllCatalogueSearchBar", searchTerm)
+            </div>
+        </div>
+    </div>
+    @if (Model.TotalCount > 0)
+    {
+        <h2 class="nhsuk-u-margin-bottom-5">
+            @($"{Model.TotalCount} catalogue results")
+        </h2>
+    }
 
     <ul class="nhsuk-grid-row nhsuk-card-group nhsuk-card-group--centred">
 
@@ -129,4 +134,18 @@
 
         @await Html.PartialAsync("_Pagination", new PaginationViewModel(currentPage, totalPage, prevUrl, nextUrl))
     }
+
+    @if (Model.TotalCount == 0)
+    {
+        <div class="nhsuk-grid-row">
+            <div class="nhsuk-grid-column-full">
+                <h2 class="nhsuk-heading-l">No results found for @searchTerm</h2>
+                <p>You could try:</p>
+                <ul class="nhsuk-list nhsuk-list--bullet">
+                    <li>checking your spelling</li>
+                    <li>searching again using other words</li>
+                </ul>
+            </div>
+        </div>
+    }
 </div>
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Views/Catalogue/_AllCatalogueSearchBar.cshtml b/LearningHub.Nhs.WebUI/Views/Catalogue/_AllCatalogueSearchBar.cshtml
index d86fdaeb4..c41d0ce35 100644
--- a/LearningHub.Nhs.WebUI/Views/Catalogue/_AllCatalogueSearchBar.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Catalogue/_AllCatalogueSearchBar.cshtml
@@ -1,8 +1,8 @@
-@model LearningHub.Nhs.Models.Catalogue.AllCatalogueResponseViewModel;
+@model string
 <form id="search" asp-controller="catalogue" asp-action="GetAllCatalogueSearch" asp-fragment="searchTab" method="get" role="search">
     <div class="nhsuk-form-group  nhsuk-header__search-form--search-results">
         <label class="nhsuk-label nhsuk-u-visually-hidden" for="sub-search-field">Search</label>
-        <input class="nhsuk-input nhsuk-search__input" type="search" name="term" autocomplete="off" id="sub-search-field" placeholder="Search for a catalogue">
+        <input class="nhsuk-input nhsuk-search__input" type="search" value="@Model" name="term" autocomplete="off" id="sub-search-field" placeholder="Search for a catalogue">
         <button class="nhsuk-search__submit" type="submit">
             <span class="nhsuk-u-visually-hidden">Search</span>
             <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">