Files
jdescopingtool/openspec/changes/archive/2026-01-01-implement-blazor-ui/tasks.md
T
Joseph Doherty 26ff8d9b4f Initial commit: JDE Scoping Tool migration project
Set up repository with legacy .NET Framework 4.8 source (OLD/),
new .NET 10 Blazor solution (NEW/), OpenSpec specifications,
documentation, and project configuration.
2026-01-02 07:43:29 -05:00

13 KiB

Tasks: Implement Blazor UI

Phase 1: Project Configuration

  • 001: Verify JdeScoping.Client project configuration

    • Location: NEW/src/JdeScoping.Client/JdeScoping.Client.csproj
    • Verify: Radzen.Blazor, SignalR.Client packages referenced
    • Validation: dotnet build succeeds
  • 002: Configure _Imports.razor

    • Location: NEW/src/JdeScoping.Client/_Imports.razor
    • Add: Radzen, SignalR, Models, Services namespaces
    • Validation: Namespace imports resolve
  • 003: Update App.razor with routing

    • Location: NEW/src/JdeScoping.Client/App.razor
    • Add: CascadingAuthenticationState, AuthorizeRouteView
    • Validation: Router configuration compiles
  • 004: Configure Program.cs service registration

    • Location: NEW/src/JdeScoping.Client/Program.cs
    • Add: Radzen services, Auth services, Application services
    • Validation: Application starts without DI errors
  • 005: Add JS interop file for file downloads

    • Location: NEW/src/JdeScoping.Client/wwwroot/js/interop.js
    • Add: downloadFileFromStream, downloadFileFromUrl functions
    • Validation: JS file loads in browser

Phase 2: Models

  • 006: Create ValidCombination model

    • Location: NEW/src/JdeScoping.Client/Models/ValidCombination.cs
    • Source: OLD/WebInterface/Scripts/model/models.js (ValidCombination definitions)
    • Include: All 16 search type combinations with filter flags
    • Validation: GetAll() returns 16 items
  • 007: Create LoginModel

    • Location: NEW/src/JdeScoping.Client/Models/LoginModel.cs
    • Properties: Username (required), Password (required)
    • Include: DataAnnotations validation attributes
    • Validation: Validation fails for empty fields
  • 008: Create SearchViewModel

    • Location: NEW/src/JdeScoping.Client/Models/SearchViewModel.cs
    • Properties: ID, Name, UserName, Status, SubmitDT, StartDT, EndDT, Criteria
    • Validation: Model compiles with all properties
  • 009: Create SearchCriteriaViewModel

    • Location: NEW/src/JdeScoping.Client/Models/SearchCriteriaViewModel.cs
    • Properties: MinimumDT, MaximumDT, all filter collections, ExtractMisData
    • Validation: Model compiles with all properties
  • 010: Create filter item ViewModels

    • Location: NEW/src/JdeScoping.Client/Models/
    • Files: ItemViewModel, ProfitCenterViewModel, WorkCenterViewModel, OperatorViewModel, WorkOrderViewModel, ComponentLotViewModel, PartOperationViewModel
    • Validation: All models compile
  • 011: Create SignalR message models

    • Location: NEW/src/JdeScoping.Client/Models/
    • Files: SearchUpdate.cs, StatusUpdate.cs
    • Validation: Records compile
  • 012: Create DataUpdateViewModel

    • Location: NEW/src/JdeScoping.Client/Models/DataUpdateViewModel.cs
    • Properties: StartDT, EndDT, record counts for each table, WasSuccessful
    • Validation: Model compiles

Phase 3: Authentication Services

  • 013: Create ITokenStorageService interface

    • Location: NEW/src/JdeScoping.Client/Auth/ITokenStorageService.cs
    • Methods: GetTokenAsync, SetTokenAsync, RemoveTokenAsync
    • Validation: Interface compiles
  • 014: Create TokenStorageService

    • Location: NEW/src/JdeScoping.Client/Auth/TokenStorageService.cs
    • Implementation: localStorage via IJSRuntime
    • Validation: Can store/retrieve/remove token
  • 015: Create AuthStateProvider

    • Location: NEW/src/JdeScoping.Client/Auth/AuthStateProvider.cs
    • Implementation: Parse JWT claims, manage auth state
    • Methods: GetAuthenticationStateAsync, NotifyAuthenticationStateChangedAsync, LogoutAsync
    • Validation: Auth state changes propagate to components
  • 016: Create IAuthService interface

    • Location: NEW/src/JdeScoping.Client/Services/IAuthService.cs
    • Methods: LoginAsync, LogoutAsync
    • Validation: Interface compiles
  • 017: Create AuthService

    • Location: NEW/src/JdeScoping.Client/Services/AuthService.cs
    • Implementation: Call /api/auth/login, store token
    • Returns: AuthResult with Success, ErrorMessage, Token
    • Validation: Login flow works with mock endpoint

