DateTime Picker control not updating when using mvux and c~

[MarkLFT]

I am having trouble getting a date picker on a page to update when I change the value in code. I am using mvux, and the data object we bind to is an IState of a class.

The view model looks like this:

internal partial record LicensePageModel(License license, IRMCloudService RMCloudService)
{
public IState<License> License => State<License>.Value(this, () => license);

public async ValueTask ExtendLicense1Month(CancellationToken ct = default)
    {
        static License? extendExpiresDate(License? license)
        {
            if (license is null) return null;

            license.ExpiresDate = license.ExpiresDate.AddMonths(1);
            return license;
        };

        await License.UpdateAsync(updater: extendExpiresDate, ct);
    }
}

On the page is a button with the command property set to vm.ExtendLicense1Month, and I can see the correct method is being called, and the license instance is having the date updated. All seems normal, except the date picker is not updated to the new value.

Below is the binding:

new CalendarDatePicker()
    .Date(x => x.Binding(() => vm.License.ExpiresDate)
   .Converter(Converters.Converters.DateTimeOffsetConverter)
        .Mode(BindingMode.TwoWay))
    .Style(Theme.CalendarDatePicker.Styles.Default)
    .Header("Expires Date")
    .Background(Theme.Brushes.Surface.Default)
new Button()
    .Content("Add 1 Month")
    .Style(Theme.Button.Styles.Outlined)
    .Command(() => vm.ExtendLicense1Month)

Is there another command I need to issue to trigger an update of the page? I thought mvux is Reactive based, so should notice the changes and update the page automagically.

The full code can be seen at https://github.com/MarkLFT/RMUtility.Problems

[dr1rrb]

Hey @MarkLFT thanks for the report. Yes it should "automagically" update the page :)

Unfortunately I'm unable to run you application, due to the lack of Standard.Licensing package with version >= 1.2.6 (most probably coming from your private nuget feed that I don't have access to).

But looking at your code I would suspect it's because your License entity is mutable:

public void ExtendLicense(DateTime newExpiresDate)
{
    ExpiresDate = newExpiresDate;
}

MVUX is designed to work with immutable entities, and when you invoke State.UpdateAsync as it's the same entity, the update is just ignored. Cf. https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Mvux/WorkingWithRecords.html

A way to easily validate this theory would be to add a new TextBlock().Text(() => vm.License.ExpiresDate) to see if the date is updated properly. If not it would mean that the issue is because the property is not being updated by MVUX, most probably for the reason above, otherwise the issue would be from the CalendarDatePicker itself.

Then to fix it, you should convert your License entity to an immutable record:

public partial record License(Guid Serial, Customer Customer, DateTime ExpiresDate, ImmutableList<Feature> Features, LicenseType LicenseType, LicenseOptions Options, ProductType ProductType, string AllowedVersion)
{
	public string Company => Customer!.CustomerName!;
	public string Name => Customer!.Name!;
	public string Email => Customer!.EmailAddress!;
	public string ProductTypeName => GetProductTypeName(ProductType);
	public string LicenseTypeName => GetLicenseTypeName(LicenseType);

	public static License NewLicense()
	{
		return new License
		(
			Guid.NewGuid(),
			new Customer(),
			DateTime.Today.AddYears(1),
			ImmutableList<Feature>.Empty,
			LicenseType.Trial,
			new LicenseOptions(),
			ProductType.RM,
			"9.9.9000"
		);
	}

	#region Private Helpers
	private static string GetProductTypeName(ProductType productType)
	{
		return productType switch
		{
			ProductType.RM => "Resort Manager",
			ProductType.RML => "Resort Manager Lite",
			ProductType.Custom => "Custom",
			_ => throw new NotImplementedException(),
		};
	}

	private static string GetLicenseTypeName(LicenseType licenseType)
	{
		return licenseType switch
		{
			LicenseType.Trial => "Trial",
			LicenseType.Full => "Full",
			LicenseType.Error => "Error",
			LicenseType.None => "None",
			_ => throw new NotImplementedException(),
		};
	}
	#endregion Private Helpers
}

then the ExtendLicense1Month command:

