From 207d18ab805a402245e813862bd9ae9ce682c792 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 18 Aug 2022 03:15:31 -0400 Subject: [PATCH] CSR-108: updates for handling duplicate questions and loading a previous user state --- .../question-chain/question-chain.vue | 83 ++++---- src/layouts/part-questions/part-questions.vue | 188 +++++++++++++++--- src/ux-components/list-button/list-button.vue | 30 ++- 3 files changed, 218 insertions(+), 83 deletions(-) diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 9fa281f50..3ac603eb2 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/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}`" - v-model="selectedValue" + :groupName="`${keyString}-${q.questionSequence}`" + v-model="q.answerSelected" + @isCheckedChanged="handleChainCompleted" isRequired :validationRules="validationRules" /> @@ -24,8 +25,8 @@ export default { name: "questionChain", data() { return { - currentQuestionNum: 1, - questions: [{ "BlankObject": "NOT USED... placeholder for question #0 to simplify indexing"}], + currentQuestionNum: 0, + 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) { - this.$emit("update:modelValue", isQuestionChainComplete); - } - } - }, - currentQuestion() { - return this.questions[this.currentQuestionNum]; - }, + if (!this.modelValue?.length > 0) { + // set this.currentQuestionNum to first valid question + this.currentQuestionNum = this.questions[0].questionSequence; + // scroll the next question into view + this.$nextTick(() => { + document.querySelector('.current-question').scrollIntoView({behavior: "smooth"}); + }) + } + }, 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, - questionNum: q.answerNumber, + selectedAnswerText: q.answerSelected.split("|")[3], + 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, }, diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index cfaa97fc8..5ae215a41 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -24,8 +24,9 @@ { 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) => { - part.key = part.glassLocation + part.glassName; - return part; - }); + this.LoadInitialPartsData(); }, 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; }, - }, - watch: { - selectedAnswer(answer) { - // when selectedAnswer updates, user has completed this part's question chain and has a final answer + handleAnswerUpdates(key, 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 // all relevent questions for the current part have been answered) - const glassPart = this.partsQuestionsData[answer.partIndex]; - const completeAnsweredQuestions = [...answer.answeredQuestions]; + const glassPartWithAnswer = this.partsQuestionsData[answer.partIndex]; + 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.suppressPart; + // delete glassPart.answerData; + 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: { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index b82559812..a3dc83af3 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/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 @@