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

@page "/admin/api"

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

@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"
          ItemsProvider="ItemsProviderAsync"
          EnableFiltering="true"
          EnablePagination="true">
    <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 async Task<DataGridItemResult<ApiKeyResponse>> ItemsProviderAsync(DataGridItemRequest request)
    {
        var query = $"?startIndex={request.StartIndex}&count={request.Count}";

        if (!string.IsNullOrEmpty(request.SortColumn))
        {
            var dir = request.SortDirection == SortState.Descending ? "desc" : "asc";
            query += $"&orderBy={request.SortColumn}&orderByDir={dir}";
        }

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

        return new()
        {
            Items = data.Items,
            TotalCount = data.TotalCount
        };
    }

    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();
            }
        );
    }
}