From 3707443e15b8364aff8ed5c8a16f0b745ad14b90 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 16 Sep 2022 09:12:59 -0400
Subject: [PATCH] CSR-762 Finish list-button

---
 .../button-question/button-question.vue       | 103 +++++++-----------
 .../button-wrapper/button-wrapper.vue         |  13 ++-
 .../year-question/year-question.vue           |  25 +++--
 src/mixins/button-mixin.js                    |   1 -
 src/ux-components/list-button/list-button.vue |  13 ++-
 5 files changed, 75 insertions(+), 80 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3300e4fe6..d5964fd2f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -39,20 +39,18 @@
         <div :class="getComponentLoopWrapperClasses">
           <div
             :class="getComponentWrapperClasses"
-            v-for="answer in answers"
+            v-for="answer in buttonsInfo"
             :key="answer.Name ? answer.Name : answer"
           >
           <component
               :is="buttonType"
-              :buttonLabel="
-                answer.Text ? answer.Text : getAnswerString(answer, 'Name')
-              "
-              :buttonLabelSubCopy="answer.SubText"
+              :buttonLabel="answer.buttonLabel"
+              :buttonLabelSubCopy="answer.buttonLabelSubCopy"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :value="answer.Name"
+              :value="answer.value"
               :modelValue="modelValue"
-              @change="(e) => test(e)"
+              @change="(e) => handleAnswerChange(e)"
             />
             
             <!-- <component
@@ -195,14 +193,25 @@ export default {
         return "";
       }
     },
