CSR-254: move validation into child elements

src/common-components/button-question/button-question.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    I AM THE BUTTON QUESTION, groupName is: {{groupName}}
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
@@ -38,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error">
+    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
@@ -48,7 +47,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import { useField, ErrorMessage } from 'vee-validate';
+import { ErrorMessage } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -82,9 +81,10 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: Array,
-    validationRules: Array,
+    validationRules: String,
     name: String,
     value: String,
+    suppressError: Boolean,
   },
   computed: {
     getFieldSetClasses() {
@@ -125,7 +125,6 @@ export default {
   },
   methods: {
     chooseAnswer(answer) {
-      console.log('method: chooseAnswer, answer: ', answer);
       this.$emit("update:modelValue", answer);
     },
     handleCheckedChanged(val) {
@@ -145,27 +144,6 @@ export default {
     listCard,
     ErrorMessage,
   },
-  // setup(props) {
-      // console.log('button-question running setup');
-      // const { 
-      //     value: inputValue,
-      //     errorMessage,
-      //     handleBlur,
-      //     handleChange,
-      //     meta,
-      // } = useField(props.groupName, undefined, {
-      //     type: 'checkbox',
-      //     checkedValue: props.value,
-      // });
-  
-      // return {
-      //   // handleChange,
-      //   // handleBlur,
-      //   errorMessage,
-      //   // inputValue,
-      //   meta,
-      // };
-  // },
 };
 </script>
 

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -1,7 +1,5 @@
 <template>
     <div class="damage-location-question">
-        I AM DAMAGE LOCATION QUESTION
-        groupName is: {{groupName}}
         <buttonQuestion
             v-if="answersToDisplay.length > 1"
             :questionText="questionText"
@@ -10,7 +8,7 @@
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
-            :validationRules="setValidationRules()"
+            validationRules="damage-location-required"
         />
         
     </div>
@@ -19,7 +17,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-import { rules } from '@/helpers/validation-rules';
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-location-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select damage location";
+    }
+    return true;
+});
 
 export default ({
     name: "damageLocationQuestion",
@@ -40,32 +46,10 @@ export default ({
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
-            // console.log('cmsContent: ', cmsContent)
-            // console.log('damageOptions: ', damageOptions)
-
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('DLQ should return false')
-                            return false;
-                        }
-                        console.log('DLQ should return true')
-                        return true;
-                    },
-                    error: 'Please select damage location'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,8 +1,6 @@
 <template>
     <transition name="fade">
         <div class="replace-options-question">
-            I AM REPLACE OPTIONS QUESTION
-        groupName is: {{groupName}}
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 1"
                 :questionText="questionText"
@@ -11,7 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                :validationRules="setValidationRules()"
+                validationRules="replace-options-required"
             />
         </div>
     </transition>
@@ -20,6 +18,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -42,25 +49,6 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('ROQ required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('ROQ should return false')
-                            return false;
-                        }
-                        console.log('ROQ should return true')
-                        return true;
-                    },
-                    error: 'Please select damage location'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="container-fluid shadow rounded-3 p-2 position-relative">
-        I AM VEHICLE DAMAGE
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader 
@@ -10,33 +9,45 @@
         <Form
           @submit="onSubmit"
           @invalid-submit="onInvalidSubmit"
-          v-slot="{ values, meta }"
+          ref="theForm"
-        >
+          v-slot="{ values, meta, errors }"
-          <damageLocationQuestion
+        >        
-            ref="damageLocation"
+            <damageLocationQuestion
-            v-model="selectedDamageLocations"
+              ref="damageLocation"
-            groupName="DamageLocationQuestion"
+              v-model="selectedDamageLocations"
-          />
+              groupName="DamageLocationQuestion"
-          <windshieldOptions
+            />
-            ref="windshieldOptions"
+            <windshieldOptions
-            :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              ref="windshieldOptions"
-          />
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-          <replaceOptionsQuestion
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
-            ref="driverSideOptions"
+            />
-            isAvailable
+            <alert
-            v-model="driverSideOptionsData"
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
-            groupName="DriverSideReplaceOptionsQuestion"
+              alertClass="alert-danger"
-          />
+              alertHeadline="You'll need to schedule separate appointments"
-          <funnel-footer
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
-            :isDisabled="!meta.valid"
+              :isDismissible="false"
-          />
+            />
+            <replaceOptionsQuestion
+              ref="driverSideOptions"
+              isAvailable
+              v-model="driverSideOptionsData"
+              groupName="DriverSideReplaceOptionsQuestion"
+            />
+            <funnel-footer
+              :isDisabled="!meta.valid"
+            />
 
-          <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION 
-            <p>Current Form, values:</p>
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-            <pre>{{ values }}</pre>
+              <p>Current Form, values:</p>
-            <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ values }}</pre>
-            <pre>{{ meta.valid }}</pre>
+              <p>Errors:</p>
-          </div>
+              <pre>{{ errors }}</pre>
+              <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ meta.valid }}</pre>
+            </div> -->
 
         </Form>
     </div>
@@ -50,11 +61,11 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
-import textInput from "@/common-components/text-input/text-input";
+import alert from "@/ux-components/alert/alert";
 
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 
-import { Form, ErrorMessage } from 'vee-validate';
+import { Form } from 'vee-validate';
 
 
 // Supporting files
