Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated all forms to use the EnhancedEditForm and blazors native validation. Fixed smaller issues after upgrading to ShadcnBlazor 1.0.11

Browse Source
This commit is contained in:
ChiaraBm
2026-01-29 08:58:12 +01:00
parent 9b11360a0e
commit 136620f1e6
15 changed files with 362 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
View File

@@ -6,11 +6,11 @@
@using Moonlight.Frontend.Services
@using Moonlight.Shared.Http.Requests.Themes
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Labels
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Editors
@using ShadcnBlazor.Extras.FormHandlers
@using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Switches
@@ -21,86 +21,89 @@
@inject ToastService ToastService
@inject FrontendService FrontendService
<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
<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
<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>
<SubmitButton>
<CheckIcon/>
Continue
</SubmitButton>
</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>
<div class="mt-8">
<Card>
<CardContent>
<FieldGroup>
<FormValidationSummary/>
<DataAnnotationsValidator/>
<FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
<Field>
<FieldLabel for="themeName">Name</FieldLabel>
<TextInputField
@bind-Value="Request.Name"
id="themeName"
placeholder="My cool theme"/>
</div>
</Field>
<div class="col-span-1 grid gap-2">
<Label for="themeVersion">Version</Label>
<Field>
<FieldLabel for="themeVersion">Version</FieldLabel>
<TextInputField
@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>
</Field>
<Field>
<FieldLabel for="themeAuthor">Author</FieldLabel>
<TextInputField
@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>
<Switch @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.Css" InitialValue="@Request.CssContent"/>
</div>
</div>
</FormHandler>
</CardContent>
</Card>
</div>
</Field>
<Field>
<FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
<FieldContent>
<Switch @bind-Value="Request.IsEnabled"/>
</FieldContent>
</Field>
</FieldSet>
<Field>
<style>
.cm-editor {
max-height: 400px;
min-height: 400px;
}
</style>
<FieldLabel for="themeAuthor">CSS Content</FieldLabel>
<FieldContent>
<Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
</FieldContent>
</Field>
</FieldGroup>
</CardContent>
</Card>
</div>
</EnhancedEditForm>
@code
{
@@ -109,17 +112,12 @@
CssContent = "/* Define your css here */"
};
private FormHandler Form;
private Editor Editor;
private async Task SubmitAsync()
private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{
Request.CssContent = await Editor.GetValueAsync();
await Form.SubmitAsync();
}
private async Task OnSubmitAsync()
{
await HttpClient.PostAsJsonAsync(
"/api/admin/themes",
Request,
@@ -134,5 +132,7 @@
await FrontendService.ReloadAsync();
Navigation.NavigateTo("/admin/system?tab=themes");
return true;
}
}