From c19d60d153f72c26102eec90aef286133d37823b Mon Sep 17 00:00:00 2001 From: Lambert Lee <1708416@qq.com> Date: Sun, 8 Jan 2023 06:52:21 +0000 Subject: [PATCH] !3737 doc(#I69EL0): update editdialog demos * update editdialog demos --- .../Demos/EditDialog/EditDialogNoRender.razor | 63 +++++++++ .../Demos/EditDialog/EditDialogNormal.razor | 88 +++++++++++++ src/BootstrapBlazor.Shared/Locales/en.json | 33 +++-- src/BootstrapBlazor.Shared/Locales/zh.json | 33 +++-- .../Samples/EditDialogs.razor | 21 ++- .../Samples/EditDialogs.razor.cs | 120 +----------------- 6 files changed, 197 insertions(+), 161 deletions(-) create mode 100644 src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor create mode 100644 src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor diff --git a/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor new file mode 100644 index 000000000..d6bf41704 --- /dev/null +++ b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor @@ -0,0 +1,63 @@ +@inject IStringLocalizer Localizer + +
+
+ +@code { + [NotNull] + private BlockLogger? Trace { get; set; } + + [Inject] + [NotNull] + private DialogService? DialogService { get; set; } + + /// + /// Foo 类为Demo测试用，如有需要请自行下载源码查阅 + /// Foo class is used for Demo test, please download the source code if necessary + /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs + /// + [Inject] + [NotNull] + private IStringLocalizer? FooLocalizer { get; set; } + + private Foo Model { get; set; } = new Foo() + { + Name = "Name 1234", + Address = "Address 1234" + }; + + private async Task ShowEditDialog() + { + var items = Utility.GenerateEditorItems(); + var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby)); + item.Items = Foo.GenerateHobbys(FooLocalizer); + + item = items.First(i => i.GetFieldName() == nameof(Foo.Address)); + item.Editable = false; + item = items.First(i => i.GetFieldName() == nameof(Foo.Count)); + item.Editable = false; + + var option = new EditDialogOption() + { + Title = "edit dialog", + Model = Model, + Items = items, + ItemsPerRow = 2, + RowType = RowType.Inline, + OnCloseAsync = () => + { + Trace.Log("close button is clicked"); + return Task.CompletedTask; + }, + OnEditAsync = context => + { + Trace.Log("save button is clicked"); + return Task.FromResult(true); + } + }; + + await DialogService.ShowEditDialog(option); + } +} diff --git a/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor new file mode 100644 index 000000000..fbff301cb --- /dev/null +++ b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor @@ -0,0 +1,88 @@ +@inject IStringLocalizer Localizer + +
+
+ +@code { + [NotNull] + private BlockLogger? Trace { get; set; } + + [Inject] + [NotNull] + private DialogService? DialogService { get; set; } + + /// + /// Foo 类为Demo测试用，如有需要请自行下载源码查阅 + /// Foo class is used for Demo test, please download the source code if necessary + /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs + /// + [Inject] + [NotNull] + private IStringLocalizer? FooLocalizer { get; set; } + + private Foo Model { get; set; } = new Foo() + { + Name = "Name 1234", + Address = "Address 1234" + }; + + private async Task ShowDialog() + { + var items = Utility.GenerateEditorItems(); + var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby)); + item.Items = Foo.GenerateHobbys(FooLocalizer); + + var option = new EditDialogOption() + { + Title = "edit dialog", + Model = Model, + Items = items, + ItemsPerRow = 2, + RowType = RowType.Inline, + OnCloseAsync = () => + { + Trace.Log("close button is clicked"); + return Task.CompletedTask; + }, + OnEditAsync = context => + { + Trace.Log("save button is clicked"); + return Task.FromResult(true); + } + }; + + await DialogService.ShowEditDialog(option); + } + + private async Task ShowAlignDialog() + { + var items = Utility.GenerateEditorItems(); + var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby)); + item.Items = Foo.GenerateHobbys(FooLocalizer); + + var option = new EditDialogOption() + { + Title = "edit dialog", + Model = Model, + Items = items, + ItemsPerRow = 2, + RowType = RowType.Inline, + LabelAlign = Alignment.Right, + OnCloseAsync = () => + { + Trace.Log("close button is clicked"); + return Task.CompletedTask; + }, + OnEditAsync = context => + { + Trace.Log("save button is clicked"); + return Task.FromResult(true); + } + }; + + await DialogService.ShowEditDialog(option); + } +} diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json index a8711c869..38e08571f 100644 --- a/src/BootstrapBlazor.Shared/Locales/en.json +++ b/src/BootstrapBlazor.Shared/Locales/en.json @@ -547,23 +547,22 @@ "P6": "Control the animation duration in milliseconds by setting the Duration parameter" }, "BootstrapBlazor.Shared.Samples.EditDialogs": { - "H1": "EditDialog edit popup", - "H2": "Automatic rendering of edit popups by binding the data model", - "P1": "EditDialog The component is an extension of the Dialog component and is suitable for data popup editing.", - "P2": "Inject the service by calling", - "P3": "of", - "P4": "The method directly pops up the editing dialog box, which greatly reduces the amount of code.", - "P5": "Configuration class inheritance", - "P6": "For more parameter settings, please click", - "P7": "portal", - "P8": "Basic usage", - "P9": "Automatically generate editable forms for each field of the model by binding the TModel data model", - "P10": "Edit popup (left-aligned)", - "P11": "Edit popup (right aligned)", - "P12": "Setting bound model part property does not show", - "P13": "By setting the Editable=false of the IEditorItem instance, the editable pop-up window cannot be edited.", - "P14": "Pop-ups", - "P15": "EditDialogOption property" + "Title": "EditDialog edit popup", + "Description": "Automatic rendering of edit popups by binding the data model", + "SubDescription": "EditDialog The component is an extension of the Dialog component and is suitable for data popup editing.", + "Tip": "Inject the service by calling DialogService of ShowEditDialog The method directly pops up the editing dialog box, which greatly reduces the amount of code. EditDialogOption Configuration class inheritance DialogOption，For more parameter settings, please click [portal]\"", + "NormalTitle": "Basic usage", + "NormalIntro": "Automatically generate editable forms for each field of the model by binding the TModel data model", + "NoRenderTitle": "Setting bound model part property does not show", + "NoRenderIntro": "By setting the Editable=false of the IEditorItem instance, the editable pop-up window cannot be edited.", + "EditDialogOption": "EditDialogOption property" + }, + "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNormal": { + "LeftAlignedButton": "Edit popup (left-aligned)", + "RightAlignedButton": "Edit popup (right aligned)" + }, + "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNoRender": { + "PopupButton": "Pop-ups" }, "BootstrapBlazor.Shared.Samples.Topologies": { "H1": "Topology HMI", diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json index b49549ead..cae3468e7 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh.json +++ b/src/BootstrapBlazor.Shared/Locales/zh.json @@ -548,23 +548,22 @@ "P6": "通过设置 Duration 参数控制动画时长单位为毫秒" }, "BootstrapBlazor.Shared.Samples.EditDialogs": { - "H1": "EditDialog 编辑弹窗", - "H2": "通过绑定数据模型自动呈现编辑弹窗", - "P1": "EditDialog 组件是 Dialog 组件的扩展，适用于数据弹出窗编辑。", - "P2": "通过调用注入服务", - "P3": "的", - "P4": "方法直接弹出编辑对话框，大大减少代码量。", - "P5": "配置类继承", - "P6": "更多参数设置请点击", - "P7": "传送门", - "P8": "基础用法", - "P9": "通过绑定 TModel 数据模型，自动生成模型各个字段的可编辑表单", - "P10": "编辑弹窗(左对齐)", - "P11": "编辑弹窗(右对齐)", - "P12": "设置绑定模型部分属性不显示", - "P13": "通过设置 IEditorItem 实例的 Editable=false, 实现编辑弹窗不可编辑此属性", - "P14": "弹窗", - "P15": "EditDialogOption 属性" + "Title": "EditDialog 编辑弹窗", + "Description": "通过绑定数据模型自动呈现编辑弹窗", + "SubDescription": "EditDialog 组件是 Dialog 组件的扩展，适用于数据弹出窗编辑。", + "Tip": "通过调用注入服务 DialogService 的 ShowEditDialog 方法直接弹出编辑对话框，大大减少代码量。EditDialogOption 配置类继承 DialogOption，更多参数设置请点击 [传送门]\"", + "NormalTitle": "基础用法", + "NormalIntro": "通过绑定 TModel 数据模型，自动生成模型各个字段的可编辑表单", + "NoRenderTitle": "设置绑定模型部分属性不显示", + "NoRenderIntro": "通过设置 IEditorItem 实例的 Editable=false, 实现编辑弹窗不可编辑此属性", + "EditDialogOption": "EditDialogOption 属性" + }, + "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNormal": { + "LeftAlignedButton": "编辑弹窗(左对齐)", + "RightAlignedButton": "编辑弹窗(右对齐)" + }, + "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNoRender": { + "PopupButton": "弹窗" }, "BootstrapBlazor.Shared.Samples.Topologies": { "H1": "Topology 人机交互界面", diff --git a/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor b/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor index 07338b6e0..1e4fe9c31 100644 --- a/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor +++ b/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor @@ -1,22 +1,17 @@ @page "/editdialogs" +@inject IStringLocalizer Localizer -

@Localizer["H1"]

-

@Localizer["H2"]

+

@Localizer["Title"]

+

@Localizer["Description"]

-

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

+

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

-

@Localizer["P2"] DialogService @Localizer["P3"] ShowEditDialog @Localizer["P4"]EditDialogOption @Localizer["P5"] DialogOption，@Localizer["P6"] [@Localizer["P7"]]

+

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

 - -