Moonlight/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor

@page "/admin/system/customisation"

@using System.Text.Json
@using Microsoft.AspNetCore.Authorization
@using MoonCore.Blazor.FlyonUi.Common
@using MoonCore.Blazor.FlyonUi.Grid
@using MoonCore.Blazor.FlyonUi.Grid.Columns
@using MoonCore.Blazor.FlyonUi.Grid.ToolbarItems
@using MoonCore.Blazor.FlyonUi.Helpers
@using MoonCore.Common
@using MoonCore.Helpers
@using Moonlight.Client.Models
@using Moonlight.Client.Services
@using Moonlight.Shared.Http.Requests.Admin.Sys.Theme
@using Moonlight.Shared.Http.Responses.Admin

@attribute [Authorize(Policy = "permissions:admin.system.theme")]

@inject ThemeService ThemeService
@inject AlertService AlertService
@inject ToastService ToastService
@inject HttpApiClient ApiClient
@inject DownloadService DownloadService
@inject ILogger<Index> Logger

<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>

<PageSeparator Icon="icon-palette">
    Themes
</PageSeparator>

<div class="my-8">
    <DataGrid TGridItem="ThemeResponse"
              ItemSource="ItemSource">

        <PropertyColumn Field="x => x.Id" Sortable="true"/>
        <TemplateColumn Title="Name" Sortable="true">
            <td>
                <div class="flex items-center">
                    @context.Name

                    @if (context.IsEnabled)
                    {
                        <i class="icon-check text-success ms-2"></i>
                    }
                </div>
            </td>
        </TemplateColumn>
        <PropertyColumn Field="x => x.Version" Sortable="true"/>
        <PropertyColumn Field="x => x.Author"/>

        <TemplateColumn>
            <td>
                <div class="flex justify-end">
                    @if (!string.IsNullOrEmpty(context.DonateUrl))
                    {
                        <a href="@context.DonateUrl" target="_blank" class="flex items-center mr-2 sm:mr-3">
                            <i class="text-accent icon-heart me-1"></i>
                            <span class="text-accent">Donate</span>
                        </a>
                    }

                    @if (!string.IsNullOrEmpty(context.UpdateUrl))
                    {
                        <a href="#" class="flex items-center mr-2 sm:mr-3">
                            <i class="text-info icon-refresh-cw me-1"></i>
                            <span class="text-info">Update</span>
                        </a>
                    }

                    <a @onclick="() => ExportAsync(context)" @onclick:preventDefault href="#"
                       class="flex items-center mr-2 sm:mr-3">
                        <i class="text-success icon-download me-1"></i>
                        <span class="text-success">Export</span>
                    </a>

                    <a href="/admin/system/customisation/themes/@(context.Id)" class="mr-2 sm:mr-3">
                        <i class="icon-pencil text-primary"></i>
                    </a>

                    <a href="#" @onclick="() => DeleteAsync(context)" @onclick:preventDefault>
                        <i class="icon-trash text-error"></i>
                    </a>
                </div>
            </td>
        </TemplateColumn>

        <TemplateToolbarItem>
            <label for="import-theme" class="btn btn-info me-1 ms-1.5">
                <i class="icon-file-up"></i>
                Import
            </label>
            <InputFile OnChange="ImportAsync" id="import-theme" class="hidden" multiple/>
            <a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
        </TemplateToolbarItem>
    </DataGrid>
</div>

<PageSeparator Icon="icon-images">
    Images & Logos
</PageSeparator>


@code
{
    private DataGrid<ThemeResponse> Grid;
    private ItemSource<ThemeResponse> ItemSource => ItemSourceFactory.From(LoadItemsAsync);

    private async Task<IEnumerable<ThemeResponse>> 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<ThemeResponse>>($"api/admin/system/customisation/themes{query}");
    }

    private async Task ImportAsync(InputFileChangeEventArgs eventArgs)
    {
        if (eventArgs.FileCount < 1)
            return;

        var files = eventArgs.GetMultipleFiles();

        var maxFileSize = ByteConverter.FromMegaBytes(1).Bytes;

        foreach (var file in files)
        {
            try
            {
                if (!file.Name.EndsWith(".json"))
                {
                    await ToastService.ErrorAsync($"Unable to import {file.Name}", "Only .json files are supported");
                    continue;
                }

                if (file.Size > maxFileSize)
                {
                    await ToastService.ErrorAsync($"Unable to import {file.Name}", "Exceeded the maximum file limit of 1MB");
                    continue;
                }

                await using var stream = file.OpenReadStream(maxFileSize);
                var themeTransfer = await JsonSerializer.DeserializeAsync<ThemeTransferModel>(stream);

                stream.Close();

                if (themeTransfer == null)
                {
                    await ToastService.ErrorAsync($"Unable to import {file.Name}", "Failed to deserialize the content");
                    continue;
                }

                var theme = await ThemeService.CreateAsync(new CreateThemeRequest()
                {
                    Name = themeTransfer.Name,
                    Author = themeTransfer.Author,
                    Content = themeTransfer.Content,
                    DonateUrl = themeTransfer.DonateUrl,
                    UpdateUrl = themeTransfer.UpdateUrl,
                    Version = themeTransfer.Version
                });

                await ToastService.SuccessAsync("Successfully imported theme", theme.Name);

                await Grid.RefreshAsync();
            }
            catch (Exception e)
            {
                Logger.LogError(e, "An unhandled error occured while importing file {file} as theme", file.Name);
            }
        }
    }

    private async Task ExportAsync(ThemeResponse theme)
    {
        var transfer = new ThemeTransferModel()
        {
            Name = theme.Name,
            Author = theme.Author,
            Content = theme.Content,
            DonateUrl = theme.DonateUrl,
            UpdateUrl = theme.UpdateUrl,
            Version = theme.Version
        };

        var json = JsonSerializer.Serialize(transfer, new JsonSerializerOptions()
        {
            WriteIndented = true
        });

        var fileName = $"{transfer.Name.Replace(" ", string.Empty).Trim()}.json";

        await DownloadService.DownloadAsync(fileName, json);
    }

    private async Task DeleteAsync(ThemeResponse response)
    {
        await AlertService.ConfirmDangerAsync(
            "Theme deletion",
            $"Do you really want to delete the theme: {response.Name}",
            async () =>
            {
                await ThemeService.DeleteAsync(response.Id);

                await ToastService.SuccessAsync("Successfully deleted theme");
                await Grid.RefreshAsync();
            }
        );
    }
}