SLT-418
This commit is contained in:
Sneha
parent
e29445bb83
commit
3ac9d786d3
2 changed files with 55 additions and 56 deletions
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -20,8 +20,7 @@ export default {
|
|||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
updateValues: Function,
|
||||
years:[]
|
||||
updateValues: Function,
|
||||
},
|
||||
components: {
|
||||
dropdownQuestion
|
||||
|
|
@ -29,36 +28,20 @@ export default {
|
|||
computed: {
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
return this.modelValue?.toString();
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue",newValue);
|
||||
this.$emit("update:modelValue",newValue?.toString());
|
||||
}
|
||||
},
|
||||
Options() {
|
||||
if(this.years != null)
|
||||
return this.years;
|
||||
|
||||
const Answers = this.values;
|
||||
const AnswersObj ={};
|
||||
if(Answers)
|
||||
{
|
||||
for (let answer of Object.values(Answers)) {
|
||||
if (answer) {
|
||||
AnswersObj[answer] = answer;
|
||||
}
|
||||
}
|
||||
}
|
||||
return AnswersObj
|
||||
Options() {
|
||||
return this.values;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return useMainStore().getVehicleYears();
|
||||
},
|
||||
methods: {
|
||||
async getNewValues() {
|
||||
const results = await this.updateValues();
|
||||
this.values = results?.data;
|
||||
this.values = results?.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
<div class="col">
|
||||
<div class="select-car-form rounded">
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
|
||||
<VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="VehicleyearQuestion" cmsWidgetName="VehicleYearQuestion" :options="years" validationRules="year-required" inputId="yearQuestionField"/>
|
||||
<VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="VehiclemakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
|
||||
<VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="VehiclemodelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
|
||||
<VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="VehiclestyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
|
||||
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
|
||||
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
|
||||
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
|
||||
<vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
|
|
@ -37,7 +37,8 @@ import siteHeader from "@/iss-components/site-header/site-header";
|
|||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
||||
import VehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
|
||||
import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
// Supporting files
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
|
|
@ -61,62 +62,74 @@ export default {
|
|||
selectedYear: null,
|
||||
selectedMake: null,
|
||||
selectedModel: null,
|
||||
selectedStyle: null,
|
||||
years: []
|
||||
selectedStyle: null,
|
||||
};
|
||||
},
|
||||
props:{
|
||||
cmsWidgetName:String,
|
||||
validationRules:String,
|
||||
},
|
||||
|
||||
mounted(){
|
||||
this.Years.getNewValues();
|
||||
},
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "yearQuestionInitialData",
|
||||
promise: yearQuestionInitialDataPromise,
|
||||
},
|
||||
|
||||
},
|
||||
];
|
||||
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.years = resultMap.yearQuestionInitialData;
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
|
||||
},
|
||||
watch: {
|
||||
selectedYear(yearIndex) {
|
||||
const parsedYearIndex = parseInt(yearIndex);
|
||||
this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
|
||||
|
||||
this.$refs["VehiclemakeQuestion"].getNewValues();
|
||||
|
||||
const parsedYearIndex = parseInt(yearIndex);
|
||||
this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
|
||||
this.Makes.getNewValues();
|
||||
},
|
||||
selectedMake(make) {
|
||||
this.mainStore.updateVehicleMake( make );
|
||||
this.$refs["VehiclemodelQuestion"].getNewValues();
|
||||
selectedMake(makeIndex) {
|
||||
const parsedMakeIndex = parseInt(makeIndex);
|
||||
this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
|
||||
this.Models.getNewValues();
|
||||
},
|
||||
selectedModel(model) {
|
||||
this.mainStore.updateVehicleModel( model );
|
||||
this.$refs["VehiclestyleQuestion"].getNewValues();
|
||||
selectedModel(modelIndex) {
|
||||
const parsedModelIndex = parseInt(modelIndex);
|
||||
this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
|
||||
this.Styles.getNewValues();
|
||||
},
|
||||
selectedStyle(style) {
|
||||
this.mainStore.updateVehicleStyle( style );
|
||||
selectedStyle(styleIndex) {
|
||||
const parsedStyleIndex = parseInt(styleIndex);
|
||||
this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
Years(){
|
||||
return this.$refs["vehicleYearQuestion"];
|
||||
},
|
||||
Makes(){
|
||||
return this.$refs["vehicleMakeQuestion"];
|
||||
},
|
||||
Models(){
|
||||
return this.$refs["vehicleModelQuestion"];
|
||||
},
|
||||
Styles(){
|
||||
return this.$refs["vehicleStyleQuestion"];
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return true;
|
||||
|
|
@ -135,6 +148,9 @@ props:{
|
|||
this.$route
|
||||
);
|
||||
});
|
||||
},
|
||||
async updateYearValues() {
|
||||
return await useMainStore().getVehicleYears();
|
||||
},
|
||||
async updateMakeValues() {
|
||||
return await this.mainStore.getVehicleMakes();
|
||||
|
|
@ -152,7 +168,7 @@ props:{
|
|||
vehicleBanner,
|
||||
siteFooter,
|
||||
Form,
|
||||
VehicleQuestion
|
||||
vehicleQuestion
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue