Updated all forms to use the EnhancedEditForm and blazors native validation. Fixed smaller issues after upgrading to ShadcnBlazor 1.0.11
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -8,12 +8,12 @@
|
||||
@using Moonlight.Shared.Http.Requests.Themes
|
||||
@using Moonlight.Shared.Http.Responses.Themes
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.Labels
|
||||
@using ShadcnBlazor.Cards
|
||||
@using ShadcnBlazor.Extras.Common
|
||||
@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
|
||||
|
||||
@@ -24,99 +24,102 @@
|
||||
@inject ToastService ToastService
|
||||
@inject FrontendService FrontendService
|
||||
|
||||
<div class="flex flex-row justify-between">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-xl font-semibold">Update theme</h1>
|
||||
<div class="text-muted-foreground">
|
||||
Update the theme
|
||||
<LazyLoader Load="LoadAsync">
|
||||
<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">Update theme</h1>
|
||||
<div class="text-muted-foreground">
|
||||
Update the 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>
|
||||
<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>
|
||||
<LazyLoader Load="LoadAsync">
|
||||
<FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
|
||||
<div class="flex flex-col gap-6">
|
||||
|
||||
<div class="mt-8">
|
||||
<Card>
|
||||
<CardContent>
|
||||
<FieldGroup>
|
||||
<FormValidationSummary/>
|
||||
<DataAnnotationsValidator/>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</Field>
|
||||
|
||||
<div class="col-span-1 grid gap-2">
|
||||
<Label for="themeAuthor">Author</Label>
|
||||
<Field>
|
||||
<FieldLabel for="themeAuthor">Author</FieldLabel>
|
||||
<TextInputField
|
||||
@bind-Value="Request.Author"
|
||||
id="themeAuthor"
|
||||
Type="text"
|
||||
placeholder="Your name"/>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div class="col-span-1 grid gap-2">
|
||||
<Label for="themeAuthor">Is Enabled</Label>
|
||||
<Switch @bind-Value="Request.IsEnabled" />
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</LazyLoader>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<FieldLabel for="themeAuthor">CSS Content</FieldLabel>
|
||||
<FieldContent>
|
||||
<Editor @ref="Editor" Language="EditorLanguage.Css"
|
||||
InitialValue="@Request.CssContent"/>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</EnhancedEditForm>
|
||||
</LazyLoader>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter] public int Id { get; set; }
|
||||
|
||||
|
||||
private UpdateThemeDto Request;
|
||||
private ThemeDto Theme;
|
||||
|
||||
private FormHandler Form;
|
||||
|
||||
private Editor Editor;
|
||||
|
||||
|
||||
private async Task LoadAsync(LazyLoader _)
|
||||
{
|
||||
var theme = await HttpClient.GetFromJsonAsync<ThemeDto>($"api/admin/themes/{Id}");
|
||||
@@ -125,14 +128,10 @@
|
||||
Request = ThemeMapper.ToUpdate(Theme);
|
||||
}
|
||||
|
||||
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.PatchAsJsonAsync(
|
||||
$"/api/admin/themes/{Theme.Id}",
|
||||
Request,
|
||||
@@ -147,5 +146,7 @@
|
||||
await FrontendService.ReloadAsync();
|
||||
|
||||
Navigation.NavigateTo("/admin/system?tab=themes");
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user