Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HxMultiSelect] filtering and select all #617

Merged
merged 37 commits into from
Oct 22, 2023
Merged

[HxMultiSelect] filtering and select all #617

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
fcce455
Added HxMultiSelect filtering
Oct 8, 2023
64ff133
Moved filtering box into dropdown
Oct 10, 2023
ad7f2ef
Reverted styling changes
Oct 10, 2023
e725c0c
Changed filter text and auto-focusing
Oct 10, 2023
74e58a5
Added empty template and changed hide/show handlers
Oct 10, 2023
a659d9f
Added default filter predicate
Oct 10, 2023
8632672
Changed filtering enablement property
Oct 10, 2023
3d48a11
Added empty template
Oct 10, 2023
5612d24
Changed default filter to use IsNullOrEmpty
Oct 10, 2023
6769c73
Added select all
Oct 10, 2023
dfb9f91
Fixed default select all text value
Oct 10, 2023
c99868d
Removed unused code
Oct 18, 2023
ec53d47
Renamed function
Oct 18, 2023
3e04982
Added string localisation to select all default text
Oct 18, 2023
1466054
Added select all default text to resources
Oct 18, 2023
5e92a17
Removed the unused shouldToggle option
Oct 18, 2023
1093cc6
Changed default select all text to '-select all-'
Oct 18, 2023
6553958
Empty template now has a default template and text parameter. Fixed l…
Oct 18, 2023
55a4cec
Added AllowFiltering and AllowSelectAll as settings
Oct 18, 2023
1ce4766
Removed OnShown and OnHidden event callbacks
Oct 18, 2023
4b3d6a4
Changed default ClearFilterOnHide to true
Oct 18, 2023
e3fe12e
Added ClearFilterOnHide=false to test example
Oct 18, 2023
c0bdb48
Added documentation
Oct 18, 2023
1b8cf70
HxMultiSelect_Demo_TemplatedFiltering - project coding standards - op…
hakenr Oct 19, 2023
3794959
HxMultiSelect - FilterPredicate doc adjustment
hakenr Oct 19, 2023
48c6b59
Removed all SelectAllChanged event callbacks
Oct 19, 2023
c800ecb
Merge branch 'feature/HxMultiSelect-filtering' of https://github.com/…
Oct 19, 2023
a57f860
Added filter search and clear icons
Oct 19, 2023
159c1d2
Reworked select all item selection callbacks
Oct 20, 2023
b2de43b
Wrapped select all button in a li
Oct 20, 2023
e54ae00
Added li around empty filter result
Oct 20, 2023
bef368a
Added padding to filter input.
Oct 20, 2023
34e7033
Filter input now respects parent input size
Oct 20, 2023
5696023
HxMultiSelect - dispose fix
hakenr Oct 22, 2023
ab61f92
HxMultiSelect - doc & demos tuning
hakenr Oct 22, 2023
1144ed2
HxMultiSelect - code-cleanup
hakenr Oct 22, 2023
3ab65e2
HxMultiSelect - localizations
hakenr Oct 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 45 additions & 22 deletions BlazorAppTest/Pages/HxMultiSelectTest.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,61 @@
@page "/HxMultiSelectTest"
@using System.Globalization

<h1>HxCheckboxList</h1>
<h1>HxMultiSelect</h1>

<HxSwitch Text="Enabled" @bind-Value="@enabled" />

<EditForm Model="@model">
<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Small" />

<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" />
<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />

<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />

<!-- Multi-select with filtering -->
<HxMultiSelect TItem="CultureInfo"
TValue="string"
Label="Cultures with filtering enabled"
EmptyText="-- choose here --"
TextSelector="@(item => item.EnglishName)"
ValueSelector="@(item => item.EnglishName)"
Data="@data"
@bind-Value="@model.CultureInfos"
NullDataText="Loading languages..."
AllowFiltering="true"
AllowSelectAll="true"
SelectAllText="Select all cultures"
Enabled="@enabled">
<EmptyTemplate>
<span class="p-2">Couldn't find any matching cultures</span>
</EmptyTemplate>
</HxMultiSelect>
</EditForm>

