Skip to content

Commit

Permalink
feat(blazorui): add missing features to customize texts of paginator …
Browse files Browse the repository at this point in the history
…in BitDataGrid #9247 (#9248)
  • Loading branch information
msynk authored Nov 16, 2024
1 parent 5ccec1f commit 36a3977
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 112 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,27 @@
/// </summary>
public class BitDataGridPaginationState
{
/// <summary>
/// Gets the current zero-based page index. To set it, call <see cref="SetCurrentPageIndexAsync(int)" />.
/// </summary>
public int CurrentPageIndex { get; private set; }

/// <summary>
/// Gets or sets the number of items on each page.
/// </summary>
public int ItemsPerPage { get; set; } = 10;

/// <summary>
/// Gets the current zero-based page index. To set it, call <see cref="SetCurrentPageIndexAsync(int)" />.
/// Gets the zero-based index of the last page, if known. The value will be null until <see cref="TotalItemCount"/> is known.
/// </summary>
public int CurrentPageIndex { get; private set; }
public int? LastPageIndex => (TotalItemCount - 1) / ItemsPerPage;

/// <summary>
/// Gets the total number of items across all pages, if known. The value will be null until an
/// associated <see cref="BitDataGrid{TGridItem}"/> assigns a value after loading data.
/// </summary>
public int? TotalItemCount { get; private set; }

/// <summary>
/// Gets the zero-based index of the last page, if known. The value will be null until <see cref="TotalItemCount"/> is known.
/// </summary>
public int? LastPageIndex => (TotalItemCount - 1) / ItemsPerPage;

/// <summary>
/// An event that is raised when the total item count has changed.
/// </summary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,56 @@
<div class="summary">
@if (SummaryTemplate is not null)
{
@SummaryTemplate
@SummaryTemplate(Value)
}
else if (SummaryFormat is not null)
{
<text>@SummaryFormat(Value)</text>
}
else
{
<text><strong>@Value.TotalItemCount</strong> items</text>
}
</div>
<nav role="navigation">
<button type="button" class="go-first" @onclick="GoFirstAsync" disabled="@(!CanGoBack)" title="Go to first page" aria-title="Go to first page"></button>
<button type="button" class="go-previous" @onclick="GoPreviousAsync" disabled="@(!CanGoBack)" title="Go to previous page" aria-title="Go to previous page"></button>
<button type="button"
class="go-first"
@onclick="GoFirstAsync"
disabled="@(!CanGoBack)"
title="@GoToFirstButtonTitle"
aria-title="@GoToFirstButtonTitle" />
<button type="button"
class="go-previous"
@onclick="GoPreviousAsync"
disabled="@(!CanGoBack)"
title="@GoToPrevButtonTitle"
aria-title="@GoToPrevButtonTitle" />
<div class="pagination-text">
Page <strong>@(Value.CurrentPageIndex + 1)</strong>
of <strong>@(Value.LastPageIndex + 1)</strong>
@if (TextTemplate is not null)
{
@TextTemplate(Value)
}
else if (TextFormat is not null)
{
<span>@TextFormat(Value)</span>
}
else
{
<span>Page <b>@(Value.CurrentPageIndex + 1)</b> of <b>@(Value.LastPageIndex + 1)</b></span>
}
</div>
<button type="button" class="go-next" @onclick="GoNextAsync" disabled="@(!CanGoForwards)" title="Go to next page" aria-title="Go to next page"></button>
<button type="button" class="go-last" @onclick="GoLastAsync" disabled="@(!CanGoForwards)" title="Go to last page" aria-title="Go to last page"></button>
<button type="button"
class="go-next"
@onclick="GoNextAsync"
disabled="@(!CanGoForwards)"
title="@GoToNextButtonTitle"
aria-title="@GoToNextButtonTitle" />
<button type="button"
class="go-last"
@onclick="GoLastAsync"
disabled="@(!CanGoForwards)"
title="@GoToLastButtonTitle"
aria-title="@GoToLastButtonTitle" />
</nav>
}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,49 @@ public partial class BitDataGridPaginator : IDisposable
private readonly EventCallbackSubscriber<BitDataGridPaginationState> _totalItemCountChanged;

/// <summary>
/// Specifies the associated <see cref="BitDataGridPaginationState"/>. This parameter is required.
/// The title of the go to first page button.
/// </summary>
[Parameter, EditorRequired] public BitDataGridPaginationState Value { get; set; } = default!;
[Parameter] public string GoToFirstButtonTitle { get; set; } = "Go to first page";

/// <summary>
/// The title of the go to previous page button.
/// </summary>
[Parameter] public string GoToPrevButtonTitle { get; set; } = "Go to previous page";

/// <summary>
/// The title of the go to next page button.
/// </summary>
[Parameter] public string GoToNextButtonTitle { get; set; } = "Go to next page";

