Create A1a with simple validation attributes

[mlan225]

Resolves: #108 Resolves: #111 Resolves: #110

Add the A1a form and create stimulus.js validation for checkbox disables

Generic Validation

• [x] required on complete validation
• [x] validation messages appear on the question

Custom validation

• [x] required if validation for "other" text inputs
• [x] custom validation logic for 39 checkboxes
  • [x] cannot supply not applicable AND prefer not to answer
  • [x] cannot check 39a1 - 39a13 if not applicable OR prefer not to answer is marked
  • [x] one of the checkboxes of section 39 must be marked
  • [x] custom validation for question 40. if question 39 does not have 39a14 "not applicable" marked, then question 40 must be answered
  • [x] custom validation messages appear on the questions

Form functionality

• [x] can partial save
• [x] can save as complete
• [x] form is viewable on IVP and TIP visits

Custom stimulus validation

• [x] checking 39a14 in section 39 will disable radio group for question 40
• [x] loading the form with 39a14 selected will persist the disable for radio group 40
• [x] the stimulus disable can be applied to multiple groups on a form. This form only has on group that needs to be disabled, so to check this one would need to input the attributes

[mlan225]

Card #108 Tasks

Create model and Implemented simple attributes and validation:

• [x] Display
• [x] Range (that goes from lowest possible to highest possible. In between for extra options will be added in further behavior validation steps)
• [x] MaxLength(60)

[mlan225]

Moving on to form page model issue card to Resolve: #111

[mlan225]

Card #111 Tasks

Create the page model with items and disable/enable behavior

• [x] Create items for form questions
• [x] Create behaviors

[mlan225]

Question for ya @ashleybot So there seems to be additional guidance in the form_a1a_ivp_questions_and vars.csv for the UDS4 A1a questions that are not present in the labels in the UDS4 A1a UDS4-IVP-Form-A1a-FinalProof.pdf PDF file. Are we taking the question labels from the PDF or the CSV instructions as what we want on the application?

The pdf form file

The csv instruction file

[mlan225]

Card #110 Task

• [x] Create the layout for the A1a

[mlan225]

Ended up doing more work on the mappings than the layout, running into an issue with a base form cast to an A1a type in the page model

[ashleybot]

Examples

A1 has reusable examples of layout for questions with a series of radio buttons (and, optional other)

Vertical radio buttons

            <div class="@rowCSS">
                <label asp-for="A1.REASON"><span class="counter"></span><span class="counter invisible"></span> @Html.DisplayNameFor(model => model.A1.REASON)</label>
                <div class="mt-4 sm:col-span-2 sm:mt-0">
                    <div class="max-w-lg">
                        <p class="text-sm text-gray-500" asp-description-for="@Model.A1.REASON"></p>
                        <radio-button-group id="A1_REASON" for="A1.REASON" items="Model.ParticipationReasonsListItems"></radio-button-group>
                        <span class="mt-2 text-sm text-red-600" asp-validation-for="@Model.A1.REASON"></span>
                    </div>
                </div>
            </div>

Vertical radio buttons with input field for other

            <div class="@rowCSS">
                <label asp-for="A1.HISPOR" class="text-base font-semibold text-gray-900"><span class="counter"></span> @Html.DisplayNameFor(model => model.A1.HISPOR)</label>
                <div>
                    <p class="text-sm text-gray-500" asp-description-for="@Model.A1.HISPOR"></p>
                    <radio-button-group id="A1.HISPOR" for="@Model.A1.HISPOR" items="Model.OriginsListItems" ui-behaviors="Model.OriginsUIBehavior"></radio-button-group>
                    <span class="mt-2 text-sm text-red-600" asp-validation-for="@Model.A1.HISPOR"></span>
                </div>
                <div class="mt-4 space-y-4">
                    <p class="text-sm text-gray-500" asp-description-for="@Model.A1.HISPORX"></p>
                    <label asp-for="@Model.A1.HISPORX">@Html.DisplayNameFor(m => m.A1.HISPORX)</label>
                    <div class="mt-2">
                        <input asp-for="@Model.A1.HISPORX" disabled="disabled" />
                    </div>
                    <span class="mt-2 text-sm text-red-600" asp-validation-for="@Model.A1.HISPORX"></span>
                </div>
            </div>

B6 has examples of horizontal radio buttons for questions 15a-15c

Horizontal radio buttons using a table for horizontal layout

<table>
   ...
                <tr>
                    <td>
                        <label asp-for="B6.SATIS"><span class="counter"></span> @Html.DisplayNameFor(m => m.B6.SATIS)</label>
                        <p class="text-sm text-gray-500" asp-description-for="B6.SATIS"></p>
                        <span class="mt-2 text-sm text-red-600" asp-validation-for="B6.SATIS"></span>
                    </td>
                    <table-cell-radio-buttons id="B6_SATIS" for="@Model.B6.SATIS" items="Model.DisagreeIncreasesListItems"></table-cell-radio-buttons>
                </tr>
</table>

[mlan225]

All features added will be adding screenshots for review guidance and fixing linter errors in the morning. As well as bringing up to date with main.

The issue with the A1 form view error, will update with main branch and if issue still persists, will cross check with main branch to see what on my PR is causing an issue

[mlan225]

Will be squashing and merging when its ready to merge in 👍

[mlan225]

Added regex number ranges and adjusted ladder question formatting

Range

• [x] Ranges now use regex for checks

Ladder question

• [x] Ladder question now has questions on left and image on right

• [x] ladder question adjusts for readability on smaller screens

• The table row of radio buttons can only shrink so far before needing to scroll. I figured an overflow scroll on the table row that the radios are generated wouldn't be as intuitive to use as having the page collapse accordingly. It does rearrange the format a little bit on smaller screens though, however, if I don't do either, then you get something like this (below as "previously"):

Previously (no adjustments)

XL screen width (with sizing adjustments)

< XL screen width (with sizing adjustments)

[ashleybot]

• [x] 61 variables in NACC documentation
• [x] 61 variables in model
• [x] 61 variables in mappings to/from
• [x] Confirmed allowed values and validation
• [x] Confirmed options for each input

[ashleybot]

@mlan225 Labels for the set of checkboxes in question 39 are different in the paper form (ie. my) and variables file (ie. your). Our views should match the paper form, but it's hard to determine which will be used here. I'll make a note for us to double check these again when NACC publishes the finalized forms.