<p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>

@code
{
private bool enabled = true;
private Model model = new Model();
private List<CultureInfo> data;

protected override async Task OnParametersSetAsync()
{
await base.OnParametersSetAsync();
await Task.Delay(3000);

data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
.OrderBy(item => item.EnglishName)
.Take(100)
.OrderByDescending(i => i.ToString()) // sorting test
.ToList();
}

private class Model
{
public List<string> CultureInfos { get; set; }
}
private bool enabled = true;
private Model model = new Model();
private List<CultureInfo> data;

private HxMultiSelect<string, CultureInfo> hxMultiSelectFilter;

protected override async Task OnParametersSetAsync()
{
await base.OnParametersSetAsync();
await Task.Delay(3000);

data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
.OrderBy(item => item.EnglishName)
.Take(100)
.OrderByDescending(i => i.ToString()) // sorting test
.ToList();
}

private class Model
{
public List<string> CultureInfos { get; set; }
}
}
68 changes: 68 additions & 0 deletions ...r.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2726,11 +2726,59 @@
Input-group at the end of the input.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AllowFiltering">
<summary>
Enables filtering capabilities.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnShown">
<summary>
This event is fired when a dropdown element has been made visible to the user.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnHidden">
<summary>
This event is fired when a dropdown element has been hidden from the user.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.EmptyTemplate">
<summary>
Template that defines what should be rendered in case of empty items.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AdditionalAttributes">
<summary>
Additional attributes to be splatted onto an underlying HTML element.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InvokeOnHiddenAsync(System.String)">
<summary>
Triggers the <see cref="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnHidden"/> event. Allows interception of the event in derived components.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InvokeOnShownAsync(System.String)">
<summary>
Triggers the <see cref="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnShown"/> event. Allows interception of the event in derived components.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnAfterRenderAsync(System.Boolean)">
<inheritdoc cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRenderAsync(System.Boolean)" />
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.HandleJsHidden">
<summary>
Receives notification from JavaScript when item is hidden.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.HideAsync">
<summary>
Collapses the item.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.ShowAsync">
<summary>
Expands the item.
</summary>
</member>
<member name="T:Havit.Blazor.Components.Web.Bootstrap.Internal.IFormValueComponent">
<summary>
Represents properties (and methods) of a component rendering a form value (ie. form inputs).
Expand Down Expand Up @@ -4384,6 +4432,26 @@
Input-group at the end of the input.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.AllowFiltering">
<summary>
Enables filtering capabilities.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.OnShown">
<summary>
This event is fired when a dropdown element has been made visible to the user.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.OnHidden">
<summary>
This event is fired when a dropdown element has been hidden from the user.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.EmptyTemplate">
<summary>
Template that defines what should be rendered in case of empty items.
</summary>
</member>
<member name="M:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FocusAsync">
<inheritdoc cref="M:Havit.Blazor.Components.Web.Bootstrap.HxInputBase`1.FocusAsync"/>
</member>
Expand Down
43 changes: 41 additions & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,35 @@ public class HxMultiSelect<TValue, TItem> : HxInputBase<List<TValue>>, IInputWit
/// </summary>
[Parameter] public RenderFragment InputGroupEndTemplate { get; set; }

/// <summary>
/// Enables filtering capabilities.
/// </summary>
[Parameter] public bool AllowFiltering { get; set; }

[Parameter] public Func<TItem, string, bool> FilterPredicate { get; set; }

[Parameter] public bool ClearFilterOnHide { get; set; }

/// <summary>
/// This event is fired when a dropdown element has been made visible to the user.
/// </summary>
[Parameter] public EventCallback<string> OnShown { get; set; }

/// <summary>
/// This event is fired when a dropdown element has been hidden from the user.
/// </summary>
[Parameter] public EventCallback<string> OnHidden { get; set; }

