CSR-108: updates for handling duplicate questions and loading a previous user state

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

@@ -7,8 +7,9 @@
                 :class="(q.questionSequence === currentQuestionNum) && 'current-question'"
                 :questionText="q.questionText"
                 :answers="q.answers"
-                :groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`"
+                :groupName="`${keyString}-${q.questionSequence}`"
-                v-model="selectedValue"
+                v-model="q.answerSelected"
+                @isCheckedChanged="handleChainCompleted"
                 isRequired
                 :validationRules="validationRules"
             />
@@ -24,8 +25,8 @@ export default {
   name: "questionChain",
   data() {
     return {
-      currentQuestionNum: 1,
+      currentQuestionNum: 0,
-      questions: [{ "BlankObject": "NOT USED... placeholder for question #0 to simplify indexing"}],
+      questions: [],
     };
   },
   props: {
@@ -33,13 +34,13 @@ export default {
     validationRules: String,
     modelValue: Array,
     partIndex:  Number,
-    key: String,
+    keyString: String,
   },
   async created() {
     // validate form upon create to prevent out of sync / persistent valid states
     await useValidateForm(); // do a test validation check, without triggering full validation
 
-    this.questionData.partQuestions.map((q, i) => {
+    this.questionData.map((q, i) => {
       let answerPair = [];
       const question = {
         questionText: q.questionText,
@@ -47,7 +48,7 @@ export default {
         answers: q.answers.map((a) => {
             answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult);
             return {
-                Text: a.answerText + " (" + a.answerResult + a.nextQuestionSequence + ")",
+                Text: a.answerText,
                 // Name will either be nextQuestionSequence or answerResult
                 // Name will be used by list-button as the input value.
                 // It must be a single string or number, so concatenating together a string with
@@ -59,34 +60,32 @@ export default {
                 nextQuestionSequence: a.nextQuestionSequence,
             }
         }),
-        answerSelected: "",
+        answerSelected: q.answerSelected || "",
       };
       question.answerPair = answerPair;
-      if (!q.suppressQuestion) {
+      if (!q.isDuplicateQuestion) {
         this.questions.push(question);
       }
     });
-    // set this.currentQuestionNum to first valid question
-    this.currentQuestionNum = this.questions[1].questionSequence;
-  },
-  computed: {
-    selectedValue: {
-      get: function() {
-        return this.modelValue[0];
-      },
-      set: function(returnedAnswer) {
-        const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer);
 
-        if (isQuestionChainComplete) {
+    if (!this.modelValue?.length > 0) {
-            this.$emit("update:modelValue", isQuestionChainComplete);
+      // set this.currentQuestionNum to first valid question
-        }
+      this.currentQuestionNum = this.questions[0].questionSequence;
-      }
+      // scroll the next question into view
-    },
+      this.$nextTick(() => {
-    currentQuestion() {
+          document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
-      return this.questions[this.currentQuestionNum];
+      })
-    },
+    }
+
   },
   methods: {
+    handleChainCompleted(returnedAnswer) {
+      const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer.value);
+
+      if (isQuestionChainComplete) {
+        this.$emit("update:modelValue", isQuestionChainComplete);
+      }
+    },
     handleReturnedAnswer(returnedAnswer) {   // this method will return either a final answer or Boolean false
       if (!returnedAnswer) { return false }
 
@@ -103,7 +102,7 @@ export default {
       this.questions.forEach((q) => {
         // mark this question as "answered"
         if (q.questionSequence === questionNum) {
-          q.answerSelected = questionAnswerText;
+          q.answerSelected = returnedAnswer;
           q.answerNumber = questionNum;
         }
         // remove all previous answers after the index of this one in questions
@@ -112,11 +111,14 @@ export default {
         }
       });
 
-      // update to next question index
-      this.currentQuestionNum = questionType === "nextQuestion" ? parseInt(questionAnswer) : questionNum; // update count to display next question
-
       // return false if there's a nextQuestion... or return an object with "final" answers
       if (questionType === "nextQuestion") {
+        // update to next question index
+        this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question
+        // scroll the next question into view
+        this.$nextTick(() => {
+            document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
+        })
         return false;
       } else {
         const answeredQuestions = [];
@@ -124,30 +126,23 @@ export default {
           if (q.answerSelected) {
             answeredQuestions.push({
               questionText: q.questionText,
-              selectedAnswerText: q.answerSelected,
+              selectedAnswerText: q.answerSelected.split("|")[3],
-              questionNum: q.answerNumber,
+              questionNum: q.questionSequence,
             });
           }
         });
+        // reset current question index
+        this.currentQuestionNum = 0; // reset count
+
         return {
             answerResult: questionAnswer,
             answeredQuestions: answeredQuestions,
             partIndex: this.partIndex,
         };
+
       }
     },
   },
-  watch: {
-    currentQuestion: {
-      handler() {
-        // scrolls page to next active question
-        this.$nextTick(() => {
-          document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
-        })
-      },
-      deep: true
-    }
-  },
   components: {
     buttonQuestion,
   },

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

@@ -24,8 +24,9 @@
                     <questionChain
                         ref="questionChain"
                         :key="part.key"
-                        v-model="selectedAnswer"
+                        :keyString="part.key"
-                        :questionData="part"
+                        v-model="selectedAnswers[part.glassLocation + '-' + part.glassName]"
+                        :questionData="part.partQuestions"
                         :partIndex="i"
                         v-if="showThisPartQuestionChain(part, i)"
                         validationRules="questions-required"
@@ -95,7 +96,7 @@ export default {
             partsQuestionsFromApi: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
                 return Array.isArray(p.partQuestions) && p.partQuestions.length > 0;
             }),
-            selectedAnswer: [],
+            selectedAnswers: {},
             currentPartNum: 0,
             newAnswersArray: [],
             partsQuestionsData: [],
@@ -112,14 +113,11 @@ export default {
     },
     mixins: [vehicleQuestionsMixin],
     mounted() {
-        this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => {
+        this.LoadInitialPartsData();
-            part.key = part.glassLocation + part.glassName;
-            return part;
-        });
     },
     methods: {
         showThisPartQuestionChain(part, i) {
-            if (part.partQuestions?.length < 1 || part.suppressPart) { return false; } // return false if no partQuestions or if suppressed
+            if (part.partQuestions?.length < 1 || part.isSuppressedPart) { return false; } // return false if no partQuestions or if suppressed
             if (this.currentPartNum === i || part.answerData?.answerResult?.length > 0) { return true; }
             return false;
         },
@@ -137,6 +135,7 @@ export default {
                     glassName: item.glassName,
                     result: item.answerData.answerResult,
                     answeredQuestions: item.answerData.answeredQuestions,
+                    isSuppressedPart: item.isSuppressedPart,
                 };
             });
 
@@ -185,20 +184,22 @@ export default {
         arePagePrerequisitesValid() {
             return Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length > 0;
         },
-    },
+        handleAnswerUpdates(key, answer) { // only runs when all questions in a question-chain have been answered
-    watch: {
+            // when selectedAnswers updates, user has completed this part's question chain and has a final answer
-        selectedAnswer(answer) {
-            // when selectedAnswer 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 
                 //  all relevent questions for the current part have been answered)
-            const glassPart = this.partsQuestionsData[answer.partIndex];
+            const glassPartWithAnswer = this.partsQuestionsData[answer.partIndex];
-            const completeAnsweredQuestions = [...answer.answeredQuestions];
+            const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : [];
             const answeredQuestionIndexes = [];
 
+            // since user has answered a question differently than anything that was preloaded,
+            //     then clear out the preloaded answers
+            this.selectedAnswers = {};
+
             // examine all the answers returned that were part of the user's journey through question-chain
 
             // loop through every answered question on currently answered glass part
-            answer.answeredQuestions.forEach((aq) => {
+            answer.answeredQuestions?.forEach((aq) => {
 
                 // gather all the question numbers of the answered questions
                 answeredQuestionIndexes.push(aq.questionNum);
@@ -215,14 +216,18 @@ export default {
 
                         // loop through this glass part's part questions, looking for a questionText match
                         glassPart.partQuestions.forEach((pq, pqIndex) => {
-                            // does pq.questionText match answeredQuestionText? (do we have a duplicate question?)
+                            // clear out any previously set answers
+                            //delete pq.answerSelected;
+                            pq.answerSelected = null;
 
+                            // does pq.questionText match answeredQuestionText? (aka do we have a duplicate question?)
                             if (pq.questionText.toUpperCase() === answeredQuestionText) {
+                                
                                 // which one of this partQuestions' answers matches our answer?
-
                                 let matchedAnswer;
                                 pq.answers.forEach((ans, ansIndex) => {
-                                    delete pq.answers[ansIndex].selected;
+                                    // delete pq.answers[ansIndex].selected;
+                                    pq.answers[ansIndex].selected = null;
                                     if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
                                         matchedAnswer = ans;
                                         pq.answers[ansIndex].selected = true;
@@ -233,8 +238,10 @@ export default {
                                     const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex];
 
                                     // remove answerData from this glass part
-                                    delete glassPart.answerData;
+                                    // delete glassPart.answerData;
-                                    delete glassPart.suppressPart;
+                                    glassPart.answerData = null;
+                                    // delete glassPart.isSuppressedPart;
+                                    glassPart.isSuppressedPart = null;
 
                                     // Update the key to re-render this part's question-chain component
                                     this.partsQuestionsData[i].key = this.partsQuestionsData[i].glassLocation + this.partsQuestionsData[i].glassName + Date.now().toString();
@@ -245,11 +252,11 @@ export default {
                                     });
 
                                     if (rejectedAnswer[0].nextQuestionSequence) {
-                                        glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressQuestion = true;
+                                        glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressDuplicateQuestion = true;
                                     }
                                     if (matchedAnswer.nextQuestionSequence) {
                                         // ensure that accepted answer is NOT suppressed
-                                        delete glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion;
+                                        glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressDuplicateQuestion = null;
                                     }
 
                                     // handle suppressing upstream in this question chain
@@ -259,11 +266,11 @@ export default {
                                             if (thisAns.originalNextQuestionSequence === pq.questionSequence) {
                                                 // restore original nextQuestionSequence
                                                 thisAns.nextQuestionSequence = thisAns.originalNextQuestionSequence;
-                                                delete thisAns.originalNextQuestionSequence;
+                                                this.originalNextQuestionSequence = null;
                                                 // restore original answerResult
                                                 if (thisAns.originalAnswerResult) {
                                                     thisAns.answerResult = thisAns.originalAnswerResult;
-                                                    delete thisAns.originalAnswerResult;
+                                                    thisAns.originalAnswerResult = null;
                                                 }
                                             }
                                             // search for any of the answers that lead to the duplicated question
@@ -283,7 +290,7 @@ export default {
                                     });
                                     
                                     // suppress current question
-                                    thisAnsweredPartQuestion.suppressQuestion = true;
+                                    thisAnsweredPartQuestion.suppressDuplicateQuestion = true;
                                     
                                     const thisGlassPart = "glassPart" + i;
                                     if (this.foundDuplicateQuestions[thisGlassPart]) {
@@ -296,7 +303,7 @@ export default {
 
                                     // are there any questions left that are not suppressed?
                                     const remainingQuestions = glassPart.partQuestions.filter((q) => {
-                                        return !q.suppressQuestion;
+                                        return !q.suppressDuplicateQuestion;
                                     });
 
                                     if (remainingQuestions.length < 1) {
@@ -307,6 +314,7 @@ export default {
                                             questionText: pq.questionText,
                                             selectedAnswerText: matchedAnswer.answerText,
                                             questionNum: pq.questionSequence,
+                                            isDuplicateQuestion: pq.suppressDuplicateQuestion,
                                         };
                                         // set the answerData as 'already answered'
                                         glassPart.answerData = {
@@ -315,7 +323,7 @@ export default {
                                         };
 
                                         // suppress this glassPart because it has an answer
-                                        glassPart.suppressPart = true;
+                                        glassPart.isSuppressedPart = true;
                                     }
 
                                 } // END of if (matchedAnswer)
@@ -323,6 +331,10 @@ export default {
                             }
 
                         });
+
+                        // Update the key to re-render this part's question-chain component
+                        this.partsQuestionsData[i].key = this.partsQuestionsData[i].glassLocation + this.partsQuestionsData[i].glassName + Date.now().toString();
+
                     }
 
                 });
@@ -343,10 +355,10 @@ export default {
 
             thisPartsDupes?.forEach((dupe) => {
                 // dupe is a single integer
-                const dupeQuestion = glassPart.partQuestions[dupe - 1];
+                const dupeQuestion = glassPartWithAnswer.partQuestions[dupe - 1];
                 const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
 
-                glassPart.partQuestions.forEach((q) => {
+                glassPartWithAnswer.partQuestions.forEach((q) => {
                     let includeThisDupeInAnsweredQuestions = false;
 
                     // did one of the answers of this question point to the duplicated question?
@@ -358,7 +370,7 @@ export default {
                         }
                     });
 
-                    // is this q.questionSequnce listed as the duplicated question's nextQuestionSequence?
+                    // is this q.questionSequence listed as the duplicated question's nextQuestionSequence?
                     if ((q.questionSequence === dupeQuestionAnswer.nextQuestionSequence) && (answeredQuestionIndexes.includes(q.questionSequence))) {
                         includeThisDupeInAnsweredQuestions = true;
                     }
@@ -368,12 +380,13 @@ export default {
                             questionNum: dupeQuestion.questionSequence,
                             questionText: dupeQuestion.questionText,
                             selectedAnswerText: dupeQuestionAnswer.answerText,
+                            isDuplicateQuestion: dupeQuestion.suppressDuplicateQuestion,
                         });
                     }
                 });
             });
 
-            // make sure there are no duplicated dupes...
+            // make sure there are no duplicated dupes in the list...
             const foundInCompleteAnsweredQuestions = new Set();
             let filteredCompleteAnsweredQuestions = completeAnsweredQuestions.filter(el => {
                 const duplicate = foundInCompleteAnsweredQuestions.has(el.questionText);
@@ -383,7 +396,7 @@ export default {
             filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a,b) => a.questionNum - b.questionNum);
 
             // set final answer data for the current answered glass part
-            glassPart.answerData = {
+            glassPartWithAnswer.answerData = {
                 answerResult: answer.answerResult,
                 answeredQuestions: filteredCompleteAnsweredQuestions,
             }
@@ -396,6 +409,117 @@ export default {
                     break;
                 }
             }
+
+        },
+        LoadInitialPartsData() {
+            
+            // are there alreadyAnsweredQuestions?
+            const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers;
+            
+            this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => {
+                part.key = part.glassLocation + "-" + part.glassName;
+                this.selectedAnswers[part.key] = [];
+
+                alreadyAnsweredQuestions?.forEach((savedPart) => {
+                    if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
+                        return;
+                    }
+                    if (part.glassLocation === savedPart.glassLocation && part.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 = part.partQuestions[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)
+                            part.partQuestions[aq.questionNum-1].answerSelected = answerString;
+                            // mark this partQuestion as duplicate if it is (question-chain will read this)
+                            if (aq.isDuplicateQuestion) {
+                                part.partQuestions[aq.questionNum-1].isDuplicateQuestion = true;
+                            }
+                        });
+
+                        // advance the currentPartNum
+                        this.currentPartNum = i;
+
+                        // add answerData to current part
+                        part.answerData = {
+                            answerResult: savedPart.result,
+                            answeredQuestions: savedPart.answeredQuestions
+                        }
+                    }
+                });
+
+                // Set up watch for each set of part questions, which gets updated when all questions for a part have been answered
+                this.$watch("selectedAnswers." + part.key, (newValue) => {
+                    if (newValue) {
+                        this.handleAnswerUpdates(part.key, newValue);
+                    }
+                }, {deep: true})
+
+                return part;
+            });
+
+            // this block is purely for handling duplicate questions
+            alreadyAnsweredQuestions?.forEach((savedPart, partIndex) => {
+                savedPart.answeredQuestions.forEach((aq) => {
+                    if (aq.isDuplicateQuestion) {
+                        // find this one in partsQuestionData
+                        const dupedPartsQuestion = this.partsQuestionsData[partIndex].partQuestions[aq.questionNum - 1];
+                        dupedPartsQuestion.suppressDuplicateQuestion = true;
+
+                        const dupedPartsQuestionAnswer = dupedPartsQuestion.answers.filter((ans) => {
+                            return ans.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
+                        })[0];
+
+                        let isDupedPartsQuestionFirst;
+                        if (aq.questionNum === 1) { isDupedPartsQuestionFirst = true }
+
+                        this.partsQuestionsData.forEach((glassPart, i) => {
+
+                            // loop through this glass part's part questions, looking for a questionText match
+                            glassPart.partQuestions.forEach((pq, pqIndex) => {
+                                // if this dupedQ is the first in the array then 
+                                //     suppress all questions for this part up until the answer's nextQuestionSequence
+                                if (isDupedPartsQuestionFirst && 
+                                    dupedPartsQuestionAnswer.nextQuestionSequence &&
+                                    pq.questionSequence < dupedPartsQuestionAnswer.nextQuestionSequence) {
+                                        pq.suppressDuplicateQuestion = true;
+                                    }
+                                pq.answers.forEach((thisAns) => {
+                                    if (thisAns.nextQuestionSequence === aq.questionNum) {
+                                        // update either the nextQuestionSequence or the answerResult
+                                        if (dupedPartsQuestionAnswer.nextQuestionSequence) {
+                                            thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
+                                            thisAns.nextQuestionSequence = dupedPartsQuestionAnswer.nextQuestionSequence;
+                                            // update this change to answerSelected
+                                            pq.answerSelected = `${pq.questionSequence}|nextQuestion|${thisAns.nextQuestionSequence}|${thisAns.answerText}`;
+                                        } else {
+                                            thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
+                                            thisAns.nextQuestionSequence = null;
+                                            thisAns.originalAnswerResult = thisAns.originalAnswerResult || thisAns.answerResult;
+                                            thisAns.answerResult = dupedPartsQuestionAnswer.answerResult;
+                                        }
+                                    }
+                                })
+                            });
+                            
+                        });
+
+                    }
+                })
+            });
         },
     },
     components: {

src/ux-components/list-button/list-button.vue

@@ -15,6 +15,7 @@
       :value="value"
       :aria-required="isRequired"
       v-model="checkValue"
+      :checked="checkValue"
       @change="handleInputChange"
       :aria-label="value"
     >
@@ -54,6 +55,7 @@
 
 <script>
 import { useField } from "vee-validate";
+import { toRef } from "vue";
 import loader from "@/ux-components/loader/loader";
 import { queryStrings } from "@/constants/query-strings";
 
@@ -85,17 +87,28 @@ export default {
   data() {
     return {
       isLoaderDisplayed: false,
-      checkValue: Boolean,
+      checkValue: false,
     };
   },
-  created() {
+  mounted() {
-    if (Array.isArray(this.selectedValues)) {
+    if (Array.isArray(this.validateValue)) {
-      this.checkValue = this.isMultiSelect
+      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-        ? this.selectedValues.includes(this.value)
+      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
-        : this.selectedValues[0];
+      
+      if (this.checkValue != isSelectedByValidator) {
+        this.handleChange(this.value);
+      }
+    }
+    else {
+      this.checkValue = this.selectedValues == this.value;
     }
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
@@ -148,11 +161,14 @@ export default {
     const {
       handleChange,
       errors,
-    } = useField(props.groupName, props.validationRules, fieldOptions);
+      value
+    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
 
+    const validateValue = value;
     return {
       handleChange,
       errors,
+      validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };
   },