Skip to content

Commit

Permalink
Merge pull request #162 from DFE-Digital/feature/fix-pagination-proje…
Browse files Browse the repository at this point in the history 
…ct-dashboard

Removed handler movePage in Index.cshtml.cs as not needed & added Pag…
  • Loading branch information
@sukhybhullar-nimble
sukhybhullar-nimble authored Oct 3, 2023
2 parents c6fa1f0 + f4af602 commit 2aa1ceb
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 36 deletions.
2 changes: 1 addition & 1 deletion Dfe.ManageFreeSchoolProjects/Dfe.ManageFreeSchoolProjects/Pages/Index.cshtml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ protected async Task LoadPage()
var parameters = new LoadDashboardParameters()
{
GetDashboardServiceParameters = new GetDashboardServiceParameters(),
Url = "?handler=movePage"
Url = string.Empty
};

await LoadDashboard(parameters);
Expand Down
103 changes: 68 additions & 35 deletions ...ManageFreeSchoolProjects/Dfe.ManageFreeSchoolProjects/Pages/Pagination/_Pagination.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@using Dfe.ManageFreeSchoolProjects.Pages.Pagination;
@model PaginationModel
@using NetEscapades.AspNetCore.SecurityHeaders;
@using System.Web;
@model Dfe.ManageFreeSchoolProjects.Pages.Pagination.PaginationModel
@{
var prefix = !string.IsNullOrEmpty(Model.ElementIdPrefix) ? Model.ElementIdPrefix : "";

Expand All @@ -15,75 +16,108 @@
var previousDisabledStyle = previousDisabled ? "govuk-pagination__link-disabled aria-disabled=true" : "";
var previousDisabledAria = previousDisabled ? ariaDisabled : "";

var nonce = Context.GetNonce();

var paginationContainerId = $"{prefix}pagination-container";
var nextButtonId = $"{prefix}next-page";
var nextPageValueId = $"{prefix}next-page-value";
var previousButtonId = $"{prefix}previous-page";
var previousPageValueId = $"{prefix}previous-page-value";
var pagesToDisplay = new List<int>() { 1, Model.PageNumber, Model.TotalPages };
if (Model.Previous.HasValue)
pagesToDisplay.Add((int)Model.Previous);
if (Model.Next.HasValue)
pagesToDisplay.Add((int)Model.Next);
}

