feat(Table): support partial columns (#2073)

* doc: 更新说明文档 * perf: 更新代码提高性能 * doc: 更新示例增加 ignore * refactor: 支持可见列设置部分列功能 * refactor: 更新列视图逻辑 * doc: 更新示例 * refactor: 更新关键字 * refactor: 移除不使用的变量 * refactor: 更新单元测试 * test: 更新单元测试 * test: 增加单元测试 * refactor: 代码格式化 * chore: 更新字典 * test: 更新单元测试 * test: 更新单元测试
2024-11-29 18:49:08 +08:00 · 2023-09-05 14:03:37 +08:00 · 2023-09-05 14:03:37 +08:00 · fe06d7f9a9
commit fe06d7f9a9
parent ede406d0fe
11 changed files with 82 additions and 98 deletions
--- a/exclusion.dic
+++ b/exclusion.dic
@ -1,7 +1,15 @@
-argo
+argo
 Blazor
 swal
 Overscan
-&nbsp;
+nbsp
+colspan
+editform
+dblclick
+dbcell
 readonly
-oninput
+thead
+oninput
+onkeyup
+ontouchstart
+ontouchend
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor
@ -10,11 +10,13 @@
 <DemoBlock Title="@Localizer["VisibleTitle"]"
           Introduction="@Localizer["VisibleIntro"]"
           Name="Visible">
-    <p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
-    <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
-    <p class="mb-3">@((MarkupString)Localizer["ResetVisibleColumnsDesc"].Value)</p>
+    <section ignore>
+        <p>@((MarkupString)Localizer["VisibleP1"].Value)</p>
+        <p>@((MarkupString)Localizer["VisibleP2"].Value)</p>
+        <p>@((MarkupString)Localizer["VisibleP3"].Value)</p>
+        <p>@((MarkupString)Localizer["VisibleP4"].Value)</p>
+        <p class="mb-3">@((MarkupString)Localizer["ResetVisibleColumnsDesc"].Value)</p>
+    </section>
    <Button Text="@Localizer["ResetVisibleColumnsButtonText"]" OnClickWithoutRender="ResetVisibleColumns"></Button>

    <Table TItem="Foo" @ref="TableColumnVisible"
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesColumnList.razor.cs
@ -54,7 +54,11 @@ public partial class TablesColumnList

    private Task ResetVisibleColumns()
    {
-        TableColumnVisible.ResetVisibleColumns(new ColumnVisibleItem[] { new(nameof(Foo.DateTime), true), new(nameof(Foo.Name), false), new(nameof(Foo.Address), false), new(nameof(Foo.Education), false), new(nameof(Foo.Count), false), new(nameof(Foo.Complete), true) });
+        // 支持设置部分列不可见
+        TableColumnVisible.ResetVisibleColumns(new ColumnVisibleItem[] {
+            new(nameof(Foo.Name), false),
+            new(nameof(Foo.Complete), true)
+        });
        return Task.CompletedTask;
    }

--- a/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs
+++ b/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs
@ -62,8 +62,8 @@ class CodeSnippetService
        {
            // codeFile = ajax.razor.cs
            var segs = codeFile.Split('.');
-            var key = segs.First();
-            var typeName = SourceCodes.ContainsKey(key) ? SourceCodes[key] : string.Empty;
+            var key = segs[0];
+            var typeName = SourceCodes.TryGetValue(key, out var value) ? value : string.Empty;
            if (!string.IsNullOrEmpty(typeName))
            {
                var fileName = codeFile.Replace(key, typeName);
--- a/src/BootstrapBlazor.Shared/Shared/ComponentLayout.razor.js
+++ b/src/BootstrapBlazor.Shared/Shared/ComponentLayout.razor.js
@ -1,7 +1,7 @@
 export function init() {
    const hash = decodeURI(location.hash)
    if (hash) {
-        var anchor = hash.split('-')[0]
+        const anchor = hash.split('-')[0]
        try {
            const el = document.querySelector(anchor)
            if (el) {
--- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.js
+++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.js
@ -21,7 +21,6 @@ export function init(id) {
        }
    })
    let originX = 0
-    let originY = 0
    let section = document.querySelector('section');
    let width = 0
    Drag.drag(navmenu.bar,
@ -29,7 +28,6 @@ export function init(id) {
            navmenu.bar.classList.add('drag')
            width = parseInt(getComputedStyle(section).getPropertyValue('--bb-sidebar-width'))
            originX = e.clientX || e.touches[0].clientX
-            originY = e.clientY || e.touches[0].clientY
        },
        e => {
            const eventX = e.clientX || (e.touches.length > 0 && e.touches[0].clientX)
@ -40,7 +38,6 @@ export function init(id) {
            }
        },
        e => {
-            const eventX = e.clientX || e.changedTouches[0].clientX
            navmenu.bar.classList.remove('drag')
        }
    )
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@ -89,15 +89,17 @@
                            <div class="dropdown-menu dropdown-menu-end shadow">
                                @foreach (var item in Columns)
                                {
-                                    var poco = VisibleColumns.FirstOrDefault(i => i.Name == item.GetFieldName());
-                                    if (poco != null)
+                                    var poco = VisibleColumns.Find(i => i.Name == item.GetFieldName());
+                                    if (poco == null)
                                    {
-                                        <div class="dropdown-item">
-                                            <Checkbox ShowAfterLabel="true" IsDisabled="@GetColumnsListState(item)"
-                                                  DisplayText="@item.GetDisplayName()" @bind-Value="@poco.Visible" OnValueChanged="visible => OnToggleColumnVisible(poco.Name, visible)">
-                                            </Checkbox>
-                                        </div>
+                                        poco = new(item.GetFieldName(), item.Visible);
+                                        VisibleColumns.Add(poco);
                                    }
+                                    <div class="dropdown-item">
+                                        <Checkbox ShowAfterLabel="true" IsDisabled="@GetColumnsListState(item)"
+                                        DisplayText="@item.GetDisplayName()" @bind-Value="@poco.Visible" OnValueChanged="visible => OnToggleColumnVisible(poco.Name, visible)">
+                                        </Checkbox>
+                                    </div>
                                }
                            </div>
                        </div>
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
@ -386,13 +386,14 @@ public partial class Table<TItem>
    private List<ColumnVisibleItem> VisibleColumns { get; } = new();

    /// <summary>
-    /// <inheritdoc/>
+    /// 获得当前可见列集合
    /// </summary>
    /// <returns></returns>
    public IEnumerable<ITableColumn> GetVisibleColumns()
    {
-        var items = VisibleColumns.Where(i => i.Visible);
-        return Columns.Where(i => items.Any(v => v.Name == i.GetFieldName()));
+        // 不可见列
+        var items = VisibleColumns.Where(i => !i.Visible);
+        return Columns.Where(i => !items.Any(v => v.Name == i.GetFieldName()));
    }

    private bool GetColumnsListState(ITableColumn col) => VisibleColumns.First(i => i.Name == col.GetFieldName()).Visible && VisibleColumns.Count(i => i.Visible) == 1;
--- a/src/BootstrapBlazor/Components/Table/Table.razor.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.cs
@ -808,7 +808,7 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
            });
        }

-        if(_breakPointChanged)
+        if (_breakPointChanged)
        {
            _breakPointChanged = false;
            await InvokeVoidAsync("reset", Id);
@ -873,10 +873,7 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
            await QueryData();
            StateHasChanged();
        }
-        catch (TaskCanceledException)
-        {
-
-        }
+        catch (TaskCanceledException) { }
    }

    private bool _loop;
--- a/test/UnitTest/Components/MenuTest.cs
+++ b/test/UnitTest/Components/MenuTest.cs
@ -319,19 +319,13 @@ public class MenuTest : BootstrapBlazorTestBase
            pb.Add(m => m.Items, Items);
        });