public async ValueTask ExtendLicense1Month(CancellationToken ct = default)
{
	static License? extendExpiresDate(License? license)
	{
		if (license is null) return null;

		return license with { ExpiresDate = license.ExpiresDate.AddMonths(1) };
	};

	await LicenseState.UpdateAsync(updater: extendExpiresDate, ct);
}

[MarkLFT]

@dr1rrb , Many thanks for your advice, and apologies for not getting back to you sooner. I tried what you suggested, but it still did not work. I have tried several ways of returning a new License with the updated date, but still the DateTime Picker remains the same.

I checked whether the converter is called a second time when the new License is returned and the LicenseState is updated, but it is not. It is only called once, when the form is initially loaded. So it appears to me to be the LicenseState.UpdateAsync does not seem to be working.

Any other suggestions? Do I need to use a feed in place of an IState?

[rajamatt]

Hi @MarkLFT, we have been in the process of updating our sample MVUX Counter app to showcase the immutability of records. The documentation hasn't been published yet but you can find the updated code for the MVUX-C# Counter here. Consider this a straightforward approach to using records with immutability.

Sample app

I went ahead and made a small sample on our end to replicate your issue. This sample contains a CalendarDatePicker that displays the License's ExpiryDate with a Button to increase this date. Here's the zip file containing the VS solution: DatePickerMVUXSample.zip.

internal partial record License(DateTime ExpiresDate) {}

internal partial record MainModel
{
    public IState<License> License => State.Value(this, () => new License(DateTime.Now));

    public ValueTask ExtendLicense1Month(CancellationToken ct)
    {
        static License? extendExpiresDate(License? license)
        {
            if (license is null) return null;

            return license with { ExpiresDate = license.ExpiresDate.AddMonths(1) };
        }

        return License.UpdateAsync(updater: extendExpiresDate, ct);
    }    
}

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.DataContext(new BindableMainModel(), (page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new CalendarDatePicker()
                    .Date(x => x.Binding(() => vm.License.ExpiresDate)
                        .Converter(Converters.Converters.DateTimeOffsetConverter)
                        .Mode(BindingMode.TwoWay))
                    .Header("Expires Date"),
                new Button()
                    .Content("Add 1 Month")
                    .Command(() => vm.ExtendLicense1Month)
                )
            )
        );
    }
}

Data Binding

As for why the UpdateAsync is never getting called, I suspect it is because the binding to the ExtendLicense1Month task is not working. I noticed that in your views you are using:
(for example in MainPage.cs)