@@ -124,7 +135,7 @@ export default {
     replaceOptionsQuestion,
     funnelFooter,
     windshieldOptions,
-    // textInput,
+    alert,
   },
   methods: {
     arePagePrerequisitesValid() {
@@ -144,14 +155,14 @@ export default {
       console.log("errors: ", errors);
       console.log("results: ", results);
       // get errorEls and order by alpha
-      const errorEls = Object.keys(errors).sort();
+      const errorEls = errors ? Object.keys(errors) : [];
       const firstErrorEl = errorEls[0];
-      console.log('firstErrorEl: ', firstErrorEl);
       if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
-    }
+    },
   },
 };
 </script>

src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -1,7 +1,5 @@
 <template>
     <div class="windshield-damage-type-question">
-        I AM WINDSHIELD DAMAGE TYPE QUESTION
-        isAvailable is: {{isAvailable}}
         <buttonQuestion
             v-if="isAvailable && answersToDisplay.length > 1"
             :questionText="questionText"
@@ -9,7 +7,8 @@
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
-            :validationRules="setValidationRules()"
+            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :suppressError="suppressError"
         />
     </div>
 </template>
@@ -17,6 +16,21 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
 
 export default ({
     name: "windshieldDamageTypeQuestion",
@@ -33,6 +47,7 @@ export default ({
         isAvailable: Boolean,
         name: String,
         groupName: String,
+        suppressError: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
@@ -40,25 +55,6 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('WDTQ should return false')
-                            return false;
-                        }
-                        console.log('WDTQ should return true')
-                        return true;
-                    },
-                    error: 'Please select windshield damage'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="windshield-options">
-        I AM WINDSHIELD OPTIONS
         <windshieldDamageTypeQuestion
             ref="windshieldDamageType"
             v-model="selectedWindshieldDamageTypes"
             groupName="windshieldDamageTypeQuestion"
             :isAvailable="showWindshieldDamageTypeQuestion"
+            :suppressError="suppressError"
         />
     </div>
 </template>
@@ -17,6 +17,7 @@ export default ({
     name: "windshieldOptions",
     props: {
         showWindshieldDamageTypeQuestion: Boolean,
+        suppressError: Boolean,
     },
     components: {
         windshieldDamageTypeQuestion,

src/ux-components/list-card/list-card.vue

@@ -1,50 +1,48 @@
 <template>
   <div :class="'col' + colLength">
-    I AM LIST CARD, 
-        isMultiSelect is: {{isMultiSelect}}
     <div 
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="isWide ? 'horizontal' : ''"
     >
-      <input
+        <input
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
+          :type="isMultiSelect ? 'checkbox' : 'radio'"
-        :id="buttonID"
+          :id="buttonID"
-        :name="groupName"
+          :name="groupName"
-        :value="buttonID"
+          :value="buttonID"
-        :aria-required="isRequired"
+          :aria-required="isRequired"
-        :data-focus-target="groupName"
+          :data-focus-target="groupName"
-        @click="handleChange(value)"
+          @click="handleChange(value)"
-        v-model="checkValue"
+          v-model="checkValue"
-        @change="handleCheckChange"
+          @change="handleCheckChange"
-       />
+        />
-      <label
+        <label
-        :for="buttonID"
+          :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
+          class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses" tabindex="-1"
+          :class="getLabelClasses" tabindex="-1"
-      >
-        <img
-          :id="buttonImageId"
-          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-          :src="buttonImage"
-          :alt="altText"
-         />
-        <p
-          v-if="!isWide"
-          class="small order-3"
-          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{buttonLabel}}
+          <img
-        </p>
+            :id="buttonImageId"
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+            :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-          {{buttonLabelSubCopy}}
+            :src="buttonImage"
-        </p>
+            :alt="altText"
-        <div v-if="isWide" class="order-2">
+          />
-          <p class="m-0 small">{{ buttonLabel }}</p>
+          <p
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+            v-if="!isWide"
-            {{ buttonLabelSubCopy }}
+            class="small order-3"
+            :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+          >
+            {{buttonLabel}}
           </p>
-        </div>
+          <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
-      </label>
+            {{buttonLabelSubCopy}}
+          </p>
+          <div v-if="isWide" class="order-2">
+            <p class="m-0 small">{{ buttonLabel }}</p>
+            <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+              {{ buttonLabelSubCopy }}
+            </p>
+          </div>
+        </label>
     </div>
   </div>
 </template>
@@ -74,7 +72,7 @@ export default {
       default: "",
     },
     colLength: String,
-    validationRules: Array,
+    validationRules: String,
     selectedButtonIDs: [Array, String],
   },
   data(){
@@ -108,52 +106,20 @@ export default {
       }
     }
   },
-  // methods: {
-  //   handleClick(value) {
-  //     console.log('run handleChange, value is: ', value);
-  //     this.handleChange(value);
-  //   }
-  // },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    console.log('LC value.value is: ', value.value)
-
     const { 
         value: inputValue,
-        errorMessage,
-        handleBlur,
         handleChange,
-        meta, 
+    } = useField(groupName, props.validationRules, 
-    } = useField(groupName, value => {
-        if (props.validationRules) {
-          let validationResults = [];
-
-          props.validationRules.forEach((rule) => {
-              console.log("LC 2value is: ", value)
-              // console.log("2inputValue is: ", inputValue);
-              if (!rule.test(value)) {
-              // console.log('uh oh, returning error!', rule.error)
-              validationResults.push(rule.error);
-              }
-          });
-
-          return (validationResults.length > 0) ? validationResults[0] : true;
-        } else {
-          return true;
-        }
-    }, 
     {
       type: inputType,
       checkedValue: value,
     });
     return {
       handleChange,
-      // handleBlur,
-      // errorMessage,
-      // inputValue,
-      // meta,
     };
   },
 };