Enhance MudBlazor UI components with improved dialog focus and layout options

framework/src/Volo.Abp.MudBlazorUI/MudBlazorUiPageProgressService.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Threading;
 using System.Threading.Tasks;
 using Volo.Abp.AspNetCore.Components.Progression;
 using Volo.Abp.DependencyInjection;
@@ -6,25 +7,43 @@ using Volo.Abp.DependencyInjection;
 namespace Volo.Abp.MudBlazorUI;
 
 [Dependency(ReplaceServices = true)]
-public class MudBlazorUiPageProgressService : IUiPageProgressService, IScopedDependency
+public class MudBlazorUiPageProgressService : IUiPageProgressService, IScopedDependency, IDisposable
 {
     /// <summary>
     /// An event raised after the progress is changed.
     /// </summary>
     public event EventHandler<UiPageProgressEventArgs>? ProgressChanged;
 
+    protected virtual int HideDelayMs => 250;
+
+    private int _activeCount;
+    private UiPageProgressOptions _lastOptions = new();
+    private readonly Timer _hideTimer;
+
+    public MudBlazorUiPageProgressService()
+    {
+        _hideTimer = new Timer(_ => ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(-1, _lastOptions)));
+    }
+
     public Task Go(int? percentage, Action<UiPageProgressOptions>? options = null)
     {
-        var uiPageProgressOptions = CreateDefaultOptions();
+        var opt = new UiPageProgressOptions();
-        options?.Invoke(uiPageProgressOptions);
+        options?.Invoke(opt);
+        _lastOptions = opt;
 
-        ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(percentage, uiPageProgressOptions));
+        if (percentage == -1 && Interlocked.Decrement(ref _activeCount) <= 0)
+        {
+            Interlocked.Exchange(ref _activeCount, 0);
+            _hideTimer.Change(HideDelayMs, Timeout.Infinite);
+        }
+        else if (percentage == null && Interlocked.Increment(ref _activeCount) == 1)
+        {
+            _hideTimer.Change(Timeout.Infinite, Timeout.Infinite);
+            ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(null, opt));
+        }
 
         return Task.CompletedTask;
     }
 
-    protected virtual UiPageProgressOptions CreateDefaultOptions()
+    public void Dispose() => _hideTimer.Dispose();
-    {
-        return new UiPageProgressOptions();
-    }
 }

modules/account/src/Volo.Abp.Account.Blazor.MudBlazor/_Imports.razor

@@ -3,3 +3,4 @@
 @using Volo.Abp.MudBlazorUI
 @using Volo.Abp.MudBlazorUI.Components
 @using MudBlazor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor

@@ -5,7 +5,7 @@
 @using Volo.Abp.FeatureManagement.Localization
 @inherits AbpFeatureManagementComponentBase
 
-<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true })">
+<MudDialog DefaultFocus="DefaultFocus.None" @bind-Visible="@_isVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["Features"]@ProviderKeyDisplayName</MudText>
     </TitleContent>