@if (Model.TotalPages > 1)
{
<nav id="@paginationContainerId" class="govuk-pagination" role="navigation" aria-label="results">

<div class="govuk-pagination__prev @previousDisabledStyle">
<input type="hidden" id="@previousPageValueId" value="@Model.Previous" />
<a class="govuk-link govuk-pagination__link" @previousDisabledAria href="@previousPageLink" rel="prev" id="@previousButtonId" data-testid="@previousButtonId">
<svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
<input type="hidden" id="@previousPageValueId" value="@Model.Previous"/>
<a class="govuk-link govuk-pagination__link" @previousDisabledAria href="@previousPageLink" rel="prev"
id="@previousButtonId" data-testid="@previousButtonId">
<svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg"
height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path
d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z">
</path>
</svg>
<span class="govuk-pagination__link-title">Previous</span>
</a>
</div>

<ul class="govuk-pagination__list">

@for (var pageIdx = 0; pageIdx < Model.TotalPages; pageIdx++)
{
var pageNumber = pageIdx + 1;
var isCurrentPage = Model.PageNumber == pageNumber;
var markAsSelected = isCurrentPage ? "govuk-pagination__item--current" : "";
var pageNumberLinkId = $"{prefix}page-{pageNumber}";
var ariaCurrentPage = isCurrentPage ? "aria-current=true" : "";
var ariaLabel = isCurrentPage ? $"Current page, page {pageNumber}" : $"go to page {pageNumber}";

<li class="govuk-pagination__item @markAsSelected">
<a class="govuk-link govuk-pagination__link" href="@Model.Url&pageNumber=@pageNumber" @ariaCurrentPage aria-label="@ariaLabel" id="@pageNumberLinkId" data-testid="@pageNumberLinkId" data-page-number-link="@pageNumber">
@pageNumber
</a>
</li>
}
<nav class="govuk-pagination" role="navigation" aria-label="Pagination">
<ol class="govuk-pagination__list" aria-label="Page navigation">
@for (var pageIdx = 0; pageIdx < Model.TotalPages; pageIdx++)
{
var pageNumber = pageIdx + 1;
var isCurrentPage = Model.PageNumber == pageNumber;
var markAsSelected = isCurrentPage ? "govuk-pagination__item--current" : "";
var pageNumberLinkId = $"{prefix}page-{pageNumber}";
var ariaCurrentPage = isCurrentPage ? "aria-current=true" : "";
var ariaLabel = isCurrentPage ? $"Current page, page {pageNumber}" : $"Go to page {pageNumber}";

if (pagesToDisplay.Contains(pageNumber))
{
if (Model.Previous.HasValue && Model.Previous == pageNumber && ((Model.Previous - 1) > 1))
{
<li class="govuk-pagination__item">
<span class="govuk-pagination__item govuk-pagination__item--ellipses" aria-hidden="true">&ctdot;</span>
</li>
}
<li class="govuk-pagination__item @markAsSelected">
<a class="govuk-link govuk-pagination__link" href="@Model.Url&pageNumber=@pageNumber" @ariaCurrentPage
aria-label="@ariaLabel" id="@pageNumberLinkId" data-testid="@pageNumberLinkId"
data-page-number-link="@pageNumber">
@pageNumber
</a>
</li>
if (Model.Next.HasValue && Model.Next == pageNumber && ((Model.Next + 1) < Model.TotalPages))
{
<li class="govuk-pagination__item">
<span class="govuk-pagination__item govuk-pagination__item--ellipses" aria-hidden="true">&ctdot;</span>
</li>
}
}
}
</ol>
</nav>

</ul>

<div class="govuk-pagination__next @nextDisabledStyle">
<input type="hidden" id="@nextPageValueId" value="@Model.Next" />
<a class="govuk-link govuk-pagination__link" @nextDisabledAria href="@nextPageLink" rel="next" id="@nextButtonId" data-testid="@nextButtonId">
<input type="hidden" id="@nextPageValueId" value="@Model.Next"/>
<a class="govuk-link govuk-pagination__link" @nextDisabledAria href="@nextPageLink" rel="next"
id="@nextButtonId" data-testid="@nextButtonId">
<span class="govuk-pagination__link-title">Next</span>
<svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
<svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg"
height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path
d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z">
</path>
</svg>
</a>
</div>
</nav>
// When pagination is used on the screen without a full page refresh
if (!string.IsNullOrEmpty(Model.ContentContainerId))
{
<script type="application/javascript" asp-asp-add-nonce>
<script type="application/javascript" nonce="@nonce">

$(function () {
onPageMoved();

function onPageMoved() {
$("#@nextButtonId").on("click", function(e) {
$("#@nextButtonId").on("click", function (e) {
e.preventDefault();

const pageNumber = $('#@nextPageValueId').val();

refreshContent(pageNumber);
});

$("#@previousButtonId").on("click", function(e) {
$("#@previousButtonId").on("click", function (e) {
e.preventDefault();

const pageNumber = $('#@previousPageValueId').val();
Expand All @@ -93,10 +127,10 @@

var numberedPageLinks = $('#@paginationContainerId').find('[data-page-number-link]');

numberedPageLinks.each(function() {
numberedPageLinks.each(function () {
const pageNumber = $(this).data('page-number-link');

$(this).click(function(e) {
$(this).click(function (e) {

e.preventDefault();

Expand All @@ -118,5 +152,4 @@
});
</script>
}
}

}

0 comments on commit 2aa1ceb

Please sign in to comment.