feat(Table): add ClearTableColumnClientStatus instance method (#8005)

* feat: add clearColumnStates method

* doc: 增加版本信息

* feat: 增加 ClearTableColumnClientStatus 方法

* test: 补充单元测试

* refactor: 调整获得 DisplayName 逻辑

* refactor: 移除 key 关键字

* doc: 移除注释

* refactor: 增加重置逻辑

* refactor: 撤销示例更改

* chore: bump version 10.6.1-beta20

Author: ArgoZhang

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

@@ -8,6 +8,8 @@
 
 <h4>@Localizer["TablesColumnDescription"]</h4>
 
+@* <Button Text="Reset" OnClickWithoutRender="Reset"></Button>
+ *@
 <DemoBlock Title="@Localizer["AllowDragOrderTitle"]" Introduction="@Localizer["AllowDragOrderIntro"]" Name="AllowDragColumn">
     <section ignore>@((MarkupString)Localizer["AllowDragOrderDesc"].Value)</section>
     <Table TItem="Foo" ClientTableName="table-test"
@@ -26,3 +28,12 @@
     </Table>
     <ConsoleLogger @ref="Logger" />
 </DemoBlock>
+
+@code {
+    // private Table<Foo> Table { get; set; }
+
+    // private async Task Reset()
+    // {
+    //     await Table.ClearTableColumnClientStatus();
+    // }
+}

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.6.1-beta19</Version>
+    <Version>10.6.1-beta20</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -251,7 +251,7 @@
             }
             @foreach (var col in GetVisibleColumns())
             {
-                <col @key="col" style="@GetColWidthString(col.GetColumnFixedWidth(DefaultFixedColumnWidth))" />
+                <col style="@GetColWidthString(col.GetColumnFixedWidth(DefaultFixedColumnWidth))" />
             }
             @if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
             {

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

@@ -566,6 +566,8 @@ private void ResetVisibleColumnsCache()
                 var col = Columns.Find(c => c.GetFieldName() == item.Name);
                 if (col != null)
                 {
+                    item.DisplayName = col.GetDisplayName();
+
                     // 恢复宽度
                     col.Width = item.Width;
 

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

@@ -1372,8 +1372,6 @@ private void ResetTableColumns()
                     continue;
                 }
 
-                item.DisplayName = col.GetDisplayName();
-
                 if (!ShowColumnList)
                 {
                     item.Visible = col.GetVisible(_screenSize);
@@ -1391,7 +1389,6 @@ private void ResetTableColumns()
 
     private TableColumnState CreateTableColumnState(ITableColumn col) => new TableColumnState()
     {
-        DisplayName = col.GetDisplayName(),
         Name = col.GetFieldName(),
         Width = col.Width,
         Visible = col.GetVisible(_screenSize)
@@ -1860,6 +1857,7 @@ private async Task OnContextMenu(MouseEventArgs e, TItem item)
     /// <summary>
     /// <para lang="zh">获得/设置 加载表格客户端状态回调方法，组件会在首次渲染时调用该方法获取列状态用于初始化表格显示状态</para>
     /// <para lang="en">Gets or sets Load Table Column Client Status Callback. The component will call this method on the first render to get the column status for initializing the table display state.</para>
+    /// <para>v<version>10.6.1</version></para>
     /// </summary>
     [Parameter]
     public Func<Task<TableColumnClientStatus>>? OnLoadTableColumnClientStatus { get; set; }
@@ -1880,6 +1878,27 @@ public async Task FitAllColumnWidth()
         await InvokeVoidAsync("fitAllColumnWidth", Id);
     }
 
+    /// <summary>
+    /// <para lang="zh">清除表格列客户端状态实例方法</para>
+    /// <para lang="en">clear table column client status instance method</para>
+    /// <para>v<version>10.6.1</version></para>
+    /// </summary>
+    public async Task ClearTableColumnClientStatus()
+    {
+        if (!string.IsNullOrEmpty(ClientTableName))
+        {
+            // 如果启用了 ClientTableName 则清除浏览器持久化列状态
+            await InvokeVoidAsync("clearColumnStates", ClientTableName);
+        }
+
+        // 清除缓存的列状态
+        _tableColumnStateCache.Clear();
+
+        _resetColumns = true;
+        _invoke = true;
+        StateHasChanged();
+    }
+
     /// <summary>
     /// <para lang="zh">重置列方法 由 JavaScript 脚本调用</para>
     /// <para lang="en">Reset Column Method called by JavaScript</para>
@@ -2026,7 +2045,7 @@ private Task OnTouchEnd(TouchEventArgs e)
         return Task.CompletedTask;
     }
 
-    private object? GetKeyByITem(TItem item) => SortableList != null ? item : null; //OnGetRowKey?.Invoke(item);
+    private object? GetKeyByITem(TItem item) => SortableList != null ? item : null;
 
     private RenderFragment RenderRowCell(TItem item) => builder =>
     {

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -869,6 +869,11 @@ const removeColumnWidthState = tableName => {
     localStorage.removeItem(columnWidthKey);
 }
 
+export function clearColumnStates(tableName) {
+    const columnStateKey = `bb-table-${tableName}`;
+    localStorage.removeItem(columnStateKey);
+}
+
 const getColumnStateFromLocalstorage = tableName => {
     const columnStateKey = `bb-table-${tableName}`;
     return getLocalStorageValue(columnStateKey);

src/BootstrapBlazor/Extensions/TableColumnClientStatusExtensions.cs

@@ -0,0 +1,26 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// <para lang="zh">TableColumnClientStatus 扩展方法</para>
+/// <para lang="en">TableColumnClientStatus extensions</para>
+/// </summary>
+public static class TableColumnClientStatusExtensions
+{
+    extension(TableColumnClientStatus status)
+    {
+        /// <summary>
+        /// <para lang="zh">清除方法</para>
+        /// <para lang="en">Clear method</para>
+        /// </summary>
+        public void Clear()
+        {
+            status.Columns.Clear();
+            status.TableWidth = 0;
+        }
+    }
+}

test/UnitTest/Components/TableTest.cs

@@ -8897,6 +8897,53 @@ public async Task OnTableColumnClientStatusChanged_ResizeColumn_Ok()
         Assert.NotNull(clientState);
     }
 
+    [Fact]
+    public async Task ClearTableColumnClientStatus_Ok()
+    {
+        var state = new TableColumnClientStatus();
+        state.TableWidth = 220;
+        state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Name), Visible = true, Width = 100 });
+        state.Columns.Add(new TableColumnState() { Name = nameof(Foo.Address), Visible = true, Width = 120 });
+
+        Context.JSInterop.Setup<TableColumnClientStatus>("getColumnStates", "test_clear").SetResult(state);
+        var invoker = Context.JSInterop.SetupVoid("clearColumnStates", "test_clear");
+        invoker.SetVoidResult();
+
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.ClientTableName, "test_clear");
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.AllowResizing, true);
+                pb.Add(a => a.OnQueryAsync, OnQueryAsync(localizer));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.AddAttribute(3, "Width", 80);
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(3, "Field", "Address");
+                    builder.AddAttribute(4, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        // 由于启用了客户端持久化 Name 列宽使用 100 而非 80
+        var table = cut.FindComponent<Table<Foo>>();
+        Assert.Equal(100, table.Instance.Columns[0].Width);
+
+        // 清除客户端状态
+        await cut.InvokeAsync(() => table.Instance.ClearTableColumnClientStatus());
+        invoker.VerifyInvoke("clearColumnStates");
+        Assert.Equal(80, table.Instance.Columns[0].Width);
+    }
+
     [Theory]
     [InlineData(true)]
     [InlineData(false)]