@@ -16,7 +16,7 @@
         }
         else
         {
-            <MudTabs @bind-ActivePanelIndex="@_activeTabIndex" Variant="Variant.Pills" Position="Position.Left"
+            <MudTabs KeepPanelsAlive="true" @bind-ActivePanelIndex="@_activeTabIndex" Variant="Variant.Pills" Position="Position.Left"
                 PanelClass="pa-4">
                 @foreach (var group in Groups)
                 {

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/_Imports.razor

@@ -1,4 +1,5 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
 @using MudBlazor
 @using Volo.Abp.MudBlazorUI

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/RoleManagement.razor

@@ -33,7 +33,7 @@
 @* ************************* CREATE DIALOG ************************* *@
 @if (HasCreatePermission)
 {
-    <MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_createDialog" Options="@CreateDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewRole"]</MudText>
         </TitleContent>
@@ -58,7 +58,7 @@
 @* ************************* EDIT DIALOG ************************* *@
 @if (HasUpdatePermission)
 {
-    <MudDialog @ref="_editDialog" Options="@EditDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_editDialog" Options="@EditDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor

@@ -44,16 +44,17 @@
 @* ************************* CREATE DIALOG ************************* *@
 @if (HasCreatePermission)
 {
-    <MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.None" @ref="_createDialog" Options="@CreateDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewUser"]</MudText>
         </TitleContent>
         <DialogContent>
             <MudForm @ref="@CreateFormRef" Model="@NewEntity">
-                <MudTabs @bind-ActivePanelIndex="@_createTabIndex" PanelClass="pa-4">
+                <MudTabs @bind-ActivePanelIndex="@_createTabIndex" PanelClass="pa-4" KeepPanelsAlive="true">
                     <MudTabPanel Text="@L["UserInformations"]">
                         <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.UserName"
                                      Label="@L["DisplayName:UserName"]"
+                                     AutoFocus="true"
                                      Required="true"
                                      RequiredError="@L["The {0} field is required.", L["DisplayName:UserName"]]" />
                         <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Name"
@@ -108,17 +109,18 @@
 @* ************************* EDIT DIALOG ************************* *@
 @if (HasUpdatePermission)
 {
-    <MudDialog @ref="_editDialog" Options="@EditDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.None" @ref="_editDialog" Options="@EditDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>
         <DialogContent>
             <MudForm @ref="@EditFormRef" Model="@EditingEntity">
                 <input type="hidden" @bind-value="@EditingEntity.ConcurrencyStamp" />
-                <MudTabs @bind-ActivePanelIndex="@_editTabIndex" PanelClass="pa-4">
+                <MudTabs @bind-ActivePanelIndex="@_editTabIndex" PanelClass="pa-4" KeepPanelsAlive="true">
                     <MudTabPanel Text="@L["UserInformations"]">
                         <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.UserName"
                                      Label="@L["DisplayName:UserName"]"
+                                     AutoFocus="true"
                                      Required="true"
                                      RequiredError="@L["The {0} field is required.", L["DisplayName:UserName"]]" />
                         <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Name"

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/_Imports.razor

@@ -1,6 +1,7 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.AspNetCore.Components.Forms
 @using Volo.Abp.AspNetCore.Components.Web
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
 @using Volo.Abp.MudBlazorUI
 @using Volo.Abp.MudBlazorUI.Components
 @using global::MudBlazor

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/PermissionManagementModal.razor

@@ -3,7 +3,7 @@
 @using JetBrains.Annotations
 @using Volo.Abp.PermissionManagement.Localization
 
-<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
+<MudDialog DefaultFocus="DefaultFocus.None" @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Large, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["Permissions"] - @_entityDisplayName</MudText>
     </TitleContent>
@@ -18,11 +18,11 @@
                              Immediate="true" />
             </MudItem>
             <MudItem xs="12" sm="4" Class="d-flex align-items-center">
-                <MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default" T="bool"
+                <MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default" T="bool?"
+                            TriState="true"
                             Disabled="@_selectAllDisabled"
-                            Value="@GrantAll"
+                            Value="@(GrantAny ? (bool?)null : (bool?)GrantAll)"
-                            Indeterminate="@GrantAny"
+                            ValueChanged="@(async (bool? b) => await GrantAllAsync(b == true))"
-                            ValueChanged="@(async (bool b) => await GrantAllAsync(b))"
                             Label="@L["SelectAllInAllTabs"]" />
             </MudItem>
         </MudGrid>
@@ -32,7 +32,7 @@
 
             @if (_groups != null && _groups.Any())
             {
-                <MudTabs @bind-ActivePanelIndex="@_activeTabIndex"
+                <MudTabs KeepPanelsAlive="true" @bind-ActivePanelIndex="@_activeTabIndex"
                         Variant="Variant.Pills"
                         Position="Position.Left"
                         PanelClass="pa-4">
@@ -41,11 +41,13 @@
                         <MudTabPanel Text="@($"{group.DisplayName} ({group.Permissions.Count(x => x.IsGranted)})")">
                             <div>
                                 <MudCheckBox Color="Color.Primary" UncheckedColor="Color.Default"
-                                            T="bool"
+                                            T="bool?"
+                                            TriState="true"
                                             Disabled="@(IsPermissionGroupDisabled(group))"
-                                            Value="@(group.Permissions.All(x => x.IsGranted))"
+                                            Value="@(group.Permissions.Any(x => x.IsGranted) && !group.Permissions.All(x => x.IsGranted)
-                                            Indeterminate="@(group.Permissions.Any(x => x.IsGranted) && !group.Permissions.All(x => x.IsGranted))"
+                                                ? (bool?)null
-                                            ValueChanged="@(async (bool b) => await GroupGrantAllChanged(b, group))"
+                                                : (bool?)group.Permissions.All(x => x.IsGranted))"
+                                            ValueChanged="@(async (bool? b) => await GroupGrantAllChanged(b == true, group))"
                                             Label="@L["SelectAllInThisTab"]" />
                                 <MudDivider Class="my-2" />
 

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/ResourcePermissionManagementModal.razor

@@ -1,7 +1,7 @@
 @using global::MudBlazor
 @inherits Volo.Abp.AspNetCore.Components.AbpComponentBase
 
-<MudDialog @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.ExtraLarge, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
+<MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_isVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.ExtraLarge, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
     <TitleContent>
         <MudText Typo="Typo.h6">@L["ResourcePermissions"] - @ResourceDisplayName</MudText>
     </TitleContent>
@@ -82,7 +82,7 @@
 @* Create Resource Permission Dialog *@
 @if (_createDialogVisible)
 {
-    <MudDialog @bind-Visible="@_createDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_createDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["AddResourcePermission"]</MudText>
         </TitleContent>
@@ -127,7 +127,7 @@
 @* Edit Resource Permission Dialog *@
 @if (_editDialogVisible)
 {
-    <MudDialog @bind-Visible="@_editDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_editDialogVisible" Options="@(new DialogOptions { MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true, BackdropClick = false })">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["UpdateResourcePermission"]</MudText>
         </TitleContent>

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/_Imports.razor

@@ -1,3 +1,4 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Volo.Abp.AspNetCore.Components.Web
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
 @using MudBlazor

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor

@@ -73,7 +73,7 @@
 
     @if (HasSendTestEmailPermission)
     {
-        <MudDialog @bind-Visible="@_sendTestEmailDialogVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true })">
+        <MudDialog DefaultFocus="DefaultFocus.FirstChild" @bind-Visible="@_sendTestEmailDialogVisible" Options="@(new DialogOptions { BackdropClick = false, MaxWidth = MaxWidth.Medium, FullWidth = true, CloseOnEscapeKey = true })">
             <TitleContent>
                 <MudText Typo="Typo.h6">@L["SendTestEmail"]</MudText>
             </TitleContent>

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/_Imports.razor

@@ -1,4 +1,5 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
 @using MudBlazor
 @using Volo.Abp.MudBlazorUI

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor

@@ -32,7 +32,7 @@
 @* ************************* CREATE MODAL ************************* *@
 @if (HasCreatePermission)
 {
-    <MudDialog @ref="_createDialog" Options="@CreateDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_createDialog" Options="@CreateDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["NewTenant"]</MudText>
         </TitleContent>
@@ -69,7 +69,7 @@
 @* ************************* EDIT MODAL ************************* *@
 @if (HasUpdatePermission)
 {
-    <MudDialog @ref="_editDialog" Options="@EditDialogOptions">
+    <MudDialog DefaultFocus="DefaultFocus.FirstChild" @ref="_editDialog" Options="@EditDialogOptions">
         <TitleContent>
             <MudText Typo="Typo.h6">@L["Edit"]</MudText>
         </TitleContent>

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/_Imports.razor

@@ -1,4 +1,5 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
 @using MudBlazor
 @using Volo.Abp.MudBlazorUI