Skip to content

Commit

Permalink
#502 [doc] Cleanup demos in documentation by using IDemoDataService -…
Browse files Browse the repository at this point in the history 
… HxListLayout
  • Loading branch information
@hakenr
hakenr committed Jan 14, 2024
1 parent acd7719 commit a7b6074
Show file tree
Hide file tree
Showing 13 changed files with 259 additions and 417 deletions.
8 changes: 6 additions & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Layouts/HxListLayout.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@
namespace Havit.Blazor.Components.Web.Bootstrap;

/// <summary>
/// Data presentation component composed of <see cref="HxGrid"/> for data, <see cref="HxOffcanvas"/> for manual filtering, and named-views for pre-defined filters.<br />
/// Provides a unified layout for data presentation components and associated filtering controls.<br/>
/// This component orchestrates the interaction between filter controls and the data presentation component.
/// The data list is typically implemented using a <see cref="HxGrid{TItem}"/> component. Filters are displayed
/// in a <see cref="HxOffcanvas"/> component, while filter values are shown as <see cref="HxChipList"/>.
/// Additionally, it supports predefined named views for quick switching between different filter configurations
/// and other features such as a title, search box, and commands.
/// Full documentation and demos: <see href="https://havit.blazor.eu/components/HxListLayout">https://havit.blazor.eu/components/HxListLayout</see>
/// </summary>
/// <typeparam name="TFilterModel"></typeparam>
public partial class HxListLayout<TFilterModel>
{
/// <summary>
Expand Down
6 changes: 4 additions & 2 deletions Havit.Blazor.Documentation/Pages/Components/HxGridDoc/HxGrid_Documentation.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,11 @@
</p>


<DocHeading Title="Infinite scroll (Virtualized)" Id="InfiniteScroll" Level="3" />
<DocHeading Title="Infinite scroll (virtualized)" Id="InfiniteScroll" Level="3" />
<p>
To transition from paging to infinite scroll, set <code>ContentNavigationMode="GridContentNavigationMode.InfiniteScroll"</code>.
Enable <strong>continuous scrolling</strong> in <code>HxGrid</code> by setting <code>ContentNavigationMode="GridContentNavigationMode.InfiniteScroll"</code>.
This feature leverages the capabilities, requirements, and limitations of Blazor's
<a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization">Virtualize</a> component.
</p>
<DocAlert Type="DocAlertType.Warning">
It's important to specify the <code>ItemRowHeight</code> for effective virtualization. By default, it is 41 pixels, aligning with the standard table row height in Bootstrap.
Expand Down
134 changes: 65 additions & 69 deletions Havit.Blazor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo_Basic.razor
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,76 @@
<HxListLayout Title="Culture infos" TFilterModel="FilterModelDto">
<CommandsTemplate>
<HxButton Text="New item" Color="ThemeColor.Primary" Icon="BootstrapIcon.PlusLg" OnClick="NewItemClicked" />
</CommandsTemplate>
<DataTemplate>
<HxGrid @ref="gridComponent"
ContentNavigationMode="GridContentNavigationMode.Pagination"
Responsive="true"
PageSize="10"
DataProvider="LoadDataItems"
@bind-SelectedDataItem="currentItem"
@bind-SelectedDataItem:after="HandleSelectedDataItemChanged">
<Columns>
<HxGridColumn HeaderText="LCID" ItemTextSelector="@(item => item.LCID.ToString())" SortKeySelector="@(item => item.LCID)" IsDefaultSortColumn="true" />
<HxGridColumn HeaderText="DisplayName" ItemTextSelector="@(item => item.DisplayName)" SortKeySelector="@(item => item.DisplayName)" />
<HxGridColumn HeaderText="Name" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)" />
<HxGridColumn HeaderText="EnglishName" ItemTextSelector="@(item => item.EnglishName)" SortKeySelector="@(item => item.EnglishName)" />
<HxContextMenuGridColumn Context="item">
@inject IDemoDataService DemoDataService