Phase 4: SignalR Service

  • 018: Create IHubConnectionService interface

    • Location: NEW/src/JdeScoping.Client/Services/IHubConnectionService.cs
    • Methods: StartAsync, StopAsync, GetCachedStatusAsync
    • Events: OnSearchUpdate, OnStatusUpdate
    • Validation: Interface compiles
  • 019: Create HubConnectionService

    • Location: NEW/src/JdeScoping.Client/Services/HubConnectionService.cs
    • Implementation: HubConnectionBuilder with auto-reconnect
    • Subscribe: searchUpdate, statusUpdate events
    • Validation: Connects to /hubs/status, receives events

Phase 5: API Client Services

  • 020: Create ISearchService interface

    • Location: NEW/src/JdeScoping.Client/Services/ISearchService.cs
    • Methods: GetUserSearchesAsync, GetSearchAsync, CopySearchAsync, SaveSearchAsync, GetQueueAsync, DownloadResultsAsync
    • Validation: Interface compiles
  • 021: Create SearchService

    • Location: NEW/src/JdeScoping.Client/Services/SearchService.cs
    • Implementation: HttpClient calls to /api/search endpoints
    • Include: Error handling, logging
    • Validation: Service compiles, handles errors gracefully
  • 022: Create ILookupService interface

    • Location: NEW/src/JdeScoping.Client/Services/ILookupService.cs
    • Methods: FindItemsAsync, FindProfitCentersAsync, FindWorkCentersAsync, FindOperatorsAsync
    • Validation: Interface compiles
  • 023: Create LookupService

    • Location: NEW/src/JdeScoping.Client/Services/LookupService.cs
    • Implementation: HttpClient calls to /api/lookup endpoints
    • Validation: Service compiles
  • 024: Create IFileService interface

    • Location: NEW/src/JdeScoping.Client/Services/IFileService.cs
    • Methods: DownloadTemplateAsync, DownloadPartNumberTemplateAsync, UploadAsync
    • Validation: Interface compiles
  • 025: Create FileService

    • Location: NEW/src/JdeScoping.Client/Services/FileService.cs
    • Implementation: File download via JS interop, upload via RadzenUpload
    • Validation: Download triggers browser save dialog
  • 026: Create IRefreshStatusService interface

    • Location: NEW/src/JdeScoping.Client/Services/IRefreshStatusService.cs
    • Methods: GetRefreshStatusAsync(minDT, maxDT)
    • Validation: Interface compiles
  • 027: Create RefreshStatusService

    • Location: NEW/src/JdeScoping.Client/Services/RefreshStatusService.cs
    • Implementation: HttpClient calls to /api/refresh-status
    • Validation: Service compiles

Phase 6: Layout Components

  • 028: Create MainLayout.razor

    • Location: NEW/src/JdeScoping.Client/Layout/MainLayout.razor
    • Structure: RadzenLayout with Header, Body, Footer
    • Include: AuthorizeView for user display, logout button
    • Validation: Layout renders header, content, footer
  • 029: Create LoadingIndicator component

    • Location: NEW/src/JdeScoping.Client/Components/Shared/LoadingIndicator.razor
    • Structure: RadzenProgressBarCircular with optional message
    • Validation: Component renders centered spinner

Phase 7: Authentication Pages

  • 030: Create Login.razor

    • Location: NEW/src/JdeScoping.Client/Pages/Login.razor
    • Route: /login
    • Structure: RadzenCard with EditForm, username/password fields
    • Features: Validation, error display, loading state, redirect on success
    • Validation: Login form submits and redirects
  • 031: Create NotAuthorized.razor

    • Location: NEW/src/JdeScoping.Client/Pages/NotAuthorized.razor
    • Route: /not-authorized
    • Structure: RadzenAlert with error message, navigation buttons
    • Validation: Page displays resource URL from query string
  • 032: Create RedirectToLogin component

    • Location: NEW/src/JdeScoping.Client/Components/Shared/RedirectToLogin.razor
    • Implementation: NavigateTo /login with returnUrl
    • Validation: Unauthorized access redirects to login