/// <summary>
/// The title of the go to last page button.
/// </summary>
[Parameter] public string GoToLastButtonTitle { get; set; } = "Go to last page";

/// <summary>
/// Optionally supplies a format for rendering the page count summary.
/// </summary>
[Parameter] public Func<BitDataGridPaginationState, string>? SummaryFormat { get; set; }

/// <summary>
/// Optionally supplies a template for rendering the page count summary.
/// </summary>
[Parameter] public RenderFragment? SummaryTemplate { get; set; }
[Parameter] public RenderFragment<BitDataGridPaginationState>? SummaryTemplate { get; set; }

/// <summary>
/// The optional custom format for the main text of the paginator in the middle of it.
/// </summary>
[Parameter] public Func<BitDataGridPaginationState, string>? TextFormat { get; set; }

/// <summary>
/// The optional custom template for the main text of the paginator in the middle of it.
/// </summary>
[Parameter] public RenderFragment<BitDataGridPaginationState>? TextTemplate { get; set; }

/// <summary>
/// Specifies the associated <see cref="BitDataGridPaginationState"/>. This parameter is required.
/// </summary>
[Parameter, EditorRequired] public BitDataGridPaginationState Value { get; set; } = default!;

/// <summary>
/// Constructs an instance of <see cref="BitDataGridPaginator" />.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@

@using Demo.Shared.Dtos.DataGridDemo
@inherits AppComponentBase
@inject HttpClient HttpClient
@inject NavigationManager NavManager

