●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Tabbed product editor (MudTabs) with an "Información General" form and a "Gestión de Variantes" variants table.
- Form fields for product metadata using MudTextField, MudSelect and MudNumericField plus an image dropzone placeholder.
- Variants management using MudTable with search/filter, row editing templates, pager and inline commit/cancel hooks.
- UI hints for overridden fields using a custom .overridden-field style and icons for validation/status.
- Disabled placeholder tab for channel view.
## Key components
- MudTabs, MudTabPanel, MudGrid, MudPaper
- MudTextField, MudSelect, MudNumericField
- MudTable, RowTemplate, RowEditingTemplate, MudTablePager
- MudText, MudIcon, MudSwitch, MudIconButton, MudButton, MudSpacer
- View models: ProductViewModel, ProductVariantViewModel
- Bindings and events: @bind-Value, @bind-SelectedItem, @bind-Value:after, RowEditPreview/RowEditCancel/RowEditCommit
## How it works
- The page binds a ProductViewModel to multiple inputs (Product.Name, ShortDescription, BasePrice, etc.) using @bind-Value.
- Variants are shown in MudTable bound to Product.Variants; searchString drives the FilterFunc for live filtering.
- Row editing uses MudTable built-in edit trigger; BackupItem stores original values, ResetItemToOriginalValues restores them, and ItemHasBeenCommitted is a hook for saving changes.
- @bind-Value:after is used to mark override flags (IsColorOverridden, IsPriceOverridden) when a field changes.
- Image upload area is a visual placeholder; image URLs are edited in the row edit template. Icons indicate missing images for active variants.
## Styling
- Uses MudBlazor components and classes (pa-4, pa-12, d-flex, align-center) and relies on MudBlazor theming rather than Tailwind or Bootstrap.
- Custom CSS (.overridden-field) applies a warning background via a Mud palette CSS variable and italic font-style for overridden fields.
- Layout is responsive via MudGrid with xs/md column settings.
## Reuse steps
1. Add the MudBlazor NuGet package and static assets.
2. Register MudBlazor services in Program.cs (builder.Services.AddMudServices()) and include MudBlazor CSS/JS in index.html/_Host.
3. Import the MudBlazor namespace in the component or _Imports.razor.
4. Copy the ProductViewModel and ProductVariantViewModel into the project and adapt properties to backend DTOs.
5. Wire data: replace GetMockProduct with calls to an API service and implement ItemHasBeenCommitted to persist edits; implement file/image upload handling for the dropzone.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI using mock data; backend services, persistence and authorization are not included.
- Image area is a placeholder; file upload and storage integration is required.
- GenerateVariants() is a stub and requires variant-generation logic.
- No EditForm/DataAnnotationsValidator wrapper is present for server-side validation; add validation or explicit checks before commit.
- Consider adding optimistic concurrency, API error handling, and unit tests for row commit logic.