CSR-762 GA WIP

src/App.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-    // TODO KO glass-part-question has nested button questions
+// TODO KO glass-part-question has nested button questions
-    // TODO KO selectedValues - make consistent for checkbox and radio if possible
+// TODO KO selectedValues - make consistent for checkbox and radio if possible
 export default {
     name: "app",
     data() {
@@ -28,7 +28,7 @@ export default {
             // console.log(targetType)
             if (targetType !== "radio" && targetType !== "checkbox") {
                 this.handleInputFocus({
-                    groupName: null
+                    groupName: null,
                 });
             }
         },
@@ -55,6 +55,13 @@ export default {
             }
         },
     },
+    watch: {
+        $route: {
+            handler() {
+                this.lastFocusedInputGroup = null;
+            },
+        },
+    },
 };
 </script>
 

src/common-components/base-input-button/base-input-button.vue

@@ -5,6 +5,8 @@
         @focusin="handleFocus"
         @focusout="handleBlur"
         @mousedown.left="handleEventAction('click', $event)">
+        lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
+
         <input
             :type="inputType"
             :id="buttonId"
@@ -61,10 +63,12 @@ export default {
             default: true,
         },
         isRequired: Boolean,
-        lastValuePushedToGa: {
+        lastValuePushedToGa: [String, Number],
-            type: [String, Number],
+        setLastValuePushedToGa: Function
-            required: true,
+        // wasThisValueJustPushedToGa: {
-        },
+        //     type: [String, Number],
+        //     required: true,
+        // },
         // fullName: {
         //     type: String,
         //     default: "",
@@ -75,6 +79,8 @@ export default {
         return {
             valueToEmit: null,
             // lastValuePushedToGa: null,
+            // wasPushedToGa: false
+            // wasThisValueJustPushedToGa: false,
         };
     },
     mounted() {
@@ -99,7 +105,7 @@ export default {
 
                         // even if it's pushing from here, it needs to keep track
                         // of lastFocusedInputGroupName and such
-                        this.pushClickEventToGA();
+                        this.pushClickEventToGA("test");
                         break;
                 }
             } else {
@@ -108,7 +114,7 @@ export default {
                     case this.eventTypes.ENTER:
                     case this.eventTypes.SPACE:
                         this.handleClick(e);
-
+                        this.pushClickEventToGA("test");
                         // this.pushClickEventToGAIfReady();
                         break;
                     case this.eventTypes.CHANGE:
@@ -118,12 +124,13 @@ export default {
                         break;
                 }
 
-                if (eventType === this.eventTypes.CLICK) {
+                // if (eventType === this.eventTypes.CLICK) {
-                    console.log("PUSH FROM RADIO CLICK");
+                //     console.log("PUSH FROM RADIO CLICK");
-                    this.pushClickEventToGA();
+                //     this.pushClickEventToGA("test");
-                }
+                // }
             }
 
+            // this.wasThisValueJustPushedToGa = false;
             // this.pushClickEventToGA(eventType);
         },
         handleSelectionChange(e) {
@@ -155,11 +162,18 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            console.log("inputButtonClicked");
+
-            this.$emit("inputButtonClicked", {
+            // TODO KO NOTES
-                selectedAnswers: this.valueToEmit,
+            // if you click on a radio button > go to another button > go back to original > tab out
-                lastValuePushedToGa: this.lastValuePushedToGa,
+            // shouldn't do anything, but it does because wasThisValueJustPushedToGa gets set to false?
-            });
+            // console.log("---inputButtonClicked: ", {
+            //     value: this.value,
+            //     // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
+            // });
+            // const lastValuePushedToGa = this.wasThisValueJustPushedToGa ? this.value : null;
+            // this.wasThisValueJustPushedToGa = false;
+
+            this.$emit("inputButtonClicked", this.valueToEmit);
         },
         onFocusCallbackForRoot() {
             // console.log("onFocusCallbackForRoot: ", {
@@ -200,19 +214,41 @@ export default {
                 onFocusCallback: this.onFocusCallbackForRoot,
             });
         },
