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

SLT-418

Browse source
This commit is contained in:
Sneha 2023-05-16 15:06:32 +05:30
parent e29445bb83
commit 3ac9d786d3
2 changed files with 55 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/iss-components/vehicle-question/vehicle-question.vue
View file

@ -8,7 +8,7 @@
</template> </template>
<script> <script>
import { useMainStore } from '@/store';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue'; import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
export default { export default {
@ -20,8 +20,7 @@ export default {
}, },
props: { props: {
modelValue: String, modelValue: String,
updateValues: Function, updateValues: Function,
years:[]
}, },
components: { components: {
dropdownQuestion dropdownQuestion
@ -29,36 +28,20 @@ export default {
computed: { computed: {
selectedValue: { selectedValue: {
get: function() { get: function() {
return this.modelValue; return this.modelValue?.toString();
}, },
set: function(newValue) { set: function(newValue) {
this.$emit("update:modelValue",newValue); this.$emit("update:modelValue",newValue?.toString());
} }
}, },
Options() { Options() {
if(this.years != null) return this.values;
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
}, },
}, },
methods: { methods: {
loadInitialData() {
return useMainStore().getVehicleYears();
},
async getNewValues() { async getNewValues() {
const results = await this.updateValues(); const results = await this.updateValues();
this.values = results?.data; this.values = results?.data;
}, },
}, },
}; };

78
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -9,10 +9,10 @@
<div class="col"> <div class="col">
<div class="select-car-form rounded"> <div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" /> <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="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="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="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="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" 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 siteFooter from "@/iss-components/site-footer/site-footer";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header"; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner"; 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 // Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
@ -61,62 +62,74 @@ export default {
selectedYear: null, selectedYear: null,
selectedMake: null, selectedMake: null,
selectedModel: null, selectedModel: null,
selectedStyle: null, selectedStyle: null,
years: []
}; };
}, },
props:{ props:{
cmsWidgetName:String, cmsWidgetName:String,
validationRules:String, validationRules:String,
}, },
mounted(){
this.Years.getNewValues();
},
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: "cmsContent",
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
{
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
]; ];
let resultMap = await settleAllPromises(promiseResultMap); let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.years = resultMap.yearQuestionInitialData;
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
watch: { watch: {
selectedYear(yearIndex) { selectedYear(yearIndex) {
const parsedYearIndex = parseInt(yearIndex); const parsedYearIndex = parseInt(yearIndex);
this.mainStore.updateVehicleYear( this.years[parsedYearIndex] ); this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
this.Makes.getNewValues();
this.$refs["VehiclemakeQuestion"].getNewValues();
}, },
selectedMake(make) { selectedMake(makeIndex) {
this.mainStore.updateVehicleMake( make ); const parsedMakeIndex = parseInt(makeIndex);
this.$refs["VehiclemodelQuestion"].getNewValues(); this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
this.Models.getNewValues();
}, },
selectedModel(model) { selectedModel(modelIndex) {
this.mainStore.updateVehicleModel( model ); const parsedModelIndex = parseInt(modelIndex);
this.$refs["VehiclestyleQuestion"].getNewValues(); this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
this.Styles.getNewValues();
}, },
selectedStyle(style) { selectedStyle(styleIndex) {
this.mainStore.updateVehicleStyle( style ); 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: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return true; return true;
@ -135,6 +148,9 @@ props:{
this.$route this.$route
); );
}); });
},
async updateYearValues() {
return await useMainStore().getVehicleYears();
}, },
async updateMakeValues() { async updateMakeValues() {
return await this.mainStore.getVehicleMakes(); return await this.mainStore.getVehicleMakes();
@ -152,7 +168,7 @@ props:{
vehicleBanner, vehicleBanner,
siteFooter, siteFooter,
Form, Form,
VehicleQuestion vehicleQuestion
}, },
}; };
</script> </script>