search

dickinson-comp190 / GitKit-FarmData2-F23

Other
0 stars 20 forks source link

Seeding Input: Allows invalid inputs #53

Open braughtg opened 11 months ago

braughtg commented 11 months ago

Description: When creating a new Seeding Input Log, it is possible to enter values that are invalid, such as negative numbers and decimal values that do not make sense in certain categories (e.g. Workers: 9.4).

Directions to Replicate the Bug

  1. Open the FarmData2 Application
  2. Click on the Seeding Input button in the FieldKit Tab
  3. Select any Date of Seeding, Crop, Area, and choose either Tray Seeding or Direct Seeding
  4. Enter invalid values, such as negative numbers or decimal values
  5. Click Submit

Expected Results: The application should not let the user submit these values and should give the user an error message that notifies them of the appropriate values that they should input.

Observed Results: The application allows the user to submit these invalid values and stores this Seeding Input Log with the rest of the data. image

Issue by goldberl Saturday Dec 11, 2021 at 21:42 GMT Originally opened as https://github.com/DickinsonCollege/FarmData2/issues/333

braughtg commented 11 months ago

@FutzMonitor and I will be working on this issue as our first issue for the summer.

Comment by JingyuMarcelLee Monday Jun 06, 2022 at 14:50 GMT

braughtg commented 11 months ago

I will be working on this issue with Marcel this summer.

Comment by FutzMonitor Monday Jun 06, 2022 at 14:53 GMT

braughtg commented 11 months ago

This seems like it will be best handled using a Vue component. We will want a component (or several) that only allow valid values to be entered. Their type should be number to ensure that they bring up the numeric key pad on mobile devices. The field can then also prevent typing anything but a valid value (e.g. no negative numbers, or only 2 decimals).

This could be done using separate components for positive integers or decimal numbers but a more flexible solution would be to have the input validated using a regular expression. So maybe one component that only allows a character to be typed if the full content of the field will still match the regular expression. Then there could be components defined that use that one, but just pre-specify the reg-ex (e.g. positive integers, 2 decimals, etc).

There is an existing component for this that we may be able to adapt and incorporate: https://github.com/RoamIn/vue-pattern-input

Comment by braughtg Monday Jun 06, 2022 at 20:52 GMT

braughtg commented 11 months ago

The component being created to address this issue should also include a watched prop for making the field disabled. This is important for when the user is asked to Confirm or Cancel the submission of a seeding log (or other logs in the future). In that situation, after "Submit" has been clicked the form will still be displayed, but will not be editable (i.e. will be disabled) until the user Confirms or Cancels the submission.

Comment by braughtg Saturday Jun 18, 2022 at 15:05 GMT