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

WIP Update question-page-layout

Browse source
This commit is contained in:
Bryan Mauger 2024-04-17 10:33:02 -04:00
parent f5ee919209
commit 29acac17b2
1 changed files with 54 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -1,51 +1,45 @@
<template>
<div :class="`page-container-grouped-styles questions-page`">
<div class="fade-on-route-transition position-relative">
<loadingModal
ref="loadingModal"
:textSlides="loadingText" />
<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"
@backClicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div>
</div>
</div>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<loadingModal ref="loadingModal" :textSlides="loadingText" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<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"
@backClicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div>
</div>
</div>
@ -70,7 +64,7 @@ export default {
questionChain,
siteSubHeader,
siteFooter,
loadingModal
loadingModal,
},
props: {
isMetaValid: Boolean,
@ -80,7 +74,7 @@ export default {
validationRules: String,
modelValue: Object,
loadingText: Array,
index: Number
index: Number,
},
emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
computed: {
@ -90,16 +84,22 @@ export default {
},
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) {
if (
!glass.questions ||
glass.questions?.length < 1 ||
glass.isSuppressedPart
) {
return false;
}
return this.index === i || glass.answerData?.answerResult?.length > 0;
return (
this.index === i || glass.answerData?.answerResult?.length > 0
);
},
handleForwardButtonAction() {
this.$emit('forwardButtonAction');
@ -109,8 +109,8 @@ export default {
},
showLoadingModal() {
this.$refs.loadingModal.showModal();
}
}
},
},
};
</script>