ersatztv/ErsatzTV/Pages/MultiCollections.razor

@page "/media/multi-collections"
@using ErsatzTV.Application.Configuration
@using ErsatzTV.Application.MediaCollections
@implements IDisposable
@inject IDialogService Dialog
@inject IMediator Mediator

<MudForm Style="max-height: 100%">
    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
        <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
            <div style="margin-right: auto" class="d-none d-md-flex">
                <MudButton Class="ml-3" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.PlaylistAdd" Href="media/multi-collections/add">
                    Add Multi Collection
                </MudButton>
            </div>
            <div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
                <div class="flex-grow-1"></div>
                <MudMenu Icon="@Icons.Material.Filled.MoreVert">
                    <MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add Multi Collection" Href="media/multi-collections/add"/>
                </MudMenu>
            </div>
        </div>
    </MudPaper>
    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
            <MudText Typo="Typo.h5" Class="mb-2">Multi Collections</MudText>
            <MudDivider Class="mb-6"/>
            <MudTable Hover="true"
                      @bind-RowsPerPage="@_multiCollectionsRowsPerPage"
                      ServerData="@(new Func<TableState, CancellationToken, Task<TableData<MultiCollectionViewModel>>>(ServerReloadMultiCollections))"
                      Dense="true"
                      @ref="_multiCollectionsTable">
                <ColGroup>
                    <MudHidden Breakpoint="Breakpoint.Xs">
                        <col/>
                        <col style="width: 120px;"/>
                    </MudHidden>
                </ColGroup>
                <ToolBarContent>
                    <MudTextField T="string"
                                  ValueChanged="@(s => OnSearch(s))"
                                  Placeholder="Search for multi collections"
                                  Adornment="Adornment.Start"
                                  AdornmentIcon="@Icons.Material.Filled.FilterList"
                                  Clearable="true">
                    </MudTextField>
                </ToolBarContent>
                <RowTemplate>
                    <MudTd DataLabel="Name">@context.Name</MudTd>
                    <MudTd>
                        <div style="align-items: center; display: flex;">
                            <MudTooltip Text="Edit Collection">
                                <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                               Href="@($"media/multi-collections/{context.Id}/edit")">
                                </MudIconButton>
                            </MudTooltip>
                            <MudTooltip Text="Delete Collection">
                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                               OnClick="@(_ => DeleteMultiCollection(context))">
                                </MudIconButton>
                            </MudTooltip>
                        </div>
                    </MudTd>
                </RowTemplate>
                <PagerContent>
                    <MudTablePager/>
                </PagerContent>
            </MudTable>
            <div class="mt-6"></div>
        </MudContainer>
    </div>
</MudForm>

@code {
    private CancellationTokenSource _cts;

    private MudTable<MultiCollectionViewModel> _multiCollectionsTable;

    private int _multiCollectionsRowsPerPage = 10;
    private string _searchString;

    public void Dispose()
    {
        _cts?.Cancel();
        _cts?.Dispose();
    }

    protected override async Task OnParametersSetAsync()
    {
        _cts?.Cancel();
        _cts?.Dispose();
        _cts = new CancellationTokenSource();
        var token = _cts.Token;

        try
        {
            _multiCollectionsRowsPerPage = await Mediator.Send(new GetConfigElementByKey(ConfigElementKey.MultiCollectionsPageSize), token)
                .Map(maybeRows => maybeRows.Match(ce => int.TryParse(ce.Value, out int rows) ? rows : 10, () => 10));
        }
        catch (OperationCanceledException)
        {
            // do nothing
        }
    }

    private async Task DeleteMultiCollection(MultiCollectionViewModel collection)
    {
        var parameters = new DialogParameters { { "EntityType", "multi collection" }, { "EntityName", collection.Name } };
        var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };

        IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Multi Collection", parameters, options);
        DialogResult result = await dialog.Result;
        if (result is { Canceled: false })
        {
            await Mediator.Send(new DeleteMultiCollection(collection.Id), _cts.Token);
            if (_multiCollectionsTable != null)
            {
                await _multiCollectionsTable.ReloadServerData();
            }
        }
    }

    private async Task<TableData<MultiCollectionViewModel>> ServerReloadMultiCollections(TableState state, CancellationToken cancellationToken)
    {
        await Mediator.Send(new SaveConfigElementByKey(ConfigElementKey.MultiCollectionsPageSize, state.PageSize.ToString()), cancellationToken);

        PagedMultiCollectionsViewModel data = await Mediator.Send(new GetPagedMultiCollections(_searchString, state.Page, state.PageSize), cancellationToken);
        return new TableData<MultiCollectionViewModel> { TotalItems = data.TotalCount, Items = data.Page };
    }

    private void OnSearch(string query)
    {
        _searchString = query;
        _multiCollectionsTable.ReloadServerData();
    }
}