CSR-254: move validation into child elements

2022-02-09 17:23:06 -05:00 · 2022-02-09 17:23:06 -05:00 · 8ddf244a5e
commit 8ddf244a5e
parent ae56ff6d43
7 changed files with 127 additions and 203 deletions
--- a/src/common-components/button-question/button-question.vue
+++ b/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>

--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/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: {
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/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: {
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/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 }"
-        >
-          <damageLocationQuestion
-            ref="damageLocation"
-            v-model="selectedDamageLocations"
-            groupName="DamageLocationQuestion"
-          />
-          <windshieldOptions
-            ref="windshieldOptions"
-            :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-          />
-          <replaceOptionsQuestion
-            ref="driverSideOptions"
-            isAvailable
-            v-model="driverSideOptionsData"
-            groupName="DriverSideReplaceOptionsQuestion"
-          />
-          <funnel-footer
-            :isDisabled="!meta.valid"
-          />
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
+        >        
+            <damageLocationQuestion
+              ref="damageLocation"
+              v-model="selectedDamageLocations"
+              groupName="DamageLocationQuestion"
+            />
+            <windshieldOptions
+              ref="windshieldOptions"
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            />
+            <alert
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              alertClass="alert-danger"
+              alertHeadline="You'll need to schedule separate appointments"
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              :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">
-            <p>Current Form, values:</p>
-            <pre>{{ values }}</pre>
-            <p>Is Form Valid? (Meta.valid):</p>
-            <pre>{{ meta.valid }}</pre>
-          </div>
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION 
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+              <p>Current Form, values:</p>
+              <pre>{{ values }}</pre>
+              <p>Errors:</p>
+              <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>
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/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: {
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/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,
--- a/src/ux-components/list-card/list-card.vue
+++ b/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
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
-        :id="buttonID"
-        :name="groupName"
-        :value="buttonID"
-        :aria-required="isRequired"
-        :data-focus-target="groupName"
-        @click="handleChange(value)"
-        v-model="checkValue"
-        @change="handleCheckChange"
-       />
-      <label
-        :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
-        :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'"
+        <input
+          :type="isMultiSelect ? 'checkbox' : 'radio'"
+          :id="buttonID"
+          :name="groupName"
+          :value="buttonID"
+          :aria-required="isRequired"
+          :data-focus-target="groupName"
+          @click="handleChange(value)"
+          v-model="checkValue"
+          @change="handleCheckChange"
+        />
+        <label
+          :for="buttonID"
+          class="d-flex w-100 align-items-center px-2 h-100"
+          :class="getLabelClasses" tabindex="-1"
        >
-          {{buttonLabel}}
-        </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
-          {{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 }}
+          <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}}
          </p>
-        </div>
-      </label>
+          <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+            {{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, 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;
-        }
-    }, 
+    } = useField(groupName, props.validationRules, 
    {
      type: inputType,
      checkedValue: value,
    });
    return {
      handleChange,
-      // handleBlur,
-      // errorMessage,
-      // inputValue,
-      // meta,
    };
  },
 };