build molding-questions page

src/layouts/molding-questions/molding-questions.vue

@@ -2,66 +2,53 @@
   <Form
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
+    ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <questionsPageLayout
-      <siteHeader
+      isRequired
-        cmsWidgetName="SiteHeaderWidget"
+      ref="questionsPageLayout"
+      :isMetaValid="meta.valid"
+      :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
+      :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
+      :questionsData="questionsData"
+      validationRules="questions-required"
+      v-model="selectedAnswers"
+      @forwardButtonAction="forwardButtonAction"
+      @back-click="navigateBack"
+      :index="currentGlassIndex"
+      id="molding-question-wrapper"
     />
-      <vehicleBanner
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
-      <siteSubHeader
-        cmsWidgetName="SiteSubHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <p>Placeholder for molding-questions page</p>
-
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
   </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from '@/helpers/layout-helper';
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { useMainStore } from "@/store";
+import { issPageValues } from "@/router/router-constants/issPage-values";
 
 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from "vee-validate";
-import { Form } from 'vee-validate';
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+
-import siteHeader from '@/iss-components/site-header/site-header.vue';
+// DEFINE VALIDATION RULES
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
-  name: 'molding-questions',
+  name: "molding-questions",
-  mixins: [baseFormMixin],
+  mixins: [vehicleQuestionsMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    vehicleBanner,    
-  },  
-  data() {
-    return {};
-  },  
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: 'cmsContent',
+        resultKey: "cmsContent",
         promise: cmsContentPromise,
       },
     ];
@@ -72,18 +59,126 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  data() {
+    return {
+      questionsData: [],
+      selectedAnswers: {},
+      currentGlassIndex: 0,
+    };
+  },
+  computed: {
+    AlertFewMoreQuestionsHeader() {
+      return this.getCmsContent(
+        "AdditionalPartsQuestionsAlert",
+        "HeadlineText"
+      );
+    },
+    AlertFewMoreQuestionsCopy() {
+      return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
+    },
+    partsOrQuestionsData() {
+      return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
+        .partsOrQuestions;
+    },
+  },
+  mounted() {
+    this.getInitialQuestionData();
+  },
   methods: {
     arePagePrerequisiteValid() {
-      return true;
+      const moldingQuestionsFromPageData = useMainStore().getters.pageData(
+        issPageValues.MOLDING_QUESTIONS
+      );
+      return (
+        // has childPartQuestions array and has glassName not null
+        moldingQuestionsFromPageData?.partsOrQuestions?.some(
+          (part) => part?.glassName
+        ) &&
+        moldingQuestionsFromPageData.partsOrQuestions.some((glass) =>
+          glass.parts?.some((part) => part?.childPartQuestions?.length > 0)
+        )
+      );
     },
-    backButtonAction() {
+    getInitialQuestionData() {
-      /**
+      // get any questions that were already answered
-       * this.navigationScenarios comes from base-mixin
+      const alreadyAnsweredQuestions =
-       */
+        useMainStore().order.damage.moldingQuestionAnswers;
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.questionsData = this.partsOrQuestionsData
+        .filter((x) => x.parts[0].childPartQuestions.length)
+        .map((glass, index) => {
+          // NOTE: questions for property "questions" can differ between layouts
+          glass.questions = glass.parts[0].childPartQuestions;
+          glass.answerKey = glass.glassLocation + "-" + glass.glassName;
+          // reset selectedAnswers for this glass
+          this.selectedAnswers[glass.answerKey] = [];
+          const updatedGlass = this.setupInitialData(
+            glass,
+            index,
+            alreadyAnsweredQuestions
+          );
+          // Set up watch for each set of glass questions
+          this.$watch(
+            "selectedAnswers." + glass.answerKey,
+            (newValue) => {
+              if (newValue && Object.keys(newValue).length > 0) {
+                this.handleCompletedQuestionChainAnswers(
+                  newValue,
+                  glass.answerKey
+                );
+              }
             },
-    async forwardButtonAction() {},    
+            { deep: true }
-    resetDependentState() {},
+          );
+          return updatedGlass;
+        });
+    },
+    async forwardButtonAction() {
+            const questionAnswersArray = this.questionsData.map((glass) => {
+                return {
+                    glassLocation: glass.glassLocation,
+                    glassName: glass.glassName,
+                    partNum: glass.answerData.answerResult,
+                    answeredQuestions: glass.answerData.answeredQuestions,
+                    isSuppressedPart: glass.isSuppressedPart,
+                };
+            });
+            // clear out answerData for future page loads; must occur prior to store save
+            this.questionsData.forEach((glass) => {
+                glass.answerData = {};
+            });
+            // save to store as order.damage.moldingQuestionArrays (array)
+            await useMainStore().saveMoldingQuestionAnswers(questionAnswersArray);
+            
+            // get parts from the questionAnswers
+            let partsOrQuestions = this.partsOrQuestionsData;
+            for (let answer of questionAnswersArray) {
+                partsOrQuestions.find((partOrQuestion) => {
+                    return (
+                        partOrQuestion.glassLocation === answer.glassLocation &&
+                        partOrQuestion.glassName === answer.glassName
+                    );
+                }).parts[0].childParts = [
+                    {
+                        partNumber: answer.partNum,
+                    },
+                ];
+            }
+            this.navigateForward(partsOrQuestions);
+    },
+  },
+  components: {
+    Form,
+    questionsPageLayout,
   },
 };
 </script>
+
+<style lang="scss">
+#molding-question-wrapper p.text-body.small {
+  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+}
+
+#molding-question-wrapper .form-test-error {
+  margin-top: 0 !important; // Overrides extra margin-top on error message text
+}
+</style>

src/store/index.js

@@ -701,6 +701,34 @@ export const useMainStore = defineStore({
         //Save new values
         this.updatePartQuestionAnswers(partQuestionAnswersArray);
       },
+      saveMoldingQuestionAnswers(moldingQuestionAnswers) {
+        const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
+          this.getters.damage.moldingQuestionAnswers, 
+          "partNum"
+        );
+        const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
+          moldingQuestionAnswers, 
+          "partNum"
+        );
+        const haveMoldingQuestionAnswersChanged = 
+          sortedPreviousResultsArray?.length !== sortedMoldingQuestionAnswersArray.length ||
+          !sortedPreviousResultsArray?.every(
+            (x, i) => x.partNum === sortedMoldingQuestionAnswersArray[i].partNum
+          );
+        
+        if (haveMoldingQuestionAnswersChanged) {
+          this.updateGlassParts(null);
+          this.updateSupportingItems(null);
+          this.updateCapabilityQuestionAnswers(null);
+          this.updatePageData({
+            page: issPageValues.CAPABILITY_QUESTIONS,
+            data: null,
+          });
+        }
+
+        // Save new values
+        this.updateMoldingQuestionAnswers(moldingQuestionAnswers);
+      },
      
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);