26ff8d9b4f
Set up repository with legacy .NET Framework 4.8 source (OLD/), new .NET 10 Blazor solution (NEW/), OpenSpec specifications, documentation, and project configuration.
95 lines
3.0 KiB
Markdown
95 lines
3.0 KiB
Markdown
# Blazor Client
|
|
|
|
The `JdeScoping.Client` project is a Blazor WebAssembly application using Radzen Blazor components.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
JdeScoping.Client/
|
|
├── Program.cs # WASM entry, configure HttpClient + SignalR
|
|
├── Pages/
|
|
│ ├── Login.razor # LDAP login form
|
|
│ ├── Search.razor # Main search criteria page
|
|
│ ├── Results.razor # Search history + download
|
|
│ └── Admin.razor # Data sync status (optional)
|
|
├── Components/
|
|
│ ├── SearchCriteriaForm.razor # Complex search form
|
|
│ ├── SearchStatusCard.razor # Real-time status display
|
|
│ └── LookupDropdown.razor # Autocomplete wrapper
|
|
├── Services/
|
|
│ ├── SearchApiClient.cs # HTTP calls to SearchController
|
|
│ ├── LookupApiClient.cs # HTTP calls to LookupController
|
|
│ ├── AuthApiClient.cs # Login/logout
|
|
│ └── StatusHubClient.cs # SignalR connection
|
|
└── wwwroot/
|
|
└── css/ # Custom styles if needed
|
|
```
|
|
|
|
## Radzen Components
|
|
|
|
Radzen Blazor replaces the legacy Kendo UI JS components. The core library is free (MIT license).
|
|
|
|
| Component | Usage |
|
|
|-----------|-------|
|
|
| `RadzenDataGrid` | Search results and history tables |
|
|
| `RadzenDropDown` | Work center, operator selection |
|
|
| `RadzenAutoComplete` | Item number lookup with search |
|
|
| `RadzenDatePicker` | Date range selection |
|
|
| `RadzenButton` | Form actions |
|
|
| `RadzenCard` | Layout containers |
|
|
| `RadzenNotification` | Toast messages |
|
|
| `RadzenProgressBar` | Search progress indication |
|
|
|
|
## Program.cs Configuration
|
|
|
|
```csharp
|
|
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
|
builder.RootComponents.Add<App>("#app");
|
|
|
|
// HTTP client for API calls
|
|
builder.Services.AddScoped(sp =>
|
|
new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
|
|
|
// API clients
|
|
builder.Services.AddScoped<SearchApiClient>();
|
|
builder.Services.AddScoped<LookupApiClient>();
|
|
builder.Services.AddScoped<AuthApiClient>();
|
|
builder.Services.AddScoped<StatusHubClient>();
|
|
|
|
await builder.Build().RunAsync();
|
|
```
|
|
|
|
## SignalR Client
|
|
|
|
The `StatusHubClient` connects on login and subscribes to status updates:
|
|
|
|
```csharp
|
|
public class StatusHubClient : IAsyncDisposable
|
|
{
|
|
private HubConnection _connection;
|
|
|
|
public event Action<SearchStatusUpdate> OnStatusChanged;
|
|
|
|
public async Task ConnectAsync(string baseUrl)
|
|
{
|
|
_connection = new HubConnectionBuilder()
|
|
.WithUrl($"{baseUrl}/hubs/status")
|
|
.WithAutomaticReconnect()
|
|
.Build();
|
|
|
|
_connection.On<SearchStatusUpdate>("StatusChanged", update =>
|
|
{
|
|
OnStatusChanged?.Invoke(update);
|
|
});
|
|
|
|
await _connection.StartAsync();
|
|
}
|
|
}
|
|
```
|
|
|
|
## Related Documentation
|
|
|
|
- [Solution Structure](./SolutionStructure.md)
|
|
- [Data Flow](./DataFlow.md)
|
|
- [Dependencies](./Dependencies.md)
|