Implement Blazor UI and Module Extensions

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor/AbpTenantManagementBlazorModule.cs

@@ -3,7 +3,10 @@ using Volo.Abp.AspNetCore.Components.WebAssembly.Theming.Routing;
 using Volo.Abp.AutoMapper;
 using Volo.Abp.FeatureManagement.Blazor;
 using Volo.Abp.Modularity;
+using Volo.Abp.ObjectExtending;
+using Volo.Abp.ObjectExtending.Modularity;
 using Volo.Abp.TenantManagement.Blazor.Navigation;
+using Volo.Abp.Threading;
 using Volo.Abp.UI.Navigation;
 
 namespace Volo.Abp.TenantManagement.Blazor
@@ -15,6 +18,8 @@ namespace Volo.Abp.TenantManagement.Blazor
     )]
     public class AbpTenantManagementBlazorModule : AbpModule
     {
+        private static readonly OneTimeRunner OneTimeRunner = new();
+        
         public override void ConfigureServices(ServiceConfigurationContext context)
         {
             context.Services.AddAutoMapperObjectMapper<AbpTenantManagementBlazorModule>();
@@ -34,5 +39,19 @@ namespace Volo.Abp.TenantManagement.Blazor
                 options.AdditionalAssemblies.Add(typeof(AbpTenantManagementBlazorModule).Assembly);
             });
         }
+        
+        public override void PostConfigureServices(ServiceConfigurationContext context)
+        {
+            OneTimeRunner.Run(() =>
+            {
+                ModuleExtensionConfigurationHelper
+                    .ApplyEntityConfigurationToUi(
+                        TenantManagementModuleExtensionConsts.ModuleName,
+                        TenantManagementModuleExtensionConsts.EntityNames.Tenant,
+                        createFormTypes: new[] { typeof(TenantCreateDto) },
+                        editFormTypes: new[] { typeof(TenantUpdateDto) }
+                    );
+            });
+        }
     }
 }

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

@@ -1,64 +1,32 @@
 @page "/tenant-management/tenants"
-@attribute [Authorize( TenantManagementPermissions.Tenants.Default )]
+@attribute [Authorize(TenantManagementPermissions.Tenants.Default)]
 @using Microsoft.AspNetCore.Authorization
 @using Volo.Abp.FeatureManagement.Blazor.Components
 @using Microsoft.AspNetCore.Components.Forms
 @using Volo.Abp.TenantManagement.Localization
+@using Volo.Abp.AspNetCore.Components.WebAssembly.Theming.Layout
+@using Volo.Abp.BlazoriseUI.Components.ObjectExtending
 @inject AbpBlazorMessageLocalizerHelper<AbpTenantManagementResource> LH
 @inherits AbpCrudPageBase<ITenantAppService, TenantDto, Guid, GetTenantsInput, TenantCreateDto, TenantUpdateDto>
 
 <Card>
     <CardHeader>
         @* ************************* PAGE HEADER ************************* *@
-        <Row Class="justify-content-between">
+        <PageHeader Title="@L["Tenants"]"
-            <Column ColumnSize="ColumnSize.IsAuto">
+                    BreadcrumbItems="@BreadcrumbItems"
-                <Heading Size="HeadingSize.Is1">@L["Tenants"]</Heading>
+                    Toolbar="@Toolbar">
-            </Column>
+        </PageHeader>
-            <Column ColumnSize="ColumnSize.IsAuto">
-                @if (HasCreatePermission)
-                {
-                    <Button Color="Color.Primary" Clicked="OpenCreateModalAsync">
-                        <Icon Margin="Margin.Is1.FromRight" Name="IconName.Add"></Icon>@L["NewTenant"]
-                    </Button>
-                }
-            </Column>
-        </Row>
     </CardHeader>
     <CardBody>
         @* ************************* DATA GRID ************************* *@
