CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Browse/LibSelector.razor

@inherits FnzComponentBase
@code {
    [Parameter, Required] public FeLibrary CurrentLibrary { get; set; }
    [Parameter] public EventCallback<FeLibrary> OnValueChanged { get; set; }

    private FnzBoostrapCollapse SmallUi;
    private FnzBoostrapCollapse BigUi;
    private InputText Filter;
}

<FnzBoostrapCollapse @ref="SmallUi" CssClass="row show" OnHidden="()=>BigUi.Show()" OnShown="@(()=>{ JSRuntime.InvokeVoidAsync("fnz.scrollIntoViewById","MainNavBar"); })">
    <div class="col">
        <div class="d-flex flex-row align-items-center">
            <span>Library (@DataSet.AllLibrary.Length):&nbsp;</span>
            <button class="btn btn-primary p-1" type="button" @onclick="()=>SmallUi.Hide()">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
        </div>
    </div>
</FnzBoostrapCollapse>

<FnzBoostrapCollapse @ref="BigUi" CssClass="row" OnHidden="()=>SmallUi.Show()" OnShown="()=>Filter.Element.Value.FocusAsync()">
    <div class="col">
        <fieldset class="border rounded-3 p-2">
            <legend class="float-none w-auto px-2 d-flex flex-row align-items-center">
                <span>Library (@DataSet.AllLibrary.Length):&nbsp;</span>
                <button class="btn btn-primary p-1" type="button" @onclick="()=>BigUi.Hide()">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
            </legend>
            <div class="mt-0">
                <InputText @ref="Filter" type="search" placeholder="Filter" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" onsearch="@SearchDone"></InputText>
            </div>
            @foreach (var lib in (ListDataSource).KeepNoEmpty())
            {
                if (lib == null)
                {
                    <button class="btn btn-secondary p-1 m-1" type="button" disabled>No result</button>
                }
                else
                {
                    <button class="btn btn-secondary p-1 m-1" type="button" @onclick="()=>SelectLib(lib)">@($"{lib?.Name} ({lib?.Discs.Length})")</button>
                }
            }
        </fieldset>
    </div>
</FnzBoostrapCollapse>

@code {

    private string SearchValue { get; set; }
    private FeLibrary[] ListDataSource => DataSet.AllLibrary?.OrderBy(p => p.Key).Where(p => string.IsNullOrEmpty(SearchValue) || p.Name.Contains(SearchValue, StringComparison.OrdinalIgnoreCase)).ToArray();

    private void SearchChanged(ChangeEventArgs e)
    {
        SearchValue = e.Value.ToString();
        StateHasChanged();
    }

    private void SearchDone()
    {
        var arr = ListDataSource;
        if (arr?.Any() == true)
        {
            SelectLib(arr.First());
        }
    }

    private void SelectLib(FeLibrary lib)
    {
        OnValueChanged.InvokeAsync(lib);
        BigUi.Hide();
        StateHasChanged();
    }

    private async Task<List<FeLibrary>> FilterLibrary(IReadOnlyCollection<FeLibrary> source, string input, CancellationToken ct)
    {
        var result = new List<FeLibrary>();

        foreach (var item in source.Where(p => p.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
        foreach (var item in source.Where(p => !p.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase) && p.Name.Contains(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);

        return result;
    }

}