[Closes #97, #44] Admin/Staff/Volunteer user can register a new Patient from an unused QR code

[samau3]

Closes #97, closes #44.

This PR adds the ability for an authorized user to register a new patient after loading a URL tied to a new patient ID.

• Utilizes Mantine's useForm hook for form validation and Accordion component to reduce the screen height of the form
• Moving between sections of the accordion submits the entered data to the server
  • Leaving the Basic Information section for the first time registers the patient
• If the register button is clicked before all required sections of the form is completed, an error notification is shown that mentions which sections have errors
  • The first error section is also set to focus so the user knows where to start resolving errors
• The Medical Information and Healthcare Choices section inputs each send a query request to the database for the term being entered using a combination of Mantine components to customize a ComboBox component
• If visiting the registration form with a patientId that already exists (either by refreshing the page or resisting the URL again), the preexisting information for the patient will be the initial values of the form
  • In addition, refreshing the page reopens the section that was previously opened
• If sections of the form accordion were not opened before, a reminder is shown when clicking the submit button at the bottom to visit those sections

Some things to note:

• Currently, if a person were to revisit the Basic Information section and collapse it, rather than trying to register the user again, the information is sent as a PATCH request
• Only the Basic Information section is required and has form validation
• Values that are empty are treated as null when being stored in the database
• When entering contact information, if it was submitted to the server but was later edited to have empty fields, the Contact record will still exist in the database but will be unlinked from the patient

[francisli]

@samau3 I just pushed up a change to the Procfile so that it lauches Prisma Studio with the rest of the server, so that you can inspect changes to the database at http://localhost:5555 if you want...

[francisli]

@samau3 I just updated the seeds script to seed Hospital records... we'll need to create an API endpoint for Hospitals so that the form can pull it and populate the selection...

[samau3]

• I think it would be great to sit down with Tyler who designed this flow to see how well it matches what he was thinking of. One thing that feels weird for me is the Register button at the bottom, and the lack of any explicit call to action between sections- i.e. is it clear that user's are expected to tap on each section to open them up and complete them? I wonder if having a submit button in each section would help with the UX... would you be able to demo this to the design team on Weds night?

I've incorporated the feedback from Weds night when I demoed it, but let me know if I missed anything else! I think any other major form changes can be moved to a new PR so we can use this registration form to start user testing with

• Once you advance to the next section, you can't go back because the form validation complains about empty required fields...

I've reduced the strictness regarding which fields are required for form validation to only the information needed for Basic Information for now

• Combo boxes like Gender, Language, etc don't seem to support autocomplete typing... that is, I can't start typing "MA..." and get MALE or "EN..." and get "ENGLISH"... ?

I made adjustments to these inputs by adding a searchable prop to allow a user to type into the field to narrow down the options

• If I refresh the browser at any point, I'm restarted back at the first section and all the data is lost. Could we use routing to manage section visibility state, so that a refresh would bring you back to the same section? And can we check if the record has started and have previously entered data available to edit?

I've added a GET patient/:id route that is called when the form is opened to prepopulate the form with existing data for a patient (if there is any)

• When I fill out the Basic Information section then tap on section 2, I get both a success and a failure toast notification:

Fixed the conditional logic check to prevent this!

• If I fill out the Basic Information section, and press ENTER in the last date of birth field, it advances to the next section, with all of the required fields shown in error. No network request was made to POST the initial data.

Made some adjustments to the form to prevent enter triggering a form submission