Added new pagination component.

2026-04-24 10:18:16 -04:00
parent dfa840d816
commit b63a89c8be
3 changed files with 192 additions and 63 deletions
--- a/JSMR.UI.Blazor/Components/JPagination2.razor
+++ b/JSMR.UI.Blazor/Components/JPagination2.razor
@@ -0,0 +1,113 @@
+@using JSMR.UI.Blazor.Enums
+
+<div class="pagination">
+    <div>
+        <label>@IndexInfo</label>
+    </div>
+    @* <MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" /> *@
+    <AntDesign.Pagination ShowSizeChanger="false" Total="TotalItems" Current="PageNumber" PageSize="PageSize" OnChange="OnPaginationChanged"></AntDesign.Pagination>
+    <div class="page-sizes">
+        @RightContent
+        <div class="page-size-select">
+            <AntDesign.Select TItem="PageSizeItem"
+                              TItemValue="int"
+                              DataSource="PageSizes3"
+                              LabelName="Text"
+                              ValueName="Value"
+                              Value="PageSize"
+                              ValueChanged="OnPageSizeChanged">
+            </AntDesign.Select>
+        </div>
+        
+        @* <BitDropdown Items="PageSizes2"
+                     Style="min-width: 7rem"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<int>"
+                     TValue="int"
+                     Value="PageSize"
+                     ValueChanged="OnPageSizeChanged">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Grid" Tooltip="Page Size"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown> *@
+    </div>
+</div>
+
+<style>
+    .pagination {
+        padding: 16px 16px;
+        background: transparent;
+        background: #141414;
+    }
+
+    .ant-pagination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .page-size-select {
+        width: 12em;
+    }
+</style>
+
+@code {
+    [Parameter]
+    public int PageNumber { get; set; }
+
+    [Parameter]
+    public EventCallback<int> PageNumberChanged { get; set; }
+
+    [Parameter]
+    public int[] PageSizes { get; set; } = [5, 10, 25, 50, 100];
+
+    List<BitDropdownItem<int>> PageSizes2 => [.. PageSizes.Select(x => new BitDropdownItem<int>() { Text = x.ToString(), Value = x })];
+
+    List<PageSizeItem> PageSizes3 => [.. PageSizes.Select(x => new PageSizeItem() { Text = $"{x} items / page", Value = x })];
+
+    [Parameter]
+    public int PageSize { get; set; }
+
+    [Parameter]
+    public EventCallback<int> PageSizeChanged { get; set; }
+
+    [Parameter]
+    public int TotalItems { get; set; }
+
+    [Parameter]
+    public EventCallback<int> TotalItemsChanged { get; set; }
+
+    [Parameter]
+    public RenderFragment? RightContent { get; set; }
+
+    public string IndexInfo => TotalItems == 0 ? "No items" : $"{StartIndex.ToString("n0")} - {EndIndex.ToString("n0")} of {TotalItems.ToString("n0")} items";
+
+    public int StartIndex => (PageNumber - 1) * PageSize + 1;
+    public int EndIndex => PageNumber * PageSize < TotalItems ? PageNumber * PageSize : TotalItems;
+
+    private async Task OnSelectedChanged(int newPage)
+    {
+        PageNumber = newPage;
+        await PageNumberChanged.InvokeAsync(newPage);
+    }
+
+    private async Task OnPageSizeChanged(int newPageSize)
+    {
+        PageSize = newPageSize;
+        await PageSizeChanged.InvokeAsync(newPageSize);
+    }
+
+    private async Task OnPaginationChanged(AntDesign.PaginationEventArgs args)
+    {
+        int newPage = args.Page;
+
+        PageNumber = newPage;
+        await PageNumberChanged.InvokeAsync(newPage);
+    }
+
+    public class PageSizeItem
+    {
+        public string? Text { get; set; }
+        public int Value { get; set; }
+    }
+}