Renamed theme tab to customisation tab. Added basic theme crud

Author: ChiaraBm

…Controllers/Admin/Sys/ThemeController.cs …in/Sys/Customisation/ThemesController.csMoonlight.ApiServer/Http/Controllers/Admin/Sys/ThemeController.cs renamed to Moonlight.ApiServer/Http/Controllers/Admin/Sys/Customisation/ThemesController.cs Moonlight.ApiServer/Http/Controllers/Admin/Sys/ThemeController.cs renamed to Moonlight.ApiServer/Http/Controllers/Admin/Sys/Customisation/ThemesController.cs

@@ -10,21 +10,21 @@
 using Moonlight.Shared.Http.Requests.Admin.Sys.Theme;
 using Moonlight.Shared.Http.Responses.Admin;
 
-namespace Moonlight.ApiServer.Http.Controllers.Admin.Sys;
+namespace Moonlight.ApiServer.Http.Controllers.Admin.Sys.Customisation;
 
 [ApiController]
-[Route("api/admin/system/theme")]
-public class ThemeController : Controller
+[Route("api/admin/system/customisation/themes")]
+public class ThemesController : Controller
 {
     private readonly DatabaseRepository<Theme> ThemeRepository;
 
-    public ThemeController(DatabaseRepository<Theme> themeRepository)
+    public ThemesController(DatabaseRepository<Theme> themeRepository)
     {
         ThemeRepository = themeRepository;
     }
 
     [HttpGet]
-    [Authorize(Policy = "permissions:admin.system.theme.read")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.read")]
     public async Task<PagedData<ThemeResponse>> Get(
         [FromQuery] [Range(0, int.MaxValue)] int page,
         [FromQuery] [Range(1, 100)] int pageSize
@@ -53,7 +53,7 @@ [FromQuery] [Range(1, 100)] int pageSize
     }
 
     [HttpGet("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.read")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.read")]
     public async Task<ThemeResponse> GetSingle([FromRoute] int id)
     {
         var theme = await ThemeRepository
@@ -67,7 +67,7 @@ public async Task<ThemeResponse> GetSingle([FromRoute] int id)
     }
 
     [HttpPost]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task<ThemeResponse> Create([FromBody] CreateThemeRequest request)
     {
         var theme = ThemeMapper.ToTheme(request);
@@ -78,7 +78,7 @@ public async Task<ThemeResponse> Create([FromBody] CreateThemeRequest request)
     }
 
     [HttpPatch("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task<ThemeResponse> Update([FromRoute] int id, [FromBody] UpdateThemeRequest request)
     {
         var theme = await ThemeRepository
@@ -112,8 +112,8 @@ await ThemeRepository.RunTransaction(set =>
         return ThemeMapper.ToResponse(theme);
     }
 
-    [HttpPost("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [HttpDelete("{id:int}")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task Delete([FromRoute] int id)
     {
         var theme = await ThemeRepository

Moonlight.Client/Services/ThemeService.cs

@@ -1,25 +1,56 @@
 using MoonCore.Attributes;
+using MoonCore.Helpers;
+using MoonCore.Models;
+using Moonlight.Shared.Http.Requests.Admin.Sys.Theme;
+using Moonlight.Shared.Http.Responses.Admin;
 using Moonlight.Shared.Misc;
 
 namespace Moonlight.Client.Services;
 
-[Singleton]
+[Scoped]
 public class ThemeService
 {
-    public event Func<Task> OnRefresh;
-    
-    public Dictionary<string, string> Variables { get; private set; } = new();
-    
-    public ThemeService(FrontendConfiguration configuration)
+    private readonly HttpApiClient ApiClient;
+
+    public ThemeService(HttpApiClient apiClient)
+    {
+        ApiClient = apiClient;
+    }
+
+    public async Task<PagedData<ThemeResponse>> Get(int page, int pageSize)
+    {
+        return await ApiClient.GetJson<PagedData<ThemeResponse>>(
+            $"api/admin/system/customisation/themes?page={page}&pageSize={pageSize}"
+        );
+    }
+
+    public async Task<ThemeResponse> Get(int id)
+    {
+        return await ApiClient.GetJson<ThemeResponse>(
+            $"api/admin/system/customisation/themes/{id}"
+        );
+    }
+
+    public async Task<ThemeResponse> Create(CreateThemeRequest request)
+    {
+        return await ApiClient.PostJson<ThemeResponse>(
+            "api/admin/system/customisation/themes",
+            request
+        );
+    }
+
+    public async Task<ThemeResponse> Update(int id, UpdateThemeRequest request)
     {
-        // Load theme variables into the cache
-        foreach (var themeVariable in configuration.Theme.Variables)
-            Variables[themeVariable.Key] = themeVariable.Value;
+        return await ApiClient.PatchJson<ThemeResponse>(
+            $"api/admin/system/customisation/themes/{id}",
+            request
+        );
     }
 
-    public async Task Refresh()
+    public async Task Delete(int id)
     {
-        if (OnRefresh != null)
-            await OnRefresh.Invoke();
+        await ApiClient.Delete(
+            $"api/admin/system/customisation/themes/{id}"
+        );
     }
 }

…ht.Client/UI/Views/Admin/Sys/Theme.razor …t.Client/UI/Components/ThemeEditor.razorMoonlight.Client/UI/Views/Admin/Sys/Theme.razor renamed to Moonlight.Client/UI/Components/ThemeEditor.razor Moonlight.Client/UI/Views/Admin/Sys/Theme.razor renamed to Moonlight.Client/UI/Components/ThemeEditor.razor

@@ -1,197 +1,132 @@
-@page "/admin/system/theme"
-
-@using Microsoft.AspNetCore.Authorization
-@using Moonlight.Client.UI.Components
 @using Moonlight.Shared.Misc
 
-@attribute [Authorize(Policy = "permissions:admin.system.theme")]
-
-<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
-
-<div class="mt-5 grid grid-cols-3 gap-3">
+<div class="grid grid-cols-3 gap-3">
     <div class="col-span-1 flex flex-col gap-3">
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBackground"/>
+            <ColorSelector @bind-Value="Theme.ColorBackground"/>
             <span class="ms-1">Background</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBaseContent"/>
+            <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
             <span class="ms-1">Base Content</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase100"/>
+            <ColorSelector @bind-Value="Theme.ColorBase100"/>
             <span class="ms-1">Base 100</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase150"/>
+            <ColorSelector @bind-Value="Theme.ColorBase150"/>
             <span class="ms-1">Base 150</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase200"/>
+            <ColorSelector @bind-Value="Theme.ColorBase200"/>
             <span class="ms-1">Base 200</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase250"/>
+            <ColorSelector @bind-Value="Theme.ColorBase250"/>
             <span class="ms-1">Base 250</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase300"/>
+            <ColorSelector @bind-Value="Theme.ColorBase300"/>
             <span class="ms-1">Base 300</span>
         </div>
     </div>
 
     <div class="col-span-2 grid grid-cols-2 gap-3">
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorPrimary"/>
+                <ColorSelector @bind-Value="Theme.ColorPrimary"/>
                 <span class="ms-1">Primary</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorPrimaryContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorPrimaryContent"/>
                 <span class="ms-1">Primary Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorSecondary"/>
+                <ColorSelector @bind-Value="Theme.ColorSecondary"/>
                 <span class="ms-1">Secondary</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSecondaryContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSecondaryContent"/>
                 <span class="ms-1">Secondary Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorAccent"/>
+                <ColorSelector @bind-Value="Theme.ColorAccent"/>
                 <span class="ms-1">Accent</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorAccentContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
                 <span class="ms-1">Accent Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorInfo"/>
+                <ColorSelector @bind-Value="Theme.ColorInfo"/>
                 <span class="ms-1">Info</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorInfoContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorInfoContent"/>
                 <span class="ms-1">Info Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorSuccess"/>
+                <ColorSelector @bind-Value="Theme.ColorSuccess"/>
                 <span class="ms-1">Success</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSuccessContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSuccessContent"/>
                 <span class="ms-1">Success Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorWarning"/>
+                <ColorSelector @bind-Value="Theme.ColorWarning"/>
                 <span class="ms-1">Warning</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorWarningContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorWarningContent"/>
                 <span class="ms-1">Warning Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorError"/>
+                <ColorSelector @bind-Value="Theme.ColorError"/>
                 <span class="ms-1">Error</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorErrorContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorErrorContent"/>
                 <span class="ms-1">Error Content</span>
             </div>
         </div>
     </div>
 </div>
 
 
-
 @code
 {
-    private ApplicationTheme ThemeData;
-
-    protected override void OnInitialized()
-    {
-        ThemeData = CreateDefault();
-    }
-
-    private ApplicationTheme CreateDefault()
-    {
-        return new ApplicationTheme()
-        {
-            ColorBackground = "#0c0f18",
-
-            ColorBase100 = "#1e2b47",
-            ColorBase150 = "#1a2640",
-            ColorBase200 = "#101a2e",
-            ColorBase250 = "#0f1729",
-            ColorBase300 = "#0c1221",
-
-            ColorBaseContent = "#dde5f5",
-
-            ColorPrimary = "#4f39f6",
-            ColorPrimaryContent = "#dde5f5",
-
-            ColorSecondary = "#354052",
-            ColorSecondaryContent = "#dde5f5",
-
-            ColorAccent = "#ad46ff",
-            ColorAccentContent = "#dde5f5",
-
-            ColorNeutral = "#dde5f5",
-            ColorNeutralContent = "#09090b",
-
-            ColorInfo = "#155dfc",
-            ColorInfoContent = "#dde5f5",
-
-            ColorSuccess = "#00a63e",
-            ColorSuccessContent = "#dde5f5",
-
-            ColorWarning = "#ffba00",
-            ColorWarningContent = "#dde5f5",
-
-            ColorError = "#ec003f",
-            ColorErrorContent = "#dde5f5",
-
-            RadiusSelector = 0.25f,
-            RadiusField = 0.5f,
-            RadiusBox = 0.5f,
-
-            SizeSelector = 0.25f,
-            SizeField = 0.25f,
-
-            Border = 1f,
-            Depth = 0f,
-            Noise = 0f
-        };
-    }
-}
+    [Parameter] public ApplicationTheme Theme { get; set; }
+}