Joseph Doherty
26ff8d9b4f
Set up repository with legacy .NET Framework 4.8 source (OLD/), new .NET 10 Blazor solution (NEW/), OpenSpec specifications, documentation, and project configuration.
112 lines
4.5 KiB
Markdown
112 lines
4.5 KiB
Markdown
# Implement Blazor UI
|
|
|
|
## Summary
|
|
|
|
Implement the Blazor WebAssembly user interface for the JDE Scoping Tool, migrating the legacy ASP.NET MVC 5 / Kendo UI implementation to modern Radzen Blazor components. This phase creates all pages (Login, Search List, Search Create/Edit, Search Queue, Refresh Status) and integrates SignalR for real-time status updates.
|
|
|
|
## Scope
|
|
|
|
### In Scope
|
|
|
|
- Blazor WebAssembly project setup and configuration (already exists as JdeScoping.Client)
|
|
- Radzen Blazor component library integration (already referenced)
|
|
- Main layout with navigation header and footer
|
|
- Authentication pages:
|
|
- Login page with LDAP authentication form
|
|
- Not Authorized page
|
|
- Search pages:
|
|
- Search List page (user's searches with status badges)
|
|
- Search Create/Edit page with filter panels
|
|
- Search Queue page (all queued searches)
|
|
- Refresh Status page (data sync dashboard)
|
|
- Filter panel components:
|
|
- TimeSpan Filter Panel
|
|
- Work Order Filter Panel
|
|
- Item Number Filter Panel
|
|
- Profit Center Filter Panel
|
|
- Work Center Filter Panel
|
|
- Component Lot Filter Panel
|
|
- Operator Filter Panel
|
|
- Part/Operation/MIS Filter Panel
|
|
- SignalR client service for real-time updates
|
|
- API client services:
|
|
- IAuthService
|
|
- ISearchService
|
|
- ILookupService
|
|
- IFileService
|
|
- IRefreshStatusService
|
|
- ValidCombination model (search type definitions)
|
|
- State management via AuthStateProvider
|
|
|
|
### Out of Scope
|
|
|
|
- Backend API implementation (Phase 8: web-api-auth)
|
|
- SignalR hub implementation (Phase 8: web-api-auth)
|
|
- Unit tests for Blazor components (bUnit testing deferred)
|
|
- Mobile-responsive design optimizations
|
|
- Offline/PWA functionality
|
|
- Dark mode theming
|
|
|
|
## Motivation
|
|
|
|
The legacy ASP.NET MVC 5 / Kendo UI implementation has several limitations:
|
|
|
|
- **License cost**: Kendo UI requires commercial license
|
|
- **Framework obsolescence**: ASP.NET MVC 5 is not actively developed
|
|
- **JavaScript complexity**: Heavy jQuery-based scripting
|
|
- **Page reload model**: Full page reloads for navigation
|
|
|
|
Blazor WebAssembly with Radzen provides:
|
|
|
|
- **Free tier**: Radzen Blazor community edition is open source
|
|
- **Modern framework**: .NET 10 with full C# component model
|
|
- **Type safety**: C# throughout, no JavaScript required for core functionality
|
|
- **SPA experience**: No page reloads, smooth navigation
|
|
- **SignalR integration**: Native .NET SignalR client
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. All pages render correctly in modern browsers (Chrome, Firefox, Edge, Safari)
|
|
2. Login page authenticates via backend API (mocked initially)
|
|
3. Search List page displays user's searches with real-time status updates
|
|
4. Search Create/Edit page:
|
|
- Search type dropdown controls filter panel visibility
|
|
- All 8 filter panel types functional
|
|
- Form validation prevents submission without required filters
|
|
- Read-only mode for submitted searches with Copy button
|
|
5. Search Queue page displays all queued searches with processor status
|
|
6. Refresh Status page displays data sync history with date filtering
|
|
7. SignalR connection:
|
|
- Connects on page load
|
|
- Receives searchUpdate and statusUpdate events
|
|
- Reconnects automatically on disconnect
|
|
8. All file upload/download flows functional (templates, data upload, results download)
|
|
9. Navigation is same-window (no popups or new tabs)
|
|
10. `openspec validate implement-blazor-ui --strict` passes
|
|
|
|
## Dependencies
|
|
|
|
- **Phase 8**: implement-web-api-auth - Backend API endpoints for authentication, search operations, file handling
|
|
- **JdeScoping.Client project**: Already created with Blazor WASM and Radzen packages
|
|
- **NuGet packages**:
|
|
- `Radzen.Blazor` Version="8.*" (already referenced)
|
|
- `Microsoft.AspNetCore.SignalR.Client` Version="10.*" (already referenced)
|
|
- `Microsoft.AspNetCore.Components.WebAssembly` Version="10.*" (already referenced)
|
|
|
|
## Risks
|
|
|
|
| Risk | Mitigation |
|
|
|------|------------|
|
|
| API not ready | Mock services return static/test data until Phase 8 complete |
|
|
| SignalR connection issues | Implement robust reconnection with exponential backoff |
|
|
| File download in WASM | Use JS interop for browser download trigger |
|
|
| Large filter lists | Implement virtualization for autocomplete dropdowns |
|
|
| Component complexity | Extract reusable filter panel base component |
|
|
| Radzen version changes | Pin to specific minor version, test upgrades |
|
|
|
|
## Related Specs
|
|
|
|
- `web-ui` - Base specification for UI components and pages
|
|
- `web-api-auth` - API endpoints that UI will consume
|
|
- `domain-models` - ViewModels used in UI components
|