<HxListLayout Title="Employees" TFilterModel="EmployeesFilterDto" @bind-FilterModel="filterModel" @bind-FilterModel:after="gridComponent.RefreshDataAsync">
<CommandsTemplate>
<HxButton Text="Create employee" Color="ThemeColor.Primary" Icon="BootstrapIcon.PlusLg" OnClick="HandleNewItemClicked" />
</CommandsTemplate>
<FilterTemplate Context="filterContext">
<HxInputText Label="Name" @bind-Value="filterContext.Name" />
<HxInputText Label="Phone" @bind-Value="filterContext.Phone" />
<HxInputNumber Label="Minimum salary" @bind-Value="filterContext.SalaryMin" Decimals="0" InputGroupStartText="$" />
<HxInputNumber Label="Maximum salary" @bind-Value="filterContext.SalaryMax" Decimals="0" InputGroupStartText="$" />
<HxInputText Label="Position" @bind-Value="filterContext.Position" />
<HxInputText Label="Location" @bind-Value="filterContext.Location" />
</FilterTemplate>
<DataTemplate>
<HxGrid @ref="gridComponent"
TItem="EmployeeDto"
DataProvider="GetGridData"
@bind-SelectedDataItem="currentEmployee"
@bind-SelectedDataItem:after="HandleSelectedDataItemChanged"
PageSize="5"
Responsive="true">
<Columns>
<HxGridColumn HeaderText="Name" ItemTextSelector="employee => employee.Name" />
<HxGridColumn HeaderText="Phone" ItemTextSelector="employee => employee.Phone" />
<HxGridColumn HeaderText="Salary" ItemTextSelector="@(employee => employee.Salary.ToString("c0"))" />
<HxGridColumn HeaderText="Position" ItemTextSelector="employee => employee.Position" />
<HxGridColumn HeaderText="Location" ItemTextSelector="employee => employee.Location" />
<HxContextMenuGridColumn Context="employee">
<HxContextMenu>
<HxContextMenuItem Text="Delete" OnClick="async () => await DeleteItemClicked(item)" ConfirmationQuestion="@($"Are you sure you want to delete {item.Name}?")" />
<HxContextMenuItem Text="Delete" Icon="BootstrapIcon.Trash" OnClick="async () => await HandleDeleteClick(employee)" ConfirmationQuestion="@($"Are you sure you want to delete {employee.Name}?")" />
</HxContextMenu>
</HxContextMenuGridColumn>
</Columns>
</HxGrid>
</DataTemplate>
<DetailTemplate>
Edit: @currentItem?.LCID
</DetailTemplate>
</Columns>
</HxGrid>
</DataTemplate>
<DetailTemplate>
dataItemEditComponent: {currentEmployee.Id: @currentEmployee?.Id}
</DetailTemplate>
</HxListLayout>

@code {
[Inject] protected NavigationManager NavigationManager { get; set; }

private EditableCultureInfo currentItem;
private HxGrid<EditableCultureInfo> gridComponent;

private List<EditableCultureInfo> localEditableCultureInfos = CultureInfo.GetCultures(CultureTypes.AllCultures).Select(c => new EditableCultureInfo()
{
LCID = c.LCID,
DisplayName = c.DisplayName,
Name = c.Name,
EnglishName = c.EnglishName
}).ToList();

private Task<GridDataProviderResult<EditableCultureInfo>> LoadDataItems(GridDataProviderRequest<EditableCultureInfo> request)
{
IEnumerable<EditableCultureInfo> result = localEditableCultureInfos.ToList();

return Task.FromResult(request.ApplyTo(result));
}

private async Task DeleteItemClicked(EditableCultureInfo editableCultureInfo)
{
localEditableCultureInfos.Remove(editableCultureInfo);
await gridComponent.RefreshDataAsync();
}
private EmployeeDto currentEmployee;
private EmployeesFilterDto filterModel = new() { SalaryMax = 20000 };
private HxGrid<EmployeeDto> gridComponent;

private Task HandleSelectedDataItemChanged()
{
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}
private async Task<GridDataProviderResult<EmployeeDto>> GetGridData(GridDataProviderRequest<EmployeeDto> request)
{
return new GridDataProviderResult<EmployeeDto>()
{
Data = await DemoDataService.GetEmployeesDataFragmentAsync(filterModel, request.StartIndex, request.Count, request.CancellationToken),
TotalCount = await DemoDataService.GetEmployeesCountAsync(filterModel, request.CancellationToken)
};
}

private Task NewItemClicked()
{
currentItem = new();
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}
private async Task HandleDeleteClick(EmployeeDto employee)
{
await DemoDataService.DeleteEmployeeAsync(employee.Id);
await gridComponent.RefreshDataAsync();
}

public record FilterModelDto { }
private Task HandleSelectedDataItemChanged()
{
// open or navigate to employee detail here (currentEmployee is set)
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}

private record EditableCultureInfo
{
public int LCID { get; set; }
public string DisplayName { get; set; }
public string Name { get; set; }
public string EnglishName { get; set; }
}
private Task HandleNewItemClicked()
{
currentEmployee = new();
// open or navigate to employee detail here
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}
}
39 changes: 39 additions & 0 deletions ...cumentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo_InfiniteScrollSticky.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@inject IDemoDataService DemoDataService