-        <DataGrid TItem="TenantDto"
+        <AbpExtensibleDataGrid TItem="TenantDto"
-                  Data="Entities"
+                               Data="@Entities"
-                  ReadData="OnDataGridReadAsync"
+                               ReadData="@OnDataGridReadAsync"
-                  TotalItems="TotalCount"
+                               TotalItems="@TotalCount"
-                  ShowPager="true"
+                               ShowPager="true"
-                  PageSize="PageSize">
+                               PageSize="@PageSize"
-            <DataGridColumns>
+                               Columns="@TenantManagementTableColumns">
-                <DataGridEntityActionsColumn TItem="TenantDto" @ref="@EntityActionsColumn">
+        </AbpExtensibleDataGrid>
-                    <DisplayTemplate>
-                        <EntityActions TItem="TenantDto" EntityActionsColumn="@EntityActionsColumn">
-                            <EntityAction TItem="TenantDto"
-                                          RequiredPolicy="@UpdatePolicyName"
-                                          Clicked="() => OpenEditModalAsync(context)"
-                                          Text="@L["Edit"]"></EntityAction>
-                            <EntityAction TItem="TenantDto"
-                                          RequiredPolicy="@ManageFeaturesPolicyName"
-                                          Clicked="() => FeatureManagementModal.OpenAsync(FeatureProviderName, context.Id.ToString())"
-                                          Text="@L["Features"]"></EntityAction>
-                            <EntityAction TItem="TenantDto"
-                                          RequiredPolicy="@DeletePolicyName"
-                                          Clicked="() => DeleteEntityAsync(context)"
-                                          ConfirmationMessage="()=>GetDeleteConfirmationMessage(context)"
-                                          Text="@L["Delete"]"></EntityAction>
-                        </EntityActions>
-                    </DisplayTemplate>
-                </DataGridEntityActionsColumn>
-                <DataGridColumn TItem="TenantDto" Field="@nameof(TenantDto.Name)" Caption="@L["TenantName"].Value">
-                    <DisplayTemplate>
-                        @(context.Name)
-                    </DisplayTemplate>
-                </DataGridColumn>
-            </DataGridColumns>
-        </DataGrid>
     </CardBody>
 </Card>
 
