brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added new pagination component.

Browse Source
This commit is contained in:
Brian Bicknell
2026-04-24 10:18:16 -04:00
parent dfa840d816
commit b63a89c8be
3 changed files with 192 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
JSMR.UI.Blazor/Components/JPagination2.razor Normal file
View File

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

12
JSMR.UI.Blazor/Pages/Creators.razor
View File

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

130
JSMR.UI.Blazor/Pages/Tags.razor
View File

@@ -13,67 +13,54 @@
<PageTitle>Tags</PageTitle> <PageTitle>Tags</PageTitle>
<div class="fdsfds"> <div class="fdsfds">
@* <h1>Tags</h1> *@ @* <h1>Tags</h1> *@
@* <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" /> @* <MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />
*@ *@
<AntDesign.Card Title=@("Tags") Class="ant-blurred-card"> <AntDesign.Card Title=@("Tags") Class="ant-blurred-card">
<Extra> <Extra>
<AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter"> <AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
<Prefix> <Prefix>
<AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" /> <AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
</Prefix> </Prefix>
</AntDesign.Input> </AntDesign.Input>
</Extra> </Extra>
<Body> <Body>
<Space Direction="SpaceDirection.Vertical" Size="@($"2em")"> <AntDesign.Table Responsive
@* <SpaceItem> DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())"
<AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter"> Total="@(searchResults?.TotalItems ?? 0)"
<Prefix> TItem="TagSearchItem"
<AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" /> Loading="LoadingData"
</Prefix> HidePagination="@true"
</AntDesign.Input> RemoteDataSource="@true"
</SpaceItem> *@ RowKey="x=>x.TagId"
<SpaceItem> OnChange="HandleTableChange">
<AntDesign.Table Responsive <ColumnDefinitions>
DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())" <AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" />
Total="@(searchResults?.TotalItems ?? 0)" <AntDesign.PropertyColumn Property="c => c.EnglishName" Title="English Name" Sortable SorterMultiple="5" />
TItem="TagSearchItem" <AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable SorterMultiple="5">
Loading="LoadingData" <AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button>
HidePagination="@false" </AntDesign.PropertyColumn>
PageSize="PageSize" <AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
PageIndex="PageNumber" @if (context.Favorite)
PaginationPosition="bottomCenter" {
RemoteDataSource="@true" <AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
RowKey="x=>x.TagId" }
OnChange="HandleTableChange"> </AntDesign.PropertyColumn>
<ColumnDefinitions> <AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 9em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
<AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" /> @if (context.Blacklisted)
<AntDesign.PropertyColumn Property="c => c.EnglishName" Title="English Name" Sortable SorterMultiple="5" /> {
<AntDesign.PropertyColumn Property="c => c.VoiceWorkCount" Title="Voice Works" Format="n0" HeaderStyle="width: 10em" Sortable SorterMultiple="5"> <AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
<AntDesign.Button Size="AntDesign.ButtonSize.Small" Type="AntDesign.ButtonType.Link" OnClick="@(e => NavigateToVoiceWorkSearch(context))" Style="display:flex;justify-self:flex-end;">@context.VoiceWorkCount.ToString("n0")</AntDesign.Button> }
</AntDesign.PropertyColumn> </AntDesign.PropertyColumn>
<AntDesign.PropertyColumn Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5"> </ColumnDefinitions>
@if (context.Favorite) </AntDesign.Table>
{ <JPagination2 PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
<AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag> </Body>
} </AntDesign.Card>
</AntDesign.PropertyColumn>
<AntDesign.PropertyColumn Property="c => c.Blacklisted" Title="Blacklisted" HeaderStyle="width: 9em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
@if (context.Blacklisted)
{
<AntDesign.Tag Color="AntDesign.TagColor.RedInverse">Blacklisted</AntDesign.Tag>
}
</AntDesign.PropertyColumn>
</ColumnDefinitions>
</AntDesign.Table>
</SpaceItem>
</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> </div>
<style> <style>
@@ -92,14 +79,35 @@
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
.ant-card-extra {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.ant-table { .ant-table {
/* background: inherit; */ /* background: inherit; */
} }
.ant-table table { .ant-table table {
table-layout: fixed; 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 { .j-pager {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -202,8 +210,8 @@
private async Task HandleTableChange(AntDesign.TableModels.QueryModel<TagSearchItem> queryModel) private async Task HandleTableChange(AntDesign.TableModels.QueryModel<TagSearchItem> queryModel)
{ {
PageNumber = queryModel.PageIndex; // PageNumber = queryModel.PageIndex;
PageSize = queryModel.PageSize; // PageSize = queryModel.PageSize;
_sortOptions = MapSortOptions(queryModel); _sortOptions = MapSortOptions(queryModel);