TaikoLocalServer/TaikoWebUI/Pages/Dialogs/ChooseTitleDialog.razor

@inject IJSRuntime Js

<MudDialog>
    <DialogContent>
        <MudTable Items="@Titles" Filter="@Filter" @bind-SelectedItem="@selectedTitle" Height="40vh" Hover="true">
            <ColGroup>
                <col style="width: 50px;"/>
                <col/>
            </ColGroup>
            <ToolBarContent>
                <MudTextField @bind-Value="searchString" Placeholder=@Localizer["Search"] Adornment="Adornment.Start" Immediate="true"
                              AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0">
                </MudTextField>
            </ToolBarContent>
            <HeaderContent>
                <MudTh>
                    <MudTableSortLabel SortBy="@(new Func<Title, object>(x => x.TitleId))">
                        @Localizer["ID"]
                    </MudTableSortLabel>
                </MudTh>
                <MudTh>
                    <MudTableSortLabel SortBy="@(new Func<Title, object>(x => x.TitleName))">
                        @Localizer["Title"]
                    </MudTableSortLabel>
                </MudTh>
            </HeaderContent>
            <RowTemplate>
                @{
                    // Disable nullable warnings, which seems to be a false positive
#pragma warning disable CS8602
                }
                <MudTd DataLabel="Id" Class="cursor-pointer">@context.TitleId</MudTd>
                <MudTd DataLabel="Title" Class="cursor-pointer">@context.TitleName</MudTd>
                @{
#pragma warning restore CS8602
                }
            </RowTemplate>
            <PagerContent>
                <MudTablePager RowsPerPageString=@Localizer["Rows Per Page:"]/>
            </PagerContent>
        </MudTable>
        <MudText Class="mt-4 d-block" Typo="Typo.caption">
            <b>@Localizer["Currently Selected:"]</b> @selectedTitle?.TitleName
        </MudText>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">
            @Localizer["Cancel"]
        </MudButton>
        <MudButton Color="Color.Primary" OnClick="Submit">
            @Localizer["Dialog OK"]
        </MudButton>
    </DialogActions>
</MudDialog>

@code {

    [CascadingParameter] MudDialogInstance MudDialog { get; set; } = null!;

    [Parameter] public UserSetting UserSetting { get; set; } = new();

    [Parameter] public bool AllowFreeProfileEditing { get; set; }

    [Parameter] public List<Title> Titles { get; set; } = new();

    private Title? selectedTitle;

    private string searchString = string.Empty;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        var currentTitle = new Title
        {
            TitleName = UserSetting.Title
        };
        if (Titles.Contains(currentTitle))
        {
            selectedTitle = currentTitle;
        }
    }

    private bool Filter(Title? title)
    {
        if (title is null)
        {
            return false;
        }

        return string.IsNullOrEmpty(searchString) ||
               title.TitleName.Contains(searchString, StringComparison.InvariantCultureIgnoreCase);
    }

    private async Task Submit()
    {
        if (selectedTitle is not null)
        {
            UserSetting.Title = selectedTitle.TitleName;
            UserSetting.TitlePlateId = selectedTitle.TitleRarity;
        }

        await Js.InvokeVoidAsync("updateTitleText", UserSetting.Title);
        MudDialog.Close(DialogResult.Ok(true));
    }

    private void Cancel()
    {
        MudDialog.Cancel();
    }

}