A reusable modal component for creating and editing FHIR Appointment resources. Built on top of the Form component. This component allows scheduling appointments but does not uses Schedule
and Slot
resources so it might only be suitable for some specific use cases, use with caution or customize to your needs.
![Screenshot 2024-11-04 at 17 57 05](https://private-user-images.githubusercontent.com/1180884/382915861-b5898079-acc7-48e3-8cb2-abe389df9d02.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5MTgwNjgsIm5iZiI6MTczODkxNzc2OCwicGF0aCI6Ii8xMTgwODg0LzM4MjkxNTg2MS1iNTg5ODA3OS1hY2M3LTQ4ZTMtOGNiMi1hYmUzODlkZjlkMDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDdUMDg0MjQ4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzkxMDY0ZWM3NTM0N2ZlNmYxNjI5MTY3ODA4ZWFmZjI0YjA1MmNmZjMwNTE0YjVmZTBmM2EyMTg3NDY2MmY2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.iAQjwSUTBYk4YA1NW0i7wgfu1iUqzWPY7Y6P6FH_Unw)
tsx;
import { AppointmentFormModal } from './AppointmentFormModal';
function MyScheduler() {
const [opened, setOpened] = useState(false);
return (
<>
<Button onClick={() => setOpened(true)}>Schedule Appointment</Button>
<AppointmentFormModal
/*
* Optional: fixate the patient for the appointment
*/
patient={patient}
/*
* Optional: set an appointment to be edited (rescheduled).
* If not set, a new appointment will be created.
*/
rescheduleAppointment={rescheduleAppointment}
opened={createModalOpened}
onClose={() => setOpened(false))}
/>
</>
);
}
- The modal uses the ResourceForm component internally to handle FHIR resource creation/updates but this can be easily replaced with a custom form.