WIP: Confirmation message implementation and started the adding options and styles

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/IUiMessageNotifierService.cs

@@ -7,19 +7,43 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly
     {
         event EventHandler<UiMessageEventArgs> MessageReceived;
 
-        Task NotifyMessageReceived(string message, string title = null);
+        Task NotifyMessageReceivedAsync(UiMessageType messageType, string message, string title = null);
+
+        Task NotifyConfirmationReceivedAsync(string message, string title, TaskCompletionSource<bool> callback);
     }
 
     public class UiMessageEventArgs : EventArgs
     {
-        public UiMessageEventArgs(string message, string title)
+        public UiMessageEventArgs(UiMessageType messageType, string message, string title)
+        {
+            MessageType = messageType;
+            Message = message;
+            Title = title;
+        }
+
+        public UiMessageEventArgs(UiMessageType messageType, string message, string title, TaskCompletionSource<bool> callback)
         {
+            MessageType = messageType;
             Message = message;
             Title = title;
+            Callback = callback;
         }
 
+        public UiMessageType MessageType { get; set; }
+
         public string Message { get; }
 
         public string Title { get; }
+
+        public TaskCompletionSource<bool> Callback { get; }
+    }
+
+    public enum UiMessageType
+    {
+        Info,
+        Success,
+        Warning,
+        Error,
+        Confirmation,
     }
 }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/UiMessageOptions.cs

@@ -0,0 +1,19 @@
+namespace Volo.Abp.AspNetCore.Components.WebAssembly
+{
+    public class UiMessageOptions
+    {
+        public bool ShowMessageIcon { get; set; } = true;
+
+        public string OkButtonText { get; set; }
+
+        public object OkButtonIcon { get; set; }
+
+        public string ConfirmButtonText { get; set; }
+
+        public object ConfirmButtonIcon { get; set; }
+
+        public string CancelButtonText { get; set; }
+
+        public object CancelButtonIcon { get; set; }
+    }
+}

framework/src/Volo.Abp.BlazoriseUI/BlazoriseUiMessageService.cs

@@ -1,5 +1,4 @@
 using System.Threading.Tasks;
-using Blazorise;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Abstractions;
 using Volo.Abp.AspNetCore.Components.WebAssembly;
@@ -23,27 +22,31 @@ namespace Volo.Abp.BlazoriseUI
 
         public Task InfoAsync(string message, string title = null)
         {
-            return uiMessageNotifierService.NotifyMessageReceived(message, title);
+            return uiMessageNotifierService.NotifyMessageReceivedAsync(UiMessageType.Info, message, title);
         }
 
         public Task SuccessAsync(string message, string title = null)
         {
-            return uiMessageNotifierService.NotifyMessageReceived(message, title);
+            return uiMessageNotifierService.NotifyMessageReceivedAsync(UiMessageType.Success, message, title);
         }
 
         public Task WarnAsync(string message, string title = null)
         {
-            return uiMessageNotifierService.NotifyMessageReceived(message, title);
+            return uiMessageNotifierService.NotifyMessageReceivedAsync(UiMessageType.Warning, message, title);
         }
 
         public Task ErrorAsync(string message, string title = null)
         {
-            return uiMessageNotifierService.NotifyMessageReceived(message, title);
+            return uiMessageNotifierService.NotifyMessageReceivedAsync(UiMessageType.Error, message, title);
         }
 
-        public Task<bool> ConfirmAsync(string message, string title = null)
+        public async Task<bool> ConfirmAsync(string message, string title = null)
         {
-            return Task.FromResult(true);
+            var callback = new TaskCompletionSource<bool>();
+
+            await uiMessageNotifierService.NotifyConfirmationReceivedAsync(message, title, callback);
+
+            return await callback.Task;
         }
     }
 }

framework/src/Volo.Abp.BlazoriseUI/Components/UiMessageAlert.razor

@@ -1,17 +1,48 @@
 <Modal @ref="@ModalRef">
     <ModalBackdrop />
-    <ModalContent>
+    <ModalContent Centered="true">
         <ModalHeader>
             <ModalTitle>
                 @Title
             </ModalTitle>
         </ModalHeader>
         <ModalBody>
+            @if ( ShowMessageIcon )
+            {
+                <DisplayHeading Size="DisplayHeadingSize.Is2">
+                    <Icon Name="@MessageIcon" Style="@MessageIconStyle" />
+                </DisplayHeading>
+            }
             @Message
         </ModalBody>
         <ModalFooter>
