From e757faaebe10337619171d5e9c8e17e28ed651a7 Mon Sep 17 00:00:00 2001
From: axn9t9 <46301114+axn9t9@users.noreply.github.com>
Date: Sat, 24 Apr 2021 17:22:28 -0400
Subject: [PATCH 1/3] Format

---
 .../VaccinationScreeningComponent.vue         | 560 ++++++++++++------
 1 file changed, 365 insertions(+), 195 deletions(-)

diff --git a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
index ecee5501..b4db94f2 100644
--- a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
+++ b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
@@ -5,25 +5,38 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">1. Are you feeling sick today?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >1. Are you feeling sick today?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ1" 
-            row 
+          <v-radio-group
+            v-model="screeningQ1"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
-    </v-row> 
+    </v-row>
     <v-row>
       <v-divider></v-divider>
     </v-row>
@@ -32,48 +45,83 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">2. Have you ever received a dose of COVID-19 Vaccine?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >2. Have you ever received a dose of COVID-19 Vaccine?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ2" 
-            row 
+          <v-radio-group
+            v-model="screeningQ2"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
       <!--blank column to indent this question-->
-      <v-col cols="1">
-      </v-col>
+      <v-col cols="1"> </v-col>
       <v-col cols="4">
         <v-row>
-          <v-radio-group :disabled="(this.screeningQ2 != 'Yes')">
+          <v-radio-group :disabled="this.screeningQ2 != 'Yes'">
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="secondary--text">Which vaccine product did you receive?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="secondary--text"
+                  >Which vaccine product did you receive?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="7">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ2b" 
-            row 
-            @change="screeningChecklistUpdate()" 
-            :disabled="this.screeningQ2 != 'Yes' || isConsentScreeningPageReadOnly">
-            <v-radio label="Pfizer" value="Pfizer" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="Moderna" value="Moderna" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="Other" value="Other" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="I don't know" value="I don't know" class="font-weight-medium secondary--text"></v-radio>
+          <v-radio-group
+            v-model="screeningQ2b"
+            row
+            @change="screeningChecklistUpdate()"
+            :disabled="
+              this.screeningQ2 != 'Yes' || isConsentScreeningPageReadOnly
+            "
+          >
+            <v-radio
+              label="Pfizer"
+              value="Pfizer"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="Moderna"
+              value="Moderna"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="Other"
+              value="Other"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="I don't know"
+              value="I don't know"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -86,10 +134,19 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="font-weight-medium secondary--text">3. Have you ever had an allergic reaction to:</span><br>
-              <span style="font-size:.8rem">(This would include a severe allergic reaction [e.g. anaphylaxis] that required treatment with epinephrine 
-              or EpiPen or that caused you to go to the hospital.  It would also include an allergic reaction that 
-              occurred within 4 hours that caused hives, swelling, or respiratory distress, including wheezing.)</span></div>
+              <div>
+                <span class="font-weight-medium secondary--text"
+                  >3. Have you ever had an allergic reaction to:</span
+                ><br />
+                <span style="font-size:.8rem"
+                  >(This would include a severe allergic reaction [e.g.
+                  anaphylaxis] that required treatment with epinephrine or
+                  EpiPen or that caused you to go to the hospital. It would also
+                  include an allergic reaction that occurred within 4 hours that
+                  caused hives, swelling, or respiratory distress, including
+                  wheezing.)</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
@@ -97,78 +154,113 @@
         <v-row><p></p></v-row>
       </v-col>
       <!--blank column to indent this question-->
-      <v-col cols="1">
-      </v-col>
+      <v-col cols="1"> </v-col>
       <v-col cols="9">
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="secondary--text">A component of the COVID-19 vaccine, including polyethylene 
-              glycol (PEG), which is found in some medications, such as laxatives and preparations for colonoscopy procedures.</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="secondary--text"
+                  >A component of the COVID-19 vaccine, including polyethylene
+                  glycol (PEG), which is found in some medications, such as
+                  laxatives and preparations for colonoscopy procedures.</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ3a" 
-            row 
+          <v-radio-group
+            v-model="screeningQ3a"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
       <!--blank column to indent this question-->
