jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-269 wip

Browse source
This commit is contained in:
CarlNation 2022-02-14 10:59:31 -05:00
parent fef27c4394
commit c9b09ae23a
4 changed files with 246 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -5,6 +5,7 @@
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
</div>
</template>
@ -15,6 +16,8 @@ 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";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -26,6 +29,7 @@ import baseMixin from "@/mixins/base-mixin";
export default {
name: "vehicle-damage",
async beforeRouteEnter(to, from, next) {
console.log("vd: beforeRoute");
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const damageOptionsPromise =
@ -46,10 +50,12 @@ 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
);
@ -65,12 +71,19 @@ export default {
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
console.log("vd: initialize wo");
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
resultMap.cmsContent.WindshieldReplaceOptionsQuestion
);
});
},
data(){
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
selectedWindshieldOptions: [],
selectedChipCount: []
}
},
methods: {
@ -80,14 +93,24 @@ export default {
resetDependentState() {
// Invokes
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
},
}
},
//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,
vehicleBanner,
funnelSubHeader,
replaceOptionsQuestion,
damageLocationQuestion,
windshieldOptions,
},
};
</script>

49
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<transition name="fade">
<div class="windshield-chip-count">
<buttonQuestion
:questionText="buttonQuestionText"
:answers="buttonAnswers"
:groupName="buttongroupName"
buttonType="listButtonHorizontal"
v-model="selectedChipCountValues"
/>
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default ({
name: "windshieldOptions",
props: {
modelValue: Array,
questionText: String,
answersFromCms: Array,
groupName: String,
},
computed: {
buttonQuestionText() {
return this.questionText;
},
buttonAnswers() {
return this.answersFromCms;
},
buttongroupName() {
return this.groupName;
},
selectedChipCountValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
components: {
buttonQuestion,
}
})
</script>

54
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<transition name="fade">
<div class="windshield-options">
<buttonQuestion
:questionText="buttonQuestionText"
:answers="buttonAnswers"
:groupName="buttongroupName"
buttonType="listCard"
v-model="selectedValues"
/>
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default ({
name: "windshieldOptions",
props: {
modelValue: Array,
questionText: String,
answersFromCms: Array,
groupName: String,
},
methods: {
initializeComponent(qt, an){
alert("hi");
}
},
computed: {
buttonQuestionText() {
return this.questionText;
},
buttonAnswers() {
return this.answersFromCms;
},
buttongroupName() {
return this.groupName;
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
components: {
buttonQuestion,
}
})
</script>

118
src/layouts/vehicle-damage/windshield-options/windshield-options.vue Normal file
View file

@ -0,0 +1,118 @@
<template>
<transition name="fade">
<div class="windshield-options">
<!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
v-if="isWindshieldDamageLocation"
:questionText="questionText"
:answersFromCms="answersFromCms"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
v-if="isWindshieldDamageLocation && isRepairOptionSelected"
:questionText="chipCountQuestionText"
:answersFromCms="chipCountAnswersFromCms"
groupName="WindshieldChipCountQuestion"
v-model="selectedChipCountValues"
/> -->
<replaceOptionsQuestion :ref="replaceOptionsQuestion"
v-if="isWindshieldDamageLocation"
isAvailable
:questionText="replaceOptionsQuestionText"
:answersFromCms="replaceOptionsAnswersFromCms"
groupName="WindshieldChipCountQuestion"
v-model="selectedReplaceOptions"
/>
</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",
data(){
return {
questionText: String,
answersFromCms: Array,
chipCountQuestionText: String,
chipCountAnswersFromCms: Array,
replaceOptionsQuestionText: String,
replaceOptionsAnswersFromCms: Array,
}
},
props: {
modelValue: Array,
selectedDamageLocations: Array,
selectedChipCount: Array,
selectedReplaceOptions: Array
},
mounted() {
console.log(this);
},
methods: {
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms,
windshieldReplaceOptionsQuestionFromCms){
this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
//console.log(this.$refs.replaceOptionsQuestion);
//this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
// this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
}
},
computed: {
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
selectedChipCountValues: {
get: function() {
return this.selectedChipCount;
},
set: function(newValue) {
this.$emit("update:selectedChipCount", newValue);
}
},
selectedReplaceOptionsValues: {
get: function() {
return this.selectedReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedReplaceOptions", 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"
return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
});
},
isRepairOptionSelected(){
return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
},
},
components: {
windshieldDamageTypeQuestion,
windshieldChipCountQuestion,
replaceOptionsQuestion
},
})
</script>