-        cut.InvokeAsync(() =>
-        {
-            // 子菜单 Click 触发
-            var div = cut.Find(".nav-item");
-            div.Click(new MouseEventArgs());
-        });
+        // 子菜单 Click 触发
+        var div = cut.Find(".nav-item");
+        div.Click(new MouseEventArgs());

-        cut.InvokeAsync(() =>
-        {
-            // 查找第一个 li 节点
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        // 查找第一个 li 节点
+        var menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());

        cut.SetParametersAndRender(pb =>
        {
@ -342,26 +336,17 @@ public class MenuTest : BootstrapBlazorTestBase
            });
        });

-        cut.InvokeAsync(() =>
-        {
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());
        Assert.True(clicked);

-        cut.InvokeAsync(() =>
-        {
-            // SubMenu Click
-            var sub = cut.Find(".sub-menu div.nav-item");
-            sub.Click(new MouseEventArgs());
-        });
+        // SubMenu Click
+        var sub = cut.Find(".sub-menu div.nav-item");
+        sub.Click(new MouseEventArgs());

-        cut.InvokeAsync(() =>
-        {
-            var subs = cut.FindAll(".sub-menu div.nav-item");
-            var sub = subs[subs.Count - 1];
-            sub.Click(new MouseEventArgs());
-        });
+        var subs = cut.FindAll(".sub-menu div.nav-item");
+        sub = subs[subs.Count - 1];
+        sub.Click(new MouseEventArgs());

        // 设置禁止导航 
        // 顶栏模式
@ -370,19 +355,13 @@ public class MenuTest : BootstrapBlazorTestBase
            pb.Add(m => m.DisableNavigation, true);
        });

