Added new pagination component.

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; }
+    }
+}

JSMR.UI.Blazor/Pages/Creators.razor

@@ -66,11 +66,10 @@
         </AntDesign.ActionColumn> *@
             </ColumnDefinitions>
         </AntDesign.Table>
+        <JPagination2 PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
     </Body>
 </AntDesign.Card>
 
-<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
-
 <style>
     .mud-table-root {
         table-layout: fixed;
@@ -87,6 +86,15 @@
         backdrop-filter: blur(12px);
     }
 
+    .ant-card-extra {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
     .ant-table {
         /* background: inherit; */
     }

JSMR.UI.Blazor/Pages/Tags.razor

@@ -26,24 +26,12 @@
             </AntDesign.Input>
         </Extra>
         <Body>
-        <Space Direction="SpaceDirection.Vertical" Size="@($"2em")">
-            @* <SpaceItem>
-                <AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
-                    <Prefix>
-                        <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
-                    </Prefix>
-                </AntDesign.Input>
-            </SpaceItem> *@
-            <SpaceItem>
             <AntDesign.Table Responsive
                              DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())"
                              Total="@(searchResults?.TotalItems ?? 0)"
                              TItem="TagSearchItem"
                              Loading="LoadingData"
-                                 HidePagination="@false"
+                             HidePagination="@true"
-                                 PageSize="PageSize"
-                                 PageIndex="PageNumber"
-                                 PaginationPosition="bottomCenter"
                              RemoteDataSource="@true"
                              RowKey="x=>x.TagId"
                              OnChange="HandleTableChange">
@@ -67,13 +55,12 @@
                     </AntDesign.PropertyColumn>
                 </ColumnDefinitions>
             </AntDesign.Table>
-            </SpaceItem>
+            <JPagination2 PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
-        </Space>
         </Body>
     </AntDesign.Card>
 
-    <Pagination Current="PageNumber" OnChange="OnPaginationChange" PageSize="PageSize" Total="TotalItems" ShowTotal="ShowTotal"></Pagination>
+    @*  <Pagination Current="PageNumber" OnChange="OnPaginationChange" PageSize="PageSize" Total="TotalItems" ShowTotal="ShowTotal"></Pagination>
-<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
+<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" /> *@
 </div>
 
 <style>
@@ -92,6 +79,15 @@
         backdrop-filter: blur(12px);
     }
 
+    .ant-card-extra {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
     .ant-table {
         /* background: inherit; */
     }
@@ -100,6 +96,18 @@
             table-layout: fixed;
         }
 
+    .ant-table-pagination {
+        position: sticky;
+        bottom: 0;
+        padding: 16px 0;
+        margin: 0;
+        background: #141414;
+    }
+
+        .ant-table-pagination.ant-pagination {
+            margin: 0;
+        }
+
     .j-pager {
         position: fixed;
         bottom: 0;
@@ -202,8 +210,8 @@
 
     private async Task HandleTableChange(AntDesign.TableModels.QueryModel<TagSearchItem> queryModel)
     {
-        PageNumber = queryModel.PageIndex;
+        // PageNumber = queryModel.PageIndex;
-        PageSize = queryModel.PageSize;
+        // PageSize = queryModel.PageSize;
 
         _sortOptions = MapSortOptions(queryModel);