Refactor harvest form to use `farmosUtil.runTransaction` and `lib.js` to submit

[braughtg]

Feature

Currently the code for submitting the Harvest form is contained in the App.vue file. All other FarmData2 forms factor the code for doing a submission out into a separate Javascript file (lib.js) the Harvest form should be refactored to work similarly. The code in the lib.js file will use the farmosUtil.runTransaction function to create the quantities and logs in farmOS, and clean up if errors occur.

Rationale

Factoring the code for the submit out of the Harvest form App.vue file will make the behavior of the Harvest form consistent with other FarmData2 forms. In addition, this structure allows the data collection by the form and the submission of that data to farmOS to be tested independently.

The use of the farmosUtil.runTransaction function simplifies the process of handling errors (network, server, etc) that may occur during submission. For example, imagine that a quantity has been created, but then an error occurs during the creation of the associated harvest log. Without proper error handling, the quantity would exist in farmOS but the log that was to refer to it would not exist. Using the farmosUtil.runTransaction function provides a straight forward way to attempt to clean up situations like this when errors occur during the submit process.

In addition:

• Unit tests should be written for the lib.js file to ensure that the correct records have been created in farmOS.
• An E2E test should be create for the Harvest form that confirms that the correct data is being passed to the lib.js for submission.

Alternatives

None. All FarmData2 forms use a lib.js and the runTransaction function to perform and test the submission.

Additional context

The farmosUtil.runTransaction function is documented in the FarmData2 documentation.

1. Start the documentation server.
2. Navigate to the "FarmData2 Component and Library Documentation" and the farmosUtil library.
3. Find the "transaction" section, read the documentation and study the example code that uses the runTransaction function.

Use the Tray Seeding form as an example of how to perform the submit using the runTransaction function. The TraySeeding form can be found in modules/farm_fd2/src/entrypoints/tray_seeding. Some important points:

• The definition of the form is in the App.vue file.
  • This file imports the lib.js file that contains the code for doing the submission.
  • The submit method in this file contains code that passes the form data to the submitForm function in the lib.js file. The submit method also handles the display of the progress bar and/or any error messages that come back from the submitForm function.
  • The Vue data contains a form attribute that collects all of the attributes that are needed to make the submission.
    • The Harvest form has all of the necessary fields, but they are not currently collected into a form attribute.
    • Changing the Harvest form to collect all of the relevant form data into a form attribute, without making any other changes, and confirming that the form still works correctly would be a good first step.
• The lib.js file contains the submitForm function that does the submission using the runTransaction function.
  • It creates a transaction object with do and undo functions for each of the quantities and logs required, collects them into an array and passes that array to the runTransaction function.

The Tray Seeding form also contains code that will serve as good examples for the the unit tests and the E2E test that are to be created.

• The lib.submit.unit.cy.js file contains the unit tests that check that the correct quantities and attributes are created in farmOS.
  • The unit tests for the Tray Seeding lib.js are run with the command:

    test.bash --unit --fd2 --glob="modules/farm_fd2/**/tray_seeding/lib.*.unit.cy.js"
    

  • To run the test for lib.js in the Harvest form:

    test.bash --unit --fd2 --glob="modules/farm_fd2/**/harvest/lib.*.unit.cy.js"
    

• The trayseeding.submission.e2e.cy.js file contains the test that checks that the data passed to submitForm is correct.
  • Note: The code below appears in the created lifecycle hook in the Tray Seeding App.vue and will need to be added to the created lifecycle hook in the Harvest form App.vue before you write the E2E test.

    if (window.Cypress) {
      document.defaultView.lib = lib;
    }