-    selectedValues: {
-      get: function () {
-        return this.modelValue;
-      },
-      set: function (newValue) {
-        // this.$emit("update:modelValue", newValue);
-      },
-    },
+    // selectedValues: {
+    //   get: function () {
+    //     return this.modelValue;
+    //   },
+    //   set: function (newValue) {
+    //     // this.$emit("update:modelValue", newValue);
+    //   },
+    // },
+    buttonsInfo() {
+      return this.answers.map(answer => ({
+        buttonLabel: answer.Text ?? answer,
+        altText: answer.Name ? answer.Name : answer,
+        buttonLabelSubCopy: answer.SubText,
+        buttonImage: answer.AnswerImageUrl,
+        buttonImageId: answer.ImageId,
+        groupName: this.formatString(this.groupName),
+        value: this.useTextForValue ? answer.Text : (answer.Name ?? answer)
+      }))
+    }
   },
   methods: {
     formatString(str) {
@@ -226,56 +235,26 @@ export default {
             : this.formatString(answer.toString());
       }
     },
-    handleCheckedChanged(val) {
-      if (this.selectingInitiatesLoad) {
-        this.selectedValues = val.value;
-      } else {
-        if (Array.isArray(this.selectedValues)) {
-          const newSelectedValues = this.selectedValues;
-          val.checkValue
-            ? newSelectedValues.push(val.value)
-            : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
-          this.selectedValues = newSelectedValues;
-        } else {
-          this.selectedValues = val.value;
-        }
-      }
-      this.$emit("isCheckedChanged", val);
-    },
-    test(event) {
-      console.log(event)
-      this.$emit("update:modelValue", event);
-    },
-    // test(event, value) {
-    //   console.log(value)
-    //   console.log("BQ event: ", event)
-    //   let isChecked = event.target?.checked;
-    //   let valueToEmit;
-    //   if (this.isMultiSelect && this.modelValue instanceof Array) {
-    //     let newValue = [...this.modelValue];
-    //     const toggledValue = event.target?.value;
-    //     console.log("A: ", this.modelValue)
-    //     console.log("isChecked: ", isChecked)
-    //     console.log("value: ", toggledValue)
-    //     if (isChecked) {
-    //       newValue.push(toggledValue);
-    //     } else {
-    //       newValue.splice(newValue.indexOf(toggledValue), 1);
-    //     }
-    //     console.log("handleCheckboxChange: ", newValue);
-    //     // this.$emit("update:modelValue", newValue);
-    //     // this.$emit("update:value", newValue)
-
-    //     valueToEmit = newValue;
+    // handleCheckedChanged(val) {
+    //   if (this.selectingInitiatesLoad) {
+    //     this.selectedValues = val.value;
     //   } else {
-    //     console.log("handleRadioChange: ", isChecked);
-    //     // this.$emit("update:modelValue", value);
-    //     valueToEmit = value;
+    //     if (Array.isArray(this.selectedValues)) {
+    //       const newSelectedValues = this.selectedValues;
+    //       val.checkValue
+    //         ? newSelectedValues.push(val.value)
+    //         : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
+    //       this.selectedValues = newSelectedValues;
+    //     } else {
+    //       this.selectedValues = val.value;
+    //     }
     //   }
-
-    //   console.log("BQ emitting: ", valueToEmit)
-    //   this.$emit("update:modelValue", valueToEmit);
+    //   this.$emit("isCheckedChanged", val);
     // },
+    handleAnswerChange(eventValue) {
+      console.log(eventValue)
+      this.$emit("update:modelValue", eventValue);
+    },
   },
   components: {
     listButton,
diff --git a/src/common-components/button-wrapper/button-wrapper.vue b/src/common-components/button-wrapper/button-wrapper.vue
index 29005a15b..37e3cc694 100644
--- a/src/common-components/button-wrapper/button-wrapper.vue
+++ b/src/common-components/button-wrapper/button-wrapper.vue
@@ -1,12 +1,11 @@
 <template>
   <label :class="classes" :for="buttonId">
-    classes: {{classes}}<br/>
+    <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
     modelValue: {{modelValue}} <br/>
-    buttonId: {{buttonId}} <br/>
+    buttonId: {{buttonId}} <br/> -->
     <input
       :type="inputType"
-      
       :id="buttonId"
       :name="groupName"
       :aria-required="isRequired"
@@ -26,3 +25,11 @@ export default {
   mixins: [buttonMixin],
 };
 </script>
+
+<style scoped>
+input {
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 8889a0fdc..bfb0de678 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,5 +1,7 @@
 <template>
-  <buttonQuestion
+  <div>
+    YQ: {{ selectedValue }}
+    <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
     selectingInitiatesLoad
@@ -10,6 +12,8 @@
     v-model="selectedValue"
     isRequired
   />
+  
+  </div>
 </template>
 
 <script>
@@ -21,7 +25,8 @@ export default {
   name: "year-question",
   data() {
     return {
-      years: Array,
+      years: [],
+      selectedValue: null
     };
   },
   props: {
@@ -35,14 +40,14 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValue: {
-      get: function() {
-        return this.modelValue
-      },
-      set: function(newValue) {
-        this.$emit("update:modelValue", newValue);
-      }
-    }
+    // selectedValue: {
+    //   get: function() {
+    //     return this.modelValue
+    //   },
+    //   set: function(newValue) {
+    //     this.$emit("update:modelValue", newValue);
+    //   }
+    // }
   },
   methods: {
     loadInitialData() {
diff --git a/src/mixins/button-mixin.js b/src/mixins/button-mixin.js
index 9b0bd138f..609a40399 100644
--- a/src/mixins/button-mixin.js
+++ b/src/mixins/button-mixin.js
@@ -62,7 +62,6 @@ export default {
 
       console.log("ButtonWrapper is emitting: ", valueToEmit);
       this.$emit("change", valueToEmit);
-      //   this.$emit("change", event);
     },
   },
   computed: {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index e91c2380c..0923d071a 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -19,15 +19,16 @@
       class="d-flex flex-column justify-content-center py-3 px-4"
       @mouseup="triggerButton"
     > -->
-  LB value: {{ value }}<br />
+  <!-- LB value: {{ value }}<br />
   LB modelValue: {{ modelValue }}
+  LB groupName: {{ groupName }} -->
   <!-- , {'has-error': errors.length > 0 || hasError} -->
   <!-- <buttonWrapper
     v-bind="$props"
     :classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
     @change="(e) => $emit('change', e)"
   > -->
-  LB groupName: {{ groupName }}
+  
   <buttonWrapper
     :isMultiSelect="isMultiSelect"
     :modelValue="modelValue"
@@ -37,7 +38,7 @@
       'list-group list-button rounded-3 d-flex flex-column w-100 mb-2',
       { 'has-error': errors.length > 0 || hasError },
     ]"
-    @change="lbTest"
+    @change="handleAnswerChange"
   >
     <div
       tabindex="-1"
@@ -117,7 +118,10 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    lbTest(e) {
+    handleAnswerChange(e) {
+      if (this.selectingInitiatesLoad) {
+        this.displayLoader();
+      }
       console.log("lbTest event: ", e)
       this.$emit("change", e);
     },  
@@ -138,6 +142,7 @@ export default {
       }
 
       // TODO KO THIS IS IMPORTANT
+      // Move this to button-wrapper?
       this.pushEventToGA(
         this.$route.query[queryStrings.FMG_PAGE],
         this.GaActions.CLICKED,