From 9d583a7b52d7788dd8cc5ce4604e1e04201f7d44 Mon Sep 17 00:00:00 2001 From: "Diego M. Ribeiro" Date: Tue, 3 Sep 2024 15:23:37 -0300 Subject: [PATCH] [Dialog] Add event before closing panel to allow validation of the data. (#1508) --- ...crosoft.FluentUI.AspNetCore.Components.xml | 8 +++ .../Examples/DialogPanelWithValidation.razor | 6 ++ .../DialogPanelWithValidation.razor.cs | 58 +++++++++++++++++++ .../Pages/Panel/Examples/SimplePanel.razor | 4 +- .../Demo/Shared/Pages/Panel/PanelPage.razor | 8 +++ .../Components/Dialog/FluentDialog.razor.cs | 10 ++++ .../Dialog/Parameters/DialogParameters.cs | 8 +++ 7 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor create mode 100644 examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index d2911222f3..b8c40ae60a 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -3561,6 +3561,14 @@ This method is only called when using the . + + + Function that is called and awaited before the dialog is closed. + + + This is a suitable callback to use when you need to validate the data in the dialog before it closes. + + Parameters for a dialog. diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor new file mode 100644 index 0000000000..9dafc240fa --- /dev/null +++ b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor @@ -0,0 +1,6 @@ +@inject IDialogService DialogService +@inject IMessageService MessageService + + + Open panel (>>) + diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs new file mode 100644 index 0000000000..a7157d9559 --- /dev/null +++ b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs @@ -0,0 +1,58 @@ +// ------------------------------------------------------------------------ +// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. +// ------------------------------------------------------------------------ + +using FluentUI.Demo.Shared.SampleData; +using Microsoft.FluentUI.AspNetCore.Components; + +namespace FluentUI.Demo.Shared.Pages.Panel.Examples; +public partial class DialogPanelWithValidation +{ + private IDialogReference? _dialog; + + private readonly SimplePerson simplePerson = new() + { + Firstname = "Steve", + Lastname = "Roth", + Age = 42, + }; + + private async Task OpenPanelRightAsync() + { + DemoLogger.WriteLine($"Open right panel"); + + MessageService.Clear(); + + _dialog = await DialogService.ShowPanelAsync(simplePerson, new DialogParameters() + { + Content = simplePerson, + Alignment = HorizontalAlignment.Right, + Title = $"Hello {simplePerson.Firstname}", + PrimaryAction = "Yes", + SecondaryAction = "No", + PreventDismissOnOverlayClick = true, + OnDialogValidation = () => + { + var result = simplePerson.Firstname.Length > 0 && simplePerson.Lastname.Length > 0; + + if (!result) + { + DemoLogger.WriteLine("Panel cannot be closed because of validation errors."); + + MessageService.ShowMessageBar(options => + { + options.Intent = MessageIntent.Error; + options.Title = "Validation error"; + options.Body = "First name and last name cannot be empty"; + options.Timestamp = DateTime.Now; + options.Section = App.MESSAGES_DIALOG; + }); + } + + return result; + } + }); + + DialogResult result = await _dialog.Result; + } +} diff --git a/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor b/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor index 0e7fc67e50..122f73fd06 100644 --- a/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor +++ b/examples/Demo/Shared/Pages/Panel/Examples/SimplePanel.razor @@ -1,5 +1,7 @@ @implements IDialogContentComponent + +

Hello @Content.Firstname

Your lastname is @Content.Lastname and you are @Content.Age years young

@@ -12,4 +14,4 @@ @code { [Parameter] public SimplePerson Content { get; set; } = default!; -} \ No newline at end of file +} diff --git a/examples/Demo/Shared/Pages/Panel/PanelPage.razor b/examples/Demo/Shared/Pages/Panel/PanelPage.razor index faf759c461..c721627a72 100644 --- a/examples/Demo/Shared/Pages/Panel/PanelPage.razor +++ b/examples/Demo/Shared/Pages/Panel/PanelPage.razor @@ -52,6 +52,14 @@ + + + The panel that is anchored to the right side of the screen can be dismissed by clicking the dismiss button (at the top), + 'No' button (at the bottom) or 'Yes' button (at the bottom).
+ Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button. + + +

Documentation

diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs index 2efbed4b19..d2cd0355c7 100644 --- a/src/Core/Components/Dialog/FluentDialog.razor.cs +++ b/src/Core/Components/Dialog/FluentDialog.razor.cs @@ -241,6 +241,16 @@ public async Task CloseAsync(DialogResult dialogResult) { await Instance.Parameters.OnDialogClosing.InvokeAsync(Instance); } + + if (Instance.Parameters.OnDialogValidation != null && !dialogResult.Cancelled) + { + var isValid = Instance.Parameters.OnDialogValidation(); + + if (!isValid) + { + return; + } + } } DialogContext?.DialogContainer.DismissInstance(Id!, dialogResult); if (Instance is not null) diff --git a/src/Core/Components/Dialog/Parameters/DialogParameters.cs b/src/Core/Components/Dialog/Parameters/DialogParameters.cs index 1edb4f7067..f6085de2e3 100644 --- a/src/Core/Components/Dialog/Parameters/DialogParameters.cs +++ b/src/Core/Components/Dialog/Parameters/DialogParameters.cs @@ -150,6 +150,14 @@ public class DialogParameters : ComponentParameters, IDialogParameters /// This method is only called when using the . /// public EventCallback OnDialogOpened { get; set; } = default!; + + /// + /// Function that is called and awaited before the dialog is closed. + /// + /// + /// This is a suitable callback to use when you need to validate the data in the dialog before it closes. + /// + public Func OnDialogValidation { get; set; } = default!; } ///