From 28a65e74bb6344cde7ef6b77aee51546e35c88f6 Mon Sep 17 00:00:00 2001
From: Jason Dove <1695733+jasongdove@users.noreply.github.com>
Date: Thu, 10 Jul 2025 11:48:20 +0000
Subject: [PATCH] use new form layout for local library editor (#2129)

---
 CHANGELOG.md                                  |   1 +
 ErsatzTV/Pages/ChannelEditor.razor            |   2 +-
 ErsatzTV/Pages/LocalLibraryEditor.razor       | 157 ++++++++++--------
 .../LocalLibraryEditViewModelValidator.cs     |   9 -
 .../LocalLibraryPathEditViewModelValidator.cs |  13 --
 5 files changed, 89 insertions(+), 93 deletions(-)
 delete mode 100644 ErsatzTV/Validators/LocalLibraryEditViewModelValidator.cs
 delete mode 100644 ErsatzTV/Validators/LocalLibraryPathEditViewModelValidator.cs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 590606f4..613e1544 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -78,6 +78,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
   - FFmpeg Profile editor
   - Schedule editor
   - Watermark editor
+  - Local library editor
 
 ### Fixed
 - Fix QSV acceleration in docker with older Intel devices
diff --git a/ErsatzTV/Pages/ChannelEditor.razor b/ErsatzTV/Pages/ChannelEditor.razor
index d3beba28..914b8dcd 100644
--- a/ErsatzTV/Pages/ChannelEditor.razor
+++ b/ErsatzTV/Pages/ChannelEditor.razor
@@ -24,7 +24,7 @@
 </MudPaper>
 <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
     <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        <MudText Typo="Typo.h5" Class="mb-2">@(IsEdit ? "Edit Channel" : "Add Channel")</MudText>
+        <MudText Typo="Typo.h5" Class="mb-2">Channel</MudText>
         <MudDivider Class="mb-6"/>
         <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
             <div class="d-flex">
diff --git a/ErsatzTV/Pages/LocalLibraryEditor.razor b/ErsatzTV/Pages/LocalLibraryEditor.razor
index d6cd6679..e5318750 100644
--- a/ErsatzTV/Pages/LocalLibraryEditor.razor
+++ b/ErsatzTV/Pages/LocalLibraryEditor.razor
@@ -9,68 +9,79 @@
 @inject ISnackbar Snackbar
 @inject NavigationManager NavigationManager
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <div style="max-width: 400px;">
-        <MudText Typo="Typo.h4" Class="mb-4">@(IsEdit ? "Edit Local Library" : "Add Local Library")</MudText>
-
-        <EditForm EditContext="_editContext" OnSubmit="@SaveChangesAsync">
-            <FluentValidationValidator/>
-            <MudCard>
-                <MudCardContent>
-                    <MudTextField Class="mt-3" Label="Name" @bind-Value="_model.Name" For="@(() => _model.Name)"/>
-                    <MudSelect Disabled="IsEdit" Label="Media Kind" @bind-Value="_model.MediaKind" For="@(() => _model.MediaKind)">
-                        @foreach (LibraryMediaKind mediaKind in Enum.GetValues<LibraryMediaKind>())
-                        {
-                            <MudSelectItem Value="@mediaKind">@mediaKind</MudSelectItem>
-                        }
-                    </MudSelect>
-                    <MudTextField Class="mt-3" Label="Path" @bind-Value="_newPath.Path" For="@(() => _newPath.Path)"/>
-                </MudCardContent>
-                <MudCardActions>
-                    <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(_ => AddLibraryPath())" Class="ml-2">
-                        Add Path
-                    </MudButton>
-                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2 ml-auto">
-                        Save Changes
-                    </MudButton>
-                </MudCardActions>
-            </MudCard>
-        </EditForm>
-    </div>
-
-    <MudTable Hover="true" Items="_model.Paths" Dense="true" Class="mt-6">
-        <ToolBarContent>
-            <MudText Typo="Typo.h6">Library Paths</MudText>
-        </ToolBarContent>
-        <ColGroup>
-            <col/>
-            <col style="width: 120px;"/>
-        </ColGroup>
-        <HeaderContent>
-            <MudTh>Path</MudTh>
-            <MudTh/>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Path">@context.Path</MudTd>
-            <MudTd>
-                <div style="align-items: center; display: flex;">
-                    <MudTooltip Text="Move Library Path">
-                        <MudIconButton Icon="@Icons.Material.Filled.DriveFileMove"
-                                       Disabled="@(_model.Id == 0 || context.Id == 0 || Locker.IsLibraryLocked(_model.Id))"
-                                       OnClick="@(() => MoveLibraryPath(context))">
-                        </MudIconButton>
-                    </MudTooltip>
-                    <MudTooltip Text="Delete Library Path">
-                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
-                                       OnClick="@(() => DeleteLibraryPath(context))">
-                        </MudIconButton>
-                    </MudTooltip>
+<MudForm Model="@_model" @bind-IsValid="@_success" Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" OnClick="SaveChangesAsync" StartIcon="@(IsEdit ? Icons.Material.Filled.Save : Icons.Material.Filled.Add)">@(IsEdit ? "Save Local Library" : "Add Local Library")</MudButton>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudText Typo="Typo.h5" Class="mb-2">Local Library</MudText>
+            <MudDivider Class="mb-6"/>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
+                <div class="d-flex">
+                    <MudText>Name</MudText>
                 </div>
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
-</MudContainer>
-
+                <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Required="true" RequiredError="Local library name is required!"/>
+            </MudStack>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
+                <div class="d-flex">
+                    <MudText>Media Kind</MudText>
+                </div>
+                <MudSelect Disabled="IsEdit" @bind-Value="_model.MediaKind" For="@(() => _model.MediaKind)">
+                    @foreach (LibraryMediaKind mediaKind in Enum.GetValues<LibraryMediaKind>())
+                    {
+                        <MudSelectItem Value="@mediaKind">@mediaKind</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudStack>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
+                <div class="d-flex">
+                    <MudText>Path</MudText>
+                </div>
+                <MudTextField @bind-Value="_newPath.Path" For="@(() => _newPath.Path)"/>
+            </MudStack>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
+                <div class="d-flex"></div>
+                <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(_ => AddLibraryPath())" StartIcon="@Icons.Material.Filled.Add">
+                    Add Path
+                </MudButton>
+            </MudStack>
+            <MudTable Hover="true" Items="_model.Paths" Class="mt-6">
+                <ToolBarContent>
+                    <MudText Typo="Typo.h6">Library Paths</MudText>
+                </ToolBarContent>
+                <ColGroup>
+                    <MudHidden Breakpoint="Breakpoint.Xs">
+                        <col/>
+                        <col style="width: 120px;"/>
+                    </MudHidden>
+                </ColGroup>
+                <HeaderContent>
+                    <MudTh>Path</MudTh>
+                    <MudTh/>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd>@context.Path</MudTd>
+                    <MudTd>
+                        <div style="align-items: center; display: flex;">
+                            <MudTooltip Text="Move Library Path">
+                                <MudIconButton Icon="@Icons.Material.Filled.DriveFileMove"
+                                               Disabled="@(_model.Id == 0 || context.Id == 0 || Locker.IsLibraryLocked(_model.Id))"
+                                               OnClick="@(() => MoveLibraryPath(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                            <MudTooltip Text="Delete Library Path">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               OnClick="@(() => DeleteLibraryPath(context))">
+                                </MudIconButton>
+                            </MudTooltip>
+                        </div>
+                    </MudTd>
+                </RowTemplate>
+            </MudTable>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -80,8 +91,7 @@
 
     private readonly LocalLibraryEditViewModel _model = new();
     private readonly LocalLibraryPathEditViewModel _newPath = new();
-    private EditContext _editContext;
-    private ValidationMessageStore _messageStore;
+    private bool _success;
 
     private bool IsEdit => Id != 0;
 
@@ -117,9 +127,6 @@
     protected override void OnInitialized()
     {
         Locker.OnLibraryChanged += LockChanged;
-
-        _editContext = new EditContext(_model);
-        _messageStore = new ValidationMessageStore(_editContext);
     }
 
     private void LockChanged(object sender, EventArgs e) =>
@@ -143,7 +150,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<MoveLocalLibraryPathDialog>("Move Local Library Path", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is LocalLibraryViewModel library)
+        if (result is { Canceled: false, Data: LocalLibraryViewModel library })
         {
             var request = new MoveLocalLibraryPath(libraryPath.Id, library.Id);
             Either<BaseError, Unit> moveResult = await Mediator.Send(request, _cts.Token);
@@ -177,7 +184,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Library Path", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             _model.HasChanges = true;
             _model.Paths.Remove(libraryPath);
@@ -186,6 +193,17 @@
 
     private void AddLibraryPath()
     {
+        if (string.IsNullOrWhiteSpace(_newPath.Path))
+        {
+            return;
+        }
+
+        if (!Directory.Exists(_newPath.Path))
+        {
+            Snackbar.Add("Path must exist on filesystem", Severity.Error);
+            return;
+        }
+
         if (!string.IsNullOrWhiteSpace(_newPath.Path) && _model.Paths.All(p => NormalizePath(p.Path) != NormalizePath(_newPath.Path)))
         {
             _model.HasChanges = true;
@@ -201,8 +219,7 @@
 
     private async Task SaveChangesAsync()
     {
-        _messageStore.Clear();
-        if (_editContext.Validate())
+        if (_success)
         {
             Either<BaseError, LocalLibraryViewModel> result = IsEdit
                 ? await Mediator.Send(
diff --git a/ErsatzTV/Validators/LocalLibraryEditViewModelValidator.cs b/ErsatzTV/Validators/LocalLibraryEditViewModelValidator.cs
deleted file mode 100644
index e31c999d..00000000
--- a/ErsatzTV/Validators/LocalLibraryEditViewModelValidator.cs
+++ /dev/null
@@ -1,9 +0,0 @@
-using ErsatzTV.ViewModels;
-using FluentValidation;
-
-namespace ErsatzTV.Validators;
-
-public class LocalLibraryEditViewModelValidator : AbstractValidator<LocalLibraryEditViewModel>
-{
-    public LocalLibraryEditViewModelValidator() => RuleFor(c => c.Name).NotEmpty();
-}
diff --git a/ErsatzTV/Validators/LocalLibraryPathEditViewModelValidator.cs b/ErsatzTV/Validators/LocalLibraryPathEditViewModelValidator.cs
deleted file mode 100644
index 102b953f..00000000
--- a/ErsatzTV/Validators/LocalLibraryPathEditViewModelValidator.cs
+++ /dev/null
@@ -1,13 +0,0 @@
-using ErsatzTV.ViewModels;
-using FluentValidation;
-
-namespace ErsatzTV.Validators;
-
-public class LocalLibraryPathEditViewModelValidator : AbstractValidator<LocalLibraryPathEditViewModel>
-{
-    public LocalLibraryPathEditViewModelValidator()
-    {
-        RuleFor(x => x.Path).NotEmpty();
-        RuleFor(x => x.Path).Must(Directory.Exists).WithMessage("Path must exist on filesystem");
-    }
-}