Improve Boilerplate products / categories pages (#10988) #10989
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes update the AddOrEditCategoryModal component to improve handling of unsaved changes, including conditional navigation blocking and UI interaction enhancements like making the modal draggable. Validation logic in both Category and Product controllers is optimized and extended to better detect duplicate names when entities are added or modified. Additional UI styling is applied. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AddOrEditCategoryModal
participant EditForm
participant NavigationLock
User->>AddOrEditCategoryModal: Open modal
AddOrEditCategoryModal->>EditForm: Initialize form
User->>EditForm: Make changes
EditForm-->>AddOrEditCategoryModal: isChanged = true
AddOrEditCategoryModal->>NavigationLock: Activate if isChanged
User->>AddOrEditCategoryModal: Attempt to close/navigate away
NavigationLock-->>User: Block navigation if isChanged
User->>AddOrEditCategoryModal: Save or cancel
AddOrEditCategoryModal->>NavigationLock: Deactivate if not isChanged
sequenceDiagram
participant Controller
participant DbContext
participant Database
Controller->>DbContext: Get entity entry (category/product)
Controller->>DbContext: Check if state is Added or Name is modified
DbContext->>Database: Query for existing name
Database-->>DbContext: Return result
DbContext-->>Controller: Result
Controller->>Controller: Throw exception if duplicate found
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Poem
✨ Finishing Touches🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR improves the boilerplate pages for products and categories by refining validation logic on the server side and enhancing the user experience in category modals. Key changes include refactoring validation logic in the Product and Category controllers to use a local variable for database entity entry, and updating the modal behavior in the category component to better handle unsaved changes and modal closure.
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| ProductController.cs | Uses a local variable for the database entry and updates the validation condition for duplicate product names. |
| CategoryController.cs | Refactors validation logic similar to products and updates the condition for duplicate category names. |
| AddOrEditCategoryModal.razor.scss | Adds scoped CSS rules via ::deep for improved styling consistency. |
| AddOrEditCategoryModal.razor.cs | Introduces a reference for EditForm to track form modifications. |
| AddOrEditCategoryModal.razor | Adjusts NavigationLock and modal properties to lock navigation when there are unsaved changes and replaces Href with OnClick for closing the modal. |
Comments suppressed due to low confidence (4)
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs:176
- [nitpick] Confirm that the tuple syntax with the square bracket notation for the Localizer is an intentional pattern in our exception messages.
throw new ResourceValidationException((nameof(ProductDto.Name), [Localizer[nameof(AppStrings.DuplicateProductName)]]));
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor:3
- [nitpick] Changing the NavigationLock trigger from 'isOpen' to 'isChanged' alters when navigation is prevented; please verify that this behavior aligns with the intended UX for unsaved changes.
@if (isChanged)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor:73
- [nitpick] Switching the button action from using an Href to an OnClick event for closing the modal is clear; please confirm that this change consistently updates the modal behavior across the application.
<BitButton ButtonType="BitButtonType.Button" OnClick="(() => isOpen = false)" Variant="BitVariant.Outline">
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.cs:17
- [nitpick] Consider adding a short comment explaining the purpose of storing a reference to the EditForm to help future maintainers understand its role in tracking form changes.
private EditForm editForm = default!;
.../Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.cs (1)
3-21: ResetEditContextafter save/close to keepisChangedaccurate
isChangedkeeps returningtrueafter a save or cancel because the underlyingEditContextstill marks fields as modified. Result:
•BitModal Blocking="isChanged"may prevent the modal from closing.
•NavigationLockremains active even when modal is closed.Consider clearing the modified state:
private async Task Save() { … - isOpen = false; + isOpen = false; + editForm?.EditContext?.MarkAsUnmodified(); // extension in Microsoft.AspNetCore.Components.Forms }Or recreate the model &
EditFormeach timeShowModalis called.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor (1)
72-74: Minor: use@onclick:stopPropagationto isolate modal buttonsPrevent bubbled clicks accidentally closing the modal if outside click-to-close is enabled in future:
-<BitButton … OnClick="(() => isOpen = false)" …> +<BitButton … @onclick:stopPropagation OnClick="(() => isOpen = false)" …>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (5)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor(3 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.cs(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.scss(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Categories/CategoryController.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.cs (1)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/AppDataAnnotationsValidator.cs (1)
AppDataAnnotationsValidator(16-251)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (4)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor.scss (1)
24-32: 👍 Scoped spacing looks goodThe
::deeprule is the right choice for Blazor CSS isolation and the added gaps/padding improve readability without leaking styles.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryModal.razor (3)
3-6: NavigationLock conditional is correct but watch for null-form raceDuring the first render
editFormis null;isChangedsafely returnsfalse, but if the user types before the component captures the reference (very unlikely) the lock might not be added. Acceptable trade-off, just be aware.
8-14: Potentially conflictingBlocking="isChanged"and Cancel logicWhen the user clicks cancel with unsaved edits,
Blockingis stilltrue, yetisOpenis set tofalse. Verify thatBitModalhides even in blocking mode; otherwise the modal may remain visible but inert.If the component resists closing, gate the cancel action:
<BitButton ButtonType="BitButtonType.Button" - OnClick="(() => isOpen = false)" + OnClick="(() => { if (!isChanged) isOpen = false; })" Variant="BitVariant.Outline">
32-33:novalidateattribute suppresses browser validationGood – server-side/Blazor validation handles errors consistently.
.../Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Products/ProductController.cs
Show resolved
Hide resolved
...t.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Categories/CategoryController.cs
Show resolved
Hide resolved
1 participant
closes #10988
Summary by CodeRabbit
New Features
Bug Fixes
Style