-      <v-col cols="1">
-      </v-col>
+      <v-col cols="1"> </v-col>
       <v-col cols="9">
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="secondary--text">Polysorbate</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="secondary--text">Polysorbate</span>
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ3b" 
-            row 
+          <v-radio-group
+            v-model="screeningQ3b"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
       <!--blank column to indent this question-->
-      <v-col cols="1">
-      </v-col>
+      <v-col cols="1"> </v-col>
       <v-col cols="9">
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="secondary--text">A previous dose of COVID-19 vaccine</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="secondary--text"
+                  >A previous dose of COVID-19 vaccine</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ3c" 
-            row 
+          <v-radio-group
+            v-model="screeningQ3c"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -181,10 +273,21 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">4. Have you ever had an allergic reaction to another vaccine (other than COVID-19 vaccine) or an injectable medication?<br></span>
-              <span style="font-size:.8rem">(This would include a severe allergic reaction [e.g. anaphylaxis] that required treatment with epinephrine or EpiPen or that caused you to go to the hospital.  
-              It would also include an allergic reaction that occurred within 4 hours that caused hives, swelling, or respiratory distress, including wheezing.)</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >4. Have you ever had an allergic reaction to another vaccine
+                  (other than COVID-19 vaccine) or an injectable medication?<br
+                /></span>
+                <span style="font-size:.8rem"
+                  >(This would include a severe allergic reaction [e.g.
+                  anaphylaxis] that required treatment with epinephrine or
+                  EpiPen or that caused you to go to the hospital. It would also
+                  include an allergic reaction that occurred within 4 hours that
+                  caused hives, swelling, or respiratory distress, including
+                  wheezing.)</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
@@ -193,13 +296,22 @@
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ4" 
-            row 
+          <v-radio-group
+            v-model="screeningQ4"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -212,22 +324,38 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">5. Have you ever had a severe allergic reaction (e.g., anaphylaxis) to something other than a component of COVID-19 vaccine, polysorbate, 
-                or any vaccine or injectable medication? This would include food, pet, environmental, or oral medication allergies.</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >5. Have you ever had a severe allergic reaction (e.g.,
+                  anaphylaxis) to something other than a component of COVID-19
+                  vaccine, polysorbate, or any vaccine or injectable medication?
+                  This would include food, pet, environmental, or oral
+                  medication allergies.</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ5" 
-            row 
+          <v-radio-group
+            v-model="screeningQ5"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -240,21 +368,34 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">6. Have you received any vaccine in the last 14 days?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >6. Have you received any vaccine in the last 14 days?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ6" 
-            row 
+          <v-radio-group
+            v-model="screeningQ6"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -267,21 +408,35 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">7. Are you currently under isolation or quarantine due to COVID-19?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >7. Are you currently under isolation or quarantine due to
+                  COVID-19?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ7" 
-            row 
+          <v-radio-group
+            v-model="screeningQ7"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -294,21 +449,35 @@
         <v-row>
           <v-radio-group>
             <template v-slot:label>
-              <div><span class="red--text"><strong>* </strong></span>
-              <span class="font-weight-medium secondary--text">8. Have you received passive antibody therapy or convalescent plasma as treatment for COVID-19 in the past 90 days?</span></div>
+              <div>
+                <span class="red--text"><strong>* </strong></span>
+                <span class="font-weight-medium secondary--text"
+                  >8. Have you received passive antibody therapy or convalescent
+                  plasma as treatment for COVID-19 in the past 90 days?</span
+                >
+              </div>
             </template>
           </v-radio-group>
         </v-row>
       </v-col>
       <v-col cols="2">
         <v-row align="center" justify="end">
