Added new pagination component.
This commit is contained in:
@@ -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; */
|
||||
}
|
||||
|
||||
@@ -13,67 +13,54 @@
|
||||
<PageTitle>Tags</PageTitle>
|
||||
|
||||
<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">
|
||||
<Extra>
|
||||
<AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
|
||||
<Prefix>
|
||||
<AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
|
||||
</Prefix>
|
||||
</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"
|
||||
PageSize="PageSize"
|
||||
PageIndex="PageNumber"
|
||||
PaginationPosition="bottomCenter"
|
||||
RemoteDataSource="@true"
|
||||
RowKey="x=>x.TagId"
|
||||
OnChange="HandleTableChange">
|
||||
<ColumnDefinitions>
|
||||
<AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" />
|
||||
<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.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 Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
|
||||
@if (context.Favorite)
|
||||
{
|
||||
<AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
|
||||
}
|
||||
</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>
|
||||
<Extra>
|
||||
<AntDesign.Input TValue="string" Value="Keywords" ValueChanged="OnKeywordsChanged" DebounceMilliseconds="500" Placeholder="Filter">
|
||||
<Prefix>
|
||||
<AntDesign.Icon Type="@AntDesign.IconType.Outline.Search" />
|
||||
</Prefix>
|
||||
</AntDesign.Input>
|
||||
</Extra>
|
||||
<Body>
|
||||
<AntDesign.Table Responsive
|
||||
DataSource="@(searchResults?.Items ?? Enumerable.Empty<TagSearchItem>())"
|
||||
Total="@(searchResults?.TotalItems ?? 0)"
|
||||
TItem="TagSearchItem"
|
||||
Loading="LoadingData"
|
||||
HidePagination="@true"
|
||||
RemoteDataSource="@true"
|
||||
RowKey="x=>x.TagId"
|
||||
OnChange="HandleTableChange">
|
||||
<ColumnDefinitions>
|
||||
<AntDesign.PropertyColumn Property="c => c.Name" Title="Name" Sortable SorterMultiple="5" />
|
||||
<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.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 Property="c => c.Favorite" Title="Favorite" HeaderStyle="width: 8em" Sortable SortDirections="new[] { AntDesign.SortDirection.Descending }" SorterMultiple="5">
|
||||
@if (context.Favorite)
|
||||
{
|
||||
<AntDesign.Tag Color="AntDesign.TagColor.PurpleInverse">Favorite</AntDesign.Tag>
|
||||
}
|
||||
</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>
|
||||
<JPagination2 PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
|
||||
</Body>
|
||||
</AntDesign.Card>
|
||||
|
||||
<Pagination Current="PageNumber" OnChange="OnPaginationChange" PageSize="PageSize" Total="TotalItems" ShowTotal="ShowTotal"></Pagination>
|
||||
<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" />
|
||||
@* <Pagination Current="PageNumber" OnChange="OnPaginationChange" PageSize="PageSize" Total="TotalItems" ShowTotal="ShowTotal"></Pagination>
|
||||
<JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" TotalItems="TotalItems" /> *@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -92,14 +79,35 @@
|
||||
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; */
|
||||
}
|
||||
|
||||
.ant-table table {
|
||||
table-layout: fixed;
|
||||
.ant-table table {
|
||||
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;
|
||||
PageSize = queryModel.PageSize;
|
||||
// PageNumber = queryModel.PageIndex;
|
||||
// PageSize = queryModel.PageSize;
|
||||
|
||||
_sortOptions = MapSortOptions(queryModel);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user