Side Door Options

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="side-door-options">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+        />
+        <replaceOptionsQuestion />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+
+export default ({
+    name: "replaceOptionsQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+        }
+    },
+    props: {
+        groupName: String,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        },
+    },
+    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 => 
+                    {
+                        const name = ans.Name.split('-');
+                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                    }) 
+                : [];
+        },
+    },
+    components: {
+        buttonQuestion,
+        replaceOptionsQuestion,
+    }
+})
+</script>