<style>
.scrollable-table-container {
height: 300px;
overflow: auto;
}
</style>

<HxListLayout Title="Employees" TFilterModel="HxListLayout.NoFilter">
<DataTemplate>
<HxGrid TItem="EmployeeDto"
DataProvider="GetGridData"
SelectionEnabled="false"
ContentNavigationMode="GridContentNavigationMode.InfiniteScroll"
TableContainerCssClass="scrollable-table-container"
HeaderRowCssClass="sticky-top"
Responsive="true">
<Columns>
<HxGridColumn HeaderText="Name" ItemTextSelector="employee => employee.Name" />
<HxGridColumn HeaderText="Phone" ItemTextSelector="employee => employee.Phone" />
<HxGridColumn HeaderText="Salary" ItemTextSelector="@(employee => employee.Salary.ToString("c0"))" />
<HxGridColumn HeaderText="Position" ItemTextSelector="employee => employee.Position" />
<HxGridColumn HeaderText="Location" ItemTextSelector="employee => employee.Location" />
</Columns>
</HxGrid>
</DataTemplate>
</HxListLayout>

@code {
private async Task<GridDataProviderResult<EmployeeDto>> GetGridData(GridDataProviderRequest<EmployeeDto> request)
{
return new GridDataProviderResult<EmployeeDto>()
{
Data = await DemoDataService.GetEmployeesDataFragmentAsync(request.StartIndex, request.Count, request.CancellationToken),
TotalCount = await DemoDataService.GetEmployeesCountAsync(request.CancellationToken)
};
}
}
127 changes: 33 additions & 94 deletions ....Blazor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo_NamedViews.razor
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,61 @@
@using Havit.Linq
<HxListLayout Title="Title"
@inject IDemoDataService DemoDataService

<HxListLayout Title="Employees"
TFilterModel="EmployeesFilterDto"
@bind-FilterModel="filterModel"
@bind-FilterModel:after="RefreshDataAsync"
@bind-FilterModel:after="gridComponent.RefreshDataAsync"
NamedViews="namedViews"
@bind-SelectedNamedView="selectedNamedView"
TitleFromNamedView="titleFromNamedView">
<FilterTemplate Context="filterContext">
<HxInputNumber Label="MinimumItemId" @bind-Value="filterContext.MinimumLCID" />
<HxInputNumber Label="MaximumItemId" @bind-Value="filterContext.MaximumLCID" />
<HxInputText Label="Name" @bind-Value="filterContext.Name" />
<HxInputText Label="Phone" @bind-Value="filterContext.Phone" />
<HxInputNumber Label="Minimum salary" @bind-Value="filterContext.SalaryMin" Decimals="0" InputGroupStartText="$" />
<HxInputNumber Label="Maximum salary" @bind-Value="filterContext.SalaryMax" Decimals="0" InputGroupStartText="$" />
<HxInputText Label="Position" @bind-Value="filterContext.Position" />
<HxInputText Label="Location" @bind-Value="filterContext.Location" />
</FilterTemplate>
<CommandsTemplate>
<HxButton Text="New item" Color="ThemeColor.Primary" Icon="BootstrapIcon.PlusLg" OnClick="NewItemClicked" />
</CommandsTemplate>
<DataTemplate>
<HxGrid @ref="gridComponent"
ContentNavigationMode="GridContentNavigationMode.Pagination"
Responsive="true"
PageSize="10"
DataProvider="LoadDataItems"
@bind-SelectedDataItem="currentItem"
@bind-SelectedDataItem:after="HandleSelectedDataItemChanged">
<HxGrid @ref="gridComponent" TItem="EmployeeDto" DataProvider="GetGridData" PageSize="5" Responsive="true">
<Columns>
<HxGridColumn HeaderText="LCID" ItemTextSelector="@(item => item.LCID.ToString())" SortKeySelector="@(item => item.LCID)" IsDefaultSortColumn="true" />
<HxGridColumn HeaderText="DisplayName" ItemTextSelector="@(item => item.DisplayName)" SortKeySelector="@(item => item.DisplayName)" />
<HxGridColumn HeaderText="Name" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)" />
<HxGridColumn HeaderText="EnglishName" ItemTextSelector="@(item => item.EnglishName)" SortKeySelector="@(item => item.EnglishName)" />
<HxContextMenuGridColumn Context="item">
<HxContextMenu>
<HxContextMenuItem Text="Delete" OnClick="async () => await DeleteItemClicked(item)" ConfirmationQuestion="@($"Are you sure you want to delete {item.Name}?")" />
</HxContextMenu>
</HxContextMenuGridColumn>
<HxGridColumn HeaderText="Name" ItemTextSelector="employee => employee.Name" />
<HxGridColumn HeaderText="Phone" ItemTextSelector="employee => employee.Phone" />
<HxGridColumn HeaderText="Salary" ItemTextSelector="@(employee => employee.Salary.ToString("c0"))" />
<HxGridColumn HeaderText="Position" ItemTextSelector="employee => employee.Position" />
<HxGridColumn HeaderText="Location" ItemTextSelector="employee => employee.Location" />
</Columns>
</HxGrid>
</DataTemplate>
<DetailTemplate>
Edit: @currentItem?.LCID
</DetailTemplate>
</HxListLayout>

