CSR-254: set up damage-location-question

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

@@ -1,5 +1,6 @@
 <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
@@ -28,11 +29,14 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :value="modelValue"
+              :value="answer.Name ? answer.Name : answer"
               data-test="button"
             />
           </div>
       </fieldset>
+      <div v-show="errorMessage" class="row px-3 form-test-error">
+        {{ errorMessage }}
+      </div>
     </div>
   </div>
 </template>
@@ -41,6 +45,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 } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -74,6 +79,9 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: String,
+    validationRules: Array,
+    name: String,
+    value: String,
   },
   computed: {
     getFieldSetClasses(){
@@ -97,6 +105,7 @@ export default {
   },
   methods: {
     chooseAnswer(answer) {
+      console.log('method: chooseAnswer, answer: ', answer);
       this.$emit("update:modelValue", answer);
     },
   },
@@ -105,6 +114,49 @@ export default {
     listButtonHorizontal,
     listCard
   },
+  setup(props) {
+      console.log('button-question running setup');
+      const { 
+          value: inputValue,
+          errorMessage,
+          handleBlur,
+          handleChange,
+          meta,
+      } = useField(props.groupName, value => {
+        if (props.validationRules) {
+          // console.log('props.validationRules is: ', props.validationRules);
+
+          // console.log("value is: ", value)
+          // console.log("inputValue is: ", inputValue);
+
+          let validationResults = [];
+
+          props.validationRules.forEach((rule) => {
+              console.log("BQ 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: 'checkbox',
+          checkedValue: props.value,
+      });
+  
+      return {
+        // handleChange,
+        // handleBlur,
+        errorMessage,
+        // inputValue,
+        meta,
+      };
+  },
 };
 </script>
 

src/common-components/funnel-footer/funnel-footer.vue

@@ -0,0 +1,22 @@
+<!-- Simple implementation of an input field -->
+<template>
+  <div class="d-block w-50 mb-2">
+    <h3>I AM FUNNEL FOOTER</h3>
+    <button
+        class="mb-6"
+        :class="isDisabled && 'form-test-invalid'"
+        :aria-disabled="isDisabled"
+    >
+        Get your estimate
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "funnelFooter",
+  props: {
+      isDisabled: Boolean,
+  },
+};
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+    <div class="damage-location-question">
+        I AM DAMAGE LOCATION QUESTION
+        groupName is: {{groupName}}
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplayTemp.length > 1"
+            :questionText="questionText"
+            :isMultiSelect="isMultiSelect"
+            :answers="answersToDisplayTemp"
+            groupName="damageLocation"
+            buttonType="listCard"
+            :modelValue="modelValue"
+            :validationRules="setValidationRules()"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+import { rules } from '@/helpers/validation-rules';
+
+export default ({
+    name: "damageLocationQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            answersToDisplay: Array,
+            answersToDisplayTemp: [
+                {
+                    Name: 'windshield-damage',
+                    Text: 'Windshield',
+                    AnswerImageUrl: 'windshield-damage.svg',
+                    ImageId: 'windshield-damage',
+                },
+                {
+                    Name: 'side-window-damage-left-all',
+                    Text: 'Side Door',
+                    AnswerImageUrl: 'side-window-damage-left-all.svg',
+                    ImageId: 'side-window-damage-left-all',
+                },
+                {
+                    Name: 'back-glass-damage',
+                    Text: 'Rear Window',
+                    AnswerImageUrl: 'back-glass-damage.svg',
+                    ImageId: 'back-glass-damage',
+                }
+            ],
+            damageOptions: Array,
+            groupName: String,
+        }
+    },
+    props: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
+        isMultiSelect: Boolean,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        modelValue: String,
+        validationRules: Array,
+        name: String,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            console.log('cmsContent: ', cmsContent)
+            console.log('damageOptions: ', damageOptions)
+
+            this.groupName = cmsContent.Name;
+            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('return false')
+                            return false;
+                        }
+                        // console.log('no if, return true')
+                        return true;
+                    },
+                    error: 'Please select damage location'
+                }
+            ]
+
+            return rulesArray;
+        },
+    },
+    mounted(){
+        // console.log('this.answersFromCms: ', this.answersFromCms)
+        // this.answersToDisplay = this.answersFromCms.filter(ans => {
+        //     const name = ans.Name.split('-');
+        //     return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptions.includes(name[1]);
+        // });
+        // console.log('this.answersToDisplay: ', this.answersToDisplay)
+    },
+    watch: {
+        modelValue(val) {
+        this.$emit("update:modelValue", val);
+        }
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>

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

@@ -1,10 +1,35 @@
 <template>
     <div class="container-fluid shadow rounded-3 p-0 position-relative">
+        I AM VEHICLE DAMAGE
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          v-slot="{ values, meta }"
+        >
+          <damageLocationQuestion
+            ref="damageLocationQuestion"
+            name="test"
+            isAvailable
+            isMultiSelect
+          />
+          <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
+          <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>
+
+        </Form>
     </div>
 </template>
 
@@ -13,6 +38,15 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+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 textInput from "@/common-components/text-input/text-input";
+
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+
+import { Form, ErrorMessage } from 'vee-validate';
+
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -37,7 +71,7 @@ export default ({
             resultKey: "damageOptions",
             promise: damageOptionsPromise
         },
-        ];
+      ];
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -52,14 +86,45 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      // use resultMap.damageOptions for damage options
+      vm.$refs.damageLocationQuestion.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion
+      );
+      // vm.$refs.replaceOptionsQuestion.initializeComponent(
+      //   resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      // );
+      console.log(resultMap)
     });
     
   },
   components: {
+    Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    damageLocationQuestion,
+    // replaceOptionsQuestion,
+    funnelFooter,
+    // textInput,
+  },
+  methods: {
+    onSubmit(values) {
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+    onInvalidSubmit({ values, errors, results }) {
+      // identify the first error field and put focus on it
+      console.log("values: ", values);
+      console.log("errors: ", errors);
+      console.log("results: ", results);
+      // get errorEls and order by alpha
+      const errorEls = Object.keys(errors).sort();
+      const firstErrorEl = errorEls[0];
+      console.log('firstErrorEl: ', firstErrorEl);
+      if (firstErrorEl) {
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        document.querySelector(qsString).focus();
+      }
+    }
   },
 });
 </script>

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

@@ -1,8 +1,18 @@
 <template>
   <!-- Heavily documented below -->
   <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+    I AM LIST CARD, 
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
+        buttonID is: {{buttonID}}
+    <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)"
+      />
       <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'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -38,7 +48,8 @@ export default {
     value: { // Field initial value
       type: String,
       default: ""
-    }
+    },
+    validationRules: Array,
   },
   computed: {
     getLabelClasses(){
@@ -53,16 +64,52 @@ 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";
-    const { checked, handleChange } = useField(groupName, undefined, {
+
+    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;
+        }
+    }, 
+    {
       type: inputType,
       checkedValue: value,
     });
     return {
-      checked,
       handleChange,
+      // handleBlur,
+      // errorMessage,
+      // inputValue,
+      // meta,
     };
   },
 };