111 lines
No EOL
4.7 KiB
Vue
111 lines
No EOL
4.7 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<div class="windshield-options" aria-live="polite">
|
|
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
|
|
:isAvailable=isWindshieldDamageLocation
|
|
:suppressError="suppressError"
|
|
groupName="WindshieldDamageTypeQuestion"
|
|
v-model="selectedWindshieldDamageTypeValues"
|
|
/>
|
|
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
|
|
:isAvailable=isRepairOptionSelected
|
|
groupName="WindshieldChipCountQuestion"
|
|
v-model="selectedWindshieldChipCountValues"
|
|
/>
|
|
<replaceOptionsQuestion ref="replaceOptionsQuestion"
|
|
:isAvailable=isReplaceOptionSelected
|
|
groupName="WindshieldReplaceOptions"
|
|
v-model="selectedWindshieldReplaceOptionsValues"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
|
|
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
|
|
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
|
export default ({
|
|
name: "windshieldOptions",
|
|
|
|
props: {
|
|
modelValue: Array,
|
|
selectedDamageLocations: Array,
|
|
selectedChipCount: Array,
|
|
selectedReplaceOptions: Array,
|
|
suppressError: Boolean
|
|
},
|
|
|
|
methods: {
|
|
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms,
|
|
windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
|
|
|
|
this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
|
|
this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
|
|
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
|
|
},
|
|
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
|
|
return {
|
|
selectedWindshieldDamageType: selectedWindshieldDamageType,
|
|
selectedWindshieldChipCount: selectedWindshieldChipCount,
|
|
selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
selectedValues: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
}
|
|
},
|
|
selectedWindshieldDamageTypeValues:{
|
|
get: function() {
|
|
return this.selectedValues.selectedWindshieldDamageType;
|
|
},
|
|
set: function(newValue) {
|
|
this.selectedValues = this.getWindshieldOptions(newValue, null, null);
|
|
}
|
|
},
|
|
selectedWindshieldChipCountValues: {
|
|
get: function() {
|
|
return this.selectedValues.selectedChipCount;
|
|
},
|
|
set: function(newValue) {
|
|
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);
|
|
}
|
|
},
|
|
selectedWindshieldReplaceOptionsValues: {
|
|
get: function() {
|
|
return this.selectedValues.selectedWindshieldReplaceOptions;
|
|
},
|
|
set: function(newValue) {
|
|
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, null, newValue);
|
|
}
|
|
},
|
|
isWindshieldDamageLocation() {
|
|
return this.selectedDamageLocations.some(selectedDamages =>
|
|
{
|
|
return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
|
|
});
|
|
},
|
|
isRepairOptionSelected(){
|
|
if (!this.selectedWindshieldDamageTypeValues) return false;
|
|
|
|
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
|
|
},
|
|
isReplaceOptionSelected(){
|
|
if (!this.selectedWindshieldDamageTypeValues) return false;
|
|
|
|
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
|
|
},
|
|
},
|
|
components: {
|
|
windshieldDamageTypeQuestion,
|
|
windshieldChipCountQuestion,
|
|
replaceOptionsQuestion
|
|
},
|
|
})
|
|
</script> |