Simple alert created

src/Subjects/Presentation.Shared.Rcl/Alert/Alert.razor

@@ -0,0 +1,117 @@
+@using Microsoft.AspNetCore.Components.Routing;
+@implements IDisposable
+@inject IAlertService AlertService
+@inject NavigationManager NavigationManager
+
+@foreach (var alert in alerts)
+{
+ <div class="@CssClass(alert)">
+ <a class="close" @onclick="@(() => RemoveAlert(alert))">&times;</a>
+ <span>@alert.Message</span>
+ </div>
+}
+
+@code {
+ [Parameter]
+ public string Id { get; set; } = "default-alert";
+
+ [Parameter]
+ public bool Fade { get; set; } = true;
+
+ private List<AlertModel> alerts = new List<AlertModel>();
+
+ protected override void OnInitialized()
+ {
+ // subscribe to new alerts and location change events
+ AlertService.OnAlert += OnAlert;
+ NavigationManager.LocationChanged += OnLocationChange;
+ }
+
+ public void Dispose()
+ {
+ // unsubscribe from alerts and location change events
+ AlertService.OnAlert -= OnAlert;
+ NavigationManager.LocationChanged -= OnLocationChange;
+ }
+
+ private async void OnAlert(AlertModel alert)
+ {
+ // ignore alerts sent to other alert components
+ if (alert.Id != Id) 
+ return;
+
+ // clear alerts when an empty alert is received
+ if (alert.Message == null) 
+ {
+ // remove alerts without the 'KeepAfterRouteChange' flag set to true
+ alerts.RemoveAll(x => !x.KeepAfterRouteChange);
+
+ // set the 'KeepAfterRouteChange' flag to false for the 
+ // remaining alerts so they are removed on the next clear
+ alerts.ForEach(x => x.KeepAfterRouteChange = false);
+ }
+ else
+ {
+ // add alert to array
+ alerts.Add(alert);
+ StateHasChanged();
+
+ // auto close alert if required
+ if (alert.AutoClose)
+ {
+ await Task.Delay(3000);
+ RemoveAlert(alert);
+ }
+ }
+
+ StateHasChanged();
+ }
+
+ private void OnLocationChange(object sender, LocationChangedEventArgs e)
+ {
+ AlertService.Clear(Id);
+ }
+
+ private async void RemoveAlert(AlertModel alert)
+ {
+ // check if already removed to prevent error on auto close
+ if (!alerts.Contains(alert)) return;
+
+ if (Fade) 
+ {
+ // fade out alert
+ alert.Fade = true;
+
+ // remove alert after faded out
+ await Task.Delay(250);
+ alerts.Remove(alert);
+ } 
+ else 
+ {
+ // remove alert
+ alerts.Remove(alert);
+ }
+
+ StateHasChanged();
+ }
+
+ private string CssClass(AlertModel alert) 
+ {
+ if (alert == null) return null;
+
+ var classes = new List<string> { "alert", "alert-dismissable", "mt-4", "container" };
+
+ var alertTypeClass = new Dictionary<AlertType, string>();
+ alertTypeClass[AlertType.Success] = "alert-success";
+ alertTypeClass[AlertType.Error] = "alert-danger";
+ alertTypeClass[AlertType.Info] = "alert-info";
+ alertTypeClass[AlertType.Warning] = "alert-warning";
+
+ classes.Add(alertTypeClass[alert.Type]);
+
+ if (alert.Fade)
+ classes.Add("fade");
+
+ return string.Join(' ', classes);
+ } 
+}

src/Subjects/Presentation.Shared.Rcl/Alert/AlertModel.cs

@@ -0,0 +1,19 @@
+namespace Goodtocode.Subjects.Rcl;
+
+public class AlertModel
+{
+ public string Id { get; set; }
+ public AlertType Type { get; set; }
+ public string Message { get; set; }
+ public bool AutoClose { get; set; }
+ public bool KeepAfterRouteChange { get; set; }
+ public bool Fade { get; set; }
+}
+
+public enum AlertType
+{
+ Success,
+ Error,
+ Info,
+ Warning
+}

src/Subjects/Presentation.Shared.Rcl/Alert/AlertService.cs

