Blazor UI extensions

[ilkayilknur]

This PR contains blazor UI extensibility features except the module extensibility feature.
I implemented the usage in the Identity module. I will start implementing the other modules once I get initial feedback. It takes time to change all modules when you get feedback on usage :)

Entity Actions and Table Columns

Developers can easily define table columns and actions by using UIExtensions.Instance.EntityActions and UIExtensions.Instance.TableColumns properties. This PR also introduces the ABPDataGrid component. This component creates table columns and actions automatically using the UI extensibility system.

Developers can also extend the modules and add their actions/columns like below.

    [Dependency(ReplaceServices = true)]
    [ExposeServices(typeof(RoleManagement))]
    public class MyRoleManagement : RoleManagement
    {
        protected override async ValueTask SetTableColumnsAsync()
        {
            await base.SetTableColumnsAsync();
            UIExtensions.Instance.TableColumns.Get<RoleManagement>().AddIfNotContains(new Volo.Abp.AspNetCore.Components.Extensibility.TableColumns.TableColumn()
            {
                Title = "MyCustomColumn",
                Data = nameof(IdentityRoleDto.Name)
            });
        }


        protected override async ValueTask SetEntityActionsAsync()
        {
            await base.SetEntityActionsAsync();
            UIExtensions.Instance.EntityActions.Get<RoleManagement>().AddIfNotContains
                (new Volo.Abp.AspNetCore.Components.Extensibility.EntityActions.EntityAction
                {
                    Text = "My Custom Action",
                    Clicked = (data) =>
                    {
                        Console.WriteLine("Clicked!");
                        return Task.CompletedTask;
                    }
                });
        }
    }

Page Toolbars

In the final implementation, I will move the PageHeader component and related types from Abp.Volo.BlazoriseUI to Volo.Abp.AspNetCore.Components.WebAssembly.Theming. There two PageHeader components in this branch right now. I didn't want to break the all modules.

In our modules, we can simply inject IOptions<AbpPageToolbarOptions> and add the toolbar items inside SetToolbarItemsAsync method.

Developers can also define their own contributors and add them inside configure method.

public class ToolbarContributor : IPageToolbarContributor
    {
        public Task ContributeAsync(PageToolbarContributionContext context)
        {
            context.Items.Add(new PageToolbarItem(typeof(Component)));
            return Task.CompletedTask;
        }
    }

Configure<AbpPageToolbarOptions>(options =>
{
    options.Configure<RoleManagement>(configure =>
    {
        configure.Contributors.Add(new ToolbarContributor());
    });
});

Bundling and Minification

I made related changes and abp bundle command reads the appsettings.json to get the bundling settings right now. I also added a parameter named parameters. Developers can define extra key/value pair parameters and send them to the contributors.

I didn't make any changes on the extensibility side. The current design supports extensibility. Developers can define a contributor and update any dependency by using context.BundleDefinitions property.

[hikalkan]

Probably, one datagrid will have a single column with "actions". So, instead of adding Actions to column, it might be better to add it to a containing object.

[ilkayilknur]

Yes, probably. There is also UIExtensions.Instance.EntityActions property. Devs can get entity action collection for a specific page and update actions. Putting an Actions property inside the table column provides flexibility and devs can change the order of the Actions column etc.. We provide the same flexibility on the MVC side and, I want to provide that on the Blazor side.

[hikalkan]

AddIfNotContains prevents duplicate adding. However, wouldn't it better to make this into the module's ConfigureServices method (with OneTimeRunner wrapper) to not execute it every time component is rendered.

[ilkayilknur]

See my comment below.

[hikalkan]

Same comment like SetEntityActionsAsync

[274188A]

A sample project would be ideal

[ilkayilknur]

I've made some improvements to the design. Instead of storing the actions and columns in a singleton type, I moved the definitions to the AbpCrudPageBase. Devs can access the page context in a correct way and add or customize the actions, table columns, and toolbar items.
Sample Usage

[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(RoleManagement))]
public class MyRoleManagement : RoleManagement
{
    protected override async ValueTask SetTableColumnsAsync()
    {
        await base.SetTableColumnsAsync();
        TableColumns.Get<RoleManagement>().Add(new Volo.Abp.AspNetCore.Components.Extensibility.TableColumns.TableColumn()
        {
            Title = "MyCustomColumn",
            Data = nameof(IdentityRoleDto.Name)
        });
    }


    protected override async ValueTask SetEntityActionsAsync()
    {
        await base.SetEntityActionsAsync();
        EntityActions.Get<RoleManagement>().Add(new Volo.Abp.AspNetCore.Components.Extensibility.EntityActions.EntityAction
        {
            Text = "My Custom Action",
            Clicked = (data) =>
            {
                Console.WriteLine("Clicked!");
                return Task.CompletedTask;
            }
        });
    }

    protected override async ValueTask SetToolbarItemsAsync()
    {
        await base.SetToolbarItemsAsync();
        Toolbar.AddButton("Toolbar item", () =>
        {
            Console.WriteLine("Toolbar item Clicked");
            return Task.CompletedTask;
        }, IconName.Baby);
    }
}

[ilkayilknur]

The PR is ready for review.

[hikalkan]

Please remove Console.WriteLine

[hikalkan]

Please remove Console.WriteLine. If you want, you can write debug logs.