@@ -66,12 +34,12 @@
 @if (HasCreatePermission)
 {
     <Modal @ref="CreateModal">
-        <ModalBackdrop />
+        <ModalBackdrop/>
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>
                     <ModalTitle>@L["NewTenant"]</ModalTitle>
-                    <CloseButton Clicked="CloseCreateModalAsync" />
+                    <CloseButton Clicked="CloseCreateModalAsync"/>
                 </ModalHeader>
                 <ModalBody>
                     <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
@@ -80,7 +48,7 @@
                                 <FieldLabel>@L["TenantName"]</FieldLabel>
                                 <TextEdit @bind-Text="@NewEntity.Name" Autofocus="true">
                                     <Feedback>
-                                        <ValidationError />
+                                        <ValidationError/>
                                     </Feedback>
                                 </TextEdit>
                             </Field>
@@ -90,7 +58,7 @@
                                 <FieldLabel>@L["DisplayName:AdminEmailAddress"]</FieldLabel>
                                 <TextEdit Role="@TextRole.Email" @bind-Text="@NewEntity.AdminEmailAddress">
                                     <Feedback>
-                                        <ValidationError />
+                                        <ValidationError/>
                                     </Feedback>
                                 </TextEdit>
                             </Field>
@@ -100,16 +68,17 @@
                                 <FieldLabel>@L["DisplayName:AdminPassword"]</FieldLabel>
                                 <TextEdit Role="@TextRole.Password" @bind-Text="@NewEntity.AdminPassword">
                                     <Feedback>
-                                        <ValidationError />
+                                        <ValidationError/>
                                     </Feedback>
                                 </TextEdit>
                             </Field>
                         </Validation>
+                        <ExtensionProperties TEntityType="TenantCreateDto" TResourceType="AbpTenantManagementResource" Entity="@NewEntity" LH="@LH"/>
                     </Validations>
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
-                    <SubmitButton Clicked="@CreateEntityAsync" />
+                    <SubmitButton Clicked="@CreateEntityAsync"/>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -120,12 +89,12 @@
 @if (HasUpdatePermission)
 {
     <Modal @ref="EditModal">
-        <ModalBackdrop />
+        <ModalBackdrop/>
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>
                     <ModalTitle>@L["Edit"]</ModalTitle>
-                    <CloseButton Clicked="CloseEditModalAsync" />
+                    <CloseButton Clicked="CloseEditModalAsync"/>
                 </ModalHeader>
                 <ModalBody>
                     <Validations @ref="@EditValidationsRef" Model="@EditingEntity" ValidateOnLoad="false">
@@ -134,16 +103,17 @@
                                 <FieldLabel>@L["TenantName"]</FieldLabel>
                                 <TextEdit @bind-Text="@EditingEntity.Name" Autofocus="true">
                                     <Feedback>
-                                        <ValidationError />
+                                        <ValidationError/>
                                     </Feedback>
                                 </TextEdit>
                             </Field>
                         </Validation>
                     </Validations>
+                    <ExtensionProperties TEntityType="TenantUpdateDto" TResourceType="AbpTenantManagementResource" Entity="@EditingEntity" LH="@LH"/>
                 </ModalBody>
                 <ModalFooter>
                     <Button Color="Color.Secondary" Clicked="CloseEditModalAsync">@L["Cancel"]</Button>
-                    <SubmitButton Clicked="@UpdateEntityAsync" />
+                    <SubmitButton Clicked="@UpdateEntityAsync"/>
                 </ModalFooter>
             </Form>
         </ModalContent>
@@ -152,5 +122,5 @@
 
 @if (HasManageFeaturesPermission)
 {
-    <FeatureManagementModal @ref="FeatureManagementModal" />
+    <FeatureManagementModal @ref="FeatureManagementModal"/>
-}
+}

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

@@ -1,10 +1,15 @@
 using System;
+using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using System.Threading.Tasks;
 using Blazorise;
 using Microsoft.AspNetCore.Authorization;
+using Volo.Abp.AspNetCore.Components.Extensibility.EntityActions;
+using Volo.Abp.AspNetCore.Components.Extensibility.TableColumns;
+using Volo.Abp.AspNetCore.Components.WebAssembly.Theming.PageToolbars;
 using Volo.Abp.BlazoriseUI;
 using Volo.Abp.FeatureManagement.Blazor.Components;
+using Volo.Abp.ObjectExtending;
 using Volo.Abp.TenantManagement.Localization;
 
 namespace Volo.Abp.TenantManagement.Blazor.Pages.TenantManagement
@@ -20,6 +25,10 @@ namespace Volo.Abp.TenantManagement.Blazor.Pages.TenantManagement
 
         protected TenantInfoModel TenantInfo;
 
+        protected PageToolbar Toolbar { get; } = new();
+
+        protected List<TableColumn> TenantManagementTableColumns => TableColumns.Get<TenantManagement>();
+
         public TenantManagement()
         {
             LocalizationResource = typeof(AbpTenantManagementResource);
@@ -45,10 +54,78 @@ namespace Volo.Abp.TenantManagement.Blazor.Pages.TenantManagement
         {
             return string.Format(L["TenantDeletionConfirmationMessage"], entity.Name);
         }
+
+        protected override ValueTask SetToolbarItemsAsync()
+        {
+            Toolbar.AddButton(L["NewTenant"],
+                OpenCreateModalAsync,
+                IconName.Add,
+                requiredPolicyName: CreatePolicyName);
+
+            return base.SetToolbarItemsAsync();
+        }
+
+        protected override ValueTask SetEntityActionsAsync()
+        {
+            EntityActions
+                .Get<TenantManagement>()
+                .AddRange(new EntityAction[]
+                {
+                    new EntityAction
+                    {
+                        Text = L["Edit"],
+                        RequiredPolicy = UpdatePolicyName,
+                        Clicked = async (data) => { await OpenEditModalAsync(data.As<TenantDto>()); }
+                    },
+                    new EntityAction
+                    {
+                        Text = L["Features"],
+                        RequiredPolicy = ManageFeaturesPolicyName,
+                        Clicked = async (data) =>
+                        {
+                            var tenant = data.As<TenantDto>();
+                            await FeatureManagementModal.OpenAsync(FeatureProviderName, tenant.Id.ToString());
+                        }
+                    },
+                    new EntityAction
+                    {
+                        Text = L["Delete"],
+                        RequiredPolicy = DeletePolicyName,
+                        Clicked = async (data) => await DeleteEntityAsync(data.As<TenantDto>()),
+                        ConfirmationMessage = (data) => GetDeleteConfirmationMessage(data.As<TenantDto>())
+                    }
+                });
+
+            return base.SetEntityActionsAsync();
+        }
+
+        protected override ValueTask SetTableColumnsAsync()
+        {
+            TenantManagementTableColumns
+                .AddRange(new TableColumn[]
+                {
+                    new TableColumn
+                    {
+                        Title = L["Actions"],
+                        Actions = EntityActions.Get<TenantManagement>()
+                    },
+                    new TableColumn
+                    {
+                        Title = L["TenantName"],
+                        Data = nameof(TenantDto.Name),
+                    },
+                });
+
+            TenantManagementTableColumns.AddRange(GetExtensionTableColumns(
+                TenantManagementModuleExtensionConsts.ModuleName,
+                TenantManagementModuleExtensionConsts.EntityNames.Tenant));
+
+            return base.SetTableColumnsAsync();
+        }
     }
 
     public class TenantInfoModel
     {
         public Guid Id { get; set; }
     }
-}
+}