FancyTable.razor

@typeparam TItem
@implements IAsyncDisposable
@using System.Globalization
@using Microsoft.JSInterop
@inject IJSRuntime JS

@{
    PagedItemsResult pagedItems = GetPagedItems();
}

<div class="@GetTopBarClass()">
    @if (ShouldRenderPageSizeSelector)
    {
        <div class="@GetPageSizeContainerClass()">
            @if (PageSizeTemplate is not null)
            {
                @PageSizeTemplate(pagedItems.Context)
            }
            else
            {
                <label class="d-inline-flex align-items-center gap-2 small text-muted">
                    <span>@ResolvedRowsPerPageLabel</span>
                    <select class="form-select form-select-sm w-auto" value="@PaginationPageSize" @onchange="OnPageSizeChanged">
                        @foreach (int option in EffectivePageSizeOptions)
                        {
                            <option value="@option">@(option == 0 ? ResolvedAllItemsLabel : option.ToString(CultureInfo.CurrentCulture))</option>
                        }
                    </select>
                </label>
            }
        </div>
    }

    @if (ToolbarTemplate is not null)
    {
        <div class="@GetToolbarContainerClass()">
            @ToolbarTemplate
        </div>
    }
    else
    {
        <div class="@GetToolbarContainerClass()">
            <input class="form-control form-control-md" placeholder="@ResolvedSearchPlaceholder" value="@SearchText" @oninput="OnSearchInput" @onkeyup="HandleSearchKeyPress" />

            @if (string.IsNullOrWhiteSpace(SearchText))
            {
                <button class="btn btn-sm btn-outline-secondary mx-1" @onclick="ApplySearch">
                    <i class="bi bi-search"></i>
                </button>
            }
            else
            {
                <button class="btn btn-sm btn-outline-secondary mx-1" @onclick="ClearSearch">
                    <i class="bi bi-x-lg"></i>
                </button>
            }
        </div>
    }
</div>