<HxSwitch @bind-Value="titleFromNamedView" Text="TitleFromNamedView" />
<HxSwitch @bind-Value="titleFromNamedView" Text="HxListLayout.TitleFromNamedView" />

@code {
[Inject] protected NavigationManager NavigationManager { get; set; }
private EmployeesFilterDto filterModel = new();
private HxGrid<EmployeeDto> gridComponent;

private EditableCultureInfo currentItem;
private FilterModelDto filterModel = new FilterModelDto();
private HxGrid<EditableCultureInfo> gridComponent;
private NamedView<FilterModelDto> selectedNamedView;
private IEnumerable<NamedView<EmployeesFilterDto>> namedViews;
private NamedView<EmployeesFilterDto> selectedNamedView;
private bool titleFromNamedView = true;

private IEnumerable<NamedView<FilterModelDto>> namedViews;

private List<EditableCultureInfo> localEditableCultureInfos = CultureInfo.GetCultures(CultureTypes.AllCultures).Select(c => new EditableCultureInfo()
{
LCID = c.LCID,
DisplayName = c.DisplayName,
Name = c.Name,
EnglishName = c.EnglishName
}).ToList();

protected override void OnInitialized()
{
namedViews = new List<NamedView<FilterModelDto>>()
namedViews = new List<NamedView<EmployeesFilterDto>>()
{
new NamedView<FilterModelDto>("Default view", () => new FilterModelDto()), // resets the filter
new NamedView<FilterModelDto>("Minimum = 1", () => filterModel with { MinimumLCID = 1 } ), // keep filter presets not affected by the view
new NamedView<FilterModelDto>("Minimum = 50", () => filterModel with { MinimumLCID = 50 }),
new NamedView<FilterModelDto>("Minimum = 100", () => filterModel with { MinimumLCID = 100 })
new NamedView<EmployeesFilterDto>("All employees", () => new EmployeesFilterDto()), // resets the filter
new NamedView<EmployeesFilterDto>("Prague employees", () => filterModel with { Location = "Prague" } ), // keep filter presets not affected by the view
new NamedView<EmployeesFilterDto>("High salary employees", () => filterModel with { SalaryMin = 20000 }),
};

selectedNamedView = namedViews.First(); // set first view selected on initial load
}

private Task<GridDataProviderResult<EditableCultureInfo>> LoadDataItems(GridDataProviderRequest<EditableCultureInfo> request)
{
IEnumerable<EditableCultureInfo> result = localEditableCultureInfos
.WhereIf(filterModel.MinimumLCID.HasValue, i => i.LCID >= filterModel.MinimumLCID)
.WhereIf(filterModel.MaximumLCID.HasValue, i => i.LCID <= filterModel.MaximumLCID)
.ToList();

return Task.FromResult(request.ApplyTo(result));
}

private async Task RefreshDataAsync()
{
await gridComponent.RefreshDataAsync();
}

private async Task DeleteItemClicked(EditableCultureInfo editableCultureInfo)
{
localEditableCultureInfos.Remove(editableCultureInfo);
await gridComponent.RefreshDataAsync();
}

private Task HandleSelectedDataItemChanged()
{
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}

private Task NewItemClicked()
{
currentItem = new();
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}

public record FilterModelDto
{
public int? MinimumLCID { get; set; }
public int? MaximumLCID { get; set; }
}

private record EditableCultureInfo
private async Task<GridDataProviderResult<EmployeeDto>> GetGridData(GridDataProviderRequest<EmployeeDto> request)
{
public int LCID { get; set; }
public string DisplayName { get; set; }
public string Name { get; set; }
public string EnglishName { get; set; }
return new GridDataProviderResult<EmployeeDto>()
{
Data = await DemoDataService.GetEmployeesDataFragmentAsync(filterModel, request.StartIndex, request.Count, request.CancellationToken),
TotalCount = await DemoDataService.GetEmployeesCountAsync(filterModel, request.CancellationToken)
};
}
}
}
Loading

0 comments on commit a7b6074

Please sign in to comment.