csr-269 wip
This commit is contained in:
CarlNation
parent
c824402a4a
commit
e2bfed2b36
3 changed files with 94 additions and 60 deletions
|
|
@ -30,6 +30,9 @@ defineRule("replace-options-required", (value) => {
|
|||
|
||||
export default ({
|
||||
name: "replaceOptionsQuestion",
|
||||
updated() {
|
||||
console.log("ro:modelValue=>" + this.modelValue);
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
questionText: String,
|
||||
|
|
@ -48,6 +51,7 @@ export default ({
|
|||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.replaceOptions = replaceOptions;
|
||||
console.log("ro:" + this.questionText);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -56,6 +60,7 @@ export default ({
|
|||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
console.log("ro:newVal=>" + newValue);
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
|
|
@ -64,7 +69,8 @@ export default ({
|
|||
? 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])
|
||||
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) :
|
||||
this.replaceOptions.includes(ans.Name)
|
||||
})
|
||||
: [];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
|
||||
<windshieldOptions ref="windshieldOptions"
|
||||
v-model="selectedWindshieldOptions"
|
||||
:selectedDamageLocations="selectedDamageLocations"
|
||||
/>
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
|
||||
<windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,7 +21,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
||||
import windshieldOptions from"@/layouts/vehicle-damage/windshield-options/windshield-options";
|
||||
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -30,8 +33,12 @@ import baseMixin from "@/mixins/base-mixin";
|
|||
|
||||
export default {
|
||||
name: "vehicle-damage",
|
||||
updated() {
|
||||
console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
|
||||
console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
|
||||
console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
console.log("vd: beforeRoute");
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const damageOptionsPromise =
|
||||
|
|
@ -52,12 +59,10 @@ export default {
|
|||
},
|
||||
];
|
||||
|
||||
console.log("vd: before settle");
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
console.log("vd: after settle");
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
console.log("vd: next");
|
||||
vm.$refs.funnelHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelHeaderWidget
|
||||
);
|
||||
|
|
@ -73,13 +78,12 @@ export default {
|
|||
vm.$refs.damageLocation.initializeComponent(
|
||||
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
console.log("vd: initialize wo");
|
||||
vm.$refs.windshieldOptions.initializeComponent(
|
||||
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
|
||||
resultMap.cmsContent.WindshieldReplaceOptionsQuestion
|
||||
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
});
|
||||
},
|
||||
|
|
@ -87,8 +91,7 @@ export default {
|
|||
return {
|
||||
selectedDamageLocations: [],
|
||||
driverSideOptionsData: [],
|
||||
selectedWindshieldOptions: [],
|
||||
selectedChipCount: []
|
||||
selectedWindshieldOptions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -107,15 +110,6 @@ export default {
|
|||
);
|
||||
},
|
||||
},
|
||||
//computed: {
|
||||
// selectedWindshieldDamageType(){
|
||||
// return this.modelValue.some(selectedDamages =>
|
||||
// {
|
||||
// const categoryAndGlass = selectedDamages.split('-'); //ie: model looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
|
||||
// return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
|
||||
// });
|
||||
// },
|
||||
//},
|
||||
components: {
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="windshield-options">
|
||||
<!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
|
||||
<div class="windshield-options" aria-live="polite">
|
||||
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
|
||||
v-if="isWindshieldDamageLocation"
|
||||
:questionText="questionText"
|
||||
:answersFromCms="answersFromCms"
|
||||
:suppressError="suppressError"
|
||||
groupName="WindshieldDamageTypeQuestion"
|
||||
v-model="selectedValues"
|
||||
v-model="selectedWindshieldDamageTypeValues"
|
||||
/>
|
||||
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
|
||||
v-if="isWindshieldDamageLocation && isRepairOptionSelected"
|
||||
:questionText="chipCountQuestionText"
|
||||
:answersFromCms="chipCountAnswersFromCms"
|
||||
groupName="WindshieldChipCountQuestion"
|
||||
v-model="selectedChipCountValues"
|
||||
/> -->
|
||||
<replaceOptionsQuestion :ref="replaceOptionsQuestion"
|
||||
v-if="isWindshieldDamageLocation"
|
||||
v-model="selectedWindshieldChipCountValues"
|
||||
/>
|
||||
<replaceOptionsQuestion ref="replaceOptionsQuestion"
|
||||
isAvailable
|
||||
:questionText="replaceOptionsQuestionText"
|
||||
:answersFromCms="replaceOptionsAnswersFromCms"
|
||||
groupName="WindshieldChipCountQuestion"
|
||||
v-model="selectedReplaceOptions"
|
||||
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";
|
||||
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",
|
||||
updated() {
|
||||
console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
|
||||
console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
|
||||
// if (this.isReplaceOptionSelected)
|
||||
// this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
questionText: String,
|
||||
|
|
@ -41,6 +45,14 @@ export default ({
|
|||
chipCountAnswersFromCms: Array,
|
||||
replaceOptionsQuestionText: String,
|
||||
replaceOptionsAnswersFromCms: Array,
|
||||
availableReplacementOptions: Array,
|
||||
// wsrFromCms: Array,
|
||||
// wsrOptions: Array,
|
||||
sro:[],
|
||||
|
||||
selectedWindshieldDamageType: null,
|
||||
selectedWindshieldChipCount: null,
|
||||
selectedWindshieldReplaceOptions: [],
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -48,16 +60,13 @@ export default ({
|
|||
modelValue: Array,
|
||||
selectedDamageLocations: Array,
|
||||
selectedChipCount: Array,
|
||||
selectedReplaceOptions: Array
|
||||
selectedReplaceOptions: Array,
|
||||
suppressError: Boolean
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
console.log(this);
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms,
|
||||
windshieldReplaceOptionsQuestionFromCms){
|
||||
windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
|
||||
this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
|
||||
this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
|
||||
|
||||
|
|
@ -67,11 +76,19 @@ console.log(this);
|
|||
this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
|
||||
this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
|
||||
|
||||
//console.log(this.$refs.replaceOptionsQuestion);
|
||||
|
||||
this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
|
||||
this.wsrOptions = windshieldAvailableReplacementOptions;
|
||||
|
||||
//this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
|
||||
// this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
|
||||
}
|
||||
this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
|
||||
},
|
||||
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
|
||||
return {
|
||||
selectedWindshieldDamageType: selectedWindshieldDamageType,
|
||||
selectedWindshieldChipCount: selectedWindshieldChipCount,
|
||||
selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedValues: {
|
||||
|
|
@ -79,35 +96,54 @@ console.log(this);
|
|||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
//console.log("oldval=>" + this.modelValue);
|
||||
this.$emit("update:modelValue", newValue);
|
||||
// this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
|
||||
}
|
||||
},
|
||||
selectedChipCountValues: {
|
||||
selectedWindshieldDamageTypeValues:{
|
||||
get: function() {
|
||||
return this.selectedChipCount;
|
||||
return this.selectedValues.selectedWindshieldDamageType;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:selectedChipCount", newValue);
|
||||
this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
|
||||
}
|
||||
},
|
||||
selectedReplaceOptionsValues: {
|
||||
selectedWindshieldChipCountValues: {
|
||||
get: function() {
|
||||
return this.selectedReplaceOptions;
|
||||
return this.selectedValues.selectedChipCount;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:selectedReplaceOptions", newValue);
|
||||
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
|
||||
//console.log("here=>" + newValue);
|
||||
//this.$emit("update:selectedChipCount", newValue);
|
||||
}
|
||||
},
|
||||
isWindshieldDamageLocation(){
|
||||
selectedWindshieldReplaceOptionsValues: {
|
||||
get: function() {
|
||||
return this.selectedValues.selectedWindshieldReplaceOptions;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
|
||||
}
|
||||
},
|
||||
isWindshieldDamageLocation() {
|
||||
return this.selectedDamageLocations.some(selectedDamages =>
|
||||
{
|
||||
const categoryAndGlass = selectedDamages.split('-'); //ie: selectedDamageLocations looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
|
||||
const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
|
||||
return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
|
||||
});
|
||||
},
|
||||
isRepairOptionSelected(){
|
||||
return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
|
||||
if (this.selectedWindshieldDamageTypeValues === undefined) return false;
|
||||
|
||||
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
|
||||
},
|
||||
// isReplaceOptionSelected(){
|
||||
// if (this.selectedWindshieldDamageTypeValues === undefined) return false;
|
||||
|
||||
// return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
|
||||
// },
|
||||
},
|
||||
components: {
|
||||
windshieldDamageTypeQuestion,
|
||||
|
|
@ -115,6 +151,4 @@ console.log(this);
|
|||
replaceOptionsQuestion
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
suppressError: Boolean,
|
||||
</script>
|
||||
Loading…
Reference in a new issue