Provide better feedback in New Appointment/Edit Appointment Form

[jackcmeyer]

🚀 Feature Proposal

Currently, the only error message that appears in the New Appointment/Edit Appointment form is a banner message that gives an error message.

When possible, we should provide feedback directly on the problematic field using: https://components.hospitalrun.io/?path=/story/textinput--invalid-text-field-with-error-message.

After completing this issue the following should be true:

• When a user does not enter a patient for the appointment, the given name should highlight in red, and have a feedback message of: Patient is required.
• When the start date field is empty, it should highlight in red, and have a feedback message of: Start date is required.
• When the end date field is empty, it should highlight in red, and have a feedback message of: End date is required.
• When the end date is before the start date, the end date should highlight in red, and have a feedback message of: End date must be after start date.
• The banner message should read Could not create new appointment./Could not update appointment.

Motivation

Easier feedback cycle for a user.

[patrick-salvatore]

Hi @jackcmeyer - may I work on this issue? Seems pretty straight forward.

[jackcmeyer]

I've assigned this to you @patrick-salvatore

[patrick-salvatore]

@jackcmeyer
For clarification - is the ask to trigger the error messaging on click of the "Save" button?

Additionally, looking at date fields - state and the input fields are instantiated with valid values. An empty field won't trigger an update of the input value. The value of the input only changes if given a proper date. Is the ask to remove this functionality for the start date and end date fields? Or keep as is?

[jackcmeyer]

@patrick-salvatore I think that, for now, we only trigger the error messages on the save button being clicked.

For the date fields, I think that you may need to use developer tools to circumvent the default behavior of the date pickers.

[jackcmeyer]

Closed via #2051