User Interface medium complexity Shared Component frontendmobile
0
Dependencies
1
Dependents
0
Entities
0
Integrations

Description

Reusable multi-select contact list widget that allows coordinators to pick one or more peer mentors from their managed contacts. Supports search filtering, select-all, and displays mentor status badges inline.

Feature: Coordinator Proxy Registration for Contacts

mentor-multi-select-widget

Summaries

The Mentor Multi-Select Widget is a shared, reusable interface component that empowers coordinators to efficiently select multiple peer mentors for group activities and bulk operations. As a shared component used across several features, it represents a single investment that delivers value in multiple workflows — bulk proxy registration, group event assignment, and any future coordinator-to-mentor bulk action. By including inline mentor status badges, coordinators can instantly identify active, inactive, or pending mentors without navigating away, reducing selection errors and improving data quality. The select-all functionality accelerates workflows for coordinators managing large cohorts.

This component directly reduces the time coordinators spend on administrative tasks, improving operational efficiency across the program.

The Mentor Multi-Select Widget is a medium-complexity shared UI component with no external dependencies, making it a high-priority early deliverable. Because it is consumed by bulk-proxy-registration-screen and potentially other screens, it sits on the critical path for several features. Development should begin early and be completed before dependent screens enter integration testing. The widget's search/filter capability requires performance consideration — filtering must remain smooth with lists of 50–200 mentors on mobile hardware.

Testing requirements include: selection state persistence across filter operations, select-all/clear-all correctness, and callback accuracy. Accessibility testing (touch target sizes, screen reader labels) is recommended given the mobile execution context. Estimated effort: 3–4 days including state logic, search filtering, and thorough unit tests for all selection operations.

The Mentor Multi-Select Widget is a stateful Flutter widget that maintains a Set of selected mentor IDs in local state. toggleSelection(String mentorId) adds or removes an ID from the set and triggers onSelectionChanged(List selectedIds) callback to the parent. selectAll() populates the set with all currently visible (filtered) mentor IDs; clearAll() empties it. filterByName(String query) applies a case-insensitive substring filter to the displayed list — this should be computed from the full mentor list held internally, not re-fetched from a service, to keep filtering synchronous and fast.

getSelectedCount() returns the current set size for display in parent screens. isSelected(String mentorId) supports conditional rendering of checkboxes or highlight states per row. The widget renders a ListView.builder with mentor status badges — badge rendering should use a shared BadgeWidget keyed to mentor status enum values. The peer-mentor data model is the primary consumed type.

Ensure selection state survives widget rebuilds by lifting state to a parent or using a ValueNotifier; do not rely on ephemeral widget-level state if the widget is rebuilt during filtering.

Responsibilities

  • Render scrollable list of peer mentor contacts
  • Track selected mentor IDs in local state
  • Support search/filter by name
  • Expose selection callback to parent screen

Interfaces

build(BuildContext)
onSelectionChanged(List<String> selectedIds)
selectAll()
clearAll()
filterByName(String query)
getSelectedCount()
isSelected(String mentorId)
toggleSelection(String mentorId)

Relationships

Dependents (1)

Components that depend on this component