Merge pull request #6270 from abpframework/page-alerts-documentation

Blazor UI : Page alert improvements and documentation

docs/en/UI/Blazor/Page-Alerts.md

@@ -1,3 +1,62 @@
 # Blazor UI: Page Alerts
 
-TODO
+It is common to show error, warning or information alerts to inform the user. An example *Service Interruption* alert is shown below:
+
+![blazor-page-alert-example](../../images/blazor-page-alert-example.png)
+
+## Quick Example
+
+Simply [inject](../../Dependency-Injection.md) `IAlertManager` to your page or component and call the `Alerts.Warning` method to show a success message.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index
+    {
+        private readonly IAlertManager _alertManager;
+
+        public Index(IAlertManager alertManager)
+        {
+            this._alertManager = alertManager;
+        }
+
+        protected override void OnInitialized()
+        {
+            _alertManager.Alerts.Warning(
+                "We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!",
+                "Service Interruption");
+            base.OnInitialized();
+        }
+    }
+}
+```
+
+If you inherit your page or component from the `AbpComponentBase` class, you can use the `Alerts` property to add alerts.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index : AbpComponentBase
+    {
+        protected override void OnInitialized()
+        {
+            Alerts.Warning(
+                "We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!",
+                "Service Interruption");
+            base.OnInitialized();
+        }
+    }
+}
+```
+
+> You typically use `@inherits AbpComponentBase` in the `.razor` file to inherit from the `AbpComponentBase`, instead of inheriting in the code behind file.
+
+### Alert Types
+
+`Warning` is used to show a warning alert. Other common methods are `Info`, `Danger` and `Success`.
+
+Beside the standard methods, you can use the `Alerts.Add` method by passing an `AlertType` `enum` with one of these values: `Default`, `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`.
+
+### Dismissible
+
+All alert methods gets an optional `dismissible` parameter. Default value is `true` which makes the alert box dismissible. Set it to `false` to create a sticky alert box.

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/Alerts/AlertManager.cs

@@ -1,4 +1,5 @@
-using Volo.Abp.DependencyInjection;
+using Volo.Abp.AspNetCore.Components.Alerts;
+using Volo.Abp.DependencyInjection;
 
 namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
 {

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/Alerts/IAlertManager.cs

@@ -1,7 +0,0 @@
-namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
-{
-    public interface IAlertManager
-    {
-        AlertList Alerts { get; }
-    }
-}

framework/src/Volo.Abp.AspNetCore.Components/Volo/Abp/AspNetCore/Components/AbpComponentBase.cs

@@ -5,6 +5,7 @@ using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Localization;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Abstractions;
+using Volo.Abp.AspNetCore.Components.Alerts;
 using Volo.Abp.AspNetCore.Components.Messages;
 using Volo.Abp.AspNetCore.Components.Notifications;
 using Volo.Abp.Localization;
@@ -61,6 +62,11 @@ namespace Volo.Abp.AspNetCore.Components
         protected IUiNotificationService Notify => LazyGetNonScopedRequiredService(ref _notify);
         private IUiNotificationService _notify;
 
+        protected IAlertManager AlertManager => LazyGetNonScopedRequiredService(ref _alertManager);
+        private IAlertManager _alertManager;
+
+        protected AlertList Alerts => AlertManager.Alerts;
+
         protected IObjectMapper ObjectMapper
         {
             get

framework/src/Volo.Abp.AspNetCore.Components/Volo/Abp/AspNetCore/Components/Alerts/AlertList.cs

@@ -1,6 +1,11 @@
-using System.Collections.ObjectModel;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
 
-namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
+namespace Volo.Abp.AspNetCore.Components.Alerts
 {
     public class AlertList : ObservableCollection<AlertMessage>
     {
@@ -29,4 +34,4 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
             Add(new AlertMessage(AlertType.Success, text, title, dismissible));
         }
     }
-}
+}

framework/src/Volo.Abp.AspNetCore.Components/Volo/Abp/AspNetCore/Components/Alerts/AlertMessage.cs

@@ -1,6 +1,6 @@
 using JetBrains.Annotations;
 
-namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
+namespace Volo.Abp.AspNetCore.Components.Alerts
 {
     public class AlertMessage
     {
@@ -27,4 +27,4 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
             Dismissible = dismissible;
         }
     }
-}
+}

framework/src/Volo.Abp.AspNetCore.Components/Volo/Abp/AspNetCore/Components/Alerts/AlertType.cs

@@ -1,4 +1,10 @@
-namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Components.Alerts
 {
     public enum AlertType
     {
@@ -12,4 +18,4 @@
         Light,
         Dark
     }
-}
+}

framework/src/Volo.Abp.AspNetCore.Components/Volo/Abp/AspNetCore/Components/Alerts/IAlertManager.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Components.Alerts
+{
+    public interface IAlertManager
+    {
+        AlertList Alerts { get; }
+    }
+}

framework/src/Volo.Abp.BlazoriseUI/Components/AlertWrapper.cs

@@ -1,4 +1,4 @@
-using Volo.Abp.AspNetCore.Components.WebAssembly.Alerts;
+using Volo.Abp.AspNetCore.Components.Alerts;
 
 namespace Volo.Abp.BlazoriseUI.Components
 {

framework/src/Volo.Abp.BlazoriseUI/Components/PageAlert.razor.cs

@@ -5,7 +5,7 @@ using System.Linq;
 using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
-using Volo.Abp.AspNetCore.Components.WebAssembly.Alerts;
+using Volo.Abp.AspNetCore.Components.Alerts;
 
 namespace Volo.Abp.BlazoriseUI.Components
 {
@@ -47,7 +47,7 @@ namespace Volo.Abp.BlazoriseUI.Components
                 {
                     Alerts.Add(new AlertWrapper
                     {
-                        AlertMessage = (AspNetCore.Components.WebAssembly.Alerts.AlertMessage)item,
+                        AlertMessage = (AspNetCore.Components.Alerts.AlertMessage)item,
                         IsVisible = true
                     });
                 }