92 lines
2.9 KiB
Vue
92 lines
2.9 KiB
Vue
<template>
|
|
<div class="damage-location-question">
|
|
<buttonQuestion
|
|
:questionText="questionText"
|
|
isMultiSelect
|
|
:answers="answersToDisplay"
|
|
:groupName="groupName"
|
|
buttonTypeString="listCard"
|
|
isRequired
|
|
v-model="selectedValues"
|
|
validationRules="damage-location-required" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
import store from "@/store";
|
|
import { defineRule } from "vee-validate";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
|
|
|
|
export default {
|
|
name: "damageLocationQuestion",
|
|
data() {
|
|
return {
|
|
damageOptions: Object,
|
|
};
|
|
},
|
|
props: {
|
|
modelValue: Array,
|
|
groupName: String,
|
|
cmsWidgetName: String,
|
|
},
|
|
methods: {
|
|
initializeComponent(damageOptions) {
|
|
this.damageOptions = damageOptions;
|
|
},
|
|
},
|
|
computed: {
|
|
questionText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
|
},
|
|
answersFromCms() {
|
|
return this.getCmsContent(this.cmsWidgetName, "Answers");
|
|
},
|
|
selectedValues: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
},
|
|
},
|
|
damageOptionsMap() {
|
|
return {
|
|
Windshield: true,
|
|
SideDoor:
|
|
this.damageOptions.driverSideOptions.availableReplacementOptions.length ||
|
|
this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
|
|
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
|
|
};
|
|
},
|
|
answersToDisplay() {
|
|
const filteredAnswers = Array.isArray(this.answersFromCms)
|
|
? this.answersFromCms.filter((ans) => {
|
|
const name = ans.Name.split("-");
|
|
return (
|
|
name[0].toUpperCase() === store.getters.vehicle.category &&
|
|
this.damageOptionsMap[name[1]]
|
|
);
|
|
})
|
|
: [];
|
|
return filteredAnswers.map((ans) => {
|
|
const newName = ans.Name.includes("-") ? ans.Name.split("-")[1] : ans.Name;
|
|
return {
|
|
Name: newName,
|
|
AnswerImageUrl: ans.AnswerImageUrl,
|
|
ImageId: ans.ImageId,
|
|
SubText: ans.SubText,
|
|
Text: ans.Text,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
},
|
|
};
|
|
</script>
|