Skip to content

TD-4038: Implemented search bar in AllCatalogue search results page #578

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 11, 2024
Merged

TD-4038: Implemented search bar in AllCatalogue search results page #578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogue.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
37 changes: 28 additions & 9 deletions LearningHub.Nhs.WebUI/Views/Catalogue/AllCatalogueSearch.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down Expand Up @@ -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>
4 changes: 2 additions & 2 deletions LearningHub.Nhs.WebUI/Views/Catalogue/_AllCatalogueSearchBar.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Loading