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> <template>
<div :class="`page-container-grouped-styles questions-page`"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<loadingModal <div class="col-md-6 px-0 px-md-2">
ref="loadingModal" <loadingModal ref="loadingModal" :textSlides="loadingText" />
:textSlides="loadingText" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> </div>
<div class="select-car"> </div>
<div class="container-fluid pb-2"> <div class="row justify-content-center">
<div class="row px-3"> <div class="col-md-6 col-xl-4">
<div class="col"> <vehicleBanner
<div class="select-car-form rounded"> class="mt-2 mb-4"
<vehicleBanner cmsWidgetName="VehicleBannerWidget"
class="mt-2 mb-4" :displayGenericVehicleImage="false" />
cmsWidgetName="VehicleBannerWidget" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
:displayGenericVehicleImage="false" /> <alert
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> ref="alertFewMoreQuestions"
<alert cmsWidgetName="alertWidget"
ref="alertFewMoreQuestions" alertClass="alert-warning"
cmsWidgetName="alertWidget" :manualHeadline="alertFewMoreQuestionsHeader"
alertClass="alert-warning" :manualCopy="alertFewMoreQuestionsCopy"
:manualHeadline="alertFewMoreQuestionsHeader" :isDismissible="false"
:manualCopy="alertFewMoreQuestionsCopy" class="mt-5" />
:isDismissible="false" <div
class="mt-5" /> v-for="(questionsDatum, i) in questionsData"
<div :key="questionsDatum.key">
v-for="(questionsDatum, i) in questionsData" <questionChain
:key="questionsDatum.key"> v-if="showThisQuestionChain(questionsDatum, i)"
<questionChain ref="questionChain"
v-if="showThisQuestionChain(questionsDatum, i)" v-model="selectedAnswers[questionsDatum.answerKey]"
ref="questionChain" :questionData="questionsDatum.questions"
v-model="selectedAnswers[questionsDatum.answerKey]" :index="i"
:questionData="questionsDatum.questions" :answerKey="questionsDatum.answerKey"
:index="i" :validationRules="validationRules" />
:answerKey="questionsDatum.answerKey"
:validationRules="validationRules" />
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!isMetaValid"
@backClicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div>
</div>
</div>
</div> </div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!isMetaValid"
@backClicked="handleBackButtonAction"
@ForwardClicked="handleForwardButtonAction" />
</div> </div>
</div> </div>
</div> </div>
@ -70,7 +64,7 @@ export default {
questionChain, questionChain,
siteSubHeader, siteSubHeader,
siteFooter, siteFooter,
loadingModal loadingModal,
}, },
props: { props: {
isMetaValid: Boolean, isMetaValid: Boolean,
@ -80,7 +74,7 @@ export default {
validationRules: String, validationRules: String,
modelValue: Object, modelValue: Object,
loadingText: Array, loadingText: Array,
index: Number index: Number,
}, },
emits: ['update:modelValue', 'forwardButtonAction', 'back-click'], emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
computed: { computed: {
@ -90,16 +84,22 @@ export default {
}, },
set(newValue) { set(newValue) {
this.$emit('update:modelValue', newValue); this.$emit('update:modelValue', newValue);
} },
} },
}, },
methods: { methods: {
showThisQuestionChain(glass, i) { showThisQuestionChain(glass, i) {
// return false if no questions or if suppressed // 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 false;
} }
return this.index === i || glass.answerData?.answerResult?.length > 0; return (
this.index === i || glass.answerData?.answerResult?.length > 0
);
}, },
handleForwardButtonAction() { handleForwardButtonAction() {
this.$emit('forwardButtonAction'); this.$emit('forwardButtonAction');
@ -109,8 +109,8 @@ export default {
}, },
showLoadingModal() { showLoadingModal() {
this.$refs.loadingModal.showModal(); this.$refs.loadingModal.showModal();
} },
} },
}; };
</script> </script>