<div class="tree-table-container">
    <table class="@GetTableClass()" @ref="tableElement">
        <colgroup>
            @foreach (FancyColumn<TItem> column in VisibleColumns)
            {
                <col data-column-key="@column.Key" style="@columnLayout.GetColumnStyle(column.Key)" />
            }
        </colgroup>
        <thead>
            <tr>
                @foreach (FancyColumn<TItem> column in VisibleColumns)
                {
                    <th class="@column.HeaderClass"
                        style="@columnLayout.GetColumnStyle(column.Key)"
                        data-column-key="@column.Key"
                        data-reorderable="@(CanReorder(column) ? "true" : "false")"
                        data-min-width="@GetDataWidth(column.MinWidth)"
                        data-max-width="@GetDataWidth(column.MaxWidth)">
                        <div class="fancy-column-header d-inline-flex align-items-center gap-1">
                            @if (CanReorder(column))
                            {
                                <button type="button"
                                        class="fancy-column-reorder-handle"
                                        data-column-reorder-handle
                                        aria-label="@FormatColumnLabel(ResolvedTexts.ReorderColumnFormat, column.Title)">
                                    <i class="bi bi-grip-vertical" aria-hidden="true"></i>
                                </button>
                            }

                            <span class="col-title">@column.Title</span>

                            @if (column.Sortable)
                            {
                                <button class="btn btn-link p-0 border-0" @onclick="() => SortBy(column.Key)">
                                    <i class="bi @(GetSortIcon(column.Key))"></i>
                                </button>
                            }

                            @if (column.Hideable)
                            {
                                <button class="btn btn-link p-0 border-0" @onclick="() => HideColumn(column.Key)">
                                    <i class="bi bi-eye-slash"></i>
                                </button>
                            }
                        </div>

                        @if (EnableColumnResizing && column.Resizable)
                        {
                            <span class="fancy-column-resize-handle"
                                  data-column-resize-handle
                                  role="separator"
                                  tabindex="0"
                                  aria-orientation="vertical"
                                  aria-label="@FormatColumnLabel(ResolvedTexts.ResizeColumnFormat, column.Title)"></span>
                        }
                    </th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (TItem item in pagedItems.Items)
            {
                <FancyRow TItem="TItem"
                          Item="item"
                          VisibleColumns="VisibleColumnsList"
                          ColumnWidths="columnLayout.Widths"
                          RowClassSelector="RowClassSelector"
                          RowAttributesSelector="RowAttributesSelector"
                          RowLeadingContentTemplate="RowLeadingContentTemplate"
                          RowTemplate="RowTemplate"
                          RowTemplateSelector="RowTemplateSelector" />
            }
        </tbody>
    </table>
</div>

@if (HiddenColumns.Count > 0)
{
    <div class="mt-2 ps-2 py-1">
        <small class="text-muted me-2">@ResolvedHiddenColumnsLabel</small>
        @foreach (string key in HiddenColumns)
        {
            FancyColumn<TItem>? column = Columns.FirstOrDefault(c => c.Key == key);
            if (column is not null)
            {
                <button class="btn btn-sm btn-outline-secondary me-1" @onclick="() => ShowColumn(key)">
                    <i class="bi bi-eye me-1"></i>@column.Title
                </button>
            }
        }
    </div>
}

@if (ShouldRenderPaginationFooter(pagedItems.Context))
{
    <div class="@GetPaginationContainerClass()">
        @if (PaginationTemplate is not null)
        {
            @PaginationTemplate(pagedItems.Context)
        }
        else
        {
            <div class="@GetPaginationSummaryClass()">
                @if (PaginationSummaryTemplate is not null)
                {
                    @PaginationSummaryTemplate(pagedItems.Context)
                }
                else if (ShowPaginationSummary)
                {
                    @GetDefaultPaginationSummary(pagedItems.Context)
                }
            </div>

            @if (pagedItems.Context.PageCount > 1)
            {
                <div class="btn-group btn-group-sm" role="group" aria-label="@ResolvedPaginationAriaLabel">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            disabled="@(!pagedItems.Context.HasPreviousPage)"
                            @onclick="pagedItems.Context.GoToPreviousPage">
                        @ResolvedPreviousPageLabel
                    </button>
                    @foreach (int pageNumber in GetVisiblePageNumbers(pagedItems.Context))
                    {
                        <button type="button"
                                class="btn @(pageNumber == pagedItems.Context.CurrentPage ? "btn-primary" : "btn-outline-secondary")"
                                @onclick="() => pagedItems.Context.GoToPage(pageNumber)">
                            @pageNumber
                        </button>
                    }
                    <button type="button"
                            class="btn btn-outline-secondary"
                            disabled="@(!pagedItems.Context.HasNextPage)"
                            @onclick="pagedItems.Context.GoToNextPage">
                        @ResolvedNextPageLabel
                    </button>
                </div>
            }
        }
    </div>
}

@code {
    private static readonly IReadOnlyList<int> DefaultPageSizeOptions = [10, 25, 50, 100];

    [Parameter, EditorRequired]
    public required IReadOnlyList<TItem> Items { get; set; } = Array.Empty<TItem>();

    [Parameter, EditorRequired]
    public required IReadOnlyList<FancyColumn<TItem>> Columns { get; set; } = Array.Empty<FancyColumn<TItem>>();

    [Parameter]
    public FancyTableTexts? Texts { get; set; }

    [Parameter]
    public RenderFragment? ToolbarTemplate { get; set; }

    [Parameter]
    public Func<TItem, string, bool>? SearchPredicate { get; set; }

    [Parameter]
    public Func<TItem, string?>? RowClassSelector { get; set; }

    [Parameter]
    public Func<FancyRowContext<TItem>, IReadOnlyDictionary<string, object?>?>? RowAttributesSelector { get; set; }

    [Parameter]
    public RenderFragment<FancyRowContext<TItem>>? RowLeadingContentTemplate { get; set; }

    [Parameter]
    public RenderFragment<FancyRowContext<TItem>>? RowTemplate { get; set; }

    [Parameter]
    public Func<FancyRowContext<TItem>, bool>? RowTemplateSelector { get; set; }

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

    [Parameter]
    public int PageSize { get; set; } = 25;

    [Parameter]
    public EventCallback<int> PageSizeChanged { get; set; }

    [Parameter]
    public int CurrentPage { get; set; } = 1;

    [Parameter]
    public EventCallback<int> CurrentPageChanged { get; set; }

    [Parameter]
    public IReadOnlyList<int>? PageSizeOptions { get; set; }

    [Parameter]
    public bool ShowPaginationSummary { get; set; } = true;

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

    [Parameter]
    public RenderFragment<FancyPaginationContext<TItem>>? PaginationSummaryTemplate { get; set; }

    [Parameter]
    public RenderFragment<FancyPaginationContext<TItem>>? PaginationTemplate { get; set; }

    [Parameter]
    public RenderFragment<FancyPaginationContext<TItem>>? PageSizeTemplate { get; set; }

    [Parameter]
    public string? TopBarClass { get; set; }

    [Parameter]
    public string? ToolbarContainerClass { get; set; }

    [Parameter]
    public string? PageSizeContainerClass { get; set; }

    [Parameter]
    public string? PaginationContainerClass { get; set; }

    [Parameter]
    public string? PaginationSummaryClass { get; set; }

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

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

    [Parameter]
    public IReadOnlyList<FancyColumnLayout>? InitialColumnLayout { get; set; }

    [Parameter]
    public EventCallback<IReadOnlyList<FancyColumnLayout>> ColumnLayoutChanged { get; set; }

    private readonly HashSet<string> HiddenColumns = new(StringComparer.Ordinal);
    private readonly FancyColumnLayoutController<TItem> columnLayout = new();
    private ElementReference tableElement;
    private IJSObjectReference? columnModule;
    private DotNetObjectReference<FancyTable<TItem>>? dotNetReference;
    private string? SortColumnKey;
    private bool SortAscending = true;
    private string SearchText = string.Empty;
    private string AppliedSearchText = string.Empty;
    private Timer? debounceTimer;
    private int paginationCurrentPage = 1;
    private int paginationPageSize = 25;
    private bool paginationStateInitialized;

    private FancyTableTexts ResolvedTexts => Texts ?? FancyTableTexts.Default;
    private string ResolvedSearchPlaceholder => ResolvedTexts.SearchPlaceholder;
    private string ResolvedRowsPerPageLabel => ResolvedTexts.RowsPerPageLabel;
    private string ResolvedAllItemsLabel => ResolvedTexts.AllItemsLabel;
    private string ResolvedHiddenColumnsLabel => ResolvedTexts.HiddenColumnsLabel;
    private string ResolvedPaginationAriaLabel => ResolvedTexts.PaginationAriaLabel;
    private string ResolvedPreviousPageLabel => ResolvedTexts.PreviousPageLabel;
    private string ResolvedNextPageLabel => ResolvedTexts.NextPageLabel;

    private IEnumerable<FancyColumn<TItem>> VisibleColumns =>
        columnLayout.GetOrderedColumns().Where(c => !HiddenColumns.Contains(c.Key));

    private IReadOnlyList<FancyColumn<TItem>> VisibleColumnsList => VisibleColumns.ToList();

    private bool IsPaginationActive => PaginationEnabled && PaginationPageSize > 0;
    private bool IsColumnLayoutEnabled =>
        EnableColumnResizing || EnableColumnReordering || Columns.Any(column => column.Width.HasValue || column.MaxWidth.HasValue);
    private bool ShouldRenderPageSizeSelector => PaginationEnabled && ShowPageSizeSelector;
    private int PaginationPageSize => paginationPageSize > 0 ? paginationPageSize : 0;

    private IReadOnlyList<int> EffectivePageSizeOptions
    {
        get
        {
            IEnumerable<int> options = (PageSizeOptions ?? DefaultPageSizeOptions)
                .Where(static option => option >= 0)
                .Distinct()
                .OrderBy(static option => option);

            if (!options.Contains(0))
            {
                options = options.Append(0).OrderBy(static option => option);
            }

            if (PageSize >= 0 && !options.Contains(PageSize))
            {
                options = options.Append(PageSize).OrderBy(static option => option);
            }

            if (PaginationPageSize >= 0 && !options.Contains(PaginationPageSize))
            {
                options = options.Append(PaginationPageSize).OrderBy(static option => option);
            }

            List<int> normalizedOptions = options.ToList();
            return normalizedOptions.Count > 0 ? normalizedOptions : [0, .. DefaultPageSizeOptions];
        }
    }

    protected override void OnParametersSet()
    {
        columnLayout.Synchronize(Columns, InitialColumnLayout, pinnedColumnKey: null);
        SyncPaginationStateFromParameters();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!EnableColumnResizing
            && !EnableColumnReordering
            && columnLayout.Widths.Count == 0
            && !columnLayout.GetOrderedColumns().Any(column => column.MaxWidth.HasValue))
        {
            return;
        }

        columnModule ??= await JS.InvokeAsync<IJSObjectReference>("import", "./_content/SoPro.FancyTable/fancy-table-columns.js");
        dotNetReference ??= DotNetObjectReference.Create(this);
        await columnModule.InvokeVoidAsync("initialize", tableElement, dotNetReference, new
        {
            resizing = EnableColumnResizing,
            reordering = EnableColumnReordering
        });
    }

    private PagedItemsResult GetPagedItems()
    {
        string filter = string.IsNullOrWhiteSpace(AppliedSearchText) ? SearchText : AppliedSearchText;
        IReadOnlyList<TItem> filteredAndSortedItems = TableQueryHelpers
            .ApplySort(TableQueryHelpers.ApplySearch(Items, filter, Columns, SearchPredicate), SortColumnKey, SortAscending, Columns)
            .ToList();

        FancyPaginationContext<TItem> paginationContext = BuildPaginationContext(
            totalItemCount: Items.Count,
            filteredItemCount: filteredAndSortedItems.Count);

        IReadOnlyList<TItem> pagedItems = ApplyPagination(filteredAndSortedItems, paginationContext);
        return new PagedItemsResult { Items = pagedItems, Context = paginationContext };
    }

    private FancyPaginationContext<TItem> BuildPaginationContext(int totalItemCount, int filteredItemCount)
    {
        int pageCount = !IsPaginationActive || filteredItemCount == 0
            ? 1
            : Math.Max(1, (int)Math.Ceiling(filteredItemCount / (double)PaginationPageSize));

        int clampedPage = Math.Clamp(paginationCurrentPage, 1, pageCount);
        if (clampedPage != paginationCurrentPage)
        {
            paginationCurrentPage = clampedPage;
        }

        int startItemIndex = filteredItemCount == 0 ? 0 : ((clampedPage - 1) * Math.Max(PaginationPageSize, 1)) + 1;
        int endItemIndex = filteredItemCount == 0
            ? 0
            : (IsPaginationActive
                ? Math.Min(filteredItemCount, clampedPage * PaginationPageSize)
                : filteredItemCount);

        return new FancyPaginationContext<TItem>(
            currentPage: clampedPage,
            pageSize: PaginationPageSize,
            totalItemCount: totalItemCount,
            filteredItemCount: filteredItemCount,
            pageCount: pageCount,
            startItemIndex: startItemIndex,
            endItemIndex: endItemIndex,
            goToPageAsync: SetCurrentPageAsync,
            goToPreviousPageAsync: () => SetCurrentPageAsync(paginationCurrentPage - 1),
            goToNextPageAsync: () => SetCurrentPageAsync(paginationCurrentPage + 1),
            setPageSizeAsync: SetPageSizeAsync);
    }

    private IReadOnlyList<TItem> ApplyPagination(IReadOnlyList<TItem> items, FancyPaginationContext<TItem> paginationContext)
    {
        if (!IsPaginationActive)
        {
            return items;
        }

        int skip = (paginationContext.CurrentPage - 1) * PaginationPageSize;
        return items.Skip(skip).Take(PaginationPageSize).ToList();
    }

    private void SortBy(string columnKey)
    {
        if (SortColumnKey == columnKey)
        {
            SortAscending = !SortAscending;
        }
        else
        {
            SortColumnKey = columnKey;
            SortAscending = true;
        }
    }

    private string GetSortIcon(string key)
    {
        if (SortColumnKey != key)
        {
            return "bi-arrow-down-up";
        }

        return SortAscending ? "bi-sort-up" : "bi-sort-down";
    }

    private void HideColumn(string key) => HiddenColumns.Add(key);

    private void ShowColumn(string key) => HiddenColumns.Remove(key);

    private bool CanReorder(FancyColumn<TItem> column) => EnableColumnReordering && column.Reorderable;

    private static string FormatColumnLabel(string format, string title) =>
        string.Format(CultureInfo.CurrentCulture, format, title);

    private static string? GetDataWidth(double? width) =>
        width is double value ? value.ToString(CultureInfo.InvariantCulture) : null;

    [JSInvokable]
    public async Task OnColumnResizeCompleted(FancyColumnLayout[] measurements)
    {
        columnLayout.ApplyMeasuredWidths(measurements);
        await ColumnLayoutChanged.InvokeAsync(columnLayout.GetLayout());
        await InvokeAsync(StateHasChanged);
    }

    [JSInvokable]
    public async Task OnColumnReorderCompleted(string sourceKey, string targetKey, bool insertAfter)
    {
        if (!EnableColumnReordering || !columnLayout.TryReorder(sourceKey, targetKey, insertAfter, pinnedColumnKey: null))
        {
            return;
        }

        await ColumnLayoutChanged.InvokeAsync(columnLayout.GetLayout());
        await InvokeAsync(StateHasChanged);
    }

    private void HandleSearchKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            debounceTimer?.Dispose();
            ApplySearch();
        }
    }

    private void ApplySearch()
    {
        AppliedSearchText = SearchText;
        paginationCurrentPage = 1;
        StateHasChanged();
    }

    private void ClearSearch()
    {
        SearchText = string.Empty;
        AppliedSearchText = string.Empty;
        paginationCurrentPage = 1;
        StateHasChanged();
    }

    private void OnSearchInput(ChangeEventArgs e)
    {
        SearchText = e.Value?.ToString() ?? string.Empty;

        debounceTimer?.Dispose();
        debounceTimer = new Timer(_ =>
        {
            _ = InvokeAsync(() =>
            {
                AppliedSearchText = SearchText;
                paginationCurrentPage = 1;
                StateHasChanged();
            });
        }, null, 250, Timeout.Infinite);
    }

    private void SyncPaginationStateFromParameters()
    {
        if (!paginationStateInitialized)
        {
            paginationCurrentPage = Math.Max(1, CurrentPage);
            paginationPageSize = PageSize;
            paginationStateInitialized = true;
            return;
        }

        if (CurrentPageChanged.HasDelegate)
        {
            paginationCurrentPage = Math.Max(1, CurrentPage);
        }

        if (PageSizeChanged.HasDelegate)
        {
            paginationPageSize = PageSize;
        }
    }

    private async Task SetCurrentPageAsync(int page)
    {
        int normalizedPage = Math.Max(1, page);
        if (paginationCurrentPage == normalizedPage)
        {
            return;
        }

        paginationCurrentPage = normalizedPage;
        await CurrentPageChanged.InvokeAsync(normalizedPage);
    }

    private async Task SetPageSizeAsync(int pageSize)
    {
        int normalizedPageSize = Math.Max(0, pageSize);
        if (paginationPageSize == normalizedPageSize)
        {
            return;
        }

        paginationPageSize = normalizedPageSize;
        paginationCurrentPage = 1;

        await PageSizeChanged.InvokeAsync(normalizedPageSize);
        await CurrentPageChanged.InvokeAsync(paginationCurrentPage);
    }

    private async Task OnPageSizeChanged(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value?.ToString(), out int selectedPageSize))
        {
            await SetPageSizeAsync(selectedPageSize);
        }
    }

    private bool ShouldRenderPaginationFooter(FancyPaginationContext<TItem> context) =>
        IsPaginationActive && (PaginationTemplate is not null || ShowPaginationSummary || context.PageCount > 1);

    private string GetDefaultPaginationSummary(FancyPaginationContext<TItem> context)
    {
        if (context.FilteredItemCount == 0)
        {
            return context.TotalItemCount == 0
                ? ResolvedTexts.NoRowsLabel
                : FormatResolvedText(ResolvedTexts.NoMatchingRowsWithTotalFormat, context.TotalItemCount);
        }

        return context.FilteredItemCount == context.TotalItemCount
            ? FormatResolvedText(ResolvedTexts.ShowingItemsFormat, context.StartItemIndex, context.EndItemIndex, context.FilteredItemCount)
            : FormatResolvedText(ResolvedTexts.ShowingFilteredItemsFormat, context.StartItemIndex, context.EndItemIndex, context.FilteredItemCount, context.TotalItemCount);
    }

    private IReadOnlyList<int> GetVisiblePageNumbers(FancyPaginationContext<TItem> context)
    {
        const int windowSize = 5;
        int startPage = Math.Max(1, context.CurrentPage - 2);
        int endPage = Math.Min(context.PageCount, startPage + windowSize - 1);

        if ((endPage - startPage) < windowSize - 1)
        {
            startPage = Math.Max(1, endPage - windowSize + 1);
        }

        return Enumerable.Range(startPage, endPage - startPage + 1).ToList();
    }

    private string GetTopBarClass() => CombineClasses("fancy-table-topbar d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2", TopBarClass);

    private string GetTableClass() => IsColumnLayoutEnabled ? "tree-table fancy-column-layout-enabled" : "tree-table";

    private string GetToolbarContainerClass() => CombineClasses("d-flex ms-auto", ToolbarContainerClass);

    private string GetPageSizeContainerClass() => CombineClasses("fancy-page-size", PageSizeContainerClass);

    private string GetPaginationContainerClass() => CombineClasses("fancy-pagination d-flex flex-wrap align-items-center justify-content-between gap-2 mt-3", PaginationContainerClass);

    private string GetPaginationSummaryClass() => CombineClasses("fancy-pagination-summary text-muted small", PaginationSummaryClass);

    private static string CombineClasses(string baseClass, string? additionalClass) =>
        string.IsNullOrWhiteSpace(additionalClass) ? baseClass : $"{baseClass} {additionalClass}";

    private static string FormatResolvedText(string format, params object[] args) =>
        string.Format(CultureInfo.CurrentCulture, format, args);

    private sealed class PagedItemsResult
    {
        public required IReadOnlyList<TItem> Items { get; init; }
        public required FancyPaginationContext<TItem> Context { get; init; }
    }

    public async ValueTask DisposeAsync()
    {
        debounceTimer?.Dispose();
        if (columnModule is not null)
        {
            try
            {
                await columnModule.InvokeVoidAsync("dispose", tableElement);
                await columnModule.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }

        dotNetReference?.Dispose();
    }
}