Moonlight/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Index.razor

@using LucideBlazor
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Moonlight.Shared
@using Moonlight.Shared.Http.Requests
@using Moonlight.Shared.Http.Responses
@using Moonlight.Shared.Http.Responses.Themes
@using ShadcnBlazor.DataGrids
@using ShadcnBlazor.Dropdowns
@using ShadcnBlazor.Extras.AlertDialogs
@using ShadcnBlazor.Tabels
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Extras.Toasts

@inject ToastService ToastService
@inject NavigationManager Navigation
@inject AlertDialogService AlertDialogService
@inject IAuthorizationService AuthorizationService
@inject HttpClient HttpClient

<div class="flex flex-row justify-between mt-5">
    <div class="flex flex-col">
        <h1 class="text-xl font-semibold">Themes</h1>
        <div class="text-muted-foreground">
            Manage themes for your instance
        </div>
    </div>
    <div class="flex flex-row gap-x-1.5">
        <Button @onclick="CreateAsync" disabled="@(!CreateAccess.Succeeded)">
            <PlusIcon/>
            Create
        </Button>
    </div>
</div>

<div class="mt-3">
    <DataGrid @ref="Grid" TGridItem="ThemeDto" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
        <PropertyColumn Field="k => k.Id"/>
        <TemplateColumn Identifier="@nameof(ThemeDto.Name)" IsFilterable="true" Title="Name">
            <CellTemplate>
                <TableCell>
                    <a class="text-primary flex flex-row items-center" href="#" @onclick="() => EditAsync(context)" @onclick:preventDefault>
                        @context.Name
                        
                        @if (context.IsEnabled)
                        {
                            <span class="ms-2">
                                <CheckIcon ClassName="size-4 text-green-400" />
                            </span>
                        }
                    </a>
                </TableCell>
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn IsFilterable="true"
                        Identifier="@nameof(ThemeDto.Version)" Field="k => k.Version"/>
        <PropertyColumn IsFilterable="true"
                        Identifier="@nameof(ThemeDto.Author)" Field="k => k.Author"/>
        <TemplateColumn>
            <CellTemplate>
                <TableCell>
                    <div class="flex flex-row items-center justify-end me-3">
                        <DropdownMenu>
                            <DropdownMenuTrigger>
                                <Slot Context="dropdownSlot">
                                    <Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost"
                                            @attributes="dropdownSlot">
                                        <EllipsisIcon/>
                                    </Button>
                                </Slot>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent SideOffset="2">
                                <DropdownMenuItem OnClick="() => EditAsync(context)" Disabled="@(!EditAccess.Succeeded)">
                                    Edit
                                    <DropdownMenuShortcut>
                                        <PenIcon/>
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                                <DropdownMenuItem OnClick="() => DeleteAsync(context)"
                                                  Variant="DropdownMenuItemVariant.Destructive"
                                                  Disabled="@(!DeleteAccess.Succeeded)">
                                    Delete
                                    <DropdownMenuShortcut>
                                        <TrashIcon/>
                                    </DropdownMenuShortcut>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </TableCell>
            </CellTemplate>
        </TemplateColumn>
    </DataGrid>
</div>

@code
{
    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
    
    private DataGrid<ThemeDto> Grid;
    
    private AuthorizationResult EditAccess;
    private AuthorizationResult DeleteAccess;
    private AuthorizationResult CreateAccess;

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthState;
        
        EditAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Edit);
        DeleteAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Delete);
        CreateAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Create);
    }

    private async Task<DataGridResponse<ThemeDto>> LoadAsync(DataGridRequest<ThemeDto> request)
    {
        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
        var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;

        var response = await HttpClient.GetFromJsonAsync<PagedData<ThemeDto>>(
            $"api/admin/themes{query}&filterOptions={filterOptions}",
            Constants.SerializerOptions
        );

        return new DataGridResponse<ThemeDto>(response!.Data, response.TotalLength);
    }

    private void CreateAsync() => Navigation.NavigateTo("/admin/system/themes/create");

    private void EditAsync(ThemeDto theme) => Navigation.NavigateTo($"/admin/system/themes/{theme.Id}");

    private async Task DeleteAsync(ThemeDto theme)
    {
        await AlertDialogService.ConfirmDangerAsync(
            $"Deletion of theme {theme.Name}",
            "Do you really want to delete this theme? This action cannot be undone",
            async () =>
            {
                var response = await HttpClient.DeleteAsync($"api/admin/themes/{theme.Id}");
                response.EnsureSuccessStatusCode();

                await ToastService.SuccessAsync("Theme deletion", $"Successfully deleted theme {theme.Name}");

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