-          <v-radio-group 
-            v-model="screeningQ8" 
-            row 
+          <v-radio-group
+            v-model="screeningQ8"
+            row
             @change="screeningChecklistUpdate()"
-            :disabled="isConsentScreeningPageReadOnly">
-            <v-radio label="Yes" value="Yes" class="font-weight-medium secondary--text"></v-radio>
-            <v-radio label="No" value="No" class="font-weight-medium secondary--text"></v-radio>
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio
+              label="Yes"
+              value="Yes"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
+            <v-radio
+              label="No"
+              value="No"
+              class="font-weight-medium secondary--text"
+            ></v-radio>
           </v-radio-group>
         </v-row>
       </v-col>
@@ -316,70 +485,70 @@
     <v-row>
       <v-divider></v-divider>
     </v-row>
-      <v-col cols="12">
-        <v-card class="mx-auto my-12" color="accent" dark height="50%" v-show="screeningComplete">
-          <v-card-title class="headline justify-center">
-              Proceed with vaccination?
-          </v-card-title>
-          <v-row align="center" justify="center">
-            <v-radio-group 
-              v-model="vaccinationProceed" 
-              row 
-              @change="vaccinationProceedDecision()"
-              :disabled="isConsentScreeningPageReadOnly">
-                  <v-radio
-                    label="Yes"
-                    value="Yes"
-                  ></v-radio>
-                  <v-radio
-                    label="No"
-                    value="No"
-                  ></v-radio>
-              </v-radio-group>
-          </v-row>
-        </v-card>
-      </v-col>
+    <v-col cols="12">
+      <v-card
+        class="mx-auto my-12"
+        color="accent"
+        dark
+        height="50%"
+        v-show="screeningComplete"
+      >
+        <v-card-title class="headline justify-center">
+          Proceed with vaccination?
+        </v-card-title>
+        <v-row align="center" justify="center">
+          <v-radio-group
+            v-model="vaccinationProceed"
+            row
+            @change="vaccinationProceedDecision()"
+            :disabled="isConsentScreeningPageReadOnly"
+          >
+            <v-radio label="Yes" value="Yes"></v-radio>
+            <v-radio label="No" value="No"></v-radio>
+          </v-radio-group>
+        </v-row>
+      </v-card>
+    </v-col>
   </v-container>
 </template>
 
 <script>