this.DataContext<BindableMainPageModel>((page, vm) => page

For data binding purposes with C# markup I suggest trying this instead:

this.DataContext(new BindableMainPageModel(), (page, vm) => page

Let us know if this clears things up a bit!

[agneszitte]

fyi @rajamatt the documentation is now published for your changes for the MVUX Counter App tutorial
https://platform.uno/docs/articles/getting-started/counterapp/get-started-counter-csharp-mvux.html

[MarkLFT]

@rajamatt Thanks for the feedback.

After many hours of scratching my head, I finally found what my issue was. In the Binding I was using vm.Licence.ExpiresDate when I should have been binding with vm.LicenseState.ExpiresDate.

In my model, Licence is the parameter passed to the model, whereas LicenseState is the actual IState of the License.

[MarkLFT]

I am really getting frustrated with this, it seems I keep taking one step forward, then three steps back.

Based on my earlier finding that I should be binding to LicenseState, and not the passed property licence, I replace all other binding to use the LicenseState property. But now I find that upon opening the form, with the Licence passed to the model as a constructor property, that the value of IState is a new, empty, license, not the one I passed in.

However, as soon as I use the AddMonth or AddYear button, the correct licence is loaded and displayed.

I have tried using my original IState declaration of:
public IState<License> LicenseState => State.Value(this, () => License);

I also tried to create a new instance based on the passed license:
public IState<License> LicenseState => State.Value(this, () => new License(License.Serial, License.Customer, License.ExpiresDate, License.Features, License.LicenseType, License.Options, License.ProductType, License.AllowedVersion));

I also tried to hard code creating a new licence, and in all cases, the IState contains an empty license, until I use one of the Add buttons.

What am I doing wrong in the way I create this IState? Or am I not suposed to bind to the IState properties?

[dr1rrb]

BTW :

Or am I not suposed to bind to the IState properties?

You are expected to bind the generated BindableMainModel which acts as a proxy and re-surface all your State into plain properties, taking care to raise necessary events for the binding engine and updating back the State in case of 2-way binding, including when change occurs on a sub-object/property (e.g. License.ExpiresDate).

[MarkLFT]

@dr1rrb Version updated to latest live version. Hope you can help resolve this issue, as been looking at it for more than a week, on and off.

[dr1rrb]

Hey @MarkLFT so the issue is not your code, it seems that it's actually on our side.

The issue is that the ComboBox is pushing a value when binging is set during initialisation of the page. This seems to to override the License using a default value.

While I investigate further to determine if the issue is from C#-Markup, ComboBox itself or MVUX (or any combination) ... and we fix it, you can comment the 2 combo "Product Type" and "License Type", this will let your page to init properly.

Then the "Add 1 <Month|Year>" buttons works properly, and the updated date is reflected by the CalendarDatePicker as expected.

[MarkLFT]

Whilst I would never wish a bug on anyone, I have to say I am pleased to read this. I was beginning to doubt my own abilities. 😉

[dr1rrb]

And here is the fix : unoplatform/uno.extensions#2303 :)

Looked deeper, it's really just as the ComboBox was pushing back the default value during the initialisation of the bindings we considered a change and were causing update on the state even before it produced it first value. That drove us to ignored that initial value pushed by the State (as it was considered has modified by the view). Fixing the value equality check in property setters prevents this to happen.

[rajamatt]

@MarkLFT I have added another page to the previous sample that I sent to demonstrate a bit more one of the ways we can pass records through navigation between view models. Here's the updated zip file: CalendarDatePickerMVUXSample.zip.

In this new sample, I made a WelcomePage where we can choose between different Licenses (License1 or License2). Once the License is selected, there's a button to navigate to the MainPage where we can extend the chosen License's ExpiresDate. Feel free to look through the code/test it out yourself. I will explain the changes:

So in the MainModel.cs we now have a License parameter that is used to initialize the LicenseState value.

internal partial record MainModel(License License)
{
    public IState<License> LicenseState => State.Value(this, () => License);

    public ValueTask ExtendLicense1Month(CancellationToken ct)
    {
        static License? extendExpiresDate(License? license)
        {
            if (license is null) return null;

            return license with { ExpiresDate = license.ExpiresDate.AddMonths(1) };
        }

        return LicenseState.UpdateAsync(updater: extendExpiresDate, ct);
    }    
}

Because we want to pass a License to the MainModel when we navigate to it, we have to specify it in the App.xaml.cs file. (See the new DataMap<License> object below).

private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
{
    views.Register(
        new ViewMap(ViewModel: typeof(ShellModel)),
        new ViewMap<WelcomePage, WelcomeModel>(),
        new ViewMap<MainPage, MainModel>(Data: new DataMap<License>())
    );

    routes.Register(
        new RouteMap("", View: views.FindByViewModel<ShellModel>(),
            Nested:
            [
                new ("Welcome", View: views.FindByViewModel<WelcomeModel>()),
                new ("Main", View: views.FindByViewModel<MainModel>()),
            ]
        )
    );
}

Finally, when we want to navigate to the MainModel page, we can bind the Command property to a task. It's important to use the await keyword here, because we want to send the SelectedLicense's value and not the state itself.

public async ValueTask NavigateToMainPage()
{
    await _navigator.NavigateViewModelAsync<MainModel>(this, data: await SelectedLicense);
}

[MarkLFT]

@rajamatt, Instead of a ViewMap with a new ViewModel, we use a DataViewMap, which I believe is working as the instantiated viewmodel is receiving the correct licence. It appears what happens within the VM is the issue.

My view model is identical to yours with the constructor, the IState definition and the ValueTask.

For the Navigation We don't use a ValueTask, we use the options within a feedview, and again, the licence in the constructor is valid, so I don't think their is an issue here.