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

CSR-803: refactor loadInitialData for questions pages

Browse source
This commit is contained in:
Adam Caouette 2022-10-04 07:37:16 -04:00
parent 720d79ea9d
commit f21d51f7f4
5 changed files with 102 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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"});
})
}
},

94
src/layouts/capability-questions/capability-questions.vue
View file

@ -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 = glass.answerData.answerResult2;
const selectedAnswerResult2 = this.getCorrespondingAnswerResult2(glass.answerData.answerResult);
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,
answerResult1: selectedAnswerResult1,
answerResult2: selectedAnswerResult2,
answerResult: answer.answerResult,
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,

83
src/layouts/molding-questions/molding-questions.vue
View file

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

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

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

62
src/mixins/vehicle-questions-mixin.js
View file

@ -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;