CSR-803: refactor loadInitialData for questions pages

src/common-components/question-chain/question-chain.vue

@@ -72,7 +72,7 @@ export default {
         this.currentQuestionNum = this.questions[0].questionSequence;
         // scroll the next question into view
         this.$nextTick(() => {
-            document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
+            document.querySelector('.current-question')?.scrollIntoView({behavior: "smooth"});
         })
     }
   },

src/layouts/capability-questions/capability-questions.vue

@@ -96,7 +96,17 @@ export default {
         }
     },
     mounted() {
-        this.loadInitialCapabilityQuestionsData();
+        // are there alreadyAnsweredQuestions?
+        const alreadyAnsweredQuestions = store.getters.damage.capabilityQuestionAnswers;
+
+        this.capabilityQuestionsData = this.pageData.partsOrQuestions.filter(x => x.capabilityQuestions).map((glass, i) => {
+            // NOTE: questions for property "questions" can differ between layouts
+            glass.questions = glass.capabilityQuestions;
+            // reset selectedAnswers for this glass
+            this.selectedAnswers[glass.key] = [];
+            // pass in: glass, i, alreadyAnsweredQuestions
+            return this.setupInitialData(glass, i, alreadyAnsweredQuestions);
+        });
     },
     methods: {
         showThisQuestionChain(glass, i) {
@@ -109,14 +119,13 @@ export default {
         },
         async forwardButtonAction() {
             const capabilityQuestionsAnswersArray = this.capabilityQuestionsData.map((glass) => {
-                const selectedAnswerResult1 = glass.answerData.answerResult;
+                const selectedAnswerResult2 = this.getCorrespondingAnswerResult2(glass.answerData.answerResult);
-                const selectedAnswerResult2 = glass.answerData.answerResult2;
 
                 return {
                     glassLocation: glass.glassLocation,
                     glassName: glass.glassName,
                     result: glass.answerData.answerResult,
-                    result1: selectedAnswerResult1,
+                    result1: glass.answerData.answerResult,
                     result2: selectedAnswerResult2,
                     answeredQuestions: glass.answerData.answeredQuestions,
                     isSuppressedPart: glass.isSuppressedPart,
@@ -255,7 +264,6 @@ export default {
                                             // restore original answerResult
                                             if (thisAns.originalAnswerResult) {
                                                 thisAns.answerResult = thisAns.originalAnswerResult;
-                                                thisAns.answerResult1 = thisAns.originalAnswerResult;
                                                 thisAns.originalAnswerResult = null;
                                             }
                                         }
@@ -270,7 +278,6 @@ export default {
                                                 thisAns.nextQuestionSequence = null;
                                                 thisAns.originalAnswerResult = thisAns.originalAnswerResult || thisAns.answerResult;
                                                 thisAns.answerResult = matchedAnswer.answerResult;
-                                                thisAns.answerResult1 = matchedAnswer.answerResult;
                                             }
                                         }
                                     });
@@ -306,7 +313,6 @@ export default {
                                     // set the answerData as 'already answered'
                                     glass.answerData = {
                                         answerResult: matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence : matchedAnswer.answerResult,
-                                        answerResult1: matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence : matchedAnswer.answerResult,
                                         answeredQuestions: [answeredQuestionObj],
                                     };
 
@@ -383,14 +389,9 @@ export default {
             });
             filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a, b) => a.questionNum - b.questionNum);
 
-            const selectedAnswerResult1 = answer.answerResult;
-            const selectedAnswerResult2 = this.getCorrespondingAnswerResult2(selectedAnswerResult1);
-
             // set final answer data for the current answered glass part
             glassPartAnswered.answerData = {
-                answerResult: selectedAnswerResult1,
+                answerResult: answer.answerResult,
-                answerResult1: selectedAnswerResult1,
-                answerResult2: selectedAnswerResult2,
                 answeredQuestions: filteredCompleteAnsweredQuestions,
             }
 
@@ -412,73 +413,6 @@ export default {
                 .answers.find(answer => answer.answerResult == answerResult1)
                 .answerResult2;
         },
-        loadInitialCapabilityQuestionsData() {
-            // are there alreadyAnsweredQuestions?
-            const alreadyAnsweredQuestions = store.getters.damage.capabilityQuestionAnswers;
-
-            this.capabilityQuestionsData = this.pageData.partsOrQuestions.filter(x => x.capabilityQuestions).map((glass, i) => {
-                glass.key = glass.glassLocation + "-" + glass.glassName;
-                this.selectedAnswers[glass.key] = [];
-                if (!alreadyAnsweredQuestions) {
-                    glass.answerData = null;
-                }
-
-                alreadyAnsweredQuestions?.forEach((savedPart) => {
-
-                    if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
-                        return;
-                    }
-                    if (glass.glassLocation === savedPart.glassLocation && glass.glassName === savedPart.glassName) {
-                        let answerString = "";
-
-                        // matches; loop through answeredQuestions for matches
-                        savedPart.answeredQuestions.forEach((aq) => {
-                            if (!aq.questionNum || !aq.selectedAnswerText) {
-                                return;
-                            }
-                            // determine which answer was previously chosen
-                            const theAns = glass.capabilityQuestions[aq.questionNum - 1].answers.find((a) => {
-                                return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
-                            });
-                            if (theAns.nextQuestionSequence) {
-                                answerString = `${aq.questionNum}|nextQuestion|${theAns.nextQuestionSequence}|${theAns.answerText}`
-                            } else {
-                                answerString = `${aq.questionNum}|answer|${theAns.answerResult}|${theAns.answerText}`
-                            }
-
-                            // mark this partQuestion as answered (question-chain will read this)
-                            glass.capabilityQuestions[aq.questionNum - 1].answerSelected = answerString;
-                            // mark this partQuestion as duplicate if it is (question-chain will read this)
-                            if (aq.suppressQuestion) {
-                                glass.capabilityQuestions[aq.questionNum - 1].suppressQuestion = true;
-                            }
-                        });
-
-                        // advance the currentQuestionChainIndex
-                        this.currentQuestionChainIndex = i;
-
-                        // add answerData to current glass
-                        glass.answerData = {
-                            answerResult: savedPart.result,
-                            answerResult1: savedPart.result,
-                            answerResult2: this.getCorrespondingAnswerResult2(savedPart.result),
-                            answeredQuestions: savedPart.answeredQuestions
-                        }
-                    }
-
-                });
-
-                // Set up watch for each set of glass questions, which gets updated when all questions for a glass have been answered
-                this.$watch("selectedAnswers." + glass.key, (newValue) => {
-                    if (newValue) {
-                        this.handleAnswerUpdates(newValue);
-                    }
-                }, { deep: true })
-
-                return glass;
-            });
-
-        },
     },
     components: {
         funnelHeader,

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

@@ -108,7 +108,17 @@ export default {
         }
     },
     mounted() {
-        this.LoadInitialData();
+        // are there alreadyAnsweredQuestions?
+        const alreadyAnsweredQuestions = store.getters.damage.moldingQuestionAnswers;
+
+        this.moldingQuestionsData = this.pageData.partsOrQuestions.filter(x => x.parts[0].childPartQuestions.length).map((glass, i) => {
+            // NOTE: questions for property "questions" can differ between layouts
+            glass.questions = glass.parts[0].childPartQuestions;
+            // reset selectedAnswers for this glass
+            this.selectedAnswers[glass.key] = [];
+            // pass in: glass, i, alreadyAnsweredQuestions
+            return this.setupInitialData(glass, i, alreadyAnsweredQuestions);
+        });
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -152,7 +162,7 @@ export default {
 
             this.navigateForward(partsOrQuestions);
         },
-        handleAnswerUpdates(key, answer) { 
+        handleAnswerUpdates(answer) { 
             // only runs when all questions in a question-chain have been answered
             //      when selectedAnswers updates, user has completed this part's question chain and has a final answer
             //      (does not get run for each invididual question's answer, only when 
@@ -408,75 +418,6 @@ export default {
             }
 
         },
-        LoadInitialData() {
-            
-            // are there alreadyAnsweredQuestions?
-            const alreadyAnsweredQuestions = store.getters.damage.moldingQuestionAnswers;
-
-            this.moldingQuestionsData = this.pageData.partsOrQuestions.filter(x => x.parts[0].childPartQuestions.length).map((glass, i) => {
-                glass.key = glass.glassLocation + "-" + glass.glassName;
-                // NOTE: property "questions" can differ between layouts
-                glass.questions = glass.parts[0].childPartQuestions;
-
-                this.selectedAnswers[glass.key] = [];
-                if (!alreadyAnsweredQuestions) {
-                    glass.answerData = null;
-                }
-
-                alreadyAnsweredQuestions?.forEach((savedPart) => {
-
-                    if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.partNum) {
-                        return;
-                    }
-                    if (glass.glassLocation === savedPart.glassLocation && glass.glassName === savedPart.glassName) {
-                        let answerString = "";
-
-                        // matches; loop through answeredQuestions for matches
-                        savedPart.answeredQuestions.forEach((aq) => {
-                            if (!aq.questionNum || !aq.selectedAnswerText) {
-                                return;
-                            }
-                            // determine which answer was previously chosen
-                            const theAns = glass.questions[aq.questionNum-1].answers.find((a) => {
-                                return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
-                            });
-                            if (theAns.nextQuestionSequence) {
-                                answerString = `${aq.questionNum}|nextQuestion|${theAns.nextQuestionSequence}|${theAns.answerText}`
-                            } else {
-                                answerString = `${aq.questionNum}|answer|${theAns.answerResult}|${theAns.answerText}`
-                            }
-
-                            // mark this partQuestion as answered (question-chain will read this)
-                            glass.questions[aq.questionNum-1].answerSelected = answerString;
-                            // mark this partQuestion as duplicate if it is (question-chain will read this)
-                            if (aq.suppressQuestion) {
-                                glass.questions[aq.questionNum-1].suppressQuestion = true;
-                            }
-                        });
-
-                        // advance the currentGlassIndex
-                        this.currentGlassIndex = i;
-
-                        // add answerData to current glass
-                        glass.answerData = {
-                            answerResult: savedPart.partNum,
-                            answeredQuestions: savedPart.answeredQuestions
-                        }
-                    }
-
-                });
-
-                // Set up watch for each set of glass questions, which gets updated when all questions for a glass have been answered
-                this.$watch("selectedAnswers." + glass.key, (newValue) => {
-                    if (newValue) {
-                        this.handleAnswerUpdates(glass.key, newValue);
-                    }
-                }, {deep: true})
-
-                return glass;
-            });
-
-        },
     },
     components: {
         funnelHeader,

src/layouts/part-questions/part-questions.vue

@@ -90,7 +90,7 @@ export default {
     },
     data() {
         return {
-            partsQuestionsData: store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions,
+            partsQuestionsData: [],
             selectedAnswers: {},
             currentGlassIndex: 0,
         };
@@ -108,7 +108,17 @@ export default {
     },
     mixins: [vehicleQuestionsMixin],
     mounted() {
-        this.LoadInitialData();
+        // are there alreadyAnsweredQuestions?
+        const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers;
+
+        this.partsQuestionsData = this.pageData.partsOrQuestions.filter(x => x.partQuestions).map((glass, i) => {
+            // NOTE: questions for property "questions" can differ between layouts
+            glass.questions = glass.partQuestions;
+            // reset selectedAnswers for this glass
+            this.selectedAnswers[glass.key] = [];
+            // pass in: glass, i, alreadyAnsweredQuestions
+            return this.setupInitialData(glass, i, alreadyAnsweredQuestions);
+        });
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -148,7 +158,7 @@ export default {
 
             this.navigateForward(glassNameAndPartsForStore);
         },
-        handleAnswerUpdates(key, answer) { 
+        handleAnswerUpdates(answer) {
             // only runs when all questions in a question-chain have been answered
             //      when selectedAnswers updates, user has completed this part's question chain and has a final answer
             //      (does not get run for each invididual question's answer, only when 
@@ -404,75 +414,6 @@ export default {
             }
 
         },
-        LoadInitialData() {
-            
-            // are there alreadyAnsweredQuestions?
-            const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers;
-
-            this.partsQuestionsData = this.pageData.partsOrQuestions.filter(x => x.partQuestions).map((glass, i) => {
-                glass.key = glass.glassLocation + "-" + glass.glassName;
-                // NOTE: property "questions" can differ between layouts
-                glass.questions = glass.partQuestions;
-
-                this.selectedAnswers[glass.key] = [];
-                if (!alreadyAnsweredQuestions) {
-                    glass.answerData = null;
-                }
-
-                alreadyAnsweredQuestions?.forEach((savedPart) => {
-
-                    if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
-                        return;
-                    }
-                    if (glass.glassLocation === savedPart.glassLocation && glass.glassName === savedPart.glassName) {
-                        let answerString = "";
-
-                        // matches; loop through answeredQuestions for matches
-                        savedPart.answeredQuestions.forEach((aq) => {
-                            if (!aq.questionNum || !aq.selectedAnswerText) {
-                                return;
-                            }
-                            // determine which answer was previously chosen
-                            const theAns = glass.questions[aq.questionNum-1].answers.find((a) => {
-                                return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
-                            });
-                            if (theAns.nextQuestionSequence) {
-                                answerString = `${aq.questionNum}|nextQuestion|${theAns.nextQuestionSequence}|${theAns.answerText}`
-                            } else {
-                                answerString = `${aq.questionNum}|answer|${theAns.answerResult}|${theAns.answerText}`
-                            }
-
-                            // mark this question as answered (question-chain will read this)
-                            glass.questions[aq.questionNum-1].answerSelected = answerString;
-                            // mark this question as duplicate if it is (question-chain will read this)
-                            if (aq.suppressQuestion) {
-                                glass.questions[aq.questionNum-1].suppressQuestion = true;
-                            }
-                        });
-
-                        // advance the currentGlassIndex
-                        this.currentGlassIndex = i;
-
-                        // add answerData to current glass
-                        glass.answerData = {
-                            answerResult: savedPart.result,
-                            answeredQuestions: savedPart.answeredQuestions
-                        }
-                    }
-
-                });
-
-                // Set up watch for each set of glass questions, which gets updated when all questions for a glass have been answered
-                this.$watch("selectedAnswers." + glass.key, (newValue) => {
-                    if (newValue) {
-                        this.handleAnswerUpdates(glass.key, newValue);
-                    }
-                }, {deep: true})
-
-                return glass;
-            });
-
-        },
     },
     components: {
         funnelHeader,

src/mixins/vehicle-questions-mixin.js

@@ -64,6 +64,68 @@ export default {
         currentPageComesAfterPage(currentPage = this.$route.query.fmgPage, fmgPage) {
             return this.comparePageIndices(currentPage, fmgPage) > 0;
         },
+        setupInitialData(glass, i, alreadyAnsweredQuestions, vm) {
+            glass.key = glass.glassLocation + "-" + glass.glassName;
+            const self = vm ?? this;
+            // clear answerData if no questions are already answered
+            if (!alreadyAnsweredQuestions) { glass.answerData = null }
+
+            alreadyAnsweredQuestions?.forEach((answeredGlass) => {
+                // if answeredGlass lacks any of these properties then exit
+                if (!answeredGlass.glassLocation || 
+                    !answeredGlass.glassName || 
+                    !answeredGlass.answeredQuestions || 
+                    !answeredGlass.result && !answeredGlass.partNum) { return }
+
+                // test if glass parts match
+                if (glass.glassLocation === answeredGlass.glassLocation && glass.glassName === answeredGlass.glassName) {
+                    let answerString = "";
+
+                    // loop through answeredQuestions for matches
+                    answeredGlass.answeredQuestions.forEach((aq) => {
+                        if (!aq.questionNum || !aq.selectedAnswerText) { return }
+                        // determine which answer was previously chosen
+                        const chosenAns = glass.questions[aq.questionNum-1].answers.find((a) => {
+                            return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
+                        });
+                        // set the answerString to use for answerSelected
+                        if (chosenAns.nextQuestionSequence) {
+                            answerString = `${aq.questionNum}|nextQuestion|${chosenAns.nextQuestionSequence}|${chosenAns.answerText}`
+                        } else {
+                            answerString = `${aq.questionNum}|answer|${chosenAns.answerResult}|${chosenAns.answerText}`
+                        }
+
+                        // mark this question as answered (question-chain will read this)
+                        glass.questions[aq.questionNum-1].answerSelected = answerString;
+                        // mark this question as suppressed if needed (question-chain uses this)
+                        if (aq.suppressQuestion) { glass.questions[aq.questionNum-1].suppressQuestion = true }
+                    });
+
+                    // advance the currentGlassIndex
+                    self.currentGlassIndex = i;
+
+                    const answerResult = (answeredGlass.partNum) ? answeredGlass.partNum : answeredGlass.result;
+                    // the above logic for answerResult covers all 3 ___-questions page scenarios
+
+                    // add answerData to current glass
+                    glass.answerData = {
+                        answerResult: answerResult,
+                        answeredQuestions: answeredGlass.answeredQuestions
+                    }
+                }
+
+            });
+
+            // Set up watch for each set of glass questions 
+            //   (updated when all questions for a glass have been answered in question-chain)
+            self.$watch("selectedAnswers." + glass.key, (newValue) => {
+                if (newValue) {
+                    self.handleAnswerUpdates(newValue);
+                }
+            }, {deep: true})
+
+            return glass;
+        },
         // Can't use `this` because navigateForward is also called from vin-pages-mixin
         async navigateForward(partsOrQuestions, vm) {
             const self = vm ?? this;