Implemented theme crud and basic theme loading

2026-01-18 23:31:01 +01:00
parent 56b14f60f1
commit 3cbdd3b203
27 changed files with 1218 additions and 14 deletions
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
@@ -0,0 +1,134 @@
+@page "/admin/system/themes/create"
+
+@using Microsoft.AspNetCore.Authorization
+@using Moonlight.Shared
+@using LucideBlazor
+@using Moonlight.Shared.Http.Requests.Themes
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Labels
+@using ShadcnBlazor.Cards
+@using ShadcnBlazor.Checkboxes
+@using ShadcnBlazor.Extras.Editors
+@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Inputs
+
+@attribute [Authorize(Policy = Permissions.Themes.Create)]
+
+@inject HttpClient HttpClient
+@inject NavigationManager Navigation
+@inject ToastService ToastService
+
+<div class="flex flex-row justify-between">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Create theme</h1>
+        <div class="text-muted-foreground">
+            Create a new theme
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button Variant="ButtonVariant.Secondary">
+            <Slot>
+                <a href="/admin/system?tab=themes" @attributes="context">
+                    <ChevronLeftIcon/>
+                    Back
+                </a>
+            </Slot>
+        </Button>
+        <Button @onclick="SubmitAsync">
+            <CheckIcon/>
+            Continue
+        </Button>
+    </div>
+</div>
+
+<div class="mt-8">
+    <Card>
+        <CardContent>
+            <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
+                <div class="flex flex-col gap-6">
+                    
+                    <FormValidationSummary />
+                    
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeName">Name</Label>
+                            <InputField
+                                @bind-Value="Request.Name"
+                                id="themeName"
+                                placeholder="My cool theme"/>
+                        </div>
+
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeVersion">Version</Label>
+                            <InputField
+                                @bind-Value="Request.Version"
+                                id="themeVersion"
+                                Type="text"
+                                placeholder="1.0.0"/>
+                        </div>
+                        
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeAuthor">Author</Label>
+                            <InputField
+                                @bind-Value="Request.Author"
+                                id="themeAuthor"
+                                Type="text"
+                                placeholder="Your name"/>
+                        </div>
+                        
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeAuthor">Is Enabled</Label>
+                            <Checkbox @bind-Value="Request.IsEnabled" />
+                        </div>
+                    </div>
+                    
+                    <style>
+                        .cm-editor {
+                            max-height: 400px;
+                            min-height: 400px;
+                        }
+                    </style>
+                    
+                    <div class="grid gap-2">
+                        <Label for="themeAuthor">CSS Content</Label>
+                        <Editor @ref="Editor" Language="EditorLanguage.None" InitialValue="@Request.CssContent"/>
+                    </div>
+                </div>
+            </FormHandler>
+        </CardContent>
+    </Card>
+</div>
+
+@code
+{
+    private CreateThemeDto Request = new()
+    {
+        CssContent = "/* Define your css here */"
+    };
+
+    private FormHandler Form;
+    private Editor Editor;
+
+    private async Task SubmitAsync()
+    {
+        Request.CssContent = await Editor.GetValueAsync();
+        await Form.SubmitAsync();
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        await HttpClient.PostAsJsonAsync(
+            "/api/admin/themes",
+            Request,
+            Constants.SerializerOptions
+        );
+
+        await ToastService.SuccessAsync(
+            "Theme creation",
+            $"Successfully created theme {Request.Name}"
+        );
+
+        Navigation.NavigateTo("/admin/system?tab=themes");
+    }
+}