Phase 8: Search List Page

  • 033: Create Searches.razor (Search List)
    • Location: NEW/src/JdeScoping.Client/Pages/Searches.razor
    • Routes: / and /searches
    • Structure: RadzenDataGrid with Name, Submitted, Status columns
    • Features: New Search button, Queue button, status badges
    • SignalR: Subscribe to searchUpdate, update grid in real-time
    • Validation: Grid displays user's searches, updates on SignalR events

Phase 9: Search Create/Edit Page

  • 034: Create SearchEdit.razor (main page)
    • Location: NEW/src/JdeScoping.Client/Pages/SearchEdit.razor
    • Routes: /search/create, /search/{Id:int}
    • Structure: Search details panel, conditional filter panels
    • Features: Search type dropdown, read-only mode, Copy button, Submit button
    • SignalR: Subscribe to searchUpdate for current search
    • Validation: Form loads, validates, submits correctly

Phase 10: Filter Panel Components

  • 035: Create TimeSpanFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/TimeSpanFilterPanel.razor
    • Structure: Min/Max date pickers
    • Business rules: Min >= 2002-11-01, Max <= today, Max >= Min
    • Validation: Date constraints enforced
  • 036: Create WorkOrderFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/WorkOrderFilterPanel.razor
    • Structure: Upload/Download/Clear buttons, data grid
    • Features: Excel upload parsing, template download
    • Validation: Upload populates grid, Clear empties grid
  • 037: Create ItemNumberFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/ItemNumberFilterPanel.razor
    • Structure: Autocomplete with Add button, data grid
    • Features: Search with 3+ chars, prevent duplicates
    • Validation: Autocomplete returns results, Add works
  • 038: Create ProfitCenterFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/ProfitCenterFilterPanel.razor
    • Structure: Autocomplete with Add button, data grid
    • Validation: Same pattern as ItemNumber panel
  • 039: Create WorkCenterFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/WorkCenterFilterPanel.razor
    • Structure: Autocomplete with Add button, data grid
    • Validation: Same pattern as ItemNumber panel
  • 040: Create OperatorFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/OperatorFilterPanel.razor
    • Structure: Autocomplete with Add button, data grid
    • Properties: AddressNumber, UserID, FullName
    • Validation: Displays all three properties in dropdown
  • 041: Create ComponentLotFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/ComponentLotFilterPanel.razor
    • Structure: Upload/Download/Clear buttons, data grid
    • Properties: LotNumber, ItemNumber
    • Validation: Two-column display in grid
  • 042: Create PartOperationFilterPanel.razor

    • Location: NEW/src/JdeScoping.Client/Components/FilterPanels/PartOperationFilterPanel.razor
    • Structure: Upload/Download/Clear buttons, data grid
    • Properties: ItemNumber, OperationNumber, MisNumber, MisRevision
    • Validation: Four-column display in grid

Phase 11: Search Queue Page

  • 043: Create SearchQueue.razor
    • Location: NEW/src/JdeScoping.Client/Pages/SearchQueue.razor
    • Route: /search/queue
    • Structure: Processor status panel, data grid of all queued searches
    • SignalR: Subscribe to statusUpdate, searchUpdate
    • Features: Remove completed searches from grid
    • Validation: Grid shows all users' searches, status panel updates

Phase 12: Refresh Status Page

  • 044: Create RefreshStatus.razor
    • Location: NEW/src/JdeScoping.Client/Pages/RefreshStatus.razor
    • Route: /refresh-status
    • Structure: Date filter panel, data grid with record counts
    • Features: Default to last 7 days, Filter button, WasSuccessful badges
    • Validation: Grid displays sync history, filtering works

Phase 13: Styling and Polish

  • 045: Update wwwroot/css/app.css

    • Location: NEW/src/JdeScoping.Client/wwwroot/css/app.css
    • Add: Custom styles for badges, cards, loading states
    • Validation: Styles applied consistently
  • 046: Update index.html

    • Location: NEW/src/JdeScoping.Client/wwwroot/index.html
    • Add: Radzen CSS reference, JS interop script reference
    • Validation: Radzen styles load correctly

Phase 14: Verification

  • 047: Verify all pages render

    • Navigate to each route, verify content loads
    • Validation: No console errors, all pages accessible
  • 048: Verify form validation

    • Test Login form, Search Create form with invalid data
    • Validation: Validation messages display correctly
  • 049: Verify SignalR connection

    • Check browser console for connection logs
    • Validation: Connection established, reconnects on disconnect
  • 050: Run solution build

    • Command: dotnet build NEW/JdeScoping.sln
    • Validation: No errors or warnings
  • 051: Run OpenSpec validation

    • Command: openspec validate implement-blazor-ui --strict
    • Validation: No validation errors