test(Table): add AdvanceSortDialog unit test (#2234)

* refactor: 格式化代码
* Table组件增加高级排序(自定义多列排序)功能

* fix: 修复删除的高级查询按钮

* feat: 增加高级搜索按钮图标

* refactor: 格式化代码

* doc: 格式化示例

* refactor: 更改单词拼写错误

* refactor: 更改组件名称

* doc: 更新示例文档

* refactor: TableSortItem 类

* test: 改造 TableSortItem

* test: 增加单元测试

* test: 更新单元测试

* doc: 更新示例文档说明

* doc: 增加 ShowAdvancedSort 参数说明

* chore: bump version 7.11.1-beta02

* chore: 更新打包文件

* chore: 更新编译配置文件

* test: 更新单元测试

src/BootstrapBlazor.Shared/Locales/en.json

@@ -4728,6 +4728,7 @@
     "SortableAttr": "Sort or not",
     "DefaultSortAttr": "Is the default sort sequence",
     "DefaultSortOrderAttr": "Default collation",
+    "ShowAdvancedSortAttr": "Whether to show the Advanced Sort button",
     "TextAttr": "Header Displays Text",
     "TextEllipsisAttr": "Whether to omit text when exceeded",
     "TemplateAttr": "Template",
@@ -5279,6 +5280,8 @@
     "OnSortTitle": "Dynamic multi-column sorting",
     "OnSortIntro": "Set <code>OnSort</code> Parameters",
     "OnSortP": "When clicking the column header to sort, the component calls the<code> OnSort </code>callback internally, where its return value can be set according to the business logic to achieve dynamic multi-column sorting, in this case, when clicking the <b>time</b> column header for positive order sorting, use <code>DateTime,Count</code>  internally, use<code>DateTime desc, Count desc</code>when Count reverse order",
+    "OnAdvancedSortTitle": "Custom sort",
+    "OnAdvancedSortIntro": "By setting <code>ShowAdvancedSort=\"true\"</code> to show the <b>Advanced Sort</b> button.",
     "SetFilterInCodeTitle": "Set filters by code",
     "SetFilterInCodeIntro": "Example shows how to set filters through code",
     "SetFilterInCodeButtonText1": "Name contains 01",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -4728,6 +4728,7 @@
     "SortableAttr": "是否排序",
     "DefaultSortAttr": "是否为默认排序列",
     "DefaultSortOrderAttr": "默认排序规则",
+    "ShowAdvancedSortAttr": "是否显示高级排序按钮",
     "TextAttr": "表头显示文字",
     "TextEllipsisAttr": "是否文本超出时省略",
     "TemplateAttr": "模板",
@@ -5279,6 +5280,8 @@
     "OnSortTitle": "动态多列排序",
     "OnSortIntro": "设置 <code>OnSort</code> 参数",
     "OnSortP": "点击列头进行排序时，组件内部调用 <code>OnSort</code> 回调，可以在此处根据业务逻辑设置其返回值即可实现动态多列排序功能，本例中点击 <b>时间</b> 列头进行正序排序时，内部使用 <code>DateTime, Count</code> 倒序时使用 <code>DateTime desc, Count desc</code>",
+    "OnAdvancedSortTitle": "自定义排序",
+    "OnAdvancedSortIntro": "通过设置 <code>ShowAdvancedSort=\"true\"</code> 显示 <b>高级排序</b> 按钮，通过自定义条件进行多列排序操作",
     "SetFilterInCodeTitle": "通过代码设置过滤条件",
     "SetFilterInCodeIntro": "示例展示如何通过代码设置过滤条件",
     "SetFilterInCodeButtonText1": "名称包含01",

src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs

@@ -170,7 +170,7 @@ private async Task OnResultDialogClick()
         var result = await DialogService.ShowModal<ResultDialogDemo>(new ResultDialogOption()
         {
             Title = "Modal popup with return value",
-            ComponentParamters = new Dictionary<string, object>
+            ComponentParameters = new Dictionary<string, object>
             {
                 [nameof(ResultDialogDemo.Value)] = DemoValue1,
                 [nameof(ResultDialogDemo.ValueChanged)] = EventCallback.Factory.Create<int>(this, v => DemoValue1 = v)
@@ -292,7 +292,7 @@ private async Task OnEmailButtonClick()
             BodyContext = new ResultDialogDemo2.FooContext() { Count = 10, Emails = EmailInputValue },
             ButtonYesText = Localizer["EmailDialogButtonYes"],
             ButtonYesIcon = "fa-solid fa-magnifying-glass",
-            ComponentParamters = new Dictionary<string, object>
+            ComponentParameters = new Dictionary<string, object>
             {
                 [nameof(ResultDialogDemo2.Emails)] = Emails,
                 [nameof(ResultDialogDemo2.EmailsChanged)] = EventCallback.Factory.Create<IEnumerable<string>>(this, v => Emails = v)

src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs

@@ -209,6 +209,14 @@ private void OnClick()
             DefaultValue = "Unset"
         },
         new()
+        {
+            Name = "ShowAdvancedSort",
+            Description = Localizer["ShowAdvancedSortAttr"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "Text",
             Description = Localizer["TextAttr"],

src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor

@@ -118,7 +118,6 @@
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true" IsMultipleSelect="true"
            ShowSkeleton="true" SortString="SortList"
-           ShowToolbar="true" ShowDefaultButtons="false" ShowAdvancedSort="true"
            OnQueryAsync="@OnQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
@@ -147,6 +146,23 @@
     </Table>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["OnAdvancedSortTitle"]"
+           Introduction="@Localizer["OnAdvancedSortIntro"]"
+           Name="ShowAdvancedSort">
+    <Table TItem="Foo"
+           IsPagination="true" PageItemsSource="@PageItemsSource"
+           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+           ShowSkeleton="true" ShowToolbar="true" ShowAdvancedSort="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.Count" Width="100" Sortable="true" />
+        </TableColumns>
+    </Table>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["SetFilterInCodeTitle"]"
            Introduction="@Localizer["SetFilterInCodeIntro"]"
            Name="SetFilterInCode">

src/BootstrapBlazor.Shared/Samples/Table/TablesFilter.razor.cs

@@ -47,13 +47,13 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
         // 排序标记
         var isSorted = false;
 
-
         //处理高级排序
         if (options.AdvancedSortList.Any())
         {
             items = items.Sort(options.AdvancedSortList);
             isSorted = true;
         }
+
         // 此段代码可不写，组件内部自行处理
         if (options.SortName == nameof(Foo.DateTime) && options.SortList != null)
         {

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.11.1-beta01</Version>
+    <Version>7.11.1-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Dialog/ResultDialogOption.cs

@@ -75,7 +75,18 @@ public ResultDialogOption()
     /// <summary>
     /// 获得/设置 组件参数集合
     /// </summary>
-    public Dictionary<string, object>? ComponentParamters { get; set; }
+    [Obsolete("已过期，请使用 ComponentParameters 代替 Please use ComponentParameters")]
+    [ExcludeFromCodeCoverage]
+    public Dictionary<string, object>? ComponentParamters
+    {
+        get => ComponentParameters;
+        set => ComponentParameters = value;
+    }
+
+    /// <summary>
+    /// 获得/设置 组件参数集合
+    /// </summary>
+    public Dictionary<string, object>? ComponentParameters { get; set; }
 
     /// <summary>
     /// 获得/设置 模态弹窗返回值任务实例

src/BootstrapBlazor/Components/Table/Table.razor

@@ -66,7 +66,7 @@
                     {
                         @TableExtensionToolbarBeforeTemplate
                     }
-                    @if (ShowAdvancedSearch)//S_ADD: 高级排序按钮
+                    @if (ShowAdvancedSort)
                     {
                         <Button class="@AdvancedSortClass" Icon="@AdvancedSortButtonIcon" OnClickWithoutRender="ShowSortDialog">
                             <span class="d-none d-sm-inline-block">@AdvancedSortButtonText</span>
@@ -170,6 +170,10 @@
                                         <span class="d-none d-sm-inline-block">@ResetSearchButtonText</span>
                                     </Button>
                                 }
+                                @if (ShowAdvancedSearch)
+                                {
+                                    @RenderAdvanceSearchButton
+                                }
                             </div>
                         }
                         else if (ShowAdvancedSearch)

src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs

@@ -562,8 +562,7 @@ private QueryPageOptions BuildQueryPageOptions()
         queryOption.Searches.AddRange(GetSearches());
         queryOption.AdvanceSearches.AddRange(GetAdvanceSearches());
         queryOption.CustomerSearches.AddRange(GetCustomerSearches());
-
-        queryOption.AdvancedSortList.AddRange(GetAdvancedSortList()); //S_ADD:传递高级排序的字段列表
+        queryOption.AdvancedSortList.AddRange(GetAdvancedSortList());
 
         if (!string.IsNullOrEmpty(SortString))
         {

src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs

@@ -343,20 +343,19 @@ public partial class Table<TItem>
     [NotNull]
     public string? DeleteButtonToastResultContent { get; set; }
 
-
     /// <summary>
     /// 获得/设置 高级排序按钮文本
     /// </summary>
     [Parameter]
     [NotNull]
-    public string? AdvancedSortButtonText { get; set; }//S_ADD:高级排序按钮文本
+    public string? AdvancedSortButtonText { get; set; }
 
     /// <summary>
     /// 获得/设置 高级排序弹窗文本
     /// </summary>
     [Parameter]
     [NotNull]
-    public string? AdvancedSortModalTitle { get; set; }//S_ADD:高级排序弹窗文本
+    public string? AdvancedSortModalTitle { get; set; }
 
     [Inject]
     [NotNull]
@@ -420,7 +419,7 @@ private void OnInitLocalization()
         CopyColumnTooltipText ??= Localizer[nameof(CopyColumnTooltipText)];
         CopyColumnCopiedTooltipText ??= Localizer[nameof(CopyColumnCopiedTooltipText)];
 
-        AdvancedSortButtonText ??= Localizer[nameof(AdvancedSortButtonText)]; //S_ADD:高级排序按钮文本
-        AdvancedSortModalTitle ??= Localizer[nameof(AdvancedSortModalTitle)];//S_ADD:高级排序弹窗文本
+        AdvancedSortButtonText ??= Localizer[nameof(AdvancedSortButtonText)];
+        AdvancedSortModalTitle ??= Localizer[nameof(AdvancedSortModalTitle)];
     }
 }

src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs

@@ -88,8 +88,8 @@ protected Func<Task> OnClickHeader(ITableColumn col) => async () =>
 
         SortName = col.GetFieldName();
 
-        //清除高级排序 (保证点击Header排序的优先级最高)
-        AdvancedSortItems.Clear(); //S_ADD:
+        // 清除高级排序 (保证点击 Header 排序的优先级最高)
+        AdvancedSortItems.Clear();
 
         // 通知 Table 组件刷新数据
         await InternalOnSortAsync(SortName, SortOrder);
@@ -423,20 +423,19 @@ string GetFixedHeaderStyleString() => IsFixedHeader
         .AddClass(SortIconDesc, SortName == fieldName && SortOrder == SortOrder.Desc)
         .Build();
 
-    //S_ADD:高级排序相关
-    #region AdvancedSort
+    #region Advanced Sort
     /// <summary>
     /// 获得 高级排序样式
     /// </summary>
     protected string? AdvancedSortClass => CssBuilder.Default("btn btn-secondary")
-        .AddClass("btn-info", AdvancedSortItems.Any)
+        .AddClass("btn-info", AdvancedSortItems.Any())
         .Build();
 
     /// <summary>
     /// 获得/设置 是否显示高级排序按钮 默认 false 不显示 />
     /// </summary>
     [Parameter]
-    public bool ShowAdvancedSort { get; set; } = false;
+    public bool ShowAdvancedSort { get; set; }
 
     /// <summary>
     /// 获得/设置 高级排序按钮图标
@@ -460,30 +459,30 @@ string GetFixedHeaderStyleString() => IsFixedHeader
     /// 获得/设置 高级排序框是否显示最大化按钮 默认 false 不显示
     /// </summary>
     [Parameter]
-    public bool AdvancedSortDialogShowMaximizeButton { get; set; } = false;
+    public bool AdvancedSortDialogShowMaximizeButton { get; set; }
 
     /// <summary>
-    /// 获得/设置 高级排序，默认为 empty
+    /// 获得/设置 高级排序，默认为 Empty
     /// </summary>
     [Parameter]
-    public List<SortItem> AdvancedSortItems { get; set; } = new();
+    public List<TableSortItem> AdvancedSortItems { get; set; } = new();
 
     /// <summary>
     /// 高级排序按钮点击时调用此方法
     /// </summary>
     private async Task ShowSortDialog()
     {
-        var result = await DialogService.ShowModal<AdvancedSort>(new ResultDialogOption
+        var result = await DialogService.ShowModal<TableAdvancedSortDialog>(new ResultDialogOption
         {
             Title = AdvancedSortModalTitle,
             Size = AdvancedSortDialogSize,
-            IsDraggable=AdvancedSortDialogIsDraggable,
+            IsDraggable = AdvancedSortDialogIsDraggable,
             ShowMaximizeButton = AdvancedSortDialogShowMaximizeButton,
-            ComponentParamters = new Dictionary<string, object>
+            ComponentParameters = new Dictionary<string, object>
             {
-                [nameof(AdvancedSort.Value)] = AdvancedSortItems,
-                [nameof(AdvancedSort.ValueChanged)] = EventCallback.Factory.Create<List<SortItem>>(this, v => AdvancedSortItems = v),
-                [nameof(AdvancedSort.SortableFields)] = Columns.Where(p => p.Sortable).Select(p => new SelectedItem(p.GetFieldName(), p.GetDisplayName()))
+                [nameof(TableAdvancedSortDialog.Value)] = AdvancedSortItems,
+                [nameof(TableAdvancedSortDialog.ValueChanged)] = EventCallback.Factory.Create<List<TableSortItem>>(this, v => AdvancedSortItems = v),
+                [nameof(TableAdvancedSortDialog.Items)] = Columns.Where(p => p.Sortable).Select(p => new SelectedItem(p.GetFieldName(), p.GetDisplayName()))
             }
         });
         if (result == DialogResult.Yes)
@@ -496,21 +495,6 @@ private async Task ShowSortDialog()
     /// 获得 <see cref="AdvancedSortItems"/> 中过滤条件
     /// </summary>
     /// <returns></returns>
-    protected List<string> GetAdvancedSortList() => ShowAdvancedSort ? AdvancedSortItems.Select(p => $"{p.SortName} {p.SortOrder}").ToList() : new();
+    protected IEnumerable<string> GetAdvancedSortList() => ShowAdvancedSort ? AdvancedSortItems.Select(p => p.ToString()) : Enumerable.Empty<string>();
     #endregion
 }
-
-/// <summary>
-/// 排序项 (高级排序使用)
-/// </summary>
-public class SortItem
-{
-    /// <summary>
-    /// 排序字段名
-    /// </summary>
-    public string SortName { get; set; } = string.Empty;
-    /// <summary>
-    /// 排序顺序
-    /// </summary>
-    public string SortOrder { get; set; } = string.Empty;
-}

src/BootstrapBlazor/Components/Table/Table.razor.cs

@@ -696,6 +696,7 @@ private void OnInitParameters()
         TreeIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableTreeIcon);
         TreeExpandIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableTreeExpandIcon);
         TreeNodeLoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableTreeNodeLoadingIcon);
+        AdvancedSortButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TableAdvancedSortButtonIcon);
     }
 
     /// <summary>

src/BootstrapBlazor/Components/Table/TableAdvancedSortDialog.razor

@@ -0,0 +1,23 @@
+@namespace BootstrapBlazor.Components
+@inherits ComponentBase
+@implements IResultDialog
+<div class="dialog-advance-sort">
+    <div class="table-advance-sort-toolbar">
+        <Button Color="Color.Primary" Icon="@PlusIcon" OnClick="OnClickAdd"></Button>
+        <Button Color="Color.Danger" Icon="@RemoveIcon" OnClick="OnClickClear"></Button>
+    </div>
+    @foreach (var item in Value)
+    {
+        <div @key="@item" class="row">
+            <div class="col-6">
+                <Select Items="Items" @bind-Value="@item.SortName" />
+            </div>
+            <div class="col-4">
+                <Select Items="SortOrders" @bind-Value="@item.SortOrder" />
+            </div>
+            <div class="col-2">
+                <Button Color="Color.Danger" Icon="@MinusIcon" OnClick="() => OnClickRemove(item)"></Button>
+            </div>
+        </div>
+    }
+</div>