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

<template>
  <Form
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit"
    ref="theForm"
    v-slot="{ meta }"
  >
    <questionsPageLayout
      isRequired
      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"
    />
  </Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-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 BaseFormMixin from '@/mixins/base-form-mixin.js';

// Import Component
import { Form } from "vee-validate";
import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";

// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));

export default {
  name: "molding-questions",
  mixins: [BaseFormMixin, vehicleQuestionsMixin],
  async beforeRouteEnter(to, from, next) {
    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

    // Settle promises and get results
    const promiseResultMap = [
      {
        resultKey: "cmsContent",
        promise: cmsContentPromise,
      },
    ];

    const resultMap = await settleAllPromises(promiseResultMap);

    next((vm) => {
      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: {
    arePagePrerequisitesValid() {
      const moldingQuestionsFromPageData = useMainStore().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)
        )
      );
    },
    getInitialQuestionData() {
      // get any questions that were already answered
      const alreadyAnsweredQuestions =
        useMainStore().damage.moldingQuestionAnswers;
      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.handleAnswerUpdates(
                  newValue,
                  glass.answerKey
                );
              }
            },
            { deep: true }
          );
          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 this.mainStore.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, null);
    },
  },
  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>