commit

2022-11-23 08:21:40 -05:00 · 2022-11-23 08:21:40 -05:00 · d4008e3ada
commit d4008e3ada
parent 024c10df8f
1 changed files with 107 additions and 0 deletions
--- a/src/common-components/questions-page-layout/questions-page-layout.vue
+++ b/src/common-components/questions-page-layout/questions-page-layout.vue
@ -0,0 +1,107 @@
+<template>
+    <div :class="`page-container-grouped-styles questions-page`">
+        <loadingModal ref="loadingModal" />
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+        <div class="fade-on-route-transition sub-container make-tall">
+            <alert
+                ref="alertFewMoreQuestions"
+                cmsWidgetName="alertWidget"
+                class="my-5"
+                alertClass="alert-warning"
+                :manualHeadline="alertFewMoreQuestionsHeader"
+                :manualCopy="alertFewMoreQuestionsCopy"
+                v-bind:isDismissible="false" />
+            <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" />
+            </div>
+            <site-footer
+                ref="siteFooter"
+                cmsWidgetName="SiteFooterWidget"
+                :isForwardActionDisabled="!isMetaValid"
+                @back-clicked="handleBackButtonClicked"
+                @ForwardClicked="handleForwardButtonAction" />
+        </div>
+    </div>
+</template>
+
+<script>
+// Components
+import siteHeader from "@/common-components/site-header/site-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
+import questionChain from "@/common-components/question-chain/question-chain";
+import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import siteFooter from "@/common-components/site-footer/site-footer";
+import loadingModal from "@/common-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: {
+            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();
+        },
+    },
+    components: {
+        siteHeader,
+        vehicleBanner,
+        alert,
+        questionChain,
+        siteSubHeader,
+        siteFooter,
+        loadingModal,
+    },
+};
+</script>
+
+<style lang="scss">
+.questions-page {
+    .question-text {
+        margin-bottom: 0.5rem;
+
+        span {
+            text-align: left;
+        }
+    }
+}
+</style>