-
-  export default {
-    name: 'VaccinationScreeningComponent',
-    computed: {
-      isConsentScreeningPageReadOnly() {
-        return this.$store.getters.isConsentScreeningPageReadOnly
-      },
+export default {
+  name: "VaccinationScreeningComponent",
+  computed: {
+    isConsentScreeningPageReadOnly() {
+      return this.$store.getters.isConsentScreeningPageReadOnly;
+    },
+  },
+  methods: {
+    screeningChecklistUpdate() {
+      if (this.isScreeningChecklistComplete()) {
+        this.screeningComplete = true;
+      } else {
+        this.screeningComplete = false;
+      }
+      this.storeVaccinationScreeningData();
+    },
+    isScreeningChecklistComplete() {
+      return !(
+        this.screeningQ1 == "" ||
+        this.screeningQ2 == "" ||
+        (this.screeningQ2 == "Yes" && this.screeningQ2b == "") ||
+        this.screeningQ3a == "" ||
+        this.screeningQ3b == "" ||
+        this.screeningQ3c == "" ||
+        this.screeningQ4 == "" ||
+        this.screeningQ5 == "" ||
+        this.screeningQ6 == "" ||
+        this.screeningQ7 == "" ||
+        this.screeningQ8 == ""
+      );
+    },
+    vaccinationProceedDecision() {
+      this.storeVaccinationScreeningData();
     },
-    methods: 
-    {
-     screeningChecklistUpdate()
-     {
-       if(this.isScreeningChecklistComplete())
-       {
-         this.screeningComplete = true
-       }
-       else
-       {
-         this.screeningComplete = false
-       }
-       this.storeVaccinationScreeningData()
-     },
-     isScreeningChecklistComplete()
-     {
-       return !((this.screeningQ1 == "") || (this.screeningQ2 == "") || 
-        ((this.screeningQ2 == 'Yes') && (this.screeningQ2b == '')) || 
-        (this.screeningQ3a == "") || (this.screeningQ3b == "") || (this.screeningQ3c == "") || 
-        (this.screeningQ4 == "") || (this.screeningQ5 == "") || (this.screeningQ6 == "") || 
-        (this.screeningQ7 == "") || (this.screeningQ8 == "")); 
-     },
-     vaccinationProceedDecision()
-     {
-       this.storeVaccinationScreeningData()
-     },
-     storeVaccinationScreeningData()
-     {
-       const screeningResponsesPayload = {
+    storeVaccinationScreeningData() {
+      const screeningResponsesPayload = {
         vaccinationDecision: this.vaccinationProceed,
         screeningQ1: this.screeningQ1,
         screeningQ2: this.screeningQ2,
@@ -392,38 +561,39 @@
         screeningQ6: this.screeningQ6,
         screeningQ7: this.screeningQ7,
         screeningQ8: this.screeningQ8,
-        screeningComplete: this.screeningComplete
-      }
+        screeningComplete: this.screeningComplete,
+      };
       //send data to Vuex
-      this.$store.dispatch('vaccinationScreeningUpdate', screeningResponsesPayload)
-     }
-    },
-    components: 
-    {
+      this.$store.dispatch(
+        "vaccinationScreeningUpdate",
+        screeningResponsesPayload
+      );
     },
-    data () {
-      return {
-        vaccinationProceed: this.$store.state.screeningResponses.vaccinationDecision,
-        screeningQ1: this.$store.state.screeningResponses.screeningQ1,
-        screeningQ2: this.$store.state.screeningResponses.screeningQ2,
-        screeningQ2b: this.$store.state.screeningResponses.screeningQ2b,
-        screeningQ3a: this.$store.state.screeningResponses.screeningQ3a,
-        screeningQ3b: this.$store.state.screeningResponses.screeningQ3b,
-        screeningQ3c: this.$store.state.screeningResponses.screeningQ3c,
-        screeningQ4: this.$store.state.screeningResponses.screeningQ4,
-        screeningQ5: this.$store.state.screeningResponses.screeningQ5,
-        screeningQ6: this.$store.state.screeningResponses.screeningQ6,
-        screeningQ7: this.$store.state.screeningResponses.screeningQ7,
-        screeningQ8: this.$store.state.screeningResponses.screeningQ8,
-        screeningComplete: this.$store.state.screeningResponses.screeningComplete,
-      }
-    }
-  }
+  },
+  components: {},
+  data() {
+    return {
+      vaccinationProceed: this.$store.state.screeningResponses
+        .vaccinationDecision,
+      screeningQ1: this.$store.state.screeningResponses.screeningQ1,
+      screeningQ2: this.$store.state.screeningResponses.screeningQ2,
+      screeningQ2b: this.$store.state.screeningResponses.screeningQ2b,
+      screeningQ3a: this.$store.state.screeningResponses.screeningQ3a,
+      screeningQ3b: this.$store.state.screeningResponses.screeningQ3b,
+      screeningQ3c: this.$store.state.screeningResponses.screeningQ3c,
+      screeningQ4: this.$store.state.screeningResponses.screeningQ4,
+      screeningQ5: this.$store.state.screeningResponses.screeningQ5,
+      screeningQ6: this.$store.state.screeningResponses.screeningQ6,
+      screeningQ7: this.$store.state.screeningResponses.screeningQ7,
+      screeningQ8: this.$store.state.screeningResponses.screeningQ8,
+      screeningComplete: this.$store.state.screeningResponses.screeningComplete,
+    };
+  },
+};
 </script>
 <style lang="css" scoped>
-
 .v-input--selection-controls {
   margin-top: 1px;
   padding-top: 1px;
-}	
+}
 </style>

From e51072057348de02dcf65182657126304ffa1d25 Mon Sep 17 00:00:00 2001
From: axn9t9 <46301114+axn9t9@users.noreply.github.com>
Date: Sat, 24 Apr 2021 17:27:36 -0400
Subject: [PATCH 2/3] Validate with vue forms

---
 .../VaccinationScreeningComponent.vue         | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
index b4db94f2..5d43a940 100644
--- a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
+++ b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
@@ -1,5 +1,6 @@
 <template>
   <v-container fill-height fluid>
+    <v-form ref="form" v-model="screeningComplete">
     <v-row>
       <v-col cols="10">
         <v-row>
@@ -22,6 +23,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -62,6 +64,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -101,6 +104,7 @@
             :disabled="
               this.screeningQ2 != 'Yes' || isConsentScreeningPageReadOnly
             "
+            :rules="screeningQ2 == 'Yes' ? rules.required : []"
           >
             <v-radio
               label="Pfizer"
@@ -178,6 +182,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -213,6 +218,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -250,6 +256,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -301,6 +308,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -345,6 +353,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -385,6 +394,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -426,6 +436,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -467,6 +478,7 @@
             row
             @change="screeningChecklistUpdate()"
             :disabled="isConsentScreeningPageReadOnly"
+            :rules="rules.required"
           >
             <v-radio
               label="Yes"
@@ -485,6 +497,7 @@
     <v-row>
       <v-divider></v-divider>
     </v-row>
+    </v-form>
     <v-col cols="12">
       <v-card
         class="mx-auto my-12"
@@ -513,6 +526,8 @@
 </template>
 
 <script>
+import Rules from "@/utils/commonFormValidation"
+
 export default {
   name: "VaccinationScreeningComponent",
   computed: {
@@ -522,28 +537,9 @@ export default {
   },
   methods: {
     screeningChecklistUpdate() {
-      if (this.isScreeningChecklistComplete()) {
-        this.screeningComplete = true;
-      } else {
-        this.screeningComplete = false;
-      }
+      this.$refs.form.validate();
       this.storeVaccinationScreeningData();
     },
-    isScreeningChecklistComplete() {
-      return !(
-        this.screeningQ1 == "" ||
-        this.screeningQ2 == "" ||
-        (this.screeningQ2 == "Yes" && this.screeningQ2b == "") ||
-        this.screeningQ3a == "" ||
-        this.screeningQ3b == "" ||
-        this.screeningQ3c == "" ||
-        this.screeningQ4 == "" ||
-        this.screeningQ5 == "" ||
-        this.screeningQ6 == "" ||
-        this.screeningQ7 == "" ||
-        this.screeningQ8 == ""
-      );
-    },
     vaccinationProceedDecision() {
       this.storeVaccinationScreeningData();
     },
@@ -573,6 +569,7 @@ export default {
   components: {},
   data() {
     return {
+      rules: Rules,
       vaccinationProceed: this.$store.state.screeningResponses
         .vaccinationDecision,
       screeningQ1: this.$store.state.screeningResponses.screeningQ1,

From 8477c095494b6c1870fd9e001cd9c0f984c0b8fa Mon Sep 17 00:00:00 2001
From: axn9t9 <46301114+axn9t9@users.noreply.github.com>
Date: Mon, 26 Apr 2021 23:22:20 -0400
Subject: [PATCH 3/3] Lazy validate

---
 .../src/components/VaccinationScreeningComponent.vue             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
index 5d43a940..9212a011 100644
--- a/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
+++ b/PointOfDispensingApp/src/components/VaccinationScreeningComponent.vue
@@ -537,7 +537,6 @@ export default {
   },
   methods: {
     screeningChecklistUpdate() {
-      this.$refs.form.validate();
       this.storeVaccinationScreeningData();
     },
     vaccinationProceedDecision() {