Edit Contact Screen
Component Detail
Description
Form screen allowing coordinators and admins to update contact information using AppTextField and custom fields table widgets. Enforces client-side validation before submitting changes to the backend.
edit-contact-screen
Summaries
The Edit Contact Screen empowers coordinators and administrators to maintain accurate, up-to-date contact records directly from the mobile application, eliminating the need for manual data entry through back-office systems. For organizations like NHF managing contacts across multiple chapters, the ability to update affiliation and profile information in the field — with built-in validation to prevent data quality issues — directly improves the integrity of the contact database. Clean, validated contact data reduces coordination errors, improves matching outcomes for peer mentoring, and supports better organizational reporting. By placing edit capability in the hands of authorized field users with appropriate guardrails, the product reduces administrative overhead and accelerates the feedback loop between field observations and recorded data.
The Edit Contact Screen is a medium-complexity form screen with three key dependencies: multi-chapter-affiliation-chip for NHF affiliation selection, contact-edit-service for backend persistence, and contact-form-validator for client-side validation logic. The validation layer should be treated as a separate deliverable to enable parallel development — the form UI can be built and reviewed while validation rules are finalized with product. The main delivery risk is the multi-chapter affiliation interaction, which has specific NHF requirements around selecting up to five chapters simultaneously; this interaction pattern should be prototyped and reviewed early. Testing must cover validation failure states, network error handling on submit, and the success navigation flow.
Ensure rollback behavior is defined: if the backend rejects a save, the form should retain the user's edits rather than resetting.
The Edit Contact Screen is a stateful form widget in the mobile execution context. initializeFormFields populates all AppTextField and custom fields table widgets from a Contact object passed at navigation time. validateForm runs the contact-form-validator's rule set synchronously before any network call is initiated. submitEdit delegates to contact-edit-service, which handles the Supabase upsert; onSaveSuccess triggers pop navigation, while onSaveError surfaces an error snackbar.
resetForm restores the original field values without navigating away. The multi-chapter affiliation selection uses multi-chapter-affiliation-chip in interactive mode, emitting chapter selection events that the screen aggregates into the form state. Key implementation concern: form state must be isolated from the loaded contact model to prevent mutation of the read cache. Use a separate mutable form state object or FormGroup equivalent.
The contact data model is the only schema dependency, but the affiliation chip indirectly touches the chapter model.
Responsibilities
- Render editable form fields using AppTextField and custom fields table
- Enforce client-side field validation before save
- Handle multi-chapter affiliation selection for NHF contacts
- Persist changes via contact edit service and navigate back on success
Interfaces
build(BuildContext context)
initializeFormFields(Contact contact)
validateForm() -> bool
submitEdit()
onSaveSuccess()
onSaveError(String message)
resetForm()
Relationships
Dependencies (3)
Components this component depends on