-        pushClickEventToGA(eventType) {
+
-            if (this.isMultiSelect || !eventType) {
+        // TODO KO NOTES
-                console.log("PUSHING: ", this.value);
+        // base-input-button has the value to push to GA and the click vs focus events
+        // but button-question would have to keep track of the button group's last held value
+        // is there a way to make each individual button hold the group's last held value
+        // WITHOUT listening to an event on each component that uses the button?
+
+        pushClickEventToGA(source) {
+            if (source == "test") {
+                // this.wasThisValueJustPushedToGa = true;
+                // this.$emit("update:lastValuePushedToGa", this.value)
+                console.log("------------------PUSHING 1: ", this.value);
+                // this.$emit("gaClickEventPushed", this.value)
+                this.setLastValuePushedToGa(this.value)
+
+                // this.wasPushedToGa = true
             } else {
-                if (eventType === this.eventTypes.CLICK) {
+                // console.log("PCETGA: ", {
-                    console.log("PUSHING: ", this.value);
+                //     lastValuePushedToGa: this.lastValuePushedToGa,
-                } else {
+                //     isChecked: this.isChecked,
-                    if (
+                //     value: this.value,
-                        this.isChecked &&
+                //     // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
-                        this.lastValuePushedToGa != this.value
+                // });
-                    ) {
+                if (
-                        console.log("PUSHING: ", this.value);
+                    !this.isValueSelectedOnClick &&
-                    }
+                    this.isChecked &&
+                    // !this.wasThisValueJustPushedToGa &&
+                    this.lastValuePushedToGa != this.value
+                ) {
+                    // this.$emit("update:lastValuePushedToGa", this.value)
+                    // this.wasPushedToGa = true
+                    // this.wasThisValueJustPushedToGa = true;
+                    console.log("------------------PUSHING 2: ", this.value);
+                    // this.$emit("gaClickEventPushed", this.value)
+                    this.setLastValuePushedToGa(this.value)
                 }
             }
 

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

@@ -34,7 +34,6 @@
                     }}
                 </legend>
                 <div :class="getComponentLoopWrapperClasses">
-                    lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
@@ -49,12 +48,13 @@
                             :isMultiSelect="isMultiSelect"
                             :value="answer.value"
                             :modelValue="modelValue"
-                            v-model:lastValuePushedToGa="lastValuePushedToGa"
                             :selectingInitiatesLoad="selectingInitiatesLoad"
                             :isWide="isWide"
                             :validationRules="validationRules"
                             :textPosition="textPosition"
                             :selectOnKeypress="selectOnKeypress"
+                            :lastValuePushedToGa="lastValuePushedToGa"
+                            :setLastValuePushedToGa="setLastValuePushedToGa"
                             @inputButtonClicked="handleAnswerChange" />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
@@ -130,8 +130,8 @@ export default {
         return {
             selectedValues: "",
             // lastFocusedInputGroup: "",
-            lastPushedGaEventValue: null,
+            lastValuePushedToGa: null,
-            mostRecentlySelectedValue: null,
+            // mostRecentlySelectedValue: null,
         };
     },
     computed: {
@@ -229,9 +229,12 @@ export default {
                         : this.formatString(answer.toString());
             }
         },
-        handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) {
+        handleAnswerChange(selectedAnswers) {
             this.selectedValues = selectedAnswers;
-            this.mostRecentlySelectedValue = mostRecentlySelectedValue;
+            // if (lastValuePushedToGa) {
+            //     this.lastValuePushedToGa = lastValuePushedToGa;
+            //     // console.log("BQ lastValuePushedToGa: ", lastValuePushedToGa);
+            // }
 
             // if (this.isValueSelectedOnClick) {
             //     this.pushClickEventToGA();
@@ -240,7 +243,10 @@ export default {
             this.$emit("buttonQuestionChange", selectedAnswers);
             this.$emit("update:modelValue", selectedAnswers);
         },
-/////////////////////////////
+        /////////////////////////////
+        setLastValuePushedToGa(lastValuePushedToGa) {
+            this.lastValuePushedToGa = lastValuePushedToGa;
+        },
         // onFocusCallbackForRoot() {
         //     console.log("onFocusCallbackForRoot: ", {
         //         isValueSelectedOnClick: this.isValueSelectedOnClick,
@@ -297,7 +303,7 @@ export default {
         //         this.valueToLogType
         //     );
         // },
-//////////////////////////////////
+        //////////////////////////////////
         // pushClickEventToGA() {
         //     // const valueToPushToGa =
         //     //     value?.toString() ?? this.selectedValues?.toString();

src/mixins/input-button-wrapper-mixin.js

@@ -9,7 +9,7 @@ export default {
         buttonImage: String,
         altText: {
             type: String,
-            default: ""
+            default: "",
         },
         textPosition: String,
         screenReaderOnlyText: String,
@@ -18,22 +18,25 @@ export default {
         isWide: Boolean,
         isRequired: {
             type: Boolean,
-            default: true
+            default: true,
         },
         // pushClickEventToGA: Function,
-        lastValuePushedToGa: [String, Number]
+        lastValuePushedToGa: [String, Number],
+        setLastValuePushedToGa: Function
     },
     methods: {
         handleAnswerChange(e) {
             if (this.preHandleAnswerChange) {
-                this.preHandleAnswerChange(e.selectedAnswers)
+                this.preHandleAnswerChange(e);
             }
-            
+
-            this.$emit("change", e.selectedAnswers);
+            // console.log("IBWM: ", e)
-            // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
+            this.$emit("change", e);
+            // if (e.lastValuePushedToGa) {
+            //     console.log("sup")
+            //     this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
+            // }
         },
-
-
     },
     // computed: {
     //     selectedValueHandler: {