Improve Boilerplate products / categories pages (#10988)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor

@@ -2,14 +2,15 @@
 
 @if (isOpen)
 {
-    <!-- Close this dialog when navigation occurs instead of navigating away from the categories page -->
-    <NavigationLock OnBeforeInternalNavigation="@((args) => { args.PreventNavigation(); isOpen = false; })" />
+    <NavigationLock OnBeforeInternalNavigation="OnNavigation" />
 }
 
-<BitModal @bind-IsOpen="isOpen" AutoToggleScroll="false">
+<BitModal @bind-IsOpen="isOpen"
+          AutoToggleScroll="false" Blocking="isChanged"
+          Draggable DragElementSelector=".header-stack">
     <section>
-        <BitStack Style="padding:1rem">
-            <BitStack VerticalAlign="BitAlignment.Center" Gap="0.5rem" Horizontal>
+        <BitStack Class="stack">
+            <BitStack VerticalAlign="BitAlignment.Center" Class="header-stack" Horizontal>
                 <BitText Typography="BitTypography.H5">
                     @if (category.Id == default)
                     {
@@ -28,7 +29,7 @@
                            OnClick="() => isOpen = false" />
             </BitStack>
             <BitCard FullSize>
-                <EditForm Model="category" OnValidSubmit="WrapHandled(Save)" novalidate>
+                <EditForm @ref="editForm" Model="category" OnValidSubmit="WrapHandled(Save)" novalidate>
                     <AppDataAnnotationsValidator @ref="validatorRef" />
 
                     <BitStack Gap="0.25rem">
@@ -69,7 +70,7 @@
                         <ValidationMessage For="() => category.Color" />
                         <br />
                         <BitStack Horizontal>
-                            <BitButton ButtonType="BitButtonType.Button" Href="@Urls.CategoriesPage" Variant="BitVariant.Outline">
+                            <BitButton ButtonType="BitButtonType.Button" OnClick="(() => isOpen = false)" Variant="BitVariant.Outline">
                                 @Localizer[nameof(AppStrings.Cancel)]
                             </BitButton>
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.cs

@@ -1,5 +1,7 @@
 using Boilerplate.Shared.Dtos.Categories;
 using Boilerplate.Shared.Controllers.Categories;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.AspNetCore.Components.Routing;
 
 namespace Boilerplate.Client.Core.Components.Pages.Categories;
 
@@ -13,8 +15,11 @@ public partial class AddOrEditCategoryModal
     private bool isSaving;
     private bool isColorPickerOpen;
     private CategoryDto category = new();
+    private EditForm editForm = default!;
     private AppDataAnnotationsValidator validatorRef = default!;
 
+    private bool isChanged => editForm?.EditContext?.IsModified() is true;
+
     public async Task ShowModal(CategoryDto categoryToShow)
     {
         await InvokeAsync(async () =>
@@ -63,4 +68,11 @@ private async Task Save()
             isSaving = false;
         }
     }
+
+    private void OnNavigation(LocationChangingContext args)
+    {
+        args.PreventNavigation();
+        if (isChanged) return;
+        isOpen = false;
+    }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.scss

@@ -20,3 +20,13 @@
     border-radius: 2px;
     display: inline-block;
 }
+
+::deep {
+    .stack-header {
+        gap: 0.5rem;
+    }
+
+    .stack {
+        padding: 1rem;
+    }
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Categories/CategoryController.cs

@@ -114,8 +114,10 @@ private async Task PublishDashboardDataChanged(CancellationToken cancellationTok
 
     private async Task Validate(Category category, CancellationToken cancellationToken)
     {
+        var entry = DbContext.Entry(category);
         // Remote validation example: Any errors thrown here will be displayed in the client's edit form component.
-        if (DbContext.Entry(category).Property(c => c.Name).IsModified && await DbContext.Categories.AnyAsync(p => p.Name == category.Name, cancellationToken))
+        if ((entry.State is EntityState.Added || entry.Property(c => c.Name).IsModified)
+            && await DbContext.Categories.AnyAsync(p => p.Name == category.Name, cancellationToken))
             throw new ResourceValidationException((nameof(CategoryDto.Name), [Localizer[nameof(AppStrings.DuplicateCategoryName)]]));
     }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs

@@ -169,8 +169,9 @@ private async Task PublishDashboardDataChanged(CancellationToken cancellationTok
 
     private async Task Validate(Product product, CancellationToken cancellationToken)
     {
+        var entry = DbContext.Entry(product);
         // Remote validation example: Any errors thrown here will be displayed in the client's edit form component.
-        if (DbContext.Entry(product).Property(c => c.Name).IsModified
+        if ((entry.State is EntityState.Added || entry.Property(c => c.Name).IsModified)
             && await DbContext.Products.AnyAsync(p => p.Name == product.Name, cancellationToken))
             throw new ResourceValidationException((nameof(ProductDto.Name), [Localizer[nameof(AppStrings.DuplicateProductName)]]));
     }