Confirm?

Are you sure you want to proceed?
R
Ryan Stokes

User Group Management Dashboard

Clone & Customize via AI

Bootstrap User Group Dashboard provides a Blazor user group editor with modal add/edit and dual drag-and-drop lists for members. Uses Bootstrap classes (list-group, modal, form-control) and responsive row/col layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Page listing existing user groups as Bootstrap list-group cards with counts and actions (Edit, Delete). - Modal add/edit editor with group name input and validation (required name) and Save/Cancel actions. - Dual user lists (Available / Selected) supporting drag-and-drop and mobile tap add/remove controls. - Sorting toggles for available and selected lists, and deep-copy editing to allow canceling edits. - Inline mock data initialization for demo; delete action updates in-memory list. ## Key components - Razor markup: foreach loops, conditional rendering (@if), modal markup and buttons. - Inputs and binding: standard <input> elements with @bind for group name. - Event handlers: @onclick, @ondragstart, @ondrop and ondragover for drag-and-drop behavior. - Computed properties: AvailableUsersForDisplay and SelectedUsersForDisplay for filtered/sorted views. - Models: UserModel and UserGroupModel classes for in-memory state. - Styling: Bootstrap classes (container, list-group, modal, btn, form-control) and a scoped CSS file (UserGroupDashboardPage.razor.css). ## How it works - Data binding: currentGroupForEdit is bound to the name input via @bind and holds SelectedUsers for the editor. - Edit flow: ShowEditGroupModal creates a deep copy of the selected group so changes can be canceled; SaveGroup applies changes back to userGroups or adds a new group. - Drag-and-drop: HandleDragStart sets draggedUser; HandleDropOnSelectedList and HandleDropOnAvailableList add/remove the dragged user from currentGroupForEdit.SelectedUsers. - Sorting: toggles availableUsersSortAscending and selectedUsersSortAscending control OrderBy in the computed properties. - Mobile support: AddUserToSelected and RemoveUserFromSelected provide tap-friendly add/remove buttons visible on small screens. ## Styling - Uses Bootstrap utility and component classes: .container, .row/.col-md-*, .list-group, .modal, .btn, .form-control. - Scoped CSS adds .user-list-container sizing, scrollbar, .user-list-item hover, and .selected-user-item background for selected entries. - Modal uses .modal-dialog-scrollable to keep body scrollable when content overflows; layout uses responsive columns for lists. ## Reuse steps 1. Add the razor, model and scoped CSS files into a Blazor project and ensure Bootstrap and FontAwesome (or substitute) are included in index.html/_Host.cshtml. 2. Import models namespace if placed in a different folder or add a using statement in the razor page. 3. Replace mock data in OnInitializedAsync with service calls (inject an API or repository service) and persist changes via an injected service. 4. Optionally replace manual input validation with EditForm and DataAnnotationsValidator and add IJSRuntime confirm dialogs for delete actions. 5. Improve drag-and-drop accessibility by adding keyboard controls and ARIA attributes; add unit or component tests for key flows. ## Limitations & next steps - Page uses in-memory mock data; persistence, server APIs, and authorization are not implemented. - Validation is a simple inline check; switching to EditForm + DataAnnotations improves model validation and UX. - No delete confirmation or error handling for backend failures; integrate IJSRuntime or a modal confirmation and service error handling. - Drag-and-drop relies on browser events and needs accessibility improvements and edge-case handling for complex lists. - Consider extracting list and modal into reusable components for larger apps.