●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Role listing table with columns for name, description, user count, system type, status toggle, creation and modification dates
- Client-side search input and checkbox filter to toggle display of deleted roles
- Sort button toggling ascending/descending sorting by name
- Drawer panel for role details viewing and editing, including text inputs, text area, toggle switches, and progress bars
- Badge indicators for system types and status
## Key components
- Blazor components: InputText, InputCheckbox, InputTextArea, @bind-Value
- Bootstrap classes: container-fluid, d-flex, form-control, btn, table, badge, dropdown, progress-bar, form-switch
- Event handlers for sorting toggle, drawer open/close, and saving details
## How it works
- Role data stored in a local List<RoleViewModel> with dummy data initialized on page load
- FilteredRoles property filters and sorts roles based on search term and sort direction
- Search input uses two-way binding and updates on input event
- Toggle switch controls status via two-way binding on role property
- Drawer visibility controlled by boolean and selectedRole reference for editing
- Changes to selectedRole bound inputs update the underlying list directly
## Styling
- Styled using Bootstrap 5 utility classes for layout, forms, buttons, and badges
- Custom CSS overrides for badge colors, form-switch sizing, and table styling
- Responsive flex layouts for header and filter controls
## Reuse steps
1. Include Bootstrap CSS and FontAwesome icons in the project
2. Add RoleViewModel class and SystemType enum
3. Add RoleManagement.razor component to project
4. Import Microsoft.AspNetCore.Components.Forms namespace for Blazor inputs
5. Adapt data source and persist changes to server instead of client-side list
## Limitations & next steps
- Search and sorting are client-side only with no API integration
- Drawer does not persist changes beyond in-memory list
- Multi-tenant and dropdown selection logic is static
- Add validation for inputs and server-side data handling
- Integrate authentication and data authorization as needed