Feature/toasts (#411)

Co-authored-by: Jeffrey T. Fritz <csharpfritz@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/TagzApp.Blazor.Client/Bootstrap/MessageSeverity.cs

@@ -0,0 +1,10 @@
+namespace TagzApp.Blazor.Client.Bootstrap;
+
+public enum MessageSeverity
+{
+	Normal = 0,
+	Info,
+	Success,
+	Warning,
+	Danger
+}

src/TagzApp.Blazor.Client/Bootstrap/MessageSeverityExtensions.cs

@@ -0,0 +1,45 @@
+namespace TagzApp.Blazor.Client.Bootstrap;
+
+public static class MessageSeverityExtensions
+{
+
+	public static string ToBackgroundColorCss(this MessageSeverity severity)
+		=> severity switch
+		{
+			MessageSeverity.Info => "bg-info",
+			MessageSeverity.Success => "bg-success",
+			MessageSeverity.Warning => "bg-warning",
+			MessageSeverity.Danger => "bg-danger",
+			_ => string.Empty
+		};
+
+	public static string ToTextColorCss(this MessageSeverity severity)
+		=> severity switch
+		{
+			MessageSeverity.Info => "text-info",
+			MessageSeverity.Success => "text-success",
+			MessageSeverity.Warning => "text-warning",
+			MessageSeverity.Danger => "text-danger",
+			_ => string.Empty
+		};
+
+	public static string ToHeaderText(this MessageSeverity severity)
+		=> severity switch
+		{
+			MessageSeverity.Info => "Info",
+			MessageSeverity.Success => "Success",
+			MessageSeverity.Danger => "Error",
+			MessageSeverity.Warning => "Warning",
+			_ => "Message"
+		};
+
+	public static string ToHeaderIconCss(this MessageSeverity severity)
+		=> severity switch
+		{
+			MessageSeverity.Warning => "bi-exclamation-circle-fill",
+			MessageSeverity.Danger => "bi-x-circle-fill",
+			MessageSeverity.Success => "bi-check-circle-fill",
+			MessageSeverity.Normal => "bi-envelope",
+			_ => "bi-info-circle-fill",
+		};
+}

src/TagzApp.Blazor.Client/Components/Admin/AzureQueue.Config.Ui.razor

@@ -1,4 +1,6 @@
 @using System.ComponentModel.DataAnnotations
+@inject ToastService ToastService
+
 <UiProviderConfig ProviderName="AzureQueue" Health="@Health" ProviderIconCssClass="bi-globe2">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
@@ -34,7 +36,6 @@
 
 	protected override async Task OnParametersSetAsync()
 	{
-
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
 		Model = new ViewModel
@@ -46,7 +47,6 @@
 		Health = await Provider.GetHealth();
 
 		await base.OnParametersSetAsync();
-
 	}
 
 	private async Task SaveConfig()
@@ -58,20 +58,17 @@
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel
 	{
-
 		// add properties for each of the fields you want to edit
 
 		[Required]
 		public string QueueConnectionString { get; set; }
 
 		public bool Enabled { get; set; }
-
-
 	}
 
 }

src/TagzApp.Blazor.Client/Components/Admin/Blazot.Config.Ui.razor

@@ -1,5 +1,7 @@
 @using System.ComponentModel.DataAnnotations
 @using System.Text.Json
+@inject ToastService ToastService
+
 <UiProviderConfig ProviderName="Blazot" Health="@Health" ProviderIconCssClass="bi-blazot">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
@@ -71,7 +73,6 @@
 
 	protected override async Task OnParametersSetAsync()
 	{
-
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
 		var headers = providerConfiguration.GetConfigurationByKey("DefaultHeaders");
@@ -89,12 +90,10 @@
 		Health = await Provider.GetHealth();
 
 		await base.OnParametersSetAsync();
-
 	}
 
 	private async Task SaveConfig()
 	{
-
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
 		Model.DefaultHeaders.Remove(string.Empty);
@@ -106,7 +105,7 @@
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel

src/TagzApp.Blazor.Client/Components/Admin/Bluesky.Config.Ui.razor

@@ -1,5 +1,7 @@
 @using System.ComponentModel.DataAnnotations
 @using System.Text.Json
+@inject ToastService ToastService
+
 <UiProviderConfig ProviderName="Bluesky" Health="@Health" ProviderIconCssClass="icon-bluesky">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
@@ -44,26 +46,21 @@
 		Health = await Provider.GetHealth();
 
 		await base.OnParametersSetAsync();
-
 	}
 
 	private async Task SaveConfig()
 	{
-
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel
 	{
-
 		public bool Enabled { get; set; }
-
-
 	}
 
 

src/TagzApp.Blazor.Client/Components/Admin/Mastodon.Config.Ui.razor

@@ -1,5 +1,7 @@
 @using System.ComponentModel.DataAnnotations
 @using System.Text.Json
+@inject ToastService ToastService
+
 <UiProviderConfig ProviderName="Mastodon" Health="@Health" ProviderIconCssClass="bi-mastodon">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
@@ -85,12 +87,11 @@
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel
 	{
-
 		// add properties for each of the fields you want to edit
 
 		[Required]
@@ -104,8 +105,6 @@
 		public bool	UseHttp2 { get; set; }
 
 		public bool Enabled { get; set; }
-
-
 	}
 
 

src/TagzApp.Blazor.Client/Components/Admin/TwitchChat.Config.Ui.razor

@@ -1,4 +1,5 @@
 @using System.ComponentModel.DataAnnotations
+@inject ToastService ToastService
 @inject HttpClient Http
 @inject NavigationManager NavMgr
 @inject IConfiguration Config
@@ -119,12 +120,11 @@
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel
 	{
-
 		// add properties for each of the fields you want to edit
 
 		[Required]
@@ -137,8 +137,6 @@
 		public string ChannelName { get; set; } = "csharpfritz";
 
 		public bool Enabled { get; set; }
-
-
 	}
 
 }