-            <Button Color="Color.Secondary" Clicked="@OnCancelClicked">Cancel</Button>
-            <Button Color="Color.Primary" Clicked="@OnOKClicked">OK</Button>
+            @if ( IsConfirmation )
+            {
+                <Button Color="Color.Danger" Padding="Padding.Is2.OnX" Margin="Margin.IsAuto.FromRight" Clicked="@OnCancelClicked">
+                    @if ( Options?.CancelButtonIcon != null )
+                    {
+                        <Icon Name="@Options.CancelButtonIcon" Margin="Margin.Is2.FromRight" />
+                    }
+                    @CancelButtonText
+                </Button>
+                <Button Color="Color.Primary" Padding="Padding.Is2.OnX" Clicked="@OnConfirmClicked">
+                    @if ( Options?.ConfirmButtonIcon != null )
+                    {
+                        <Icon Name="@Options.ConfirmButtonIcon" Margin="Margin.Is2.FromRight" />
+                    }
+                    @ConfirmButtonText
+                </Button>
+            }
+            else
+            {
+                <Button Color="Color.Primary" Padding="Padding.Is2.OnX" Clicked="@OnOkClicked">
+                    @if ( Options?.OkButtonIcon != null )
+                    {
+                        <Icon Name="@Options.OkButtonIcon" Margin="Margin.Is2.FromRight" />
+                    }
+                    @OkButtonText
+                </Button>
+            }
         </ModalFooter>
     </ModalContent>
 </Modal>

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

@@ -1,5 +1,4 @@
 using System;
-using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
 using Blazorise;
@@ -10,17 +9,21 @@ namespace Volo.Abp.BlazoriseUI.Components
 {
     public partial class UiMessageAlert : ComponentBase, IDisposable
     {
+        private object messageIcon;
+
         protected override void OnInitialized()
         {
-            UiMessageNotifierService.MessageReceived += UiMessageNotifierService_MessageReceived;
+            UiMessageNotifierService.MessageReceived += OnMessageReceived;
 
             base.OnInitialized();
         }
 
-        private void UiMessageNotifierService_MessageReceived(object sender, UiMessageEventArgs e)
+        private void OnMessageReceived(object sender, UiMessageEventArgs e)
         {
+            MessageType = e.MessageType;
             Message = e.Message;
             Title = e.Title;
+            Callback = e.Callback;
 
             ModalRef.Show();
         }
@@ -29,30 +32,106 @@ namespace Volo.Abp.BlazoriseUI.Components
         {
             if (UiMessageNotifierService != null)
             {
-                UiMessageNotifierService.MessageReceived -= UiMessageNotifierService_MessageReceived;
+                UiMessageNotifierService.MessageReceived -= OnMessageReceived;
             }
         }
 
-        protected Task OnCancelClicked()
+        protected Task OnOkClicked()
         {
             ModalRef.Hide();
 
-            return Task.CompletedTask;
+            return Okayed.InvokeAsync(null);
+        }
+
+        protected Task OnConfirmClicked()
+        {
+            ModalRef.Hide();
+
+            if (IsConfirmation && Callback != null)
+            {
+                Callback.SetResult(true);
+            }
+
+            return Confirmed.InvokeAsync(null);
         }
 
-        protected Task OnOKClicked()
+        protected Task OnCancelClicked()
         {
             ModalRef.Hide();
 
-            return Task.CompletedTask;
+            if (IsConfirmation && Callback != null)
+            {
+                Callback.SetResult(false);
+            }
+
+            return Canceled.InvokeAsync(null);
         }
 
         protected Modal ModalRef { get; set; }
 
-        [Inject] IUiMessageNotifierService UiMessageNotifierService { get; set; }
+        protected virtual bool IsConfirmation
+            => MessageType == UiMessageType.Confirmation;
+
+        protected virtual bool ShowMessageIcon
+           => Options?.ShowMessageIcon ?? true;
+
+        protected virtual object MessageIcon => MessageType switch
+        {
+            UiMessageType.Info => IconName.Info,
+            UiMessageType.Success => IconName.Check,
+            UiMessageType.Warning => IconName.Exclamation,
+            UiMessageType.Error => IconName.Stop,
+            UiMessageType.Confirmation => IconName.QuestionCircle,
+            _ => null,
+        };
+
+        protected virtual string MessageIconColor => MessageType switch
+        {
+            UiMessageType.Info => "#0000ff",
+            UiMessageType.Success => "#00ff00",
+            UiMessageType.Warning => "#ffae00",
+            UiMessageType.Error => "#e8301c",
+            UiMessageType.Confirmation => "#de692f",
+            _ => null,
+        };
+
+        protected virtual string MessageIconStyle
+        {
+            get
+            {
+                var sb = new StringBuilder();
+
+                sb.Append($"color:{MessageIconColor}");
+
+                return sb.ToString();
+            }
+        }
+
+        protected virtual string OkButtonText
+            => Options?.OkButtonText ?? "OK";
+
+        protected virtual string ConfirmButtonText
+            => Options?.ConfirmButtonText ?? "Confirm";
+
+        protected virtual string CancelButtonText
+            => Options?.CancelButtonText ?? "Cancel";
+
+        [Parameter] public UiMessageType MessageType { get; set; }
 
         [Parameter] public string Title { get; set; }
 
         [Parameter] public string Message { get; set; }
+
+        [Parameter] public TaskCompletionSource<bool> Callback { get; set; }
+
+        [Parameter] public UiMessageOptions Options { get; set; }
+
+        [Parameter] public EventCallback Okayed { get; set; } // TODO: ?
+
+        [Parameter] public EventCallback Confirmed { get; set; }
+
+        [Parameter] public EventCallback Canceled { get; set; }
+
+        [Inject] protected IUiMessageNotifierService UiMessageNotifierService { get; set; }
     }
 }

