aliasvault/apps/server/AliasVault.Client/Main/Components/Items/ItemsTable.razor

@using AliasVault.RazorComponents.Tables
@using AliasVault.Client.Main.Models
@inject NavigationManager NavigationManager

<SortableTable Columns="@_tableColumns" SortColumn="@SortColumn" SortDirection="@CurrentSortDirection" OnSortChanged="HandleSortChanged">
    @foreach (var credential in Credentials)
    {
        <SortableTableRow Class="cursor-pointer" OnClick="@(() => NavigateToCredential(credential.Id))">
            <SortableTableColumn Padding="false">
                <div class="flex items-center space-x-2 py-2 pl-2">
                    <DisplayFavicon FaviconBytes="@credential.Logo" Width="24" />
                    <span class="font-bold ml-2">@credential.Service</span>
                </div>
            </SortableTableColumn>
            <SortableTableColumn Padding="false">@credential.Username</SortableTableColumn>
            <SortableTableColumn Padding="false">@credential.Email</SortableTableColumn>
            <SortableTableColumn Padding="false">@credential.CreatedAt.ToString("yyyy-MM-dd")</SortableTableColumn>
        </SortableTableRow>
    }
</SortableTable>

@code {
    /// <summary>
    /// Gets or sets the list of credentials to show.
    /// </summary>
    [Parameter]
    public List<ItemListEntry> Credentials { get; set; } = [];

    /// <summary>
    /// Gets or sets the current sort column.
    /// </summary>
    [Parameter]
    public string SortColumn { get; set; } = "CreatedAt";

    /// <summary>
    /// Gets or sets the current sort direction.
    /// </summary>
    [Parameter]
    public SortDirection CurrentSortDirection { get; set; } = SortDirection.Ascending;

    /// <summary>
    /// Gets or sets the callback for when the sort changes.
    /// The parent component should handle sorting ALL items when this is invoked.
    /// </summary>
    [Parameter]
    public EventCallback<(string Column, SortDirection Direction)> OnTableSortChanged { get; set; }

    /// <summary>
    /// Gets or sets the columns to show in the table.
    /// </summary>
    private readonly List<TableColumn> _tableColumns = [
        new TableColumn { Title = "Service", PropertyName = "Service" },
        new TableColumn { Title = "Username", PropertyName = "Username" },
        new TableColumn { Title = "Email", PropertyName = "Email" },
        new TableColumn { Title = "Created", PropertyName = "CreatedAt" }
    ];

    /// <summary>
    /// Handles the sort changed event from the table header click.
    /// Notifies the parent component to apply sorting on all items.
    /// </summary>
    /// <param name="sort">The sort event.</param>
    private async Task HandleSortChanged((string column, SortDirection direction) sort)
    {
        await OnTableSortChanged.InvokeAsync((sort.column, sort.direction));
    }

    /// <summary>
    /// Navigates to the credential details page.
    /// </summary>
    /// <param name="credentialId">The ID of the credential to navigate to.</param>
    private void NavigateToCredential(Guid credentialId)
    {
        NavigationManager.NavigateTo($"/items/{credentialId}");
    }
}