100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<template>
|
|
<transition name="fade" mode="out-in">
|
|
<div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
|
|
<buttonQuestion
|
|
isWide
|
|
:questionText="questionText"
|
|
:isMultiSelect="isMultiSelect"
|
|
:answers="answersToDisplay"
|
|
:groupName="groupName"
|
|
buttonType="listCard"
|
|
v-model="selectedReplaceOptions"
|
|
:validationRules="validationRules"
|
|
:suppressError="suppressError"
|
|
:isRequired="isRequired"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
import store from "@/store";
|
|
|
|
export default ({
|
|
name: "replaceOptionsQuestion",
|
|
data() {
|
|
return {
|
|
replaceOptions: [],
|
|
selectedReplaceOptions: this.modelValue
|
|
}
|
|
},
|
|
props: {
|
|
modelValue: [Array, String, Number],
|
|
isAvailable: Boolean,
|
|
filterByVehicleCategory: Boolean,
|
|
groupName: String,
|
|
isMultiSelect: Boolean,
|
|
validationRules: String,
|
|
suppressError: Boolean,
|
|
cmsWidgetName: String,
|
|
isRequired: Boolean,
|
|
},
|
|
methods: {
|
|
initializeComponent(replaceOptions) {
|
|
this.replaceOptions = replaceOptions;
|
|
},
|
|
updateSelectedValues() {
|
|
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
|
|
// ex: BackGlass stationary
|
|
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
|
|
const selectedAnswer = this.answersToDisplay[0].Name;
|
|
this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
questionText(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
|
},
|
|
answersFromCms(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'Answers');
|
|
},
|
|
answersToDisplay(){
|
|
const filteredAnswers = Array.isArray(this.answersFromCms)
|
|
? this.answersFromCms.filter(ans =>
|
|
{
|
|
const name = ans.Name.split('-');
|
|
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
|
|
})
|
|
: [];
|
|
|
|
return filteredAnswers.map(ans => {
|
|
const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
|
|
ans.Name = newName;
|
|
return ans;
|
|
});
|
|
},
|
|
shouldDisplayReplaceOptionsQuestion() {
|
|
return this.isAvailable && this.answersToDisplay.length > 0
|
|
}
|
|
},
|
|
watch: {
|
|
isAvailable(val) {
|
|
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
|
|
val && this.updateSelectedValues();
|
|
},
|
|
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
|
|
if (!shouldDisplayReplaceOptionsQuestion) {
|
|
this.selectedReplaceOptions = [];
|
|
}
|
|
},
|
|
selectedReplaceOptions(selectedReplaceOptions) {
|
|
this.$emit("update:modelValue", selectedReplaceOptions);
|
|
}
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
}
|
|
})
|
|
</script>
|