Refactored project to module structure
This commit is contained in:
145
Moonlight.Frontend/Admin/Sys/Themes/Create.razor
Normal file
145
Moonlight.Frontend/Admin/Sys/Themes/Create.razor
Normal file
@@ -0,0 +1,145 @@
|
||||
@page "/admin/system/themes/create"
|
||||
@using LucideBlazor
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Moonlight.Frontend.Infrastructure.Helpers
|
||||
@using Moonlight.Frontend.Shared.Frontend
|
||||
@using Moonlight.Shared
|
||||
@using Moonlight.Shared.Admin.Sys.Themes
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.Cards
|
||||
@using ShadcnBlazor.Extras.Editors
|
||||
@using ShadcnBlazor.Extras.Forms
|
||||
@using ShadcnBlazor.Extras.Toasts
|
||||
@using ShadcnBlazor.Fields
|
||||
@using ShadcnBlazor.Inputs
|
||||
@using ShadcnBlazor.Switches
|
||||
@using SerializationContext = Moonlight.Shared.SerializationContext
|
||||
|
||||
@attribute [Authorize(Policy = Permissions.Themes.Create)]
|
||||
|
||||
@inject HttpClient HttpClient
|
||||
@inject NavigationManager Navigation
|
||||
@inject ToastService ToastService
|
||||
@inject FrontendService FrontendService
|
||||
|
||||
<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="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"/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel for="themeVersion">Version</FieldLabel>
|
||||
<TextInputField
|
||||
@bind-Value="Request.Version"
|
||||
id="themeVersion"
|
||||
Type="text"
|
||||
placeholder="1.0.0"/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel for="themeAuthor">Author</FieldLabel>
|
||||
<TextInputField
|
||||
@bind-Value="Request.Author"
|
||||
id="themeAuthor"
|
||||
Type="text"
|
||||
placeholder="Your name"/>
|
||||
</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
|
||||
{
|
||||
private readonly CreateThemeDto Request = new()
|
||||
{
|
||||
CssContent = "/* Define your css here */"
|
||||
};
|
||||
|
||||
private Editor Editor;
|
||||
|
||||
private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
|
||||
{
|
||||
Request.CssContent = await Editor.GetValueAsync();
|
||||
|
||||
var response = await HttpClient.PostAsJsonAsync(
|
||||
"/api/admin/themes",
|
||||
Request,
|
||||
SerializationContext.Default.Options
|
||||
);
|
||||
|
||||
if (!response.IsSuccessStatusCode)
|
||||
{
|
||||
await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
|
||||
return false;
|
||||
}
|
||||
|
||||
await ToastService.SuccessAsync(
|
||||
"Theme creation",
|
||||
$"Successfully created theme {Request.Name}"
|
||||
);
|
||||
|
||||
await FrontendService.ReloadAsync();
|
||||
|
||||
Navigation.NavigateTo("/admin/system?tab=themes");
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
203
Moonlight.Frontend/Admin/Sys/Themes/Index.razor
Normal file
203
Moonlight.Frontend/Admin/Sys/Themes/Index.razor
Normal file
@@ -0,0 +1,203 @@
|
||||
@using LucideBlazor
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@using Moonlight.Shared
|
||||
@using Moonlight.Shared.Admin.Sys.Themes
|
||||
@using Moonlight.Shared.Shared
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.DataGrids
|
||||
@using ShadcnBlazor.Dropdowns
|
||||
@using ShadcnBlazor.Extras.AlertDialogs
|
||||
@using ShadcnBlazor.Extras.Toasts
|
||||
@using ShadcnBlazor.Tabels
|
||||
@using SerializationContext = Moonlight.Shared.SerializationContext
|
||||
|
||||
@inject ToastService ToastService
|
||||
@inject NavigationManager Navigation
|
||||
@inject AlertDialogService AlertDialogService
|
||||
@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>
|
||||
<div class="text-muted-foreground">
|
||||
Manage themes for your instance
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row gap-x-1.5">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<DataGrid @ref="Grid" TGridItem="ThemeDto" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
|
||||
<PropertyColumn Field="k => k.Id"/>
|
||||
<TemplateColumn Identifier="@nameof(ThemeDto.Name)" IsFilterable="true" Title="Name">
|
||||
<CellTemplate>
|
||||
<TableCell>
|
||||
<a class="text-primary flex flex-row items-center" href="#" @onclick="() => Edit(context)"
|
||||
@onclick:preventDefault>
|
||||
@context.Name
|
||||
|
||||
@if (context.IsEnabled)
|
||||
{
|
||||
<span class="ms-2">
|
||||
<CheckIcon ClassName="size-4 text-green-400"/>
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
</TableCell>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
<PropertyColumn IsFilterable="true"
|
||||
Identifier="@nameof(ThemeDto.Version)" Field="k => k.Version"/>
|
||||
<PropertyColumn IsFilterable="true"
|
||||
Identifier="@nameof(ThemeDto.Author)" Field="k => k.Author"/>
|
||||
<TemplateColumn>
|
||||
<CellTemplate>
|
||||
<TableCell>
|
||||
<div class="flex flex-row items-center justify-end me-3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Slot Context="dropdownSlot">
|
||||
<Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost"
|
||||
@attributes="dropdownSlot">
|
||||
<EllipsisIcon/>
|
||||
</Button>
|
||||
</Slot>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent SideOffset="2">
|
||||
<DropdownMenuItem OnClick="() => Download(context)">
|
||||
Download
|
||||
<DropdownMenuShortcut>
|
||||
<HardDriveDownloadIcon/>
|
||||
</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem OnClick="() => Edit(context)" Disabled="@(!EditAccess.Succeeded)">
|
||||
Edit
|
||||
<DropdownMenuShortcut>
|
||||
<PenIcon/>
|
||||
</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem OnClick="() => DeleteAsync(context)"
|
||||
Variant="DropdownMenuItemVariant.Destructive"
|
||||
Disabled="@(!DeleteAccess.Succeeded)">
|
||||
Delete
|
||||
<DropdownMenuShortcut>
|
||||
<TrashIcon/>
|
||||
</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
</DataGrid>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
[CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
|
||||
|
||||
private DataGrid<ThemeDto> Grid;
|
||||
|
||||
private AuthorizationResult EditAccess;
|
||||
private AuthorizationResult DeleteAccess;
|
||||
private AuthorizationResult CreateAccess;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var authState = await AuthState;
|
||||
|
||||
EditAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Edit);
|
||||
DeleteAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Delete);
|
||||
CreateAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Create);
|
||||
}
|
||||
|
||||
private async Task<DataGridResponse<ThemeDto>> LoadAsync(DataGridRequest<ThemeDto> request)
|
||||
{
|
||||
var query = $"?startIndex={request.StartIndex}&length={request.Length}";
|
||||
var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;
|
||||
|
||||
var response = await HttpClient.GetFromJsonAsync<PagedData<ThemeDto>>(
|
||||
$"api/admin/themes{query}&filterOptions={filterOptions}",
|
||||
SerializationContext.Default.Options
|
||||
);
|
||||
|
||||
return new DataGridResponse<ThemeDto>(response!.Data, response.TotalLength);
|
||||
}
|
||||
|
||||
private void Create()
|
||||
{
|
||||
Navigation.NavigateTo("/admin/system/themes/create");
|
||||
}
|
||||
|
||||
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)
|
||||
{
|
||||
await AlertDialogService.ConfirmDangerAsync(
|
||||
$"Deletion of theme {theme.Name}",
|
||||
"Do you really want to delete this theme? This action cannot be undone",
|
||||
async () =>
|
||||
{
|
||||
var response = await HttpClient.DeleteAsync($"api/admin/themes/{theme.Id}");
|
||||
response.EnsureSuccessStatusCode();
|
||||
|
||||
await ToastService.SuccessAsync("Theme deletion", $"Successfully deleted theme {theme.Name}");
|
||||
|
||||
await Grid.RefreshAsync();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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>(SerializationContext.Default.Options);
|
||||
|
||||
if (importedTheme == null)
|
||||
continue;
|
||||
|
||||
await Grid.RefreshAsync();
|
||||
await ToastService.SuccessAsync("Theme Import", $"Successfully imported theme {importedTheme.Name}");
|
||||
}
|
||||
}
|
||||
}
|
||||
13
Moonlight.Frontend/Admin/Sys/Themes/ThemeMapper.cs
Normal file
13
Moonlight.Frontend/Admin/Sys/Themes/ThemeMapper.cs
Normal file
@@ -0,0 +1,13 @@
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using Moonlight.Shared.Admin.Sys.Themes;
|
||||
using Riok.Mapperly.Abstractions;
|
||||
|
||||
namespace Moonlight.Frontend.Admin.Sys.Themes;
|
||||
|
||||
[Mapper]
|
||||
[SuppressMessage("Mapper", "RMG020:No members are mapped in an object mapping")]
|
||||
[SuppressMessage("Mapper", "RMG012:No members are mapped in an object mapping")]
|
||||
public partial class ThemeMapper
|
||||
{
|
||||
public static partial UpdateThemeDto ToUpdate(ThemeDto theme);
|
||||
}
|
||||
157
Moonlight.Frontend/Admin/Sys/Themes/Update.razor
Normal file
157
Moonlight.Frontend/Admin/Sys/Themes/Update.razor
Normal file
@@ -0,0 +1,157 @@
|
||||
@page "/admin/system/themes/{Id:int}"
|
||||
@using LucideBlazor
|
||||
@using Microsoft.AspNetCore.Authorization
|
||||
@using Moonlight.Frontend.Infrastructure.Helpers
|
||||
@using Moonlight.Frontend.Shared.Frontend
|
||||
@using Moonlight.Shared
|
||||
@using Moonlight.Shared.Admin.Sys.Themes
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.Cards
|
||||
@using ShadcnBlazor.Extras.Common
|
||||
@using ShadcnBlazor.Extras.Editors
|
||||
@using ShadcnBlazor.Extras.Forms
|
||||
@using ShadcnBlazor.Extras.Toasts
|
||||
@using ShadcnBlazor.Fields
|
||||
@using ShadcnBlazor.Inputs
|
||||
@using ShadcnBlazor.Switches
|
||||
@using SerializationContext = Moonlight.Shared.SerializationContext
|
||||
|
||||
@attribute [Authorize(Policy = Permissions.Themes.Edit)]
|
||||
|
||||
@inject HttpClient HttpClient
|
||||
@inject NavigationManager Navigation
|
||||
@inject ToastService ToastService
|
||||
@inject FrontendService FrontendService
|
||||
|
||||
<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 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"/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel for="themeVersion">Version</FieldLabel>
|
||||
<TextInputField
|
||||
@bind-Value="Request.Version"
|
||||
id="themeVersion"
|
||||
Type="text"
|
||||
placeholder="1.0.0"/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel for="themeAuthor">Author</FieldLabel>
|
||||
<TextInputField
|
||||
@bind-Value="Request.Author"
|
||||
id="themeAuthor"
|
||||
Type="text"
|
||||
placeholder="Your name"/>
|
||||
</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>
|
||||
</LazyLoader>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter] public int Id { get; set; }
|
||||
|
||||
private UpdateThemeDto Request;
|
||||
private ThemeDto Theme;
|
||||
|
||||
private Editor Editor;
|
||||
|
||||
private async Task LoadAsync(LazyLoader _)
|
||||
{
|
||||
var theme = await HttpClient.GetFromJsonAsync<ThemeDto>($"api/admin/themes/{Id}");
|
||||
|
||||
Theme = theme!;
|
||||
Request = ThemeMapper.ToUpdate(Theme);
|
||||
}
|
||||
|
||||
private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
|
||||
{
|
||||
Request.CssContent = await Editor.GetValueAsync();
|
||||
|
||||
var response = await HttpClient.PatchAsJsonAsync(
|
||||
$"/api/admin/themes/{Theme.Id}",
|
||||
Request,
|
||||
SerializationContext.Default.Options
|
||||
);
|
||||
|
||||
if (!response.IsSuccessStatusCode)
|
||||
{
|
||||
await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
|
||||
return false;
|
||||
}
|
||||
|
||||
await ToastService.SuccessAsync(
|
||||
"Theme update",
|
||||
$"Successfully updated theme {Request.Name}"
|
||||
);
|
||||
|
||||
await FrontendService.ReloadAsync();
|
||||
|
||||
Navigation.NavigateTo("/admin/system?tab=themes");
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user