114 lines
3.6 KiB
Vue
114 lines
3.6 KiB
Vue
<template>
|
|
<div :class="`questions-page`">
|
|
<loadingModal ref="loadingModal" />
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
|
<div class="container page-container-grouped-styles">
|
|
<div class="row">
|
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
|
|
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
|
|
<questionChain
|
|
ref="questionChain"
|
|
v-model="selectedAnswers[questionsDatum.answerKey]"
|
|
:questionData="questionsDatum.questions"
|
|
:index="i"
|
|
v-if="showThisQuestionChain(questionsDatum, i)"
|
|
:answerKey="questionsDatum.answerKey"
|
|
:validationRules="validationRules" />
|
|
<!-- Save your progress slot -->
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<navbar
|
|
ref="navbar"
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
:isForwardActionDisabled="!isMetaValid"
|
|
@back-clicked="handleBackButtonAction"
|
|
@ForwardClicked="handleForwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|
import questionChain from "@/digital-components/question-chain/question-chain";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
|
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
|
|
|
export default {
|
|
name: "questions-page",
|
|
props: {
|
|
isMetaValid: Boolean,
|
|
alertFewMoreQuestionsHeader: String,
|
|
alertFewMoreQuestionsCopy: String,
|
|
questionsData: Array,
|
|
validationRules: String,
|
|
modelValue: Object,
|
|
index: Number,
|
|
},
|
|
computed: {
|
|
selectedAnswers() {
|
|
return this.modelValue;
|
|
},
|
|
},
|
|
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();
|
|
},
|
|
},
|
|
components: {
|
|
funnelHeader,
|
|
questionChain,
|
|
funnelSubHeader,
|
|
navbar,
|
|
loadingModal,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav-bar {
|
|
margin-top: 1rem;
|
|
}
|
|
.save-progress-modal-question {
|
|
margin: 2rem 0;
|
|
}
|
|
.questions-page {
|
|
.question-text {
|
|
margin-bottom: 1.5rem;
|
|
|
|
span {
|
|
text-align: left;
|
|
}
|
|
}
|
|
.question-chain-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.nav-bar {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|