create and connect js controller file

src/UDS.Net.Forms/Models/UDS4/B6.cs

@@ -1,5 +1,6 @@
 using System;
 using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
 using UDS.Net.Forms.DataAnnotations;
 
 namespace UDS.Net.Forms.Models.UDS4
@@ -73,10 +74,24 @@ public class B6 : FormModel
         public int? BETTER { get; set; }
 
         [Display(Name = "Sum of all circled answers for Total GDS Score")]
-        [RegularExpression("^([1-9]|1[0-5]|88)$", ErrorMessage = "(0-15, 88)")]
+        [RegularExpression("^([0-9]|1[0-5]|88)$", ErrorMessage = "(0-15, 88)")]
         [RequiredIf(nameof(NOGDS), "False", ErrorMessage = "Total GDS Score is required.")]
         public int? GDS { get; set; }
 
+        [RequiredIf(nameof(NOGDS), "True", ErrorMessage = "If NOGDS checkbox is selected, then the total score must be 88")]
+        [NotMapped]
+        public bool? GDSNotCompleteChecked
+        {
+            get
+            {
+                if (GDS.HasValue && GDS.Value == 88)
+                {
+                    return true;
+                }
+                else return null;
+            }
+        }
+
         public override IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
         {
             foreach (var result in base.Validate(validationContext))

src/UDS.Net.Forms/Pages/UDS4/B6.cshtml

@@ -10,15 +10,15 @@
         INSTRUCTIONS: This form is to be completed by the clinician or other trained health professional, based on participant response. For additional clarification and examples, see <guidebook kind="@Model.Visit.PACKET"></guidebook>, Form B6. Check only <span class="underline">one</span> box per question.
     </p>
 </div>
-<div>
+<div data-controller="b6">
     <div class="mt-10 space-y-8 border-b border-gray-900/10 pb-12 sm:space-y-0 sm:divide-y sm:divide-gray-900/10 sm:border-t sm:pb-0">
 
         <div class="sm:grid sm:grid-cols-1 sm:items-start sm:gap-4 sm:py-6">
             <fieldset class="subsubcounterreset">
                 <div class="space-y-5">
                     <div class="relative flex items-start">
                         <div class="flex h-6 items-center">
-                            @Html.CheckBox("B6.NOGDS", Model.B6.NOGDS, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" })
+                            @Html.CheckBox("B6.NOGDS", Model.B6.NOGDS, new { @class = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", @data_b6_target="NOGDSInput", @data_action="input->b6#NOGDSBehavior" })
                         </div>
                         <div class="ml-3 text-sm leading-6">
                             <label asp-for="B6.NOGDS" class="font-medium text-gray-900">@Html.DisplayNameFor(m => m.B6.NOGDS)</label>
@@ -28,7 +28,7 @@
             </fieldset>
         </div>
 
-        <table class="table-auto min-w-full divide-y divide-gray-300">
+        <table class="table-auto min-w-full divide-y divide-gray-300" data-b6-target="radioTable">
             <caption class="caption-top">
                 <strong>Instruct the participant:</strong> "In the next part of this interview, I will ask you questions about your feelings. Some of the questions I will ask you may not apply, and some may make you feel uncomfortable. For each question, please answer "yes" or "no," depending on how you have been feeling <strong>in the past week, including today.</strong>"
             </caption>
@@ -41,7 +41,7 @@
                     }
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-200">
+            <tbody class="divide-y divide-gray-200" data-target="radioTable">
                 <tr>
                     <td>
                         <label asp-for="B6.SATIS"><span class="counter"></span> @Html.DisplayNameFor(m => m.B6.SATIS)</label>
@@ -169,9 +169,14 @@
             <label asp-for="B6.GDS"><span class="counter"></span> @Html.DisplayNameFor(m => m.B6.GDS)</label>
             <div class="mt-4 sm:col-span-2 sm:mt-0">
                 <p class="text-sm text-gray-500" asp-description-for="@Model.B6.GDS"></p>
-                <input asp-for="@Model.B6.GDS" />
+                <input readonly asp-for="@Model.B6.GDS" data-b6-target="GDSInput"/>
                 <span class="italic text-gray-500">(max score =15; did not complete = 88)</span>
-                <span class="mt-2 text-sm text-red-600" asp-validation-for="B6.GDS"></span>
+                <div>
+                    <span class="mt-2 text-sm text-red-600" asp-validation-for="B6.GDS"></span>
+                </div>
+                <div>
+                    <span class="mt-2 text-sm text-red-600" asp-validation-for="B6.GDSNotCompleteChecked"></span>
+                </div>
             </div>
         </div>
     </div>

src/UDS.Net.Forms/wwwroot/js/js_controllers/b6_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+    static targets = [
+        "radioTable",
+        "GDSInput",
+        "NOGDSInput"
+    ]
+
+    connect() { 
+        this.CreateRadioButtonEvents()
+        this.CalculateGDS()
+        this.NOGDSBehavior()
+    }
+
+    CalculateGDS() {
+        //If "Did not answer" radio detected, stop calculation loop
+        let noCompleteFlag = false
+
+        //reset values for recalculation
+        this.GDSInputTarget.value = ""
+
+        this.radioTableTarget.querySelectorAll('input[type="radio"]:checked').forEach((radio) => {
+            if (!noCompleteFlag) {
+                if (radio.value == 9 | this.NOGDSInputTarget.checked) {
+                    this.GDSInputTarget.value = 88
+                    noCompleteFlag = true
+                }
+                else
+                {
+                    this.GDSInputTarget.value = Number(this.GDSInputTarget.value) + Number(radio.value)
+                }
+            }
+        })
+    }
+
+    CreateRadioButtonEvents() {
+        this.radioTableTarget.querySelectorAll('input[type="radio"]').forEach((radio) => {
+            radio.addEventListener("change", () => {
+                this.CalculateGDS()
+            })
+        })
+    }
+
+    //GDS must be 88 if NOGDS checkbox is checked. Auto set for user on check
+    NOGDSBehavior() {
+        if (this.NOGDSInputTarget.checked) {
+            this.GDSInputTarget.value = 88
+        } else {
+            //recalculate GDS with enabled radios
+            this.CalculateGDS()
+        }
+    }
+}

src/UDS.Net.Forms/wwwroot/js/stimulus_controllers.js

@@ -8,6 +8,7 @@ import selectendpoint_controller from "./js_controllers/selectendpoint_controlle
 import checkboxSelectAll from "./js_controllers/checkboxSelectAll_controller.js"
 import rxNormDisplayNames from "./js_controllers/rxNormDisplayNames_controller.js"
 import autocomplete from "./js_controllers/autocomplete_controller.js"
+import b6 from "./js_controllers/b6_controller.js"
 
 window.Stimulus = Application.start()
 
@@ -20,3 +21,4 @@ Stimulus.register("selectendpoint", selectendpoint_controller)
 Stimulus.register("checkboxSelectAll", checkboxSelectAll)
 Stimulus.register("rxNormDisplayNames", rxNormDisplayNames)
 Stimulus.register("autocomplete", autocomplete)
+Stimulus.register("b6", b6)