[Dialog] Add event before closing panel to allow validation of the da…

…ta provided by the user (#2614) * [Dialog] Add event before closing panel to allow validation of the data. (#1508) * [Dialog] Add event before closing panel to allow validation of the data. (#1508) * [Dialog] Add event before closing panel to allow validation of the data. (#1508) * Rename OnDialogValidation to ValidateDialogAsync Renamed the property OnDialogValidation to ValidateDialogAsync across multiple files in the Microsoft.FluentUI.AspNetCore.Components library. Updated the member name in the XML documentation, and modified the property assignments and invocations in DialogPanelWithValidation.razor.cs, FluentDialog.razor.cs, and DialogParameters.cs to reflect this change. --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Jan 10, 2025 · e45f906 · e45f906
1 parent 784d17c
commit e45f906
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 1 deletion.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -3728,6 +3728,14 @@
             This method is only called when using the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.IDialogService"/>.
             </remarks>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.DialogParameters.ValidateDialogAsync">
+            <summary>
+            Function that is called and awaited before the dialog is closed.
+            </summary>
+            <remarks>
+            This is a suitable callback to use when you need to validate the data in the dialog <em>before</em> it closes.
+            </remarks>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1">
             <summary>
             Parameters for a dialog.

diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor
@@ -0,0 +1,6 @@
+@inject IDialogService DialogService
+@inject IMessageService MessageService
+
+<FluentButton @onclick="@OpenPanelRightAsync" Appearance="Appearance.Accent">
+    Open panel (&gt;&gt;)
+</FluentButton>
diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelWithValidation.razor.cs
@@ -0,0 +1,60 @@
+// ------------------------------------------------------------------------
+// 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<SimplePanel>(simplePerson, new DialogParameters<SimplePerson>()
+        {
+            Content = simplePerson,
+            Alignment = HorizontalAlignment.Right,
+            Title = $"Hello {simplePerson.Firstname}",
+            PrimaryAction = "Yes",
+            SecondaryAction = "No",
+            PreventDismissOnOverlayClick = true,
+            ValidateDialogAsync = async () =>
+            {
+                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;
+                    });
+                }
+
+                await Task.Delay(100);
+
+                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
@@ -1,5 +1,7 @@
 @implements IDialogContentComponent<SimplePerson>
 
+<FluentMessageBarProvider Section="@App.MESSAGES_DIALOG" MaxMessageCount="1" />
+
 <FluentDialogBody>
     <h3>Hello @Content.Firstname </h3>
     <p>Your lastname is @Content.Lastname and you are @Content.Age years young </p>
@@ -12,4 +14,4 @@
 @code {
     [Parameter]
     public SimplePerson Content { get; set; } = default!;
-}
+}
diff --git a/examples/Demo/Shared/Pages/Panel/PanelPage.razor b/examples/Demo/Shared/Pages/Panel/PanelPage.razor
@@ -52,6 +52,14 @@
     </Description>
 </DemoSection>
 
+<DemoSection Title="Panels with validation" Component="@typeof(DialogPanelWithValidation)" CollocatedFiles="@(new[] { "cs" })" AdditionalFiles="@(new[] {"SimplePanel.razor"})">
+    <Description>
+        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). <br />
+        Before the panel is closed, it will validate the data and, if not ok, will prevent the dialog from closing using the 'Yes' button.
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(DialogParameters<>)" InstanceTypes="@(new[] {typeof(string)})" GenericLabel="TData" />
diff --git 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.ValidateDialogAsync != null && !dialogResult.Cancelled)
+            {
+                var isValid = await Instance.Parameters.ValidateDialogAsync();
+
+                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
@@ -167,6 +167,14 @@ public virtual HorizontalAlignment Alignment
     /// This method is only called when using the <see cref="IDialogService"/>.
     /// </remarks>
     public EventCallback<DialogInstance> OnDialogOpened { get; set; } = default!;
+
+    /// <summary>
+    /// Function that is called and awaited before the dialog is closed.
+    /// </summary>
+    /// <remarks>
+    /// This is a suitable callback to use when you need to validate the data in the dialog <em>before</em> it closes.
+    /// </remarks>
+    public Func<Task<bool>> ValidateDialogAsync { get; set; } = default!;
 }
 
 /// <summary>