Merge pull request #6536 from abpframework/stsrki/dev-submit-disable

Disable button until an operation completes on the related form

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

@@ -0,0 +1,3 @@
+<Button form="@Form" Type="@Type" Color="@Color" Block="@Block" PreventDefaultOnSubmit="@PreventDefaultOnSubmit" Disabled="@IsDisabled" Loading="@IsLoading" Clicked="@OnClickedHandler">
+    @ChildContent
+</Button>

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

@@ -0,0 +1,62 @@
+using System;
+using System.Threading.Tasks;
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+
+namespace Volo.Abp.BlazoriseUI.Components
+{
+    public partial class SubmitButton : ComponentBase
+    {
+        protected bool Submiting { get; set; }
+
+        [Parameter]
+        public string Form { get; set; }
+
+        [Parameter]
+        public ButtonType Type { get; set; } = ButtonType.Submit;
+
+        [Parameter]
+        public Color Color { get; set; } = Color.Primary;
+
+        [Parameter]
+        public bool PreventDefaultOnSubmit { get; set; } = true;
+
+        [Parameter]
+        public bool Block { get; set; }
+
+        [Parameter]
+        public bool? Disabled { get; set; }
+
+        [Parameter]
+        public EventCallback Clicked { get; set; }
+
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        protected bool IsDisabled
+            => Disabled == true || Submiting;
+
+        protected bool IsLoading
+            => Submiting;
+
+        protected virtual async Task OnClickedHandler()
+        {
+            try
+            {
+                Submiting = true;
+
+                await Clicked.InvokeAsync(null);
+            }
+            catch (Exception)
+            {
+                throw;
+            }
+            finally
+            {
+                Submiting = false;
+
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+    }
+}

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

@@ -104,7 +104,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
-                    <Button form="RoleCreateForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="CreateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="RoleCreateForm" Clicked="@CreateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -142,7 +142,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
-                    <Button form="RoleEditForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="UpdateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="RoleEditForm" Clicked="@UpdateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>

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

@@ -176,7 +176,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
-                    <Button form="UserCreateForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="CreateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="UserCreateForm" Clicked="@CreateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -287,7 +287,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
-                    <Button form="UserEditForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="UpdateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="UserEditForm" Clicked="@UpdateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>

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

@@ -114,7 +114,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
-                    <Button form="TenantCreateForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="CreateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="TenantCreateForm" Clicked="@CreateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -148,7 +148,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
-                    <Button form="TenantEditForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="UpdateEntityAsync">@L["Save"]</Button>
+                    <SubmitButton Form="TenantEditForm" Clicked="@UpdateEntityAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -187,7 +187,7 @@
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseEditConnectionStringModal">@L["Cancel"]</Button>
-                    <Button form="ConnectionStringEditForm" Type="ButtonType.Submit" PreventDefaultOnSubmit="true" Color="Color.Primary" Clicked="UpdateConnectionStringAsync">@L["Save"]</Button>
+                    <SubmitButton Form="ConnectionStringEditForm" Clicked="@UpdateConnectionStringAsync">@L["Save"]</SubmitButton>
                 </ModalFooter>
             </Form>
         </ModalContent>