Merge pull request #643 from Safelite/feature/CSR-108
CSR-108: updates to prevent duplicate questions from being asked
This commit is contained in:
commit
049c95960d
3 changed files with 274 additions and 54 deletions
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import { useValidateForm } from "vee-validate";
|
||||
|
||||
export default {
|
||||
name: "questionChain",
|
||||
|
|
@ -32,38 +33,46 @@ export default {
|
|||
validationRules: String,
|
||||
modelValue: Array,
|
||||
partIndex: Number,
|
||||
key: String,
|
||||
},
|
||||
created() {
|
||||
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) => {
|
||||
let answerPair = [];
|
||||
const eachQuestion = {
|
||||
questionText: q.questionText,
|
||||
questionSequence: q.questionSequence,
|
||||
answers: q.answers.map((a) => {
|
||||
answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult);
|
||||
return {
|
||||
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
|
||||
// 4 pieces of data separated by pipe characters:
|
||||
// question number|type of answer|answer value|answer text
|
||||
Name: a.nextQuestionSequence ?
|
||||
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
|
||||
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
|
||||
nextQuestionSequence: a.nextQuestionSequence,
|
||||
}
|
||||
}),
|
||||
answerSelected: "",
|
||||
const question = {
|
||||
questionText: q.questionText,
|
||||
questionSequence: q.questionSequence,
|
||||
answers: q.answers.map((a) => {
|
||||
answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult);
|
||||
return {
|
||||
Text: a.answerText + " (" + a.answerResult + a.nextQuestionSequence + ")",
|
||||
// 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
|
||||
// 4 pieces of data separated by pipe characters:
|
||||
// question number|type of answer|answer value|answer text
|
||||
Name: a.nextQuestionSequence ?
|
||||
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
|
||||
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
|
||||
nextQuestionSequence: a.nextQuestionSequence,
|
||||
}
|
||||
}),
|
||||
answerSelected: "",
|
||||
};
|
||||
eachQuestion.answerPair = answerPair;
|
||||
this.questions.push(eachQuestion);
|
||||
question.answerPair = answerPair;
|
||||
if (!q.suppressQuestion) {
|
||||
this.questions.push(question);
|
||||
}
|
||||
});
|
||||
// set this.currentQuestionNum to first valid question
|
||||
this.currentQuestionNum = this.questions[1].questionSequence;
|
||||
},
|
||||
computed: {
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return "";
|
||||
return this.modelValue[0];
|
||||
},
|
||||
set: function(returnedAnswer) {
|
||||
const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer);
|
||||
|
|
@ -78,7 +87,7 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
handleReturnedAnswer(returnedAnswer) { // returns either a final answer or Boolean false
|
||||
handleReturnedAnswer(returnedAnswer) { // this method will return either a final answer or Boolean false
|
||||
if (!returnedAnswer) { return false }
|
||||
|
||||
// Example returnedAnswers:
|
||||
|
|
@ -86,25 +95,25 @@ export default {
|
|||
// "5|answer|DW02104|Yes"
|
||||
|
||||
const returnedAnswerArray = returnedAnswer.split("|");
|
||||
const questionNum = returnedAnswerArray[0];
|
||||
const questionNum = parseInt(returnedAnswerArray[0]);
|
||||
const questionType = returnedAnswerArray[1];
|
||||
const questionAnswer = returnedAnswerArray[2];
|
||||
const questionAnswerText = returnedAnswerArray[3];
|
||||
|
||||
// remove all previous answers after the index of this one in questions
|
||||
this.questions.map((q) => {
|
||||
if ((q.questionSequence > questionNum) || (q.answerPair?.includes(questionAnswer))) {
|
||||
q.answerSelected = "";
|
||||
this.questions.forEach((q) => {
|
||||
// mark this question as "answered"
|
||||
if (q.questionSequence === questionNum) {
|
||||
q.answerSelected = questionAnswerText;
|
||||
q.answerNumber = questionNum;
|
||||
}
|
||||
// remove all previous answers after the index of this one in questions
|
||||
if ((q.questionSequence > questionNum)) {
|
||||
delete q.answerSelected;
|
||||
}
|
||||
return q;
|
||||
});
|
||||
|
||||
// set this question as "answered"
|
||||
this.questions[questionNum].answerSelected = questionAnswerText;
|
||||
this.questions[questionNum].answerNumber = questionNum;
|
||||
|
||||
// update to next question index
|
||||
this.currentQuestionNum = questionType === "nextQuestion" ? parseInt(questionAnswer) : parseInt(questionNum); // update count to display next question
|
||||
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") {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
<div v-for="(part, i) in partsQuestionsData" :key="i">
|
||||
<questionChain
|
||||
ref="questionChain"
|
||||
v-model="selectedModel"
|
||||
:key="part.key"
|
||||
v-model="selectedAnswer"
|
||||
:questionData="part"
|
||||
:partIndex="i"
|
||||
v-if="showThisPartQuestionChain(part, i)"
|
||||
|
|
@ -91,17 +92,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedModel: [],
|
||||
partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
|
||||
if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
|
||||
return {
|
||||
glassName: p.glassName,
|
||||
glassLocation: p.glassLocation,
|
||||
partQuestions: p.partQuestions,
|
||||
};
|
||||
}
|
||||
partsQuestionsFromApi: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
|
||||
return Array.isArray(p.partQuestions) && p.partQuestions.length > 0;
|
||||
}),
|
||||
selectedAnswer: [],
|
||||
currentPartNum: 0,
|
||||
newAnswersArray: [],
|
||||
partsQuestionsData: [],
|
||||
foundDuplicateQuestions: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -113,10 +111,16 @@ export default {
|
|||
},
|
||||
},
|
||||
mixins: [vehicleQuestionsMixin],
|
||||
mounted() {
|
||||
this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => {
|
||||
part.key = part.glassLocation + part.glassName;
|
||||
return part;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
showThisPartQuestionChain(part, i) {
|
||||
if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
|
||||
if (this.currentPartNum === i || part.answerData?.answerResult.length > 0) { return true; }
|
||||
if (part.partQuestions?.length < 1 || part.suppressPart) { return false; } // return false if no partQuestions or if suppressed
|
||||
if (this.currentPartNum === i || part.answerData?.answerResult?.length > 0) { return true; }
|
||||
return false;
|
||||
},
|
||||
backButtonAction() {
|
||||
|
|
@ -136,6 +140,11 @@ export default {
|
|||
};
|
||||
});
|
||||
|
||||
// clear out answerData for future page loads; must occur prior to store save
|
||||
this.partsQuestionsData.forEach((part) => {
|
||||
part.answerData = {};
|
||||
});
|
||||
|
||||
// save to vuex store as order.damage.partQuestionAnswers (array)
|
||||
await this.dispatchStoreAction(this.storeActions.SAVE_PART_QUESTION_ANSWERS, partQuestionAnswersArray, false);
|
||||
|
||||
|
|
@ -146,7 +155,6 @@ export default {
|
|||
});
|
||||
|
||||
const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
|
||||
|
||||
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(glassNameAndPartsForStore);
|
||||
const hasChildPartQuestions = this.hasChildPartQuestions(glassNameAndPartsForStore);
|
||||
const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
|
||||
|
|
@ -179,12 +187,215 @@ export default {
|
|||
},
|
||||
},
|
||||
watch: {
|
||||
selectedModel(model) {
|
||||
this.partsQuestionsData[model.partIndex].answerData = {
|
||||
answerResult: model.answerResult,
|
||||
answeredQuestions: model.answeredQuestions,
|
||||
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 completeAnsweredQuestions = [...answer.answeredQuestions];
|
||||
const answeredQuestionIndexes = [];
|
||||
|
||||
// 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) => {
|
||||
|
||||
// gather all the question numbers of the answered questions
|
||||
answeredQuestionIndexes.push(aq.questionNum);
|
||||
|
||||
const answeredQuestionText = aq.questionText.toUpperCase();
|
||||
const answeredQuestionAnswer = aq.selectedAnswerText.toUpperCase();
|
||||
|
||||
// HANDLE DUPLICATE QUESTIONS
|
||||
// loop through all glass parts data (but only examining parts after currently being answered part)
|
||||
this.partsQuestionsData.forEach((glassPart, i) => {
|
||||
|
||||
// restrict duplicate logic to only parts that follow the currently being answered part
|
||||
if (i > answer.partIndex) {
|
||||
|
||||
// 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?)
|
||||
|
||||
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;
|
||||
if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
|
||||
matchedAnswer = ans;
|
||||
pq.answers[ansIndex].selected = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (matchedAnswer) {
|
||||
const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex];
|
||||
|
||||
// remove answerData from this glass part
|
||||
delete glassPart.answerData;
|
||||
delete glassPart.suppressPart;
|
||||
|
||||
// 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();
|
||||
|
||||
// handle suppressing downstream in this question chain
|
||||
const rejectedAnswer = thisAnsweredPartQuestion.answers.filter((ans) => {
|
||||
return !ans.selected;
|
||||
});
|
||||
|
||||
if (rejectedAnswer[0].nextQuestionSequence) {
|
||||
glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressQuestion = true;
|
||||
}
|
||||
if (matchedAnswer.nextQuestionSequence) {
|
||||
// ensure that accepted answer is NOT suppressed
|
||||
delete glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion;
|
||||
}
|
||||
|
||||
// handle suppressing upstream in this question chain
|
||||
glassPart.partQuestions.forEach((q) => {
|
||||
q.answers.forEach((thisAns) => {
|
||||
// restore any of the answers that formerly led to the duplicated question
|
||||
if (thisAns.originalNextQuestionSequence === pq.questionSequence) {
|
||||
// restore original nextQuestionSequence
|
||||
thisAns.nextQuestionSequence = thisAns.originalNextQuestionSequence;
|
||||
delete thisAns.originalNextQuestionSequence;
|
||||
// restore original answerResult
|
||||
if (thisAns.originalAnswerResult) {
|
||||
thisAns.answerResult = thisAns.originalAnswerResult;
|
||||
delete thisAns.originalAnswerResult;
|
||||
}
|
||||
}
|
||||
// search for any of the answers that lead to the duplicated question
|
||||
if (thisAns.nextQuestionSequence === pq.questionSequence) {
|
||||
// update either the nextQuestionSequence or the answerResult
|
||||
if (matchedAnswer.nextQuestionSequence) {
|
||||
thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
|
||||
thisAns.nextQuestionSequence = matchedAnswer.nextQuestionSequence;
|
||||
} else {
|
||||
thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
|
||||
thisAns.nextQuestionSequence = null;
|
||||
thisAns.originalAnswerResult = thisAns.originalAnswerResult || thisAns.answerResult;
|
||||
thisAns.answerResult = matchedAnswer.answerResult;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// suppress current question
|
||||
thisAnsweredPartQuestion.suppressQuestion = true;
|
||||
|
||||
const thisGlassPart = "glassPart" + i;
|
||||
if (this.foundDuplicateQuestions[thisGlassPart]) {
|
||||
if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredPartQuestion.questionSequence)) {
|
||||
this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredPartQuestion.questionSequence);
|
||||
}
|
||||
} else {
|
||||
this.foundDuplicateQuestions[thisGlassPart] = [thisAnsweredPartQuestion.questionSequence];
|
||||
}
|
||||
|
||||
// are there any questions left that are not suppressed?
|
||||
const remainingQuestions = glassPart.partQuestions.filter((q) => {
|
||||
return !q.suppressQuestion;
|
||||
});
|
||||
|
||||
if (remainingQuestions.length < 1) {
|
||||
// this is the final answer for this glass part
|
||||
|
||||
// mark this part as completely answered by adding answerData
|
||||
const answeredQuestionObj = {
|
||||
questionText: pq.questionText,
|
||||
selectedAnswerText: matchedAnswer.answerText,
|
||||
questionNum: pq.questionSequence,
|
||||
};
|
||||
// set the answerData as 'already answered'
|
||||
glassPart.answerData = {
|
||||
answerResult: matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence : matchedAnswer.answerResult,
|
||||
answeredQuestions: [answeredQuestionObj],
|
||||
};
|
||||
|
||||
// suppress this glassPart because it has an answer
|
||||
glassPart.suppressPart = true;
|
||||
}
|
||||
|
||||
} // END of if (matchedAnswer)
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// look through all (this part's) part questions for any duplicates that were suppressed;
|
||||
// add them to the list of answered questions if found
|
||||
|
||||
// EX answeredQuestionIndexes: [1,5,11,13]
|
||||
|
||||
// EX this.foundDuplicateQuestions = {
|
||||
// "glassPart1": [1],
|
||||
// "glassPart2": [7, 10]
|
||||
// };
|
||||
|
||||
const thisPartsDupes = this.foundDuplicateQuestions["glassPart" + answer.partIndex];
|
||||
|
||||
thisPartsDupes?.forEach((dupe) => {
|
||||
// dupe is a single integer
|
||||
const dupeQuestion = glassPart.partQuestions[dupe - 1];
|
||||
const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
|
||||
|
||||
glassPart.partQuestions.forEach((q) => {
|
||||
let includeThisDupeInAnsweredQuestions = false;
|
||||
|
||||
// did one of the answers of this question point to the duplicated question?
|
||||
q.answers.forEach((a) => {
|
||||
if ((dupe === a.originalNextQuestionSequence) &&
|
||||
(answeredQuestionIndexes.includes(q.questionSequence)) &&
|
||||
(a.answerText.toUpperCase() === dupeQuestionAnswer.answerText.toUpperCase())) {
|
||||
includeThisDupeInAnsweredQuestions = true;
|
||||
}
|
||||
});
|
||||
|
||||
// is this q.questionSequnce listed as the duplicated question's nextQuestionSequence?
|
||||
if ((q.questionSequence === dupeQuestionAnswer.nextQuestionSequence) && (answeredQuestionIndexes.includes(q.questionSequence))) {
|
||||
includeThisDupeInAnsweredQuestions = true;
|
||||
}
|
||||
|
||||
if (includeThisDupeInAnsweredQuestions) {
|
||||
completeAnsweredQuestions.push({
|
||||
questionNum: dupeQuestion.questionSequence,
|
||||
questionText: dupeQuestion.questionText,
|
||||
selectedAnswerText: dupeQuestionAnswer.answerText,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// make sure there are no duplicated dupes...
|
||||
const foundInCompleteAnsweredQuestions = new Set();
|
||||
let filteredCompleteAnsweredQuestions = completeAnsweredQuestions.filter(el => {
|
||||
const duplicate = foundInCompleteAnsweredQuestions.has(el.questionText);
|
||||
foundInCompleteAnsweredQuestions.add(el.questionText);
|
||||
return !duplicate;
|
||||
});
|
||||
filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a,b) => a.questionNum - b.questionNum);
|
||||
|
||||
// set final answer data for the current answered glass part
|
||||
glassPart.answerData = {
|
||||
answerResult: answer.answerResult,
|
||||
answeredQuestions: filteredCompleteAnsweredQuestions,
|
||||
}
|
||||
|
||||
// this part has been fully answered, so advance to next part's question chain
|
||||
for (let i = answer.partIndex + 1; i < this.partsQuestionsData.length; i++) {
|
||||
// if this part has not yet been fully answered, then make it the current part
|
||||
if (!this.partsQuestionsData[i].answerData?.answerResult) {
|
||||
this.currentPartNum = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.currentPartNum = model.partIndex + 1;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export const mutations = {
|
|||
state.order.damage.glassToReplace = glassToReplace;
|
||||
},
|
||||
updatePartQuestionAnswers(state, answersArray) {
|
||||
state.order.damage.partQuestionAnswers = answersArray;
|
||||
state.order.damage.partQuestionAnswers = answersArray;
|
||||
},
|
||||
updateGlassParts(state, partsData) {
|
||||
state.order.lineItems.glassParts = partsData;
|
||||
|
|
|
|||
Loading…
Reference in a new issue