From 268968213e4a59dd62c34ab65f9394a198317536 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 3 Feb 2022 12:42:11 -0500
Subject: [PATCH] Refactoring v-model to computed values

---
 .../damage-location-question.vue              | 15 +++++++------
 .../replace-options-question.vue              | 15 +++++++------
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../make-question/make-question.vue           | 21 ++++++++++++-------
 src/layouts/vehicle-make/vehicle-make.vue     |  2 +-
 .../model-question/model-question.vue         | 21 ++++++++++++-------
 src/layouts/vehicle-model/vehicle-model.vue   |  2 +-
 .../style-question/style-question.vue         | 21 ++++++++++++-------
 src/layouts/vehicle-style/vehicle-style.vue   |  2 +-
 .../list-button-horizontal.vue                |  7 +++++--
 src/ux-components/list-card/list-card.vue     |  7 +++++--
 11 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 97c08c3b8..4000a61c7 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -7,7 +7,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="modelValue"
+            v-model="selectedValues"
         />
     </div>
 </template>
@@ -39,6 +39,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         damageOptionsMap(){
             return {
                 Windshield: true,
@@ -56,11 +64,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index f01f0cd90..2c46d96fd 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -8,7 +8,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="modelValue"
+                v-model="selectedValues"
             />
         </div>
     </transition>
@@ -43,6 +43,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         answersToDisplay(){
             return  Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
@@ -53,11 +61,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 3524c84bc..a681d6120 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -74,7 +74,7 @@ export default {
   },
   data(){
     return {
-      damageLocationQuestionData: [],
+      damageLocationQuestionData: ["Car-SideDoor"],
       driverSideOptionsData: [],
     }
   },
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 3bda78285..9eeefb7b5 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Make"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.makes = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index fcb6a999d..ff82506e7 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -33,7 +33,7 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      selectedMake: [],
+      selectedMake: String,
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index be2c64be5..3e27198b6 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Model"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.models = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 9e5c0243d..e5e8bb946 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -33,7 +33,7 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      selectedModel: [],
+      selectedModel: String,
     };
   },
   computed: {},
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index e44514904..7b316f42a 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Style"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -49,10 +61,5 @@ export default {
       this.styles = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 98c86aa93..25594099c 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -32,7 +32,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: [],
+      selectedStyle: String,
     };
   },
   computed: {},
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 967523893..db2f9f382 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -92,8 +92,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+    checkValue(newValue, oldValue){
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   components: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7010ee487..3a3afe010 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -94,8 +94,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+    checkValue(newValue, oldValue){
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   setup(props) {