FluentSelect with Enum

[gotmoo]

I've been using Enums in my application to provide easy lists/dropdown options but was really struggling to make this work in FluentUI-Blazor. I tried to figure out how to work this add this into the FluentSelect itself but got very stuck on several attempts. Instead, I ended up writing a wrapper component that takes in the Enum itself and then lets you map pass in a variable of the Enum type to get or set the selected value. Only thing left to work out is that the variable has to be nullable or else it won't work with the placeholder text.

This is what this looks like:

Screen.Recording.2024-08-31.221531.mp4

Using this Enum:

public enum PayFrequencies
{
    Daily=0,
    Weekly=1,
    [Description ("Bi-Weekly")]
    BiWeekly=2
}

FluentSelectEnum.razor:

@using Microsoft.FluentUI.AspNetCore.Components.Extensions
@typeparam TEnum where TEnum : struct, Enum
<FluentSelect
    TOption="Option<int>"
    Items="_enumOptions"
    Label="@Label"
    OptionText="@(i => i.Text)"
    OptionValue="@(i => i.Value.ToString())"
    OptionSelected="@(i => i.Selected)"
    @bind-Value="_selectedValue"
    Placeholder="@Placeholder"
    AdditionalAttributes="@AdditionalAttributes"
/>
@code {
    [Parameter] public TEnum? EnumSelectedValue { get; set; }
    [Parameter] public EventCallback<TEnum?> EnumSelectedValueChanged { get; set; }
    [Parameter] public TEnum[] ExcludeEnumItems { get; set; } = [];
    [Parameter] public string? Placeholder { get; set; }
    [Parameter] public string? Label { get; set; }
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; } = new();

    private List<Option<int>> _enumOptions = [];
    private string? _selectedValue
    {
        get { return _enumOptions.FirstOrDefault(e => e.Value.Equals(GetEnumInt(EnumSelectedValue)))?.Value.ToString(); }
        set
        {
            if (value is null || !Enum.TryParse<TEnum>(value, out var result)) return;
            EnumSelectedValue = result;
            EnumSelectedValueChanged.InvokeAsync(result);
        }
    }

    protected override void OnInitialized()
    {
        if (!typeof(TEnum).IsEnum)
        {
            throw new InvalidOperationException($"{typeof(TEnum).Name} is not an enum type");
        }
    }

    protected override void OnParametersSet()
    {
        _enumOptions = Enum.GetValues(typeof(TEnum))
            .Cast<TEnum>()
            .Where(e => !ExcludeEnumItems.Contains(e))
            .Select(e => new Option<int>
            {
                Value = GetEnumInt(e).GetValueOrDefault(),
                Text = e.GetDescription(false),
                Selected = e.Equals(EnumSelectedValue)
            })
            .ToList();
    }

    private static int? GetEnumInt(TEnum? value)
    {
        if (!typeof(TEnum).IsEnum || value is null)
            return null;
        return (int)Convert.ChangeType(value, typeof(TEnum));
    }
}

and then this razor code in the final page:

<div>
    <FluentSelectEnum
        Label="Pay Frequency"
        Placeholder="Select one..."
        TEnum="PayFrequencies"
        @bind-EnumSelectedValue="@PayFrequency"
        ExcludeEnumItems="[PayFrequencies.Daily]"/><br/>
    Selected frequency: @PayFrequency
</div>
<div>
    <FluentSelectEnum
        Label="Pay Frequency 2"
        Placeholder="Select one..."
        TEnum="PayFrequencies"
        @bind-EnumSelectedValue="@PayFrequency2"/><br/>
    Selected frequency 2: @PayFrequency2
</div>

@code{
    private PayFrequencies? PayFrequency { get; set; }
    private PayFrequencies? PayFrequency2 { get; set; } = PayFrequencies.Weekly;
}