@@ -0,0 +1,73 @@
+namespace Goodtocode.Subjects.Rcl;
+
+public interface IAlertService
+{
+ event Action<AlertModel> OnAlert;
+ void Success(string message, bool keepAfterRouteChange = false, bool autoClose = true);
+ void Error(string message, bool keepAfterRouteChange = false, bool autoClose = true);
+ void Info(string message, bool keepAfterRouteChange = false, bool autoClose = true);
+ void Warn(string message, bool keepAfterRouteChange = false, bool autoClose = true);
+ void Alert(AlertModel alert);
+ void Clear(string id = null);
+}
+
+public class AlertService : IAlertService
+{
+ private const string _defaultId = "default-alert";
+ public event Action<AlertModel> OnAlert;
+
+ public void Success(string message, bool keepAfterRouteChange = false, bool autoClose = true)
+ {
+ this.Alert(new AlertModel
+ {
+ Type = AlertType.Success,
+ Message = message,
+ KeepAfterRouteChange = keepAfterRouteChange,
+ AutoClose = autoClose
+ });
+ } 
+
+ public void Error(string message, bool keepAfterRouteChange = false, bool autoClose = true)
+ {
+ this.Alert(new AlertModel
+ {
+ Type = AlertType.Error,
+ Message = message,
+ KeepAfterRouteChange = keepAfterRouteChange,
+ AutoClose = autoClose
+ });
+ } 
+
+ public void Info(string message, bool keepAfterRouteChange = false, bool autoClose = true)
+ {
+ this.Alert(new AlertModel
+ {
+ Type = AlertType.Info,
+ Message = message,
+ KeepAfterRouteChange = keepAfterRouteChange,
+ AutoClose = autoClose
+ });
+ } 
+
+ public void Warn(string message, bool keepAfterRouteChange = false, bool autoClose = true)
+ {
+ this.Alert(new AlertModel
+ {
+ Type = AlertType.Warning,
+ Message = message,
+ KeepAfterRouteChange = keepAfterRouteChange,
+ AutoClose = autoClose
+ });
+ } 
+
+ public void Alert(AlertModel alert)
+ {
+ alert.Id = alert.Id ?? _defaultId;
+ this.OnAlert?.Invoke(alert);
+ }
+
+ public void Clear(string id = _defaultId)
+ {
+ this.OnAlert?.Invoke(new AlertModel { Id = id });
+ }
+}

src/Subjects/Presentation.Shared.Rcl/Alert/SimpleAlert.razor

@@ -0,0 +1,12 @@
+@using Goodtocode.Common.Extensions;
+
+<div hidden="@string.IsNullOrEmpty(Message)" class="alert alert-danger m-4" role="alert">@Message</div>
+
+@code {
+ [Parameter]
+ public string Message { get; set; }
+
+ protected override async Task OnParametersSetAsync()
+ {
+ }
+}

src/Subjects/Presentation.Web.BlazorServer/Pages/Business/BusinessCreate.razor

@@ -3,6 +3,7 @@
 @using Goodtocode.Subjects.BlazorServer.Models;
 @using Goodtocode.Subjects.Domain;
 @using System.ComponentModel.DataAnnotations;
+@using Goodtocode.Subjects.Rcl.Alert
 
 @inject BusinessService Service
 
@@ -25,7 +26,7 @@
  </div>
  <button type="submit" class="btn btn-primary" @onclick="CreateBusineses">Create</button>
  <ValidationSummary class="mt-3" />
- <div hidden="@string.IsNullOrEmpty(alertMessage)" class="alert alert-danger" role="alert">@alertMessage</div>
+ <SimpleAlert Message="@alertMessage" />
 </EditForm>
 
 @code {

src/Subjects/Presentation.Web.BlazorServer/Program.cs

@@ -50,8 +50,9 @@
  builder.Configuration["Subjects:Scope"])
 );
 
-builder.Services.AddSingleton<BusinessService>();
 builder.Services.AddSingleton<PageHistoryState>();
+builder.Services.AddScoped<IAlertService, AlertService>();
+builder.Services.AddSingleton<BusinessService>();
 
 var app = builder.Build();