Link appointment to lab request #2184 #2243
Conversation
A lab request should always have a specific appointment when the patient will come to get it done
…selected in a new lab request
…appointments displayed
…sed on selection in dropdown
…patient selection in Dropdown
…me for selected appointment
…ange patient prior dropdown would always show and changing patient would break code
conditional rendering for dropdown text. shows selected appointment
… reset to default
|
|
|
|
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/hospitalrun/hospitalrun-frontend/ay84v9m44 [update for 4efcfd1 failed] |
|
@yosephAHMED - Appreciate the detailed PR description here. It looks like the linter failed in some cases. Please run |
…phAHMED/hospitalrun-frontend into Enhancement-Lab-Appointment
…phAHMED/hospitalrun-frontend into Enhancement-Lab-Appointment
|
|
@yosephAHMED this is starting to look great!
Other:
|
|
@jackcmeyer @fox1t @kumikokashii Help Requested
Furthermore, I am asking that someone else steps in and works on these final steps in my place |
|
@yosephAHMED sounds good, we can take this PR from here! |
|
This pull request introduces 1 alert when merging 1c92ccd into c601262 - view on LGTM.com new alerts:
|
|
This pull request introduces 1 alert when merging 4efcfd1 into 08d7965 - view on LGTM.com new alerts:
|
Fixes #2184
Demo
Changes proposed in this pull request:
Lab.ts
When the user is making a lab request, an appointment should have been set up prior, such that they can link that specific lab request to their upcoming appointment. Furthermore, a lab request should always have a specific time when the patient will come in to get it done. Hence, I believe it is useful to update the Lab model and add a field for appointment.
NewLabRequest.tsx
When the state of patient is updated after the user searches and clicks on a patient, a dispatch will be sent to retrieve that patient's appointments using the patient id. Furthermore, on line 25, appointments will be populated with appointments retrieved from the redux store. Later in the code, the appointments array will be used in the process of displaying appointments on the screen. You may have noticed the addition of a local state variable, showAppointments. This state was used to display or hide the Dropdown onscreen, as well as fix some pesky errors I ran into, which I will discuss later!
Rather than create my own dropdown menu, I wanted to maximize code reusability and was successfully able to render the patient's appointments inside of the Dropdown component. Firstly, the appointments inside of the 'appointments' array that were retrieved from redux store needed to be reformatted so that they could match the structure set by the Dropdown's Item interface. To accomplish this, on lines 106-107, I mapped the appointments array and for each element, formatted it as an object that satisfies the requirements of the Item interface. On lines 99-104, I added a function called formatAppointment, which takes in the element aforementioned (of type Appointment), and returns an object containing an onClick and text.
Notice how for the onClick value, the onClick will call 'onAppointmentChange' and it passes the Appointment object as an argument. This is used later when updating the appointment state and finally saving appointment with the lab request.
These formatted objects are stored in an array, formattedAppointmentList, which is then passed in to initialize the items prop of the Dropdown on line 139.
How the Dropdown looks when toggled
When the user is in the Dropdown menu and they click on an appointment, the onAppointmentChange function is called (lines 63-68) and it receives the selected appointment as an argument. The argument is the appointment object. Here, I update the local state of appointment to the startDateTime, as that is the only information the patient/hospital personnel would be interested in.
The reasoning behind adding a state for dropdown visibility is simple. When a patient is not currently selected, the appointment's dropdown should not be visible. Only when a patient is successfully selected, should the dropdown be visible to the user. Therefore, only inside the onPatientChange function is the state of showAppointments updated, because inside that function is the only time the patient is being updated.
Now, at the time, there were two errors that I was running into. The first, more complicated error being that since I was using onPatientChange to send out the dispatch for the fetchPatientAppointments thunk, each time the patient was being updated, a dispatch was being sent out, even if the patient was undefined (the case when patient was being updated after the first patient is selected). The second, less complicated error was that there needed to be a way to hide the dropdown if the state of patient was being updated. Fortunately, I was able to kill both birds with one stone by further utilizing the state of showAppointments.
In the image below, if (!showAppointments) {} will execute assuming that the prior state of patient was the initial state. In such a case, dispatching the fetchPatientAppointments thunk will not break the code, as a correct patient was successfully selected from the patient search, and then the appointments dropdown will be made visible. The else {} will execute when the user is initially updating the state of patient. In debugging, I found that this else {} was only executing once after the user initially deleted one character from the patient name. Furthermore, by not having the dispatch in this section, I was able to address the error aforementioned.
Finally, by updating the state of showAppointments in this section to false, I was able to accomplish hiding the dropdown once again as the patient is being updated.
P.S. on line 57, the state of appointment is set to an empty string to fix an error I found when switching patients. Prior, if a patient selected an appointment and then patients were changed afterwards, the new patient would still have the appointment of the prior patient saved.
When the patient has not selected an appointment in the dropdown, the default text will be "Appointments". After an appointment is selected, the text changes to match the local state of appointment. I found that this approach was overall better for user experience when utilizing the dropdown. Also, I added the conditional rendering needed for displaying/hiding the dropdown menu.
I was able to accomplish this by using bootstrap. I put the patient section and appointment section under a parent div called 'row', then separated the patient section and appointment section into two divs called 'col'. This separates patient and appointment section into two 50/50 parts.
ViewLab.tsx
To ensure that appointment details were being saved properly with the lab,
on line 188-193, I added a Column and all it does is display labToView.appointment.
Thank you to the maintainers and everyone involved
It was a blast working on this issue! I learned a great deal since I was assigned to it.