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

@inject IJSRuntime js
@code {
    [Parameter, Required] public FeLibrary CurrentLibrary { get; set; }
    [Parameter] public EventCallback<FeLibrary> OnValueChanged { get; set; }
}

<div class="row collapse show" id="LibSelectorListCollapsed">
    <div class="col">
        <div class="d-flex flex-row align-items-center">
            <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
            <button class="btn btn-primary p-1" type="button" @onclick="ShowLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
        </div>
    </div>
</div>

<div class="row collapse" id="LibSelectorList">
    <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 (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
                <button class="btn btn-primary p-1" type="button" @onclick="HideLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
            </legend>
            <div class="mt-0">
                <div class="d-flex">
                    <div class="">
                        Filter:&nbsp;
                    </div>
                    <div class="col flex-fill">
                        <InputText id="LibSelectorInput" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" @onkeydown="SearchKeydown"></InputText>
                    </div>
                </div>
            </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>
</div>

@code {

    private ValueTask ExpandLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList", true);
    private ValueTask CollapseLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList", false);
    private ValueTask ToggleLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList");


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

    private async Task ShowLibraryList()
    {
        await ExpandLibraryList();
    }

    private async Task HideLibraryList()
    {
        await CollapseLibraryList();
    }

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

    private void SearchKeydown(KeyboardEventArgs e)
    {
        if (e.Code == "Enter")
        {
            var arr = ListDataSource;
            if (arr?.Any() == true)
            {
                SelectLib(arr.First());
            }
        }
    }

    private void SelectLib(FeLibrary lib)
    {
        OnValueChanged.InvokeAsync(lib);
        CollapseLibraryList();
        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;
    }

}