PopupService feature enhancement

[bijington]

I would like to expand upon a couple of items:

• Docs issue suggesting no MVVM based samples for Popups
• Previous discussion around showing Popups from a View Model

I know that we discussed how something could be achieved in the second post earlier but I wanted to run the following concept by everyone.

The following implementation provides the ability to register and show popups with associated view models. It will also allow this to be done from a view model.

using System.ComponentModel;
using CommunityToolkit.Maui.Views;

namespace Popups;

public class PopupService
{
    private readonly IServiceProvider serviceProvider;

    private readonly static IDictionary<Type, Type> viewModelToViewMappings = new Dictionary<Type, Type>();

    public PopupService(IServiceProvider serviceProvider)
    {
        this.serviceProvider = serviceProvider;
    }

    public static void RegisterPopup<TPopupView, TPopupViewModel>(IServiceCollection services)
        where TPopupView : Popup
        where TPopupViewModel : INotifyPropertyChanged
    {
        viewModelToViewMappings.Add(typeof(TPopupViewModel), typeof(TPopupView));

        services.AddTransient(typeof(TPopupView));
        services.AddTransient(typeof(TPopupViewModel));
    }

    public Task<object> ShowPopupAsync<TViewModel>()
    {
        var viewModelType = typeof(TViewModel);

        var viewModel = (TViewModel)this.serviceProvider.GetService<TViewModel>();

        if (viewModel is null)
        {
            throw new InvalidOperationException($"Unable to resolve type {viewModelType} please make sure that you have called RegisterPopup");
        }

        return ShowPopupAsync<TViewModel>(viewModel);
    }

    public Task<object> ShowPopupAsync<TViewModel>(TViewModel viewModel)
    {
        var viewModelType = typeof(TViewModel);

        var view = (Popup)this.serviceProvider.GetRequiredService(viewModelToViewMappings[viewModelType]);

        view.BindingContext = viewModel;

        // TODO: Do we need to provide an override for determine the main page? Or we at least need to verify there is a main page.
        return Application.Current.MainPage.ShowPopupAsync(view);
    }
}

I would also suggest that we add the following extension method to make it easier to register:

public static class ServiceCollectionExtensions
{
    public static IServiceCollection RegisterPopup<TPopupView, TPopupViewModel>(this IServiceCollection services)
        where TPopupView : Popup
        where TPopupViewModel : INotifyPropertyChanged
    {
        PopupService.RegisterPopup<TPopupView, TPopupViewModel>(services);

        return services;
    }
}

This would then enable us to simply call something like:

// Registration in MauiProgram.cs
builder.Services.RegisterPopup<ConfirmationPopupView, ConfirmationPopupViewModel>();

// Showing of popup from a VM
popupService.ShowPopupAsync<ConfirmationPopupViewModel>();

I guess one main question to ask is, does this really fit into the toolkit as it is rather MVVM specific. We do of course already have the AddTransient<TView, TViewModel>() extension method so it might not too out of place.

[Orgbrat]

@bijington have you thought anymore about this?

[bijington]

I hadn't actually considered going as far as passing data to the Popup. The interface for the PopupService allows the caller to pass in a view model so data could technically be passed that way. That being said I do like the idea of following something like IQueryAttributable (but with a better name) from Shell. Perhaps we could expose an interface that allows us to pass data in the form of an Dictionary<string, object>. What do you think?

I would love to get this done pretty soon. I didn't get it approved at the last stand up but I am hopeful that the implementation will suffice and we can approve it next month.

[Orgbrat]

I like what you are saying here. I think the implementation must have the ability to pass data like Shell does today. The use of a Dictionary<string, object> would be fine I think as that is a method we have already been using with Shell.

I would like to see this done soon too. I watched the last stand up and noticed they did not approve but am hoping for near future.

On a side note, purchased your new book about MAUI and I am enjoying the good read. Thanks for all your efforts on multiple fronts.

[bijington]

@Orgbrat thank you so much for the support! It means so much to me that someone would buy it let alone read the book and even enjoy it. Thank you for the compliment, I really do appreciate it!

I am going to try and focus on getting an implementation in and working before the next stand-up :)

[bijington]

I have made some tweaks and opened a draft PR here: #1165 with the main API surface visible at:

https://github.com/CommunityToolkit/Maui/blob/3d13946504e4dec0f9c85b0ef1fb0d0d9b60bc2a/src/CommunityToolkit.Maui/IPopupService.cs

You could then use it like:

var result = popupService.ShowPopupAsync<LoadingPopupViewModel>(new Dictionary<string, object> { ["ItemsToLoad"] = 1234 });

If that makes sense?

[Orgbrat]

Yes, I like the look of that. You dedicated work is very much appreciated.

[brminnick]

PopupService Merged: #1165

Will be released in v6.1.0.