From cd12a6011c0ac9b532bd971c7ddca2ff9304459f Mon Sep 17 00:00:00 2001 From: Alex chow Date: Mon, 13 Jan 2025 12:42:04 +0100 Subject: [PATCH] feat(Calendar): add HeaderTemplate parameter (#4674) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * (Calendar) add AdditionalHeaders Parameter #4673 * feat: 增加 HeaderTemplate 模板 * feat: 增加 BodyTemplateContext 上下文类 * doc: 增加注释信息 * doc: 更新示例 * test: 更新单元测试 --------- Co-Authored-By: Argo Zhang --- .../Components/CalendarBodyTemplate.razor | 18 ++++++ .../Components/CalendarBodyTemplate.razor.cs | 20 ++++++ .../Components/CalendarChildContent.razor | 48 +++++++++++++++ .../Components/CalendarChildContent.razor.cs | 14 +++++ .../Components/CalendarHeaderTemplate.razor | 27 ++++++++ .../CalendarHeaderTemplate.razor.cs | 18 ++++++ .../Components/Samples/Calendars.razor | 30 +++++++++ .../Components/Samples/Calendars.razor.cs | 2 + src/BootstrapBlazor.Server/Locales/en-US.json | 3 + src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 + .../Calendar/BodyTemplateContext.cs | 17 ++++++ .../Components/Calendar/Calendar.razor | 61 +++++++++++++------ .../Components/Calendar/Calendar.razor.cs | 23 ++++++- test/UnitTest/Components/CalendarTest.cs | 27 ++++++++ 14 files changed, 289 insertions(+), 22 deletions(-) create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor create mode 100644 src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs create mode 100644 src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor new file mode 100644 index 00000000000..0bb83911808 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor @@ -0,0 +1,18 @@ + +
+ 总结 +
+ +@foreach (var value in Context.Values) +{ + +
+ @value.CellValue.Day +
+ +} + +
+ 结算 +
+ diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs new file mode 100644 index 00000000000..d64e313f3c0 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs @@ -0,0 +1,20 @@ +// 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.Server.Components.Components; + +/// +/// 日历 BodyTemplate 组件 +/// +public partial class CalendarBodyTemplate +{ + /// + /// 获得/设置 月视图 BodyTempalte 上下文 + /// + [Parameter] + [EditorRequired] + [NotNull] + public BodyTemplateContext? Context { get; set; } +} diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor new file mode 100644 index 00000000000..1d170ad9884 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor @@ -0,0 +1,48 @@ + + 09:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 10:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 11:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 茶歇 + + + 14:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 15:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 16:00 + @for (var index = 0; index < 7; index++) + { + + } + + + 晚宴 + diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs new file mode 100644 index 00000000000..8a584a6e01a --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs @@ -0,0 +1,14 @@ +// 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.Server.Components.Components; + +/// +/// 日历 ChildContent 组件 +/// +public partial class CalendarChildContent +{ + +} diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor new file mode 100644 index 00000000000..ca6bf9b4e97 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor @@ -0,0 +1,27 @@ +@if (ViewMode == CalendarViewMode.Month) +{ + + 月总结 + 星期日 + 星期一 + 星期二 + 星期三 + 星期四 + 星期五 + 星期六 + 合计 + +} +else +{ + + 时间 + 星期日 + 星期一 + 星期二 + 星期三 + 星期四 + 星期五 + 星期六 + +} diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs new file mode 100644 index 00000000000..86c080225cf --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs @@ -0,0 +1,18 @@ +// 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.Server.Components.Components; + +/// +/// 日历 HeaderTemplate 组件 +/// +public partial class CalendarHeaderTemplate +{ + /// + /// 获得/设置 是否显示周视图 默认为 CalendarVieModel.Month 月视图 + /// + [Parameter] + public CalendarViewMode ViewMode { get; set; } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor index 2a6f8a5d9cb..c2d0fa40645 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor @@ -31,6 +31,36 @@ + +
+
+
+ @((MarkupString)Localizer["HeaderTemplateDesc"].Value) +
+
+ + + + + + + +
+
+
+ + + + + + + + + + + + +

@((MarkupString)Localizer["AppText"].Value)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs index 91969ba4401..bde8d96be69 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs @@ -22,6 +22,8 @@ private void OnValueChanged(DateTime ts) private DateTime BindValue { get; set; } = DateTime.Today; + private CalendarViewMode HeaderTemplateViewMode { get; set; } + private static string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd"); private ConcurrentDictionary> Data { get; } = new(); diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index ffe1c9dd773..3296cc0bd3d 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3693,6 +3693,9 @@ "ViewModeIntro": "By setting the property CalendarViewMode.Week", "CellTemplateTitle": "Cell Template", "CellTemplateIntro": "customer the cell template via CellTemplate", + "HeaderTemplateTitle": "Header Template", + "HeaderTemplateIntro": "Customize the header template by setting the property HeaderTemplate", + "HeaderTemplateDesc": "Customize the UI by setting the BodyTemplate and HeaderTemplate. In this example, additional columns are added to the front and back of the month view, and a timeline is added to the week view", "AppTitle": "Practical applications", "AppIntro": "Curriculum", "AppText": "Currently, the ChildContext is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 7e945f3b555..bf20ae8ebef 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3693,6 +3693,9 @@ "ViewModeIntro": "通过设置属性 CalendarViewMode.Week", "CellTemplateTitle": "单元格模板", "CellTemplateIntro": "通过设置属性 CellTemplate 自定义单元格模板", + "HeaderTemplateTitle": "头部模板", + "HeaderTemplateIntro": "通过设置属性 HeaderTemplate 自定义头部模板", + "HeaderTemplateDesc": "通过设置 BodyTemplate 配合 HeaderTemplate 来自定义呈现 UI，本例中月视图中前后均增加了附加列，星期试图中增加了时间线", "AppTitle": "实战应用", "AppIntro": "课堂表", "AppText": "目前按周内组件暂时为统一使用 ChildContext 来进行渲染，所有单元格内的数据相关操作组件均未进行封装，稍后完善", diff --git a/src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs b/src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs new file mode 100644 index 00000000000..a7bfc50fded --- /dev/null +++ b/src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs @@ -0,0 +1,17 @@ +// 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; + +/// +/// BodyTemplateContext 上下文类 +/// +public class BodyTemplateContext +{ + /// + /// 获得/设置 当前星期日数据集合 + /// + public List Values { get; } = []; +} diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor b/src/BootstrapBlazor/Components/Calendar/Calendar.razor index 4c99f7704d2..3151fd1c0ca 100644 --- a/src/BootstrapBlazor/Components/Calendar/Calendar.razor +++ b/src/BootstrapBlazor/Components/Calendar/Calendar.razor @@ -35,27 +35,41 @@
- - @foreach (var w in WeekLists) - { - - } - + @if (HeaderTemplate != null) + { + @HeaderTemplate + } + else + { + + @foreach (var w in WeekLists) + { + + } + + } @for (var week = StartDate; week < EndDate; week = week.AddDays(7)) { - @for (var index = 0; index < 7; index++) + @if (BodyTemplate != null) { - var cellValue = CreateCellValue(week.AddDays(index)); - if (CellTemplate == null) - { - @RenderCell(cellValue) - } - else + @BodyTemplate(GetBodyTemplateContext(week)) + } + else + { + @for (var index = 0; index < 7; index++) { - @CellTemplate(cellValue) + var cellValue = CreateCellValue(week.AddDays(index)); + if (CellTemplate == null) + { + @RenderCell(cellValue) + } + else + { + @CellTemplate(cellValue) + } } } @@ -85,12 +99,19 @@
@w
@w
- - @for (var index = 0; index < 7; index++) - { - @RenderWeekHeader(index) - } - + @if (HeaderTemplate != null) + { + @HeaderTemplate + } + else + { + + @for (var index = 0; index < 7; index++) + { + @RenderWeekHeader(index) + } + + } @ChildContent diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs index 98298193e52..c4cb7ce2291 100644 --- a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs +++ b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs @@ -162,17 +162,29 @@ protected int GetWeekCount() public Func? OnValueChanged { get; set; } /// - /// 获得/设置 是否显示周视图 默认为 CalendarVieModel.Month 月视图 + /// 获得/设置 是否显示周视图 默认为 月视图 /// [Parameter] public CalendarViewMode ViewMode { get; set; } /// - /// 获得/设置 周内容 + /// 获得/设置 周内容 时有效 /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// 获得/设置 列头模板 + /// + [Parameter] + public RenderFragment? HeaderTemplate { get; set; } + + /// + /// 获得/设置 Body 模板仅 有效 + /// + [Parameter] + public RenderFragment? BodyTemplate { get; set; } + /// /// 获得/设置 单元格模板 /// @@ -278,4 +290,11 @@ private CalendarCellValue CreateCellValue(DateTime cellValue) val.DefaultCss = GetCalendarCellString(val); return val; } + + private BodyTemplateContext GetBodyTemplateContext(DateTime week) + { + var context = new BodyTemplateContext(); + context.Values.AddRange(Enumerable.Range(0, 7).Select(i => CreateCellValue(week.AddDays(i)))); + return context; + } } diff --git a/test/UnitTest/Components/CalendarTest.cs b/test/UnitTest/Components/CalendarTest.cs index 8af4ce3dcdd..abce650f4a5 100644 --- a/test/UnitTest/Components/CalendarTest.cs +++ b/test/UnitTest/Components/CalendarTest.cs @@ -57,6 +57,33 @@ public void CellTemplate_Ok() }); } + [Fact] + public void HeaderTemplate_Ok() + { + var cut = Context.RenderComponent(builder => + { + builder.Add(a => a.ViewMode, CalendarViewMode.Month); + builder.Add(a => a.HeaderTemplate, builder => + { + builder.AddContent(0, "HeaderTemplate"); + }); + builder.Add(a => a.BodyTemplate, context => builder => + { + builder.OpenElement(0, "div"); + builder.AddAttribute(1, "data-bb-value", context.Values.Count); + builder.CloseElement(); + }); + }); + + Assert.Contains("HeaderTemplate", cut.Markup); + Assert.Contains("data-bb-value=\"7\"", cut.Markup); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.ViewMode, CalendarViewMode.Week); + }); + } + [Fact] public async Task ButtonClick_Ok() {