/// <summary>
/// Template that defines what should be rendered in case of empty items.
/// </summary>
[Parameter] public RenderFragment EmptyTemplate { get; set; }

[Parameter] public bool AllowSelectAll { get; set; }

[Parameter] public EventCallback<bool> SelectAllChanged { get; set; }

[Parameter] public string SelectAllText { get; set; }

private List<TItem> itemsToRender;
private HxMultiSelectInternal<TValue, TItem> hxMultiSelectInternalComponent;
Expand Down Expand Up @@ -181,13 +210,22 @@ protected override void BuildRenderInput(RenderTreeBuilder builder)
builder.AddAttribute(105, nameof(HxMultiSelectInternal<TValue, TItem>.ItemsToRender), itemsToRender);
builder.AddAttribute(106, nameof(HxMultiSelectInternal<TValue, TItem>.TextSelector), TextSelector);
builder.AddAttribute(107, nameof(HxMultiSelectInternal<TValue, TItem>.ValueSelector), ValueSelector);
builder.AddAttribute(108, nameof(HxMultiSelectInternal<TValue, TItem>.Value), Value);
builder.AddAttribute(108, nameof(HxMultiSelectInternal<TValue, TItem>.SelectedValues), Value);
builder.AddAttribute(109, nameof(HxMultiSelectInternal<TValue, TItem>.NullDataText), NullDataText);
builder.AddAttribute(110, nameof(HxMultiSelectInternal<TValue, TItem>.ItemSelectionChanged), EventCallback.Factory.Create<HxMultiSelectInternal<TValue, TItem>.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.Checked, args.Item)));
builder.AddAttribute(111, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupStartText), InputGroupStartText);
builder.AddAttribute(112, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupStartTemplate), InputGroupStartTemplate);
builder.AddAttribute(113, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupEndText), InputGroupEndText);
builder.AddAttribute(114, nameof(HxMultiSelectInternal<TValue, TItem>.InputGroupEndTemplate), InputGroupEndTemplate);
builder.AddAttribute(115, nameof(HxMultiSelectInternal<TValue, TItem>.AllowFiltering), AllowFiltering);
builder.AddAttribute(116, nameof(HxMultiSelectInternal<TValue, TItem>.FilterPredicate), FilterPredicate);
builder.AddAttribute(117, nameof(HxMultiSelectInternal<TValue, TItem>.OnHidden), OnHidden);
builder.AddAttribute(118, nameof(HxMultiSelectInternal<TValue, TItem>.OnShown), OnShown);
builder.AddAttribute(119, nameof(HxMultiSelectInternal<TValue, TItem>.ClearFilterOnHide), ClearFilterOnHide);
builder.AddAttribute(120, nameof(HxMultiSelectInternal<TValue, TItem>.EmptyTemplate), EmptyTemplate);
builder.AddAttribute(121, nameof(HxMultiSelectInternal<TValue, TItem>.AllowSelectAll), AllowSelectAll);
builder.AddAttribute(122, nameof(HxMultiSelectInternal<TValue, TItem>.SelectAllChanged), SelectAllChanged);
builder.AddAttribute(123, nameof(HxMultiSelectInternal<TValue, TItem>.SelectAllText), SelectAllText);

builder.AddMultipleAttributes(200, this.AdditionalAttributes);

Expand All @@ -202,7 +240,8 @@ private string GetInputText()
{
return InputText;
}
else if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null))

if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null))
{
return CurrentValueAsString;
}
Expand Down
93 changes: 63 additions & 30 deletions Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,22 @@
bool enabled = EnabledEffective && (ItemsToRender != null);
}

