102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<div class="replace-options-question">
|
|
I AM REPLACE OPTIONS QUESTION
|
|
groupName is: {{groupName}}
|
|
<buttonQuestion
|
|
v-if="isAvailable && answersToDisplay.length > 1"
|
|
:questionText="questionText"
|
|
:isMultiSelect="isMultiSelect"
|
|
:answers="answersToDisplay"
|
|
:groupName="groupName"
|
|
buttonType="listCard"
|
|
v-model="selectedValues"
|
|
:validationRules="setValidationRules()"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
import store from "@/store";
|
|
|
|
export default ({
|
|
name: "replaceOptionsQuestion",
|
|
data(){
|
|
return {
|
|
questionText: String,
|
|
answersFromCms: Array,
|
|
replaceOptions: Array,
|
|
groupName: String,
|
|
}
|
|
},
|
|
props: {
|
|
isMultiSelect: Boolean,
|
|
isAvailable: Boolean,
|
|
filterByVehicleCategory: Boolean,
|
|
modelValue: Array,
|
|
},
|
|
methods: {
|
|
initializeComponent(cmsContent, replaceOptions, groupName){
|
|
this.groupName = groupName;
|
|
this.questionText = cmsContent.QuestionText;
|
|
this.answersFromCms = cmsContent.Answers;
|
|
this.replaceOptions = replaceOptions;
|
|
},
|
|
setValidationRules() {
|
|
const rulesArray = [
|
|
{
|
|
name: "required",
|
|
test: (value) => {
|
|
// console.log('ROQ required value is... ', value);
|
|
if (!value || value.length < 1) {
|
|
console.log('ROQ should return false')
|
|
return false;
|
|
}
|
|
console.log('ROQ should return true')
|
|
return true;
|
|
},
|
|
error: 'Please select damage location'
|
|
}
|
|
]
|
|
|
|
return rulesArray;
|
|
},
|
|
},
|
|
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 this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
|
|
})
|
|
: [];
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|