CSR-254: updates for recent changes to buttons

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

@@ -33,12 +33,13 @@
               :colLength="this.answers.length < 3 ? '' : '-4'"
               v-model="selectedValues"
               data-test="button"
+              :validationRules="validationRules"
             />
           </div>
       </fieldset>
-      <div v-show="errorMessage" class="row px-3 form-test-error">
-        {{ errorMessage }}
-      </div>
+    </div>
+    <div class="row px-3 my-6 form-test-error">
+        <error-message :name="groupName"></error-message>
     </div>
   </div>
 </template>
@@ -47,7 +48,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';
+import { useField, ErrorMessage } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -132,6 +133,9 @@ export default {
       this.$emit("update:modelValue", answer);
     },
     handleCheckedChanged(val) {
+
+      console.log('meta is now ', this.meta)
+
       // Add or remove item to array of data to emit
       val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
       const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
@@ -142,50 +146,29 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    ErrorMessage,
   },
-  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,
-      });
+  // 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,
-      };
-  },
+      // return {
+      //   // handleChange,
+      //   // handleBlur,
+      //   errorMessage,
+      //   // inputValue,
+      //   meta,
+      // };
+  // },
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="replace-options-question">
+    <div class="damage-location-question">
         I AM DAMAGE LOCATION QUESTION
         groupName is: {{groupName}}
         <buttonQuestion
@@ -12,6 +12,7 @@
             v-model="selectedValues"
             :validationRules="setValidationRules()"
         />
+        
     </div>
 </template>
 
@@ -55,10 +56,10 @@ export default ({
                     test: (value) => {
                         // console.log('required value is... ', value);
                         if (!value || value.length < 1) {
-                            // console.log('return false')
+                            console.log('DLQ should return false')
                             return false;
                         }
-                        // console.log('no if, return true')
+                        console.log('DLQ should return true')
                         return true;
                     },
                     error: 'Please select damage location'

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

@@ -1,6 +1,8 @@
 <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"
@@ -9,6 +11,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                :validationRules="setValidationRules()"
             />
         </div>
     </transition>
@@ -40,7 +43,26 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             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

@@ -18,13 +18,18 @@
             isMultiSelect
             v-model="damageLocationQuestionData"
           />
-          <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
+          <replaceOptionsQuestion
+            ref="driverSideOptions"
+            isAvailable
+            isMultiSelect
+            v-model="driverSideOptionsData"
+          />
           <funnel-footer
             :isDisabled="!meta.valid"
           />
 
           <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-            <p>Current Form Values:</p>
+            <p>Current Form, values:</p>
             <pre>{{ values }}</pre>
             <p>Is Form Valid? (Meta.valid):</p>
             <pre>{{ meta.valid }}</pre>

src/ux-components/button-main/button-main.vue

@@ -1,5 +1,11 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn d-flex align-items-center py-3 px-4"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    @click="clicked()"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
@@ -30,8 +36,8 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
-      this.$emit("click-event");
+      // this.isLoaderDisplayed = true;
+      // this.$emit("click-event");
     },
   },
   components: {

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

@@ -1,11 +1,11 @@
 <template>
   <div :class="'col' + colLength">
     I AM LIST CARD, 
-        buttonID is: {{buttonID}}
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-    :class="isWide ? 'horizontal' : ''"
-    @mouseup="handleChange(value)"
-    @keyup.space="handleChange(value)">
+        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"