Patient Management Features (UI)

Relevant source files

The following files were used as context for generating this wiki page:

• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-list/patient-list.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-list/patient-list.html
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/create-patient/create-patient.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/create-patient/create-patient.html
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-detail/patient-detail.ts
• Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-detail/patient-detail.html
• Frontend/Angular/Scheduling.AngularApp/src/app/core/services/patient-api.ts

The Patient Management User Interface is a module within the Scheduling Angular application designed to facilitate the lifecycle of patient records. It provides capabilities for listing, filtering, creating, viewing, and managing the status of patients within the healthcare scheduling domain.

The UI is built using Angular 21 with a focus on modern patterns including standalone components, Signals for state management, and the inject() function for dependency injection. It interacts with a backend Web API to persist domain state changes, adhering to Domain-Driven Design (DDD) principles by reflecting aggregate state transitions (Active, Suspended, Deleted) directly in the interface.

Sources: claude.md:57-65, Frontend/Angular/Scheduling.AngularApp/src/app/core/services/patient-api.ts

Architecture and Core Services

The patient management UI follows a service-oriented architecture where components delegate data acquisition and persistence to a specialized API service.

PatientApi Service

The PatientApi service acts as the gateway to the Scheduling.WebApi. It encapsulates the HTTP logic for all patient-related operations.

Method	HTTP Verb	Endpoint	Description
getAll(params)	GET	/api/patients	Retrieves a list of patients, supports status filtering.
getById(id)	GET	/api/patients/{id}	Fetches detailed information for a specific patient.
create(request)	POST	/api/patients	Submits new patient data for creation.
suspend(id)	POST	/api/patients/{id}/suspend	Transitions a patient to "Suspended" status.
activate(id)	POST	/api/patients/{id}/activate	Transitions a patient back to "Active" status.
delete(id)	DELETE	/api/patients/{id}	Performs a soft delete of the patient record.

Sources: Frontend/Angular/Scheduling.AngularApp/src/app/core/services/patient-api.ts:16-75

State Management with Signals

The application utilizes Angular Signals to manage local component state, such as loading indicators and patient data arrays, ensuring efficient and reactive UI updates.

patients = signal<Patient[]>([]);
isLoading = signal<boolean>(true);

Sources: Frontend/Angular/Scheduling.AngularApp/src/app/features/patients/patient-list/patient-list.ts:25-26

Patient List and Filtering

The PatientList component provides a tabular view of all patients. It includes a toolbar for filtering the list by patient status.

Component Logic

The component initializes by calling loadPatients(). It uses a selectedStatus variable bound via [(value)] to a Material Select component. When the selection changes, the list is re-fetched from the API with the appropriate query parameters.

Patient Creation

The CreatePatient component manages the entry of new patient data through a reactive form.

Data Flow and Validation

The form includes validation for required fields and email formatting. On submission, the component transforms the dateOfBirth into an ISO string format required by the backend.

Field	Validation	Type
First Name	Required	string
Last Name	Required	string
Email	Required, Email	string
Date of Birth	Required	Date (converted to YYYY-MM-DD)

Patient Details and Lifecycle Management

The PatientDetail component provides an in-depth view of a patient and exposes administrative actions based on user roles and the current state of the patient entity.

Role-Based Access Control (RBAC)

The UI dynamically enables or disables actions based on roles retrieved from the AuthService:

• canDelete: Restricted to users with the Admin role.
• canSuspend: Available to users with Doctor or Admin roles.

Status Transitions

The component uses computed signals to determine the current state of the patient (e.g., isSuspended, isDeleted) and toggles action buttons accordingly. For instance, the suspension button text switches between "Activate" and "Suspend" based on the isSuspended() signal.

Conclusion

The Patient Management UI demonstrates a clean implementation of Angular's latest features to manage a complex domain entity. By leveraging Signals and a centralized API service, it provides a responsive experience for healthcare staff to maintain patient records while enforcing business rules and security through role-based UI gating.