<div class="hx-multi-select dropdown" role="listbox">
<div class="@CssClassHelper.Combine((HasInputGroupsEffective ? "input-group" : null), InputGroupCssClass)" data-bs-toggle="@(enabled ? "dropdown" : null)" data-bs-auto-close="outside">
<div @ref="elementReference" class="hx-multi-select dropdown" role="listbox">
<div class="@CssClassHelper.Combine((HasInputGroupsEffective ? "input-group" : null), InputGroupCssClass)" aria-expanded="@isShown" data-bs-toggle="@(enabled ? "dropdown" : null)" data-bs-auto-close="outside">
@if (InputGroupStartText is not null)
{
<span class="input-group-text">@InputGroupStartText</span>
}

@InputGroupStartTemplate

<input
@ref="inputElement"
type="text"
id="@InputId"
class="@InputCssClass"
value="@(((ItemsToRender == null) && !String.IsNullOrEmpty(NullDataText)) ? NullDataText : InputText)"
disabled="@(!enabled)"
readonly="true"
@attributes="this.AdditionalAttributes" />

<input type="text"
id="@InputId"
class="@InputCssClass"
value="@(((ItemsToRender == null) && !String.IsNullOrEmpty(NullDataText)) ? NullDataText : InputText)"
disabled="@(!enabled)"
readonly="true"
@attributes="this.AdditionalAttributes" />

@InputGroupEndTemplate

Expand All @@ -36,25 +34,60 @@
<ul class="dropdown-menu"> @* Must be always rendered otherwise does not work after disable->enabled scenario *@
@if (enabled)
{
for (int i = 0; i < ItemsToRender.Count; i++)
if (AllowFiltering)
{
<input @ref="filterInputReference"
hakenr marked this conversation as resolved.
Show resolved Hide resolved
id="@($"{InputId}_filter")"
type="text"
class="@CssClassHelper.Combine("form-control")"
hakenr marked this conversation as resolved.
Show resolved Hide resolved
autocomplete="false"
value="@filterText"
@oninput="HandleInputChangedAsync"
@onclick:stopPropagation
onfocusin="this.select()" />
}

var filteredItems = GetFilteredItems();
if (filteredItems.Count <= 0)
{
@EmptyTemplate
}
else
{
string checkboxElementId = InputId + "_" + i.ToString();

var item = ItemsToRender[i];
TValue value = SelectorHelpers.GetValue<TItem, TValue>(ValueSelector, item);

bool itemSelected = Value?.Contains(value) ?? false;

<li>
<button type="button" class="dropdown-item" role="option" @onclick="async () => await HandleItemSelectionChangedAsync(!itemSelected, item)">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="@checkboxElementId" checked="@itemSelected" tabindex="-1" />
<label class="form-check-label" for="@checkboxElementId" @onclick:preventDefault >
@SelectorHelpers.GetText(TextSelector, item)
</label>
</div>
</button>
</li>
if (AllowSelectAll)
{
<li>
<button type="button" class="dropdown-item" role="option" @onclick="HandleSelectAllClickedAsync">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="@($"{InputId}_selectall")" checked="@selectAll" tabindex="-1" />
<label class="form-check-label" for="@($"{InputId}_selectall")" @onclick:preventDefault>
@(SelectAllText ?? "-- select all --")
hakenr marked this conversation as resolved.
Show resolved Hide resolved
</label>
</div>
</button>
</li>
}

for (var i = 0; i < filteredItems.Count; i++)
{
string checkboxElementId = InputId + "_" + i.ToString();

var item = filteredItems[i];
TValue value = SelectorHelpers.GetValue<TItem, TValue>(ValueSelector, item);

bool itemSelected = DoSelectedValuesContainValue(value);

<li>
<button type="button" class="dropdown-item" role="option" @onclick="async () => await HandleItemSelectionChangedAsync(!itemSelected, item)">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="@checkboxElementId" checked="@itemSelected" tabindex="-1" />
<label class="form-check-label" for="@checkboxElementId" @onclick:preventDefault>
@SelectorHelpers.GetText(TextSelector, item)
</label>
</div>
</button>
</li>
}
}
}
</ul>
Expand Down
Loading
Loading