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.DataTables
@using MoonCore.Blazor.FlyonUi.Helpers
@using MoonCore.Helpers
@using MoonCore.Models
@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 DownloadService DownloadService
@inject ILogger<Index> Logger

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

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

<div class="mt-5 flex justify-end">
    <div>
        <label for="import-theme" class="btn btn-info me-1">
            <i class="icon-file-up"></i>
            Import
        </label>
        <InputFile OnChange="Import" id="import-theme" class="hidden" multiple />
        <a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
    </div>
</div>

<div class="my-2.5">
    <DataTable @ref="Table" TItem="ThemeResponse">
        <Configuration>
            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Id)" Name="Id"/>
            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Name)" Name="Name">
                <ColumnTemplate>
                    <div class="flex items-center">
                        @context.Name
                        
                        @if (context.IsEnabled)
                        {
                            <i class="icon-check text-success ms-2"></i>
                        }
                    </div>
                </ColumnTemplate>
            </DataTableColumn>
            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Author)" Name="Author"/>
            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Version)" Name="Version"/>
            <DataTableColumn TItem="ThemeResponse">
                <ColumnTemplate>
                    <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="() => Export(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="() => Delete(context)" @onclick:preventDefault>
                            <i class="icon-trash text-error"></i>
                        </a>
                    </div>
                </ColumnTemplate>
            </DataTableColumn>
            <Pagination TItem="ThemeResponse" PageSize="10" ItemSource="LoadItems"/>
        </Configuration>
    </DataTable>
</div>

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


@code
{
    private DataTable<ThemeResponse> Table;
    
    private async Task<IPagedData<ThemeResponse>> LoadItems(PaginationOptions options)
        => await ThemeService.Get(options.Page, options.PerPage);
    
    private async Task Import(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.Error($"Unable to import {file.Name}", "Only .json files are supported");
                    continue;
                }

                if (file.Size > maxFileSize)
                {
                    await ToastService.Error($"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.Error($"Unable to import {file.Name}", "Failed to deserialize the content");
                    continue;
                }

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

                await ToastService.Success("Successfully imported theme", theme.Name);
                
                await Table.Refresh();
            }
            catch (Exception e)
            {
                Logger.LogError(e, "An unhandled error occured while importing file {file} as theme", file.Name);
            }
        }
    }

    private async Task Export(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.Download(fileName, json);
    }

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

                await ToastService.Success("Successfully deleted theme");
                await Table.Refresh();
            }
        );
    }
}