Moonlight/Moonlight.Client/UI/Views/Admin/Api/Index.razor

@page "/admin/api"

@using MoonCore.Blazor.FlyonUi.Common
@using MoonCore.Helpers
@using Moonlight.Shared.Http.Responses.Admin.ApiKeys
@using MoonCore.Blazor.FlyonUi.Grid
@using MoonCore.Blazor.FlyonUi.Grid.Columns
@using MoonCore.Blazor.FlyonUi.Grid.ToolbarItems
@using MoonCore.Common

@inject HttpApiClient ApiClient
@inject AlertService AlertService
@inject ToastService ToastService

<div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3 gap-y-2 sm:gap-y-0">
    <div class="col-span-1 card card-body border-l-4 border-primary">
        <p class="font-medium tracking-wide text-base-content">
            API Documentation
        </p>
        <a href="/api/swagger" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-primary"></i>
            </div>
        </a>
    </div>

    <div class="col-span-1 card card-body border-l-4 border-accent">
        <p class="font-medium tracking-wide text-base-content">
            Learn about the api usage
        </p>
        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-accent"></i>
            </div>
        </a>
    </div>

    <div class="col-span-1 card card-body border-l-4 border-success">
        <p class="font-medium tracking-wide text-base-content">
            Open API Specification
        </p>
        <a href="/api/swagger/main" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
                <i class="bi bi-box-arrow-up-right text-lg text-success"></i>
            </div>
        </a>
    </div>
</div>

<DataGrid @ref="Grid"
          TGridItem="ApiKeyResponse"
          ItemSource="ItemSource">
    <PropertyColumn Field="x => x.Id" Sortable="true" />
    <PropertyColumn Field="x => x.Description" />
    <TemplateColumn Sortable="true" Title="Expires At">
        <td>
            @Formatter.FormatDate(context.ExpiresAt.UtcDateTime)
        </td>
    </TemplateColumn>
    <TemplateColumn Sortable="true" Title="Created At">
        <td>
            @Formatter.FormatDate(context.CreatedAt.UtcDateTime)
        </td>
    </TemplateColumn>
    <TemplateColumn>
        <td>
            <div class="flex justify-end">
                <a href="/admin/api/@(context.Id)" class="text-primary mr-2 sm:mr-3">
                    <i class="icon-pencil text-base"></i>
                </a>

                <a href="#" @onclick="() => DeleteAsync(context)" @onclick:preventDefault
                   class="text-error">
                    <i class="icon-trash text-base"></i>
                </a>
            </div>
        </td>
    </TemplateColumn>
    
    <TemplateToolbarItem>
        <a href="/admin/api/create" class="btn btn-primary ms-1.5">
            Create
        </a>
    </TemplateToolbarItem>
</DataGrid>

@code
{
    private DataGrid<ApiKeyResponse> Grid;

    private ItemSource<ApiKeyResponse> ItemSource => ItemSourceFactory.From(LoadItemsAsync);
    
    private async Task<IEnumerable<ApiKeyResponse>> LoadItemsAsync(
        int startIndex, int count, string? filter, SortOption? sortOption
    )
    {
        var query = $"?startIndex={startIndex}&count={count}";

        if (sortOption != null)
        {
            var dir = sortOption.Direction == SortDirection.Descending ? "desc" : "asc";
            query += $"&orderBy={sortOption.Column}&orderByDir={dir}";
        }

        if (!string.IsNullOrEmpty(filter))
            query += $"&filter={filter}";
        
        return await ApiClient.GetJson<CountedData<ApiKeyResponse>>($"api/admin/apikeys{query}");
    }

    private async Task DeleteAsync(ApiKeyResponse apiKeyResponse)
    {
        await AlertService.ConfirmDangerAsync(
            "API Key Deletion",
            $"Do you really want to delete the api key '{apiKeyResponse.Description}'",
            async () =>
            {
                await ApiClient.Delete($"api/admin/apikeys/{apiKeyResponse.Id}");
                await ToastService.SuccessAsync("Successfully deleted api key");

                await Grid.RefreshAsync();
            }
        );
    }
}