framework/src/Volo.Abp.BlazoriseUI/UiMessageNotifierService.cs

@@ -10,9 +10,16 @@ namespace Volo.Abp.BlazoriseUI
     {
         public event EventHandler<UiMessageEventArgs> MessageReceived;
 
-        public Task NotifyMessageReceived(string message, string title = null)
+        public Task NotifyMessageReceivedAsync(UiMessageType messageType, string message, string title = null)
         {
-            MessageReceived?.Invoke(this, new UiMessageEventArgs(message, title));
+            MessageReceived?.Invoke(this, new UiMessageEventArgs(messageType, message, title));
+
+            return Task.CompletedTask;
+        }
+
+        public Task NotifyConfirmationReceivedAsync(string message, string title, TaskCompletionSource<bool> callback)
+        {
+            MessageReceived?.Invoke(this, new UiMessageEventArgs(UiMessageType.Confirmation, message, title, callback));
 
             return Task.CompletedTask;
         }

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/Index.razor

@@ -1,7 +1,6 @@
 @page "/"
 @using Volo.Abp.Users
 @using Volo.Abp.MultiTenancy
-@using System.Security.Claims
 @using Microsoft.Extensions.Localization
 @using MyCompanyName.MyProjectName.Localization
 @using Volo.Abp.BlazoriseUI.Components
@@ -20,19 +19,31 @@
                 <CardTitle>UI Message Tests</CardTitle>
             </CardHeader>
             <CardBody>
-                <Button Color="Color.Info" Clicked="@(()=>UiMessageService.InfoAsync("This is info message", "Info"))">
+                <Button Color="Color.Info" Clicked="@OnInfoTestClicked">
                     INFO
                 </Button>
+                <Button Color="Color.Success" Clicked="@OnSuccessTestClicked">
+                    SUCCESS
+                </Button>
+                <Button Color="Color.Warning" Clicked="@OnWarningTestClicked">
+                    WARNING
+                </Button>
+                <Button Color="Color.Danger" Clicked="@OnErrorTestClicked">
+                    DANGER
+                </Button>
+                <Button Color="Color.Secondary" Clicked="@OnConfirmTestClicked">
+                    CONFIRM
+                </Button>
             </CardBody>
         </Card>
 
         <UiMessageAlert />
 
         <h1>Welcome to the Application</h1>
-        
+
         <p class="lead px-lg-5 mx-lg-5">@L["LongWelcomeMessage"]</p>
 
-        @if (!CurrentUser.IsAuthenticated)
+        @if ( !CurrentUser.IsAuthenticated )
         {
             <a class="btn btn-primary" href="/authentication/login">
                 <i class="fa fa-sign-in-alt"></i> @L["Login"]
@@ -171,20 +182,4 @@
             <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"><i class="fab fa-github"></i><span class="text-secondary"> abpframework</span></a>
         </p>
     </div>
-</div>
-
-@code
-{
-    [Inject] IUiMessageService UiMessageService { get; set; }
-
-    private IEnumerable<Claim> _claims;
-
-    protected override async Task OnInitializedAsync()
-    {
-        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
-        if (authState.User.Identity.IsAuthenticated)
-        {
-            _claims = authState.User.Claims;
-        }
-    }
-}
+</div>

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/Index.razor.cs

@@ -0,0 +1,62 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Security.Claims;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Volo.Abp.AspNetCore.Components.WebAssembly;
+
+namespace MyCompanyName.MyProjectName.Blazor.Pages
+{
+    public partial class Index
+    {
+        private IEnumerable<Claim> _claims;
+
+        protected override async Task OnInitializedAsync()
+        {
+            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+            if ( authState.User.Identity.IsAuthenticated )
+            {
+                _claims = authState.User.Claims;
+            }
+        }
+
+        Task OnInfoTestClicked()
+        {
+            return UiMessageService.InfoAsync( "This is the Info message", "Info" );
+        }
+
+        Task OnSuccessTestClicked()
+        {
+            return UiMessageService.SuccessAsync( "This is the Success message", "Success" );
+        }
+
+        Task OnWarningTestClicked()
+        {
+            return UiMessageService.WarnAsync( "This is the Warning message", "Warning" );
+        }
+
+        Task OnErrorTestClicked()
+        {
+            return UiMessageService.ErrorAsync( "This is the Error message", "Error" );
+        }
+
+        Task OnConfirmTestClicked()
+        {
+            return UiMessageService.ConfirmAsync( "This is the Confirm message", "Confirm" )
+                .ContinueWith( result =>
+                 {
+                     if ( result.Result )
+                     {
+                         Console.WriteLine( "Confirmed" );
+                     }
+                     else
+                     {
+                         Console.WriteLine( "Cancelled" );
+                     }
+                 } );
+        }
+
+        [Inject] IUiMessageService UiMessageService { get; set; }
+    }
+}