Nabs.Launchpad.Ui.Shell.Blazor.Sf 10.0.211

Nabs Launchpad UI Shell Blazor Syncfusion Library

This library provides a comprehensive Blazor UI framework built on top of Syncfusion Blazor components, designed to create consistent, feature-rich enterprise applications within the Nabs Launchpad ecosystem.

Overview

The UI Shell Blazor Syncfusion library extends the base Nabs.Launchpad.Ui.Shell with Syncfusion-powered components, offering advanced data grids, forms, navigation, and layout capabilities. It provides pre-built Razor components that integrate seamlessly with the Launchpad MVVM architecture and ViewModels.

Key Features

• Syncfusion Integration: Full integration with Syncfusion Blazor components for enterprise-grade UI controls
• Pre-built Views: Ready-to-use Razor components for common patterns (ItemView, MasterDetailsView)
• Responsive Layout: Modern, responsive main layout with navigation and user context
• Form Generation: Automatic form generation with validation using Syncfusion DataForm
• Data Grids: Advanced grid functionality with sorting, paging, and selection
• Progress Indicators: Global loading states and progress feedback
• Bootstrap Styling: Built-in Bootstrap 5.3 dark theme integration
• Authentication Integration: JWT Bearer authentication support

Architecture

Components

Views

• ItemView<TItem, TViewModel>: Generic Razor component for single-item editing with automatic form generation
• MasterDetailsView<TListItem, TDetailsItem, TViewModel>: Master-detail pattern with grid-based master list and form-based detail editing

Layouts

• MainLayout: Primary application layout with header navigation, user context, and footer
• Responsive design with sticky header and flexible content areas

Navigation

• Portals: Portal-specific navigation component
• Dynamic menu generation from PortalContext navigation items

Progress Indicators

• GlobalProgress: Application-wide loading indicator with overlay

Static Assets

• Bootstrap 5.3 CSS framework
• Syncfusion Bootstrap Dark Theme for consistent styling
• Custom CSS for layout enhancements
• Syncfusion Icons font integration
• Lodash.js utility library

Dependencies

NuGet Packages

• Syncfusion.Blazor: Core Syncfusion Blazor components
• Microsoft.AspNetCore.Authentication.JwtBearer: JWT authentication
• Blazored.FluentValidation: Client-side validation integration
• bunit: Blazor component testing framework

Project References

• Nabs.Launchpad.Core.Context: Database and portal context
• Nabs.Launchpad.Ui.Shell: Base UI shell services
• Nabs.Launchpad.Core.ViewModels: MVVM ViewModels and base classes

Setup and Configuration

1. Syncfusion License Registration

builder.AddSyncfusion();

This extension method handles Syncfusion license registration using the SyncfusionLicenseKey environment variable.

2. Service Registration

The library automatically configures:

• Syncfusion Blazor services
• Authentication middleware
• Static file serving for wwwroot assets

3. Layout Integration

Include the StaticAssets component in your application's head section:

<component type="typeof(StaticAssets)" render-mode="Static" />

4. Import Statements

Add the _Imports.razor file or include these using statements:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.DataForm
@using Syncfusion.Blazor.Grids
@using Blazored.FluentValidation
@using Nabs.Launchpad.Ui.Shell.Blazor.Sf

Usage Examples

ItemView Component

@page "/edit-item/{id:guid?}"

<ItemView TItem="PersonDto" TViewModel="PersonViewModel">
    <ChildContent Context="person">
        
        <div class="row">
            <div class="col-md-6">
                <label>First Name</label>
                <input @bind="person.FirstName" class="form-control" />
            </div>
            <div class="col-md-6">
                <label>Last Name</label>
                <input @bind="person.LastName" class="form-control" />
            </div>
        </div>
    </ChildContent>
</ItemView>

MasterDetailsView Component

@page "/manage-people"

<MasterDetailsView TListItem="PersonListItemDto" 
                   TDetailsItem="PersonDto" 
                   TViewModel="PeopleManagementViewModel" />

Custom Layout Usage

@layout MainLayout
@page "/dashboard"

<PageTitle>Dashboard - @PortalContext.PortalDisplayName</PageTitle>

<h1>Welcome to the Dashboard</h1>

Styling and Theming

Default Theme

• Bootstrap 5.3 Dark Theme: Consistent dark theme across all components
• Syncfusion Bootstrap Dark: Matching Syncfusion component theming
• Responsive Design: Mobile-first responsive layout

Customization

Override styles by providing a portal.css file in your application's wwwroot/static/ directory.

CSS Classes

• .master-details: Styling for master-detail table layout
• .progress-overlay: Global progress indicator overlay
• .nav-link: Navigation link styling
• .user-icon: User profile icon styling

Testing

Unit Testing with bUnit

[Fact]
public void ItemView_ShouldRenderCorrectly()
{
    // Arrange
    using var ctx = new TestContext();
    ctx.Services.AddSingleton<PersonViewModel>();
    
    // Act
    var component = ctx.RenderComponent<ItemView<PersonDto, PersonViewModel>>();
    
    // Assert
    Assert.Contains("Save", component.Markup);
    Assert.Contains("Cancel", component.Markup);
}

Test Projects

• Launchpad.Ui.Shell.Blazor.Sf.UnitTests: Comprehensive unit tests for all components

Performance Considerations

Render Modes

• Interactive Server: Used for progress indicators to provide real-time feedback
• Static Rendering: Used for static assets and initial page loads
• Prerendering: Disabled for interactive components to prevent hydration issues

Optimization Features

• Grid Virtualization: Automatic virtualization for large datasets
• Lazy Loading: Progressive loading of navigation items
• Debounced Search: Built-in search debouncing in ViewModels

Security

Authentication

• JWT Bearer Token: Automatic JWT token handling
• User Context Integration: Seamless integration with Launchpad user authentication
• Role-based Navigation: Dynamic menu generation based on user permissions

Authorization

• Navigation items automatically filtered based on user authorization
• Component-level security through ViewModel integration

Browser Support

Supported Browsers

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Progressive Enhancement

• Graceful degradation for older browsers
• Core functionality available without JavaScript

Contributing

Development Guidelines

• Follow Blazor component best practices
• Use Syncfusion components for data-intensive operations
• Maintain consistency with existing component patterns
• Include comprehensive unit tests for new components

Code Standards

• Use C# 13 features and latest language constructs
• Follow nullable reference types conventions
• Implement proper async/await patterns
• Use file-scoped namespaces

Integration with Launchpad Ecosystem

Core Integration Points

• ViewModels: Seamless binding with Core.ViewModels patterns
• Context Services: Integration with PortalContext and UserContext
• Validation: FluentValidation integration for client-side validation
• Messaging: CommunityToolkit.Mvvm messaging for component communication

Related Libraries

• Nabs.Launchpad.Ui.Shell: Base UI shell functionality
• Nabs.Launchpad.Core.ViewModels: MVVM patterns and base classes
• Nabs.Launchpad.Core.Context: Application context and services

License

Copyright � Net Advantage Business Solutions

This library requires a valid Syncfusion license for production use. Ensure the SyncfusionLicenseKey environment variable is properly configured in your deployment environment