-        cut.InvokeAsync(() =>
-        {
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());
        Assert.True(clicked);

-        cut.InvokeAsync(() =>
-        {
-            // 再次点击
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        // 再次点击
+        menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());

        // 侧边栏模式
        cut.SetParametersAndRender(pb =>
@ -391,21 +370,14 @@ public class MenuTest : BootstrapBlazorTestBase
            pb.Add(m => m.IsCollapsed, true);
        });

-        cut.InvokeAsync(() =>
-        {
-            // 再次点击
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        // 再次点击
+        menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());
        Assert.True(clicked);

        // 再次点击
-        cut.InvokeAsync(() =>
-        {
-            // 再次点击
-            var menuItems = cut.Find("li");
-            menuItems.Click(new MouseEventArgs());
-        });
+        menuItems = cut.Find("li");
+        menuItems.Click(new MouseEventArgs());
    }

    [Fact]
@ -417,6 +389,10 @@ public class MenuTest : BootstrapBlazorTestBase
        {
            pb.Add(m => m.Items, Items);
        });
+        var item = cut.Find("[href=\"Menu2321\"]");
+        Assert.NotNull(item);
+        var li = item.Closest("li");
+        Assert.NotNull(li);
    }

    [Fact]
--- a/test/UnitTest/Components/TableTest.cs
+++ b/test/UnitTest/Components/TableTest.cs
@ -200,7 +200,6 @@ public class TableTest : TableTestBase
    [Fact]
    public void Items_Delete()
    {
-        var tcs = new TaskCompletionSource<bool>();
        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
        var items = Foo.GenerateFoo(localizer, 2);
        var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
@ -208,24 +207,18 @@ public class TableTest : TableTestBase
            pb.AddChildContent<MockTable>(pb =>
            {
                pb.Add(a => a.Items, items);
-                pb.Add(a => a.ItemsChanged, EventCallback.Factory.Create<IEnumerable<Foo>>(this, rows =>
-                {
-                    items = rows.ToList();
-                    tcs.SetResult(true);
-                }));
+                pb.Add(a => a.ItemsChanged, EventCallback.Factory.Create<IEnumerable<Foo>>(this, rows => items = rows.ToList()));
                pb.Add(a => a.EditMode, EditMode.InCell);
                pb.Add(a => a.RenderMode, TableRenderMode.Table);
                pb.Add(a => a.ShowExtendButtons, true);
            });
        });
-        cut.InvokeAsync(async () =>
-        {
-            var table = cut.FindComponent<MockTable>();
-            await table.Instance.TestDeleteAsync();
-            await tcs.Task;
-        });
+
+        var table = cut.FindComponent<MockTable>();
+        _ = table.Instance.TestDeleteAsync();
+
        Assert.Single(items);
-        Assert.Equal(localizer["Foo.Name", "0002"], items.First().Name);
+        Assert.Equal(localizer["Foo.Name", "0002"], items[0].Name);
    }

    [Fact]
@ -237,6 +230,8 @@ public class TableTest : TableTestBase
            pb.AddChildContent<Table<Foo>>(pb =>
            {
                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.ShowToolbar, true);
+                pb.Add(a => a.ShowColumnList, true);
                pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 2));
                pb.Add(a => a.TableColumns, foo => builder =>
                {
@ -244,9 +239,7 @@ public class TableTest : TableTestBase
                    builder.AddAttribute(1, "Field", "Name");
                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
                    builder.CloseComponent();
-                });
-                pb.Add(a => a.TableColumns, foo => builder =>
-                {
+
                    builder.OpenComponent<TableColumn<Foo, string>>(0);
                    builder.AddAttribute(1, "Field", "Address");
                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Address", typeof(string)));
@ -262,6 +255,10 @@ public class TableTest : TableTestBase
                });
            });
        });
+
+        // Address 不可见
+        var table = cut.FindComponent<Table<Foo>>();
+        Assert.Single(table.Instance.GetVisibleColumns());
    }

    [Fact]