aliasvault/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialsTable.razor

@using AliasVault.RazorComponents.Tables
@inject NavigationManager NavigationManager

<SortableTable Columns="@_tableColumns" SortColumn="@SortColumn" SortDirection="@SortDirection" OnSortChanged="HandleSortChanged">
    @foreach (var credential in SortedCredentials)
    {
        <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<CredentialListEntry> Credentials { get; set; } = [];

    /// <summary>
    /// Gets or sets the default sort direction that is applied to the provided credentials list.
    /// </summary>
    [Parameter]
    public SortDirection SortDirection { get; set; } = SortDirection.Ascending;

    /// <summary>
    /// Gets or sets the column to sort by.
    /// </summary>
    private string SortColumn { get; set; } = "CreatedAt";

    /// <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>
    /// Gets or sets the sorted credentials.
    /// </summary>
    private IEnumerable<CredentialListEntry> SortedCredentials => SortList(Credentials, SortColumn, SortDirection);

    /// <summary>
    /// Handles the sort changed event.
    /// </summary>
    /// <param name="sort">The sort event.</param>
    private void HandleSortChanged((string column, SortDirection direction) sort)
    {
        SortColumn = sort.column;
        SortDirection = sort.direction;
        StateHasChanged();
    }

    /// <summary>
    /// Sorts the list of credentials.
    /// </summary>
    /// <param name="credentials">The list of credentials to sort.</param>
    /// <param name="sortColumn">The column to sort by.</param>
    /// <param name="sortDirection">The direction to sort by.</param>
    private static IEnumerable<CredentialListEntry> SortList(List<CredentialListEntry> credentials, string sortColumn, SortDirection sortDirection)
    {
        return sortColumn switch
        {
            "Service" => SortableTable.SortListByProperty(credentials, c => c.Service, sortDirection),
            "Username" => SortableTable.SortListByProperty(credentials, c => c.Username, sortDirection),
            "Email" => SortableTable.SortListByProperty(credentials, c => c.Email, sortDirection),
            "CreatedAt" => SortableTable.SortListByProperty(credentials, c => c.CreatedAt, sortDirection),
            _ => credentials
        };
    }

    /// <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($"/credentials/{credentialId}");
    }
}