src/TagzApp.Blazor.Client/Components/Admin/Twitter.Config.Ui.razor

@@ -1,5 +1,7 @@
 @using System.ComponentModel.DataAnnotations
 @using System.Text.Json
+@inject ToastService ToastService
+
 <UiProviderConfig ProviderName="Twitter" Health="@Health" ProviderIconCssClass="bi-twitter-x">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
@@ -85,12 +87,11 @@
 		providerConfiguration.SetConfigurationByKey("Enabled", Model.Enabled.ToString());
 
 		await Provider.SaveConfiguration(ConfigureTagzAppFactory.Current, providerConfiguration);
-
+		ToastService.Add($"Saved {providerConfiguration.Name} Configuration", MessageSeverity.Success);
 	}
 
 	public class ViewModel
 	{
-
 		// add properties for each of the fields you want to edit
 
 		[Required]
@@ -104,9 +105,5 @@
 		public bool	UseHttp2 { get; set; }
 
 		public bool Enabled { get; set; }
-
-
 	}
-
-
 }

src/TagzApp.Blazor.Client/Components/Toast.razor

@@ -0,0 +1,49 @@
+@namespace TagzApp.Blazor.Client.Components
+@inject ToastService ToastService
+@implements IDisposable
+
+<div class="toast fade @_DisplayCssClass" role="alert" aria-live="assertive" aria-atomic="true" style="z-index: 999">
+  <div class="toast-header">
+    <i class="bi @Message.Severity.ToHeaderIconCss() @Message.Severity.ToTextColorCss() px-2"/>
+    <strong class="me-auto">@Message.Severity.ToHeaderText()</strong>
+    @* <small class="text-muted">just now</small> *@
+    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"
+            @onclick="@(() => ToastService.Remove(Message))"></button>
+  </div>
+  <div class="toast-body @Message.Severity.ToBackgroundColorCss() @BodyTextCss fw-bold">
+    @Message.Message
+  </div>
+</div>
+
+@code {
+    [Parameter] public ToastMessage Message { get; set; }
+
+    private System.Timers.Timer _Timer;
+    private System.Timers.Timer _DestroyTimer;
+    private string _DisplayCssClass = "show";
+
+    private string BodyTextCss => Message.Severity == MessageSeverity.Normal
+      ? "text-white-50"
+      : "text-black-50";
+
+    protected override void OnInitialized()
+    {
+      base.OnInitialized();
+      _Timer = new(Message.Duration);
+      _Timer.Elapsed += (_, _) => Destroy();
+      _Timer.AutoReset = false;
+      _Timer.Enabled = true;
+    }
+
+    private void Destroy()
+    {
+      ToastService.Remove(Message);
+    }
+
+    public void Dispose()
+    {
+      _Timer?.Dispose();
+      _DestroyTimer?.Dispose();
+    }
+
+}

src/TagzApp.Blazor.Client/Components/ToastProvider.razor

@@ -0,0 +1,31 @@
+@inject ToastService ToastService
+@using TagzApp.Blazor.Client.Services
+@implements IDisposable
+@rendermode InteractiveAuto
+
+<div class="toast-container position-fixed top-0 end-0 p-3">
+    @foreach (var message in ToastService.Messages)
+    {
+        <Toast Message="@message"/>
+    }
+</div>
+
+@code {
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        ToastService.OnUpdate += Update;
+    }
+
+    private void Update()
+    {
+        InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose()
+    {
+        ToastService.OnUpdate -= StateHasChanged;
+    }
+}

src/TagzApp.Blazor.Client/Program.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using TagzApp.Blazor.Client;
+using TagzApp.Blazor.Client.Services;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 
@@ -9,5 +10,6 @@
 builder.Services.AddAuthorizationCore();
 builder.Services.AddCascadingAuthenticationState();
 builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();
+builder.Services.AddScoped<ToastService>();
 
 await builder.Build().RunAsync();