HarvestUnitSelector component

[braughtg]

Feature

Create and test a HarvestUnitSelector component and associated component tests. The HarvestUnitSelector provides a select element allowing the user to select one of the harvest units for a specific crop and should look similar to the mock up shown here:

Add component tests for the HarvestUnitSelector.

Once the HarvestUnitSelector component has been created, use it in the Harvest form as the input for the harvest units.

Rationale

In FarmData2 all of the UI components used in the forms are custom Vue components. By creating these as custom Vue components we can encapsulate all of the logic for fetching, displaying, and validating the data in the component and returned by the component. This ensures that the UI component looks and behaves the same in all locations where it appears and eliminates duplicate code. In addition, the component can be tested in isolation, making it easier to test and eliminating duplicate test code that would be necessary if a primitive component were used directly.

Additional context

To add the HarvestUnitComponent:

1. Review the information about creating and testing custom Vue Components in the FarmData2 documentation.
   i. Start the documentation server.
   ii. Find the "Contributing" section in the Index of the FarmData2 Documentation
   iii. Read the "Components Guide"
2. Use the addComponent.bash script to create the starter code for the HavestUnitComponent and its tests.
   i. Study the comments in the newly created HarvestUnitComponent.vue file and the *.comp.cy.js files.
   ii. Visit the component's example page in "FD2 Examples" in farmOS.
3. Study the CropSelector component.
   i. The HarvestUnitComponent will be similar to the CropSelector in many ways. But these two components will also be different in some ways. So understanding the CropSelector component will help with implementing the HarvestUnitComponent, but you'll have to adapt things as appropriate.
   ii. Experiment with the CropSelector component on its example page in "FD2 Examples" in farmOS.
   - Be sure to try out the "+" button to add a crop as the HarvestUnitComponent will have do something similar.
4. Implement the HarvestUnitComponent. This component must:
   i. Use a SelectorBase component as the UI element CropSelector does.
   i. Provide props for cropName, selected, and showValidityStyling
   ii. Emit error, ready, update:selected and valid events.
   iii. Use the getCropNameToTermMap function in the farmosUtil library to get a Map that you can use to get the taxonomy_term--plant_type object for the crop name provided by the cropName prop.
   iv. Use a URL similar to: http://farmos/taxonomy/term/53/edit for the popupUrl
   - The 53 in the URL must be replaced by the attributes.drupal_internal_tid from the taxonomy_term--plant_type object.
   v. If the crop indicated by cropName has only one harvest unit then that harvest unit should be selected by default in the SelectorBase, otherwise no harvest unit should be selected by default.
5. Update the HarvestUnitComponent example page in "FD2 Examples" to allow you to test the new component manually. All props and events should be included in the example page.
   • Use the npm run build:examples command to rebuild the examples pages when you make changes.
6. Add documentation to the HarvestUnitComponent.vue file that documents its use. The documentation for the CropSelector would be a good example to emulate.
7. Implement the component tests for the new HarvestUnitComponent. i. Studying the tests for the CropSelector should provide a good idea of how to write the tests for the HarvestUnitComponent.
   • Component tests can be run with test.bash --comp --glob=components/HarvestUnitComponent/*.comp.cy.js --gui