jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Adam Caouette 2022-08-18 03:15:31 -04:00
parent d4e87f7263
commit 207d18ab80
3 changed files with 218 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/common-components/question-chain/question-chain.vue
View file

@ -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,
},

188
src/layouts/part-questions/part-questions.vue
View file

@ -24,8 +24,9 @@
<questionChain
ref="questionChain"
:key="part.key"
v-model="selectedAnswer"
:questionData="part"
:keyString="part.key"
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) => {
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: {

30
src/ux-components/list-button/list-button.vue
View file

@ -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() {
if (Array.isArray(this.selectedValues)) {
this.checkValue = this.isMultiSelect
? this.selectedValues.includes(this.value)
: this.selectedValues[0];
mounted() {
if (Array.isArray(this.validateValue)) {
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
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
};
},