Harvest form submit button and validity styling behavior

[braughtg]

Feature

Change the enabled/disabled behavior of the "Submit" button and the way that the validity styling is displayed on the Harvest form to better align with the convention used in other FarmData2 forms.

In the current Harvest form the "Submit" button is disabled until the full form is completed and the validity styling is shown at all times. Other FarmData2 forms use the convention that the "Submit" button is initially enabled and validity styling is not shown initially. When the "Submit" button is clicked the validity styling is shown to indicate the valid and invalid inputs. In addition:

• If all of the inputs are valid, then the form is submitted.
• If any of the inputs are not valid, the "Submit" button is be disabled until all inputs are valid.

To see this behavior you can:

1. Visit "FarmData2" -> "Seeding" -> "Tray Seeding"
2. Notice:
   • The "Submit" button is enabled.
   • Validity styling is not shown on the inputs.
   • 
3. Click "Submit"
4. Notice:
   • The "Submit" button has been disabled.
   • Validity styling is shown to indicate the valid and invalid inputs.
   • 
5. Complete the form by providing valid values for the invalid inputs.
6. Notice:
   • The Validity Styling updates as the inputs are changed.
   • The "Submit" button becomes enabled once all inputs are valid.
   • 

The behavior of the Harvest form should be modified to follow this convention.

E2E tests should be edited and/or added to confirm that the Harvest form follows this convention.

Rationale

From a UI/UX perspective, indicating invalid inputs by default suggest that the user has done something wrong before they have even used the form. Thus, it is better to allow them to complete the form and only indicate invalid inputs (if any) when they attempt to submit the form.

Alternatives

N/A. This form should follow the same conventions as the other FarmData2 forms.

Additional context

Studying how the "Tray Seeding" form manages the state of the "Submit" button and the display of the validity styling would be the best place to start. Once that is understood, the Harvest form can be modified to use a similar approach. The code for the "Tray Seeding" form can be found in modules/farm_fd2/src/entrypoints/tray_seeding/App.vue.

Some things to notice:

• All FarmData2 components that collect input emit a valid event that indicates if the contents of the component are valid (true) or not (false).
• In the App.vue
  • The Vue data contains a validity attribute.
    • This attribute contains attributes that are set by event handlers for the valid event. They record the validity state of each component.
    • This attribute also contains a show attribute that is used to control whether the validity styling is being displayed or not. This attribute is manipulated by the submit method.
  • There are computed properties for: submitEnabled and validToSubmit which are used to control the enabled state of the "Submit" button and the behavior of the submit function.

The E2E tests can be run with: test.bash --fd2 --live --e2e --glob=modules/farm_fd2/**/harvest/*.e2e.cy.js --gui