Merge pull request 'Implemented theme import and export' (#15) from feat/ThemeExportImport into v2.1

Reviewed-on: #15

Moonlight.Api/Http/Controllers/Admin/Themes/ThemesController.cs

@@ -11,7 +11,7 @@ using Moonlight.Shared.Http.Requests.Admin.Themes;
 using Moonlight.Shared.Http.Responses;
 using Moonlight.Shared.Http.Responses.Admin.Themes;
 
-namespace Moonlight.Api.Http.Controllers.Admin;
+namespace Moonlight.Api.Http.Controllers.Admin.Themes;
 
 [ApiController]
 [Route("api/admin/themes")]

Moonlight.Api/Http/Controllers/Admin/Themes/TransferController.cs

@@ -0,0 +1,76 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Moonlight.Api.Database;
+using Moonlight.Api.Database.Entities;
+using Moonlight.Api.Mappers;
+using Moonlight.Api.Models;
+using Moonlight.Shared;
+using Moonlight.Shared.Http.Responses.Admin.Themes;
+using VYaml.Serialization;
+
+namespace Moonlight.Api.Http.Controllers.Admin.Themes;
+
+[ApiController]
+[Route("api/admin/themes")]
+[Authorize(Policy = Permissions.Themes.View)]
+public class TransferController : Controller
+{
+    private readonly DatabaseRepository<Theme> ThemeRepository;
+
+    public TransferController(DatabaseRepository<Theme> themeRepository)
+    {
+        ThemeRepository = themeRepository;
+    }
+
+    [HttpGet("{id:int}/export")]
+    public async Task<ActionResult> ExportAsync([FromRoute] int id)
+    {
+        var theme = await ThemeRepository
+            .Query()
+            .FirstOrDefaultAsync(x => x.Id == id);
+
+        if (theme == null)
+            return Problem("No theme with that id found", statusCode: 404);
+
+        var yml = YamlSerializer.Serialize(new ThemeTransferModel()
+        {
+            Name = theme.Name,
+            Author = theme.Author,
+            CssContent = theme.CssContent,
+            Version = theme.Version
+        });
+
+        return File(yml.ToArray(), "text/yaml", $"{theme.Name}.yml");
+    }
+
+    [HttpPost("import")]
+    public async Task<ActionResult<ThemeDto>> ImportAsync()
+    {
+        var themeToImport = await YamlSerializer.DeserializeAsync<ThemeTransferModel>(Request.Body);
+
+        var existingTheme = await ThemeRepository
+            .Query()
+            .FirstOrDefaultAsync(x => x.Name == themeToImport.Name && x.Author == themeToImport.Author);
+
+        if (existingTheme == null)
+        {
+            var finalTheme = await ThemeRepository.AddAsync(new Theme()
+            {
+                Name = themeToImport.Name,
+                Author = themeToImport.Author,
+                CssContent = themeToImport.CssContent,
+                Version = themeToImport.Version
+            });
+
+            return ThemeMapper.ToDto(finalTheme);
+        }
+
+        existingTheme.CssContent = themeToImport.CssContent;
+        existingTheme.Version = themeToImport.Version;
+
+        await ThemeRepository.UpdateAsync(existingTheme);
+
+        return ThemeMapper.ToDto(existingTheme);
+    }
+}

Moonlight.Api/Models/ThemeTransferModel.cs

@@ -0,0 +1,12 @@
+using VYaml.Annotations;
+
+namespace Moonlight.Api.Models;
+
+[YamlObject]
+public partial class ThemeTransferModel
+{
+    public string Name { get; set; }
+    public string Version { get; set; }
+    public string Author { get; set; }
+    public string CssContent { get; set; }
+}

Moonlight.Api/Moonlight.Api.csproj

@@ -30,6 +30,7 @@
         <PackageReference Include="Microsoft.Extensions.Caching.StackExchangeRedis" Version="10.0.3" />
         <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.0"/>
         <PackageReference Include="Riok.Mapperly" Version="4.3.1-next.0"/>
+        <PackageReference Include="VYaml" Version="1.2.0" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -18,6 +18,8 @@
 @inject IAuthorizationService AuthorizationService
 @inject HttpClient HttpClient
 
+<InputFile OnChange="OnFileSelectedAsync" id="import-theme" class="hidden" multiple accept=".yml"/>
+
 <div class="flex flex-row justify-between mt-5">
     <div class="flex flex-col">
         <h1 class="text-xl font-semibold">Themes</h1>
@@ -26,7 +28,15 @@
         </div>
     </div>
     <div class="flex flex-row gap-x-1.5">
-        <Button @onclick="CreateAsync" disabled="@(!CreateAccess.Succeeded)">
+        <Button Variant="ButtonVariant.Outline">
+            <Slot>
+                <label for="import-theme" @attributes="context">
+                    <HardDriveUploadIcon/>
+                    Import
+                </label>
+            </Slot>
+        </Button>
+        <Button @onclick="Create" disabled="@(!CreateAccess.Succeeded)">
             <PlusIcon/>
             Create
         </Button>
@@ -39,7 +49,8 @@
         <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>
+                    <a class="text-primary flex flex-row items-center" href="#" @onclick="() => Edit(context)"
+                       @onclick:preventDefault>
                         @context.Name
 
                         @if (context.IsEnabled)
@@ -70,7 +81,13 @@
                                 </Slot>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent SideOffset="2">
-                                <DropdownMenuItem OnClick="() => EditAsync(context)" Disabled="@(!EditAccess.Succeeded)">
+                                <DropdownMenuItem OnClick="() => Download(context)">
+                                    Download
+                                    <DropdownMenuShortcut>
+                                        <HardDriveDownloadIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => Edit(context)" Disabled="@(!EditAccess.Succeeded)">
                                     Edit
                                     <DropdownMenuShortcut>
                                         <PenIcon/>
@@ -125,9 +142,11 @@
         return new DataGridResponse<ThemeDto>(response!.Data, response.TotalLength);
     }
 
-    private void CreateAsync() => Navigation.NavigateTo("/admin/system/themes/create");
+    private void Create() => Navigation.NavigateTo("/admin/system/themes/create");
 
-    private void EditAsync(ThemeDto theme) => Navigation.NavigateTo($"/admin/system/themes/{theme.Id}");
+    private void Edit(ThemeDto theme) => Navigation.NavigateTo($"/admin/system/themes/{theme.Id}");
+
+    private void Download(ThemeDto theme) => Navigation.NavigateTo($"api/admin/themes/{theme.Id}/export", true);
 
     private async Task DeleteAsync(ThemeDto theme)
     {
@@ -145,4 +164,31 @@
             }
         );
     }
+
+    private async Task OnFileSelectedAsync(InputFileChangeEventArgs eventArgs)
+    {
+        var files = eventArgs.GetMultipleFiles();
+
+        foreach (var browserFile in files)
+        {
+            await using var contentStream = browserFile.OpenReadStream(browserFile.Size);
+
+            var response = await HttpClient.PostAsync(
+                "api/admin/themes/import",
+                new StreamContent(contentStream)
+            );
+
+            response.EnsureSuccessStatusCode();
+
+            var importedTheme = await response
+                .Content
+                .ReadFromJsonAsync<ThemeDto>(Constants.SerializerOptions);
+
+            if (importedTheme == null)
+                continue;
+
+            await Grid.RefreshAsync();
+            await ToastService.SuccessAsync("Theme Import", $"Successfully imported theme {importedTheme.Name}");
+        }
+    }
 }