feat(TableFilter): redesign filter system

src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor

@@ -1,50 +1,10 @@
 @inherits FilterBase
 
-<Select Items="@Items" @bind-Value="@Value" OnSelectedItemChanged="_ => OnFilterValueChanged()"></Select>
+@if (IsHeaderRow)
+{
 
-@code {
-    private int Value = 10;
-
-    /// <summary>
-    /// OnInitialized 方法
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        if (TableFilter != null) TableFilter.ShowMoreButton = false;
-
-        Items = new SelectedItem[]
-        {
-            new SelectedItem { Value = "10", Text = "大于 10" },
-            new SelectedItem { Value = "50", Text = "大于 50" },
-            new SelectedItem { Value = "100", Text = "大于 100" }
-        };
-    }
-
-    /// <summary>
-    /// 重置过滤条件方法
-    /// </summary>
-    public override void Reset()
-    {
-        Value = 10;
-
-        StateHasChanged();
-    }
-
-    /// <summary>
-    /// 生成过滤条件方法
-    /// </summary>
-    /// <returns></returns>
-    public override FilterKeyValueAction GetFilterConditions()
-    {
-        var filter = new FilterKeyValueAction() { Filters = new() };
-        filter.Filters.Add(new FilterKeyValueAction()
-        {
-            FieldKey = FieldKey,
-            FieldValue = Value,
-            FilterAction = FilterAction.GreaterThan
-        });
-        return filter;
-    }
+}
+else
+{
+    <Select Items="@_items" @bind-Value="@Value"></Select>
 }

src/BootstrapBlazor.Server/Components/Components/CustomerFilter.razor.cs

@@ -0,0 +1,50 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// 
+/// </summary>
+public partial class CustomerFilter
+{
+    private int? Value;
+
+    private readonly IEnumerable<SelectedItem> _items = new SelectedItem[]
+    {
+        new() { Value = "", Text = "请选择 ..." },
+        new() { Value = "10", Text = "大于 10" },
+        new() { Value = "50", Text = "大于 50" },
+        new() { Value = "80", Text = "大于 80" }
+    };
+
+    /// <summary>
+    /// 重置过滤条件方法
+    /// </summary>
+    public override void Reset()
+    {
+        Value = null;
+        StateHasChanged();
+    }
+
+    /// <summary>
+    /// 生成过滤条件方法
+    /// </summary>
+    /// <returns></returns>
+    public override FilterKeyValueAction GetFilterConditions()
+    {
+        var filter = new FilterKeyValueAction() { Filters = [] };
+        if (Value != null)
+        {
+            filter.Filters.Add(new FilterKeyValueAction()
+            {
+                FieldKey = FieldKey,
+                FieldValue = Value.Value,
+                FilterAction = FilterAction.GreaterThan
+            });
+        }
+        return filter;
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor

@@ -46,7 +46,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["FilterTemplateTitle"]"
-           Introduction="@Localizer["FilterTemplateIntro"]" Name="CustomerFilter">
+           Introduction="@Localizer["FilterTemplateIntro"]" Name="CustomFilter">
     <section ignore>@((MarkupString)Localizer["TablesFilterTemplateDescription", ComponentSourceCodeUrl].Value)</section>
 
     <Table TItem="Foo"
@@ -65,7 +65,7 @@
             </TableColumn>
             <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <CustomerFilter></CustomerFilter>
+                    <Filter TFilter="CustomerFilter"></Filter>
                 </FilterTemplate>
             </TableColumn>
         </TableColumns>
@@ -81,12 +81,12 @@
            ShowSkeleton="true" ShowFilterHeader="true"
            OnQueryAsync="@OnQueryAsync">
         <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
-            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
-            <TableColumn @bind-Field="@context.Address" Sortable="true" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
+            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
+            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
             <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
             <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
-            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
+            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
         </TableColumns>
     </Table>
 </DemoBlock>
@@ -211,22 +211,22 @@
             <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
             <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter Items="_nameMultiFilterItems"></MultiFilter>
+                    <Filter TFilter="MultiFilter" FilterParameters="_multiFilterParameter1"></Filter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter OnGetItemsAsync="OnGetAddressItemsAsync"></MultiFilter>
+                    <Filter TFilter="MultiFilter" FilterParameters="_multiFilterParameter2"></Filter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Complete.ToString()!, i.Complete.ToString()!)).DistinctBy(i => i.Value)"></MultiFilter>
+                    <Filter TFilter="MultiFilter" FilterParameters="_multiFilterParameter3"></Filter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true">
                 <FilterTemplate>
-                    <MultiFilter ShowSearch="false" Items="Items.Select(i => new SelectedItem(i.Education.ToString()!, i.Education.ToString()!)).DistinctBy(i => i.Value)"></MultiFilter>
+                    <Filter TFilter="MultiFilter" FilterParameters="_multiFilterParameter4"></Filter>
                 </FilterTemplate>
             </TableColumn>
             <TableColumn @bind-Field="@context.Count" Width="150" Sortable="true" />

src/BootstrapBlazor.Server/Components/Samples/Table/TablesFilter.razor.cs

@@ -29,7 +29,10 @@ public partial class TablesFilter
     [NotNull]
     private Table<Foo>? TableSetFilter { get; set; }
 
-    private IEnumerable<SelectedItem> _nameMultiFilterItems = default!;
+    private readonly Dictionary<string, object> _multiFilterParameter1 = new();
+    private readonly Dictionary<string, object> _multiFilterParameter2 = new();
+    private readonly Dictionary<string, object> _multiFilterParameter3 = new();
+    private readonly Dictionary<string, object> _multiFilterParameter4 = new();
 
     /// <summary>
     /// OnInitialized 方法
@@ -39,7 +42,18 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         Items = Foo.GenerateFoo(FooLocalizer);
-        _nameMultiFilterItems = Items.Select(i => new SelectedItem(i.Name!, i.Name!)).DistinctBy(i => i.Value);
+        var items1 = Items.Select(i => new SelectedItem(i.Name!, i.Name!)).DistinctBy(i => i.Value);
+        _multiFilterParameter1.Add(nameof(MultiFilter.Items), items1);
+
+        _multiFilterParameter2.Add(nameof(MultiFilter.OnGetItemsAsync), new Func<Task<List<SelectedItem>>>(OnGetAddressItemsAsync));
+
+        var items3 = Items.Select(i => new SelectedItem(i.Complete.ToString(), i.Complete.ToString())).DistinctBy(i => i.Value);
+        _multiFilterParameter3.Add(nameof(MultiFilter.Items), items3);
+        _multiFilterParameter3.Add(nameof(MultiFilter.ShowSearch), false);
+
+        var items4 = Items.Select(i => new SelectedItem(i.Education.ToString()!, i.Education.ToString()!)).DistinctBy(i => i.Value);
+        _multiFilterParameter4.Add(nameof(MultiFilter.Items), items4);
+        _multiFilterParameter4.Add(nameof(MultiFilter.ShowSearch), false);
     }
 
     private async Task<List<SelectedItem>> OnGetAddressItemsAsync()

src/BootstrapBlazor/Components/Filters/BoolFilter.razor

@@ -3,9 +3,10 @@
 
 @if (IsHeaderRow)
 {
-    <Select Items="@Items" @bind-Value="@Value" OnSelectedItemChanged="_ => OnFilterValueChanged()" IsPopover="true"></Select>
+    <Select Items="@Items" @bind-Value="@_value" ShowLabel="false" SkipValidate="true"
+            OnSelectedItemChanged="_ => OnFilterAsync()" IsPopover="true"></Select>
 }
 else
 {
-    <Select Items="@Items" @bind-Value="@Value"></Select>
+    <Select Items="@Items" @bind-Value="@_value" ShowLabel="false" SkipValidate="true"></Select>
 }

src/BootstrapBlazor/Components/Filters/BoolFilter.razor.cs

@@ -3,33 +3,20 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-using Microsoft.Extensions.Localization;
-
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 布尔类型过滤条件
+/// BoolFilter component is used for boolean value filtering in table column.
 /// </summary>
 public partial class BoolFilter
 {
-    private string Value { get; set; } = "";
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<TableFilter>? Localizer { get; set; }
-
     /// <summary>
-    /// <inheritdoc/>
+    /// Gets or sets the filter candidate items. It is recommended to use static data to avoid performance loss.
     /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
+    [Parameter]
+    public IEnumerable<SelectedItem>? Items { get; set; }
 
-        if (TableFilter != null)
-        {
-            TableFilter.ShowMoreButton = false;
-        }
-    }
+    private string? _value;
 
     /// <summary>
     /// <inheritdoc/>
@@ -38,20 +25,20 @@ protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
-        Items ??= new SelectedItem[]
-        {
-            new("", Localizer["BoolFilter.AllText"].Value),
-            new("true", Localizer["BoolFilter.TrueText"].Value),
-            new("false", Localizer["BoolFilter.FalseText"].Value)
-        };
+        Items ??=
+        [
+            new SelectedItem("", Localizer["BoolFilter.AllText"].Value),
+            new SelectedItem("true", Localizer["BoolFilter.TrueText"].Value),
+            new SelectedItem("false", Localizer["BoolFilter.FalseText"].Value)
+        ];
     }
 
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     public override void Reset()
     {
-        Value = "";
+        _value = null;
         StateHasChanged();
     }
 
@@ -61,13 +48,13 @@ public override void Reset()
     /// <returns></returns>
     public override FilterKeyValueAction GetFilterConditions()
     {
-        var filter = new FilterKeyValueAction() { Filters = [] };
-        if (!string.IsNullOrEmpty(Value))
+        var filter = new FilterKeyValueAction { Filters = [] };
+        if (!string.IsNullOrEmpty(_value))
         {
-            filter.Filters.Add(new FilterKeyValueAction()
+            filter.Filters.Add(new FilterKeyValueAction
             {
                 FieldKey = FieldKey,
-                FieldValue = Value == "true",
+                FieldValue = _value == "true",
                 FilterAction = FilterAction.Equal
             });
         }
@@ -79,14 +66,10 @@ public override FilterKeyValueAction GetFilterConditions()
     /// </summary>
     public override async Task SetFilterConditionsAsync(FilterKeyValueAction filter)
     {
-        var first = filter.Filters?.FirstOrDefault() ?? filter;
+        var first = filter.Filters.FirstOrDefault() ?? filter;
         if (first.FieldValue is bool value)
         {
-            Value = value ? "true" : "false";
-        }
-        else if (first.FieldValue is null)
-        {
-            Value = "";
+            _value = value ? "true" : "false";
         }
         await base.SetFilterConditionsAsync(filter);
     }

src/BootstrapBlazor/Components/Filters/DateTimeFilter.razor

@@ -1,25 +1,23 @@
 @namespace BootstrapBlazor.Components
-@inherits FilterBase
+@inherits MultipleFilterBase
 
 @if (IsHeaderRow)
 {
     <div class="@FilterRowClassString">
-        <DateTimePicker class="is-filter" @bind-Value="Value1" OnValueChanged="_ => OnFilterValueChanged()"></DateTimePicker>
-        <FilterButton Items="Items" @bind-Value="Action1" OnSelectedItemChanged="_ => OnFilterValueChanged()" OnClearFilter="OnClearFilter" />
+        <DateTimePicker class="is-filter" @bind-Value="_value1" OnValueChanged="_ => OnFilterAsync()"
+                        ShowLabel="false" SkipValidate="true"></DateTimePicker>
+        <FilterButton Items="Items" @bind-Value="_action1" OnSelectedItemChanged="_ => OnFilterAsync()" OnClearFilter="OnClearFilter"></FilterButton>
     </div>
 }
 else
 {
-    <Select Items="Items" @bind-Value="Action1"></Select>
-
-    <DateTimePicker class="is-filter" @bind-Value="Value1"></DateTimePicker>
+    <Select Items="Items" @bind-Value="_action1" ShowLabel="false" SkipValidate="true"></Select>
+    <DateTimePicker class="is-filter" @bind-Value="_value1" ShowLabel="false" SkipValidate="true"></DateTimePicker>
 
     @if (Count > 0)
     {
         <FilterLogicItem @bind-Logic="Logic"></FilterLogicItem>
-
-        <Select Items="Items" @bind-Value="Action2"></Select>
-
-        <DateTimePicker class="is-filter" @bind-Value="Value2"></DateTimePicker>
+        <Select Items="Items" @bind-Value="_action2" ShowLabel="false" SkipValidate="true"></Select>
+        <DateTimePicker class="is-filter" @bind-Value="_value2" ShowLabel="false" SkipValidate="true"></DateTimePicker>
     }
 }