<PageOutlet Url="components/datagrid"
Title="DataGrid"
Expand All @@ -16,96 +14,98 @@
ComponentParameters="componentParameters"
ComponentSubClasses="componentSubClasses"
ComponentSubEnums="componentSubEnums">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
<ExamplePreview>
<div class="grid1">
<div class="grid1-container">
<BitDataGrid Items="@FilteredItems1" ResizableColumns="true" Pagination="@pagination1">
<BitDataGridPropertyColumn Property="@(c => c.Name)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending">
<ColumnOptions>
<BitSearchBox @bind-Value="typicalSampleNameFilter1"
FixedIcon
Immediate DebounceTime="300"
Placeholder="Search on Name"
InputHtmlAttributes="@(new Dictionary<string, object> {{"autofocus", true}})" />
</ColumnOptions>
</BitDataGridPropertyColumn>
<BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
</BitDataGrid>
</div>
<BitDataGridPaginator Value="@pagination1" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Customized" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
<ExamplePreview>
<div class="grid2">
<div class="grid2-container">
<BitDataGrid Items="@FilteredItems2" ResizableColumns="true" Pagination="@pagination2">
<BitDataGridPropertyColumn Class="column--large" Property="@(c => c.Name)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending">
<ColumnOptions>
<BitSearchBox @bind-Value="typicalSampleNameFilter2"
FixedIcon
Immediate DebounceTime="300"
Placeholder="Search on Name"
InputHtmlAttributes="@(new Dictionary<string, object> {{"autofocus", true}})" />
</ColumnOptions>
</BitDataGridPropertyColumn>
<BitDataGridTemplateColumn Title="Flag" Align="BitDataGridAlign.Center">
<img class="flag" src="https://flagsapi.com/@(context.Code)/shiny/32.png" loading="lazy" alt="@(context.Code)" />
</BitDataGridTemplateColumn>
<BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
<BitDataGridTemplateColumn Title="Action" Align="BitDataGridAlign.Center">
<BitButton Variant="BitVariant.Text" IconName="@BitIconName.Edit" Title="Edit" />
<BitButton Variant="BitVariant.Text" IconName="@BitIconName.Delete" Title="Delete" />
</BitDataGridTemplateColumn>
</BitDataGrid>
</div>
<BitDataGridPaginator Value="@pagination2" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Virtualizing" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
<ExamplePreview>
<div class="grid3">
<BitDataGrid ItemsProvider="@foodRecallProvider" TGridItem="FoodRecall" Virtualize="true" @ref="dataGrid">
<BitDataGridPropertyColumn Property="@(c=>c.EventId)" />
<BitDataGridPropertyColumn Property="@(c => c.State)" />
<BitDataGridPropertyColumn Property="@(c => c.City)" />
<BitDataGridPropertyColumn Property="@(c => c.RecallingFirm)" Title="Company" />
<BitDataGridPropertyColumn Property="@(c => c.Status)" />
<BitDataGridPropertyColumn Sortable="true" Property="@(c => c.ReportDate)" Title="Report Date" />
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
<ExamplePreview>
<div class="grid1">
<div class="grid1-container">
<BitDataGrid Items="@FilteredItems1" ResizableColumns="true" Pagination="@pagination1">
<BitDataGridPropertyColumn Property="@(c => c.Name)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending">
<ColumnOptions>
<BitSearchBox @bind-Value="typicalSampleNameFilter1"
FixedIcon
Immediate DebounceTime="300"
Placeholder="Search on Name"
InputHtmlAttributes="@(new Dictionary<string, object> {{"autofocus", true}})" />
</ColumnOptions>
</BitDataGridPropertyColumn>
<BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
</BitDataGrid>
</div>
<div class="search-panel">
<BitSearchBox @bind-Value="VirtualSampleNameFilter"
Immediate DebounceTime="300"
Placeholder="Search on Company" />
</div>
</ExamplePreview>
</ComponentExampleBox>
<BitDataGridPaginator Value="@pagination1" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="OData" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
<ExamplePreview>
<div class="grid3">
<BitDataGrid ItemKey="(p => p.Id)" ItemsProvider="@productsItemsProvider" TGridItem="ProductDto" Virtualize="true" @ref="productsDataGrid">
<BitDataGridPropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending" />
<BitDataGridPropertyColumn Property="@(p => p.Name)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(p => p.Price)" Sortable="true" />
<ComponentExampleBox Title="Customized" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
<ExamplePreview>
<div class="grid2">
<div class="grid2-container">
<BitDataGrid Items="@FilteredItems2" ResizableColumns="true" Pagination="@pagination2">
<BitDataGridPropertyColumn Class="column--large" Property="@(c => c.Name)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending">
<ColumnOptions>
<BitSearchBox @bind-Value="typicalSampleNameFilter2"
FixedIcon
Immediate DebounceTime="300"
Placeholder="Search on Name"
InputHtmlAttributes="@(new Dictionary<string, object> {{"autofocus", true}})" />
</ColumnOptions>
</BitDataGridPropertyColumn>
<BitDataGridTemplateColumn Title="Flag" Align="BitDataGridAlign.Center">
<img class="flag" src="https://flagsapi.com/@(context.Code)/shiny/32.png" loading="lazy" alt="@(context.Code)" />
</BitDataGridTemplateColumn>
<BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
<BitDataGridTemplateColumn Title="Action" Align="BitDataGridAlign.Center">
<BitButton Variant="BitVariant.Text" IconName="@BitIconName.Edit" Title="Edit" />
<BitButton Variant="BitVariant.Text" IconName="@BitIconName.Delete" Title="Delete" />
</BitDataGridTemplateColumn>
</BitDataGrid>
</div>
<div class="search-panel">
<BitSearchBox @bind-Value="ODataSampleNameFilter"
Immediate DebounceTime="300"
Placeholder="Search on Name" />
</div>
</ExamplePreview>
</ComponentExampleBox>
<BitDataGridPaginator Value="@pagination2" SummaryFormat="@(v => $"Total: {v.TotalItemCount}")">
<TextTemplate Context="state">@(state.CurrentPageIndex + 1) / @(state.LastPageIndex + 1)</TextTemplate>
</BitDataGridPaginator>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Virtualizing" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
<ExamplePreview>
<div class="grid3">
<BitDataGrid ItemsProvider="@foodRecallProvider" TGridItem="FoodRecall" Virtualize="true" @ref="dataGrid">
<BitDataGridPropertyColumn Property="@(c=>c.EventId)" />
<BitDataGridPropertyColumn Property="@(c => c.State)" />
<BitDataGridPropertyColumn Property="@(c => c.City)" />
<BitDataGridPropertyColumn Property="@(c => c.RecallingFirm)" Title="Company" />
<BitDataGridPropertyColumn Property="@(c => c.Status)" />
<BitDataGridPropertyColumn Sortable="true" Property="@(c => c.ReportDate)" Title="Report Date" />
</BitDataGrid>
</div>
<div class="search-panel">
<BitSearchBox @bind-Value="VirtualSampleNameFilter"
Immediate DebounceTime="300"
Placeholder="Search on Company" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="OData" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
<ExamplePreview>
<div class="grid3">
<BitDataGrid ItemKey="(p => p.Id)" ItemsProvider="@productsItemsProvider" TGridItem="ProductDto" Virtualize="true" @ref="productsDataGrid">
<BitDataGridPropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending" />
<BitDataGridPropertyColumn Property="@(p => p.Name)" Sortable="true" />
<BitDataGridPropertyColumn Property="@(p => p.Price)" Sortable="true" />
</BitDataGrid>
</div>
<div class="search-panel">
<BitSearchBox @bind-Value="ODataSampleNameFilter"
Immediate DebounceTime="300"
Placeholder="Search on Name" />
</div>
</ExamplePreview>
</ComponentExampleBox>
</ComponentDemo>
Loading

0 comments on commit 36a3977

Please sign in to comment.