124 lines
4.7 KiB
Vue
124 lines
4.7 KiB
Vue
<template>
|
|
<div :class="`page-container-grouped-styles questions-page`">
|
|
<div class="fade-on-route-transition position-relative">
|
|
<loadingModal ref="loadingModal" />
|
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
<div class="select-car">
|
|
<div class="container-fluid pb-2">
|
|
<div class="row px-3">
|
|
<div class="col">
|
|
<div class="select-car-form rounded">
|
|
<vehicleBanner
|
|
class="mt-2 mb-4"
|
|
cmsWidgetName="VehicleBannerWidget"
|
|
:displayGenericVehicleImage="false" />
|
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
|
<alert
|
|
ref="alertFewMoreQuestions"
|
|
cmsWidgetName="alertWidget"
|
|
alertClass="alert-warning"
|
|
:manualHeadline="alertFewMoreQuestionsHeader"
|
|
:manualCopy="alertFewMoreQuestionsCopy"
|
|
:isDismissible="false"
|
|
class="mt-5" />
|
|
<div
|
|
v-for="(questionsDatum, i) in questionsData"
|
|
:key="questionsDatum.key">
|
|
<questionChain
|
|
v-if="showThisQuestionChain(questionsDatum, i)"
|
|
ref="questionChain"
|
|
v-model="selectedAnswers[questionsDatum.answerKey]"
|
|
:questionData="questionsDatum.questions"
|
|
:index="i"
|
|
:answerKey="questionsDatum.answerKey"
|
|
:validationRules="validationRules" />
|
|
</div>
|
|
<siteFooter
|
|
ref="siteFooter"
|
|
class="mt-5"
|
|
cmsWidgetName="SiteFooterWidget"
|
|
:isForwardActionDisabled="!isMetaValid"
|
|
@back-clicked="handleBackButtonAction"
|
|
@ForwardClicked="handleForwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import siteHeader from '@/iss-components/site-header/site-header';
|
|
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner';
|
|
import alert from '@/ux-components/alert/alert';
|
|
import questionChain from '@/digital-components/question-chain/question-chain';
|
|
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer';
|
|
import loadingModal from '@/iss-components/loading-modal/loading-modal';
|
|
|
|
export default {
|
|
name: 'questions-page',
|
|
components: {
|
|
siteHeader,
|
|
vehicleBanner,
|
|
alert,
|
|
questionChain,
|
|
siteSubHeader,
|
|
siteFooter,
|
|
loadingModal
|
|
},
|
|
props: {
|
|
isMetaValid: Boolean,
|
|
alertFewMoreQuestionsHeader: String,
|
|
alertFewMoreQuestionsCopy: String,
|
|
questionsData: Array,
|
|
validationRules: String,
|
|
modelValue: Object,
|
|
index: Number
|
|
},
|
|
emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
|
|
computed: {
|
|
selectedAnswers: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(newValue) {
|
|
this.$emit('update:modelValue', newValue);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
showThisQuestionChain(glass, i) {
|
|
// return false if no questions or if suppressed
|
|
if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
|
|
return false;
|
|
}
|
|
return this.index === i || glass.answerData?.answerResult?.length > 0;
|
|
},
|
|
handleForwardButtonAction() {
|
|
this.$emit('forwardButtonAction');
|
|
},
|
|
handleBackButtonAction() {
|
|
this.$emit('back-click');
|
|
},
|
|
showLoadingModal() {
|
|
this.$refs.loadingModal.showModal();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.questions-page {
|
|
.question-text {
|
|
margin-bottom: 0.5rem;
|
|
|
|
span {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
</style>
|