#8 - add page change management

Author: albx

src/BitBlazor/Components/Pagination/BitPageItem.razor

@@ -1,5 +1,5 @@
 @namespace BitBlazor.Components
 
 <li class="page-item">
-    <a class="page-link" @attributes="attributes" href="#">@Page</a>
+    <a class="page-link" @attributes="attributes" href="#" @onclick:preventDefault @onclick="SetPageAsync">@Page</a>
 </li>

src/BitBlazor/Components/Pagination/BitPageItem.razor.cs

@@ -2,19 +2,34 @@
 
 namespace BitBlazor.Components;
 
+/// <summary>
+/// Represents an individual page item within a pagination component.
+/// </summary>
+/// <remarks>
+/// This class is typically used as a child of the BitPagination component to display a specific page number. 
+/// It manages accessibility attributes based on the current page selection.
+/// </remarks>
 public partial class BitPageItem
 {
     [CascadingParameter]
     BitPagination Parent { get; set; } = default!;
 
+    /// <summary>
+    /// Gets or sets the current page index for pagination.
+    /// </summary>
+    /// <remarks>
+    /// Setting this property determines which page of data is displayed or processed. 
+    /// Ensure that the value is within the valid range for the data source.
+    /// </remarks>
     [Parameter]
     public int Page { get; set; }
 
     private IDictionary<string, object> attributes = new Dictionary<string, object>();
 
+    /// <inheritdoc/>
     protected override void OnParametersSet()
     {
-        if (Page == Parent.Page)
+        if (Page == Parent.CurrentPage)
         {
             attributes["aria-current"] = "page";
         }
@@ -23,4 +38,6 @@ protected override void OnParametersSet()
             attributes.Remove("aria-current");
         }
     }
+
+    private Task SetPageAsync() => Parent.ChangePageAsync(Page);
 }

src/BitBlazor/Components/Pagination/BitPagination.razor.cs

@@ -78,6 +78,28 @@ public partial class BitPagination : BitComponentBase
     [Parameter]
     public PaginationAlignment Alignment { get; set; } = PaginationAlignment.Left;
 
+    internal int CurrentPage { get; private set; }
+
+    /// <inheritdoc/>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        CurrentPage = Page;
+    }
+
+    internal async Task ChangePageAsync(int page)
+    {
+        if (CurrentPage == page)
+        {
+            return;
+        }
+
+        CurrentPage = page;
+        await PageChanged.InvokeAsync(page);
+
+        StateHasChanged();
+    }
+
     private string ComputeContainerCssClass()
     {
         var builder = new CssClassBuilder("pagination-wrapper");

stories/BitBlazor.Stories/Components/Stories/Components/BitPagination.stories.razor

@@ -14,6 +14,7 @@
             <Arg For="_ => _.Page" Value="1" />
             <Arg For="_ => _.NumberOfPages" Value="3" />
             <Arg For="_ => _.Description" Value="@("Page navigation")" />
+            <Arg For="_ => _.Alignment" Value="PaginationAlignment.Left" />
         </Arguments>
         <Template>
             <div class="px-2 py-2">

tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Behaviors.cs

@@ -0,0 +1,30 @@
+using BitBlazor.Components;
+using Bunit;
+using Newtonsoft.Json.Linq;
+
+namespace BitBlazor.Test.Components.Pagination;
+
+public class BitPaginationTest
+{
+    [Fact]
+    public void BitPagination_Should_Change_Current_Page_When_Page_Link_Is_Clicked()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 1;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageItem = component.FindComponents<BitPageItem>().First(p => p.Instance.Page == 2);
+        var pageLink = pageItem.Find(".page-item > .page-link");
+
+        pageLink.Click();
+
+        Assert.Equal(2, page);
+        Assert.Equal("page", pageLink.GetAttribute("aria-current"));
+    }
+}