CSR-111 WIP
This commit is contained in:
Katie
parent
0c80eb40a4
commit
f266fce3f5
4 changed files with 630 additions and 78 deletions
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div v-for="(q, i) in questions" :key="i">
|
||||
<div>
|
||||
Hallo<br/>{{questions}}
|
||||
<div v-for="(q, i) in questions" :key="i">
|
||||
<transition appear name="fade" mode="out-in">
|
||||
<buttonQuestion
|
||||
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
|
||||
|
|
@ -15,6 +17,7 @@
|
|||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -73,7 +76,7 @@ export default {
|
|||
|
||||
if (!this.modelValue?.length > 0) {
|
||||
// set this.currentQuestionNum to first valid question
|
||||
this.currentQuestionNum = this.questions[0].questionSequence;
|
||||
this.currentQuestionNum = this.questions[0]?.questionSequence ?? 0;
|
||||
// scroll the next question into view
|
||||
this.$nextTick(() => {
|
||||
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
|
||||
|
|
|
|||
|
|
@ -1,38 +1,25 @@
|
|||
<template>
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles capability-questions">
|
||||
<loadingModal ref="loadingModal"/>
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<alert
|
||||
ref="alertFewMoreQuestions"
|
||||
class="my-5"
|
||||
alertClass="alert-warning"
|
||||
:manualHeadline="AlertFewMoreQuestionsHeader"
|
||||
:manualCopy="AlertFewMoreQuestionsCopy"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<questionChain
|
||||
ref="questionChain"
|
||||
v-model="selectedAnswer"
|
||||
:questionData="capabilityQuestionsData"
|
||||
:partIndex="i"
|
||||
validationRules="questions-required"
|
||||
/>
|
||||
<funnel-footer
|
||||
ref="funnelFooter"
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
/>
|
||||
<alert ref="alertFewMoreQuestions" class="my-5" alertClass="alert-warning"
|
||||
:manualHeadline="AlertFewMoreQuestionsHeader" :manualCopy="AlertFewMoreQuestionsCopy"
|
||||
v-bind:isDismissible="false" />
|
||||
<div v-for="(part, i) in capabilityQuestionsData" :key="i">
|
||||
{{ part.capabilityQuestions }}<br/><br/>
|
||||
{{ showThisPartQuestionChain(part, i) }}
|
||||
<questionChain ref="questionChain" :keyString="part.key"
|
||||
v-model="selectedAnswers[part.glassLocation + '-' + part.glassName]"
|
||||
:questionData="part.capabilityQuestions" :partIndex="i"
|
||||
v-if="showThisPartQuestionChain(part, i)" validationRules="questions-required" />
|
||||
</div>
|
||||
<funnel-footer ref="funnelFooter" cmsWidgetName="FunnelFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
|
@ -76,7 +63,7 @@ export default {
|
|||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
|
@ -88,19 +75,21 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
selectedAnswer: [],
|
||||
// TODO This shouldn't be an object with property `partQuestions`
|
||||
capabilityQuestionsData: {
|
||||
partQuestions: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).capabilityQuestions
|
||||
}
|
||||
// TODO This shouldn't be an object with property `capabilityQuestions`
|
||||
capabilityQuestionsData: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).partsOrQuestions,
|
||||
selectedAnswers: {},
|
||||
currentQuestionChainIndex: 0,
|
||||
newAnswersArray: [],
|
||||
foundDuplicateQuestions: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
AlertFewMoreQuestionsHeader() {
|
||||
return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
|
||||
},
|
||||
return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
|
||||
},
|
||||
AlertFewMoreQuestionsCopy() {
|
||||
return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
|
||||
},
|
||||
return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
|
||||
},
|
||||
windshieldPart() {
|
||||
return this.pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD);
|
||||
},
|
||||
|
|
@ -111,27 +100,422 @@ export default {
|
|||
return this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitialCapabilityQuestionsData();
|
||||
},
|
||||
methods: {
|
||||
showThisPartQuestionChain(part, i) {
|
||||
if (part.capabilityQuestions?.length < 1 || part.isSuppressedPart) { return false; } // return false if no capabilityQuestions or if suppressed
|
||||
return this.currentQuestionChainIndex === i || part.answerData?.answerResult?.length > 0
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
|
||||
return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).length > 0;
|
||||
return true;
|
||||
|
||||
// TODO UNCOMMENT
|
||||
// const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
|
||||
// return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).length > 0;
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const selectedAnswerResult1 = this.selectedAnswer.answerResult;
|
||||
const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2;
|
||||
const capabilityQuestionsAnswersArray = this.capabilityQuestionsData.map((item) => {
|
||||
const selectedAnswerResult1 = item.answerData.answerResult;
|
||||
const selectedAnswerResult2 = item.answerData.answerResult2;
|
||||
|
||||
this.dispatchStoreAction(storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, {
|
||||
glassName: this.windshieldPart.glassName,
|
||||
glassLocation: this.windshieldPart.glassLocation,
|
||||
result1: selectedAnswerResult1,
|
||||
result2: selectedAnswerResult2
|
||||
return {
|
||||
glassLocation: item.glassLocation,
|
||||
glassName: item.glassName,
|
||||
result: item.answerData.answerResult,
|
||||
result1: selectedAnswerResult1,
|
||||
result2: selectedAnswerResult2,
|
||||
answeredQuestions: item.answerData.answeredQuestions,
|
||||
isSuppressedPart: item.isSuppressedPart,
|
||||
};
|
||||
});
|
||||
|
||||
const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER)).data;
|
||||
let partsOrQuestions = this.pageData.partsOrQuestions;
|
||||
partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
|
||||
// clear out answerData for future page loads; must occur prior to store save
|
||||
this.capabilityQuestionsData.forEach((part) => {
|
||||
part.answerData = {};
|
||||
});
|
||||
|
||||
// save to vuex store as order.damage.capabilityQuestionAnswers (array)
|
||||
await this.dispatchStoreAction(this.storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, capabilityQuestionsAnswersArray, false);
|
||||
|
||||
// get parts from the capabilityQuestionAnswers
|
||||
let partsOrQuestions = this.pageData.partsOrQuestions;
|
||||
for (let answer of capabilityQuestionsAnswersArray) {
|
||||
const correspondingPart = partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === answer.glassLocation);
|
||||
const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER, answer.glassLocation, false)).data;
|
||||
|
||||
partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
|
||||
}
|
||||
|
||||
console.log(partsOrQuestions)
|
||||
|
||||
|
||||
|
||||
|
||||
// const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
|
||||
// this.navigateForward(glassNameAndPartsForStore);
|
||||
|
||||
|
||||
// const selectedAnswerResult1 = this.selectedAnswer.answerResult;
|
||||
// const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2;
|
||||
|
||||
// this.dispatchStoreAction(storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, {
|
||||
// glassName: this.windshieldPart.glassName,
|
||||
// glassLocation: this.windshieldPart.glassLocation,
|
||||
// result1: selectedAnswerResult1,
|
||||
// result2: selectedAnswerResult2
|
||||
// });
|
||||
|
||||
// const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER)).data;
|
||||
// let partsOrQuestions = this.pageData.partsOrQuestions;
|
||||
// partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
|
||||
|
||||
// this.navigateForward(partsOrQuestions);
|
||||
},
|
||||
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
|
||||
// all relevent questions for the current part have been answered)
|
||||
|
||||
/*
|
||||
answer example format:
|
||||
{
|
||||
"answerResult": "DD11132",
|
||||
"answeredQuestions": [
|
||||
{
|
||||
"questionText": "Is your Grand Cherokee the Laredo model?",
|
||||
"selectedAnswerText": "Yes",
|
||||
"questionNum": 1,
|
||||
"extra": {
|
||||
"Text": "Yes",
|
||||
"nextQuestionSequence": null,
|
||||
"answerResult": "DD11132",
|
||||
"questionSequence": 1,
|
||||
"questionType": "answer"
|
||||
}
|
||||
}
|
||||
],
|
||||
"partIndex": 0
|
||||
}
|
||||
*/
|
||||
|
||||
// collect a list of the answered questions' numbers, needed later below
|
||||
const answeredQuestionIndexes = [];
|
||||
|
||||
// if user has answered a question differently than anything that was preloaded,
|
||||
// we need to clear out any preloaded answers
|
||||
this.selectedAnswers = {};
|
||||
|
||||
// loop through every answered question on the currently answered glass part
|
||||
answer.answeredQuestions?.forEach((aq) => {
|
||||
|
||||
// keep track of this question number
|
||||
answeredQuestionIndexes.push(aq.questionNum);
|
||||
|
||||
const answeredQuestionText = aq.questionText.toUpperCase();
|
||||
const answeredQuestionAnswer = aq.selectedAnswerText.toUpperCase();
|
||||
|
||||
// HANDLE DUPLICATE QUESTIONS
|
||||
|
||||
// loop through all glass parts data
|
||||
this.capabilityQuestionsData.forEach((glassPart, gpIndex) => {
|
||||
|
||||
// only look for duplicates forward... to parts that follow after the currently being answered part
|
||||
if (gpIndex > answer.partIndex) {
|
||||
|
||||
let suppressUntil;
|
||||
// reset this glass part, in case user is changing their previous answers
|
||||
glassPart.answerData = null;
|
||||
glassPart.isSuppressedPart = null;
|
||||
|
||||
// loop through this glass part's part questions, looking for a questionText match
|
||||
glassPart.capabilityQuestions.forEach((pq, pqIndex) => {
|
||||
|
||||
// clear out any previously set answers
|
||||
pq.answerSelected = null;
|
||||
|
||||
// clear or set suppressQuestion property for each question
|
||||
if (suppressUntil) {
|
||||
// if suppressUntil has been set, then suppress this question if before it
|
||||
if (pqIndex + 1 < suppressUntil) {
|
||||
pq.suppressQuestion = true;
|
||||
} else {
|
||||
pq.suppressQuestion = null;
|
||||
}
|
||||
} else {
|
||||
pq.suppressQuestion = null;
|
||||
}
|
||||
|
||||
// if these match then we have a duplicate question
|
||||
if (pq.questionText.toUpperCase() === answeredQuestionText) {
|
||||
|
||||
const thisAnsweredCapabilityQuestion = glassPart.capabilityQuestions[pqIndex];
|
||||
let matchedAnswer;
|
||||
let rejectedAnswers = []; // set as an array, in case we ever have questions with more than 2 answers...
|
||||
|
||||
// which one of this capabilityQuestions' answers matches our answer?
|
||||
pq.answers.forEach((ans) => {
|
||||
if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
|
||||
matchedAnswer = ans;
|
||||
ans.selected = true;
|
||||
} else {
|
||||
rejectedAnswers.push(ans);
|
||||
ans.selected = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Update the key to re-render this part's question-chain component
|
||||
this.capabilityQuestionsData[gpIndex].key = this.capabilityQuestionsData[gpIndex].glassLocation + this.capabilityQuestionsData[gpIndex].glassName + Date.now().toString();
|
||||
|
||||
// handle suppressing downstream in this question chain
|
||||
|
||||
if (matchedAnswer.nextQuestionSequence) {
|
||||
// ensure that the question that the accepted answer has set to be next is NOT suppressed
|
||||
glassPart.capabilityQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion = null;
|
||||
// if the duplicate is the 1ST question, then set suppressUntil var to lowest nextQuestion number
|
||||
if (pqIndex === 0) {
|
||||
if (!suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence }
|
||||
if (matchedAnswer.nextQuestionSequence < suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence }
|
||||
}
|
||||
}
|
||||
|
||||
// handle suppressing upstream in this question chain
|
||||
glassPart.capabilityQuestions.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;
|
||||
this.originalNextQuestionSequence = null;
|
||||
// restore original answerResult
|
||||
if (thisAns.originalAnswerResult) {
|
||||
thisAns.answerResult = thisAns.originalAnswerResult;
|
||||
thisAns.originalAnswerResult = null;
|
||||
}
|
||||
}
|
||||
// search for any 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
|
||||
thisAnsweredCapabilityQuestion.suppressQuestion = true;
|
||||
|
||||
const thisGlassPart = "glassPart" + gpIndex;
|
||||
if (this.foundDuplicateQuestions[thisGlassPart]) {
|
||||
if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredCapabilityQuestion.questionSequence)) {
|
||||
this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredCapabilityQuestion.questionSequence);
|
||||
}
|
||||
} else {
|
||||
this.foundDuplicateQuestions[thisGlassPart] = [thisAnsweredCapabilityQuestion.questionSequence];
|
||||
}
|
||||
|
||||
// are there any questions left that are not suppressed?
|
||||
const remainingQuestions = glassPart.capabilityQuestions.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,
|
||||
suppressQuestion: pq.suppressQuestion,
|
||||
};
|
||||
// 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.isSuppressedPart = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Update the key to re-render this part's question-chain component
|
||||
this.capabilityQuestionsData[gpIndex].key = this.capabilityQuestionsData[gpIndex].glassLocation + this.capabilityQuestionsData[gpIndex].glassName + Date.now().toString();
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// DETERMINE ANSWERED QUESTIONS LIST FOR THIS GLASS PART
|
||||
|
||||
// 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];
|
||||
const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : [];
|
||||
const glassPartAnswered = this.capabilityQuestionsData[answer.partIndex];
|
||||
|
||||
thisPartsDupes?.forEach((dupe) => {
|
||||
// dupe is a single integer
|
||||
const dupeQuestion = glassPartAnswered.capabilityQuestions[dupe - 1];
|
||||
const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
|
||||
|
||||
glassPartAnswered.capabilityQuestions.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.questionSequence 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,
|
||||
suppressQuestion: dupeQuestion.suppressQuestion,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 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);
|
||||
foundInCompleteAnsweredQuestions.add(el.questionText);
|
||||
return !duplicate;
|
||||
});
|
||||
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,
|
||||
answeredQuestions: filteredCompleteAnsweredQuestions,
|
||||
}
|
||||
|
||||
// this part has been fully answered, so advance to next part's question chain
|
||||
for (let i = answer.partIndex + 1; i < this.capabilityQuestionsData.length; i++) {
|
||||
// if this part has not yet been fully answered, then make it the current part
|
||||
if (!this.capabilityQuestionsData[i].answerData?.answerSelected) {
|
||||
this.currentQuestionChainIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// TODO I'm sure there's a better/simplier way to do this that I'm missing but my brain's fried
|
||||
// Find the part that has some answer that has an answerResult matching the selected answerResult, then get the corresponding answerResult2
|
||||
getCorrespondingAnswerResult2(answerResult1) {
|
||||
return this.capabilityQuestionsData
|
||||
.find(part => part.capabilityQuestions.some(question => question.answers.some(answer => answer.answerResult == answerResult1))) // found part
|
||||
.capabilityQuestions.find(question => question.answers.some(answer => answer.answerResult == answerResult1)) // found question
|
||||
.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((part, i) => {
|
||||
part.key = part.glassLocation + "-" + part.glassName;
|
||||
this.selectedAnswers[part.key] = [];
|
||||
if (!alreadyAnsweredQuestions) {
|
||||
part.answerData = null;
|
||||
}
|
||||
|
||||
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.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)
|
||||
part.capabilityQuestions[aq.questionNum - 1].answerSelected = answerString;
|
||||
// mark this partQuestion as duplicate if it is (question-chain will read this)
|
||||
if (aq.suppressQuestion) {
|
||||
part.capabilityQuestions[aq.questionNum - 1].suppressQuestion = true;
|
||||
}
|
||||
});
|
||||
|
||||
// advance the currentQuestionChainIndex
|
||||
this.currentQuestionChainIndex = i;
|
||||
|
||||
// add answerData to current part
|
||||
part.answerData = {
|
||||
answerResult: savedPart.result,
|
||||
answerResult1: savedPart.result,
|
||||
answerResult2: this.getCorrespondingAnswerResult2(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(newValue);
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
return part;
|
||||
});
|
||||
|
||||
this.navigateForward(partsOrQuestions);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -148,12 +532,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.capability-questions {
|
||||
.question-text {
|
||||
.capability-questions {
|
||||
.question-text {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,42 +68,205 @@ export default {
|
|||
async navigateForward(partsOrQuestions, vm) {
|
||||
const self = vm ?? this;
|
||||
const currentPage = self.$route.query.fmgPage;
|
||||
|
||||
|
||||
const hasPartQuestions = this.hasPartQuestions(partsOrQuestions)
|
||||
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
|
||||
const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
|
||||
const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
|
||||
|
||||
// TODO REMOVE
|
||||
const hasCapabilityQuestions = true //this.hasCapabilityQuestions(partsOrQuestions);
|
||||
|
||||
if (hasPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.PART_QUESTIONS)) {
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, {partsOrQuestions: partsOrQuestions});
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
|
||||
}
|
||||
else if (hasGlassLocationWithMultipleParts && this.currentPageComesBeforePage(currentPage, fmgPageValues.VEHICLE_PARTS)) {
|
||||
// if multiple parts on any glass
|
||||
// go to vehicle-parts page and pass the partsData
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_MULTIPLE_PARTS_TO_CHOOSE,self.$route,{},{},{partsOrQuestions: partsOrQuestions});
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_MULTIPLE_PARTS_TO_CHOOSE, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
|
||||
} else if (hasChildPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.MOLDING_QUESTIONS)) {
|
||||
// if any childpart questions
|
||||
// go to molding-questions page and pass the partsData
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_MOLDING_QUESTIONS,self.$route,{},{},{partsOrQuestions: partsOrQuestions});
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_MOLDING_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
|
||||
} else if (hasCapabilityQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.CAPABILITY_QUESTIONS)) {
|
||||
// if has capability questions
|
||||
// go to capability-questions page and pass the partsData
|
||||
const windshieldPart = partsOrQuestions.filter(x => x.glassLocation === damageLocationsSelected.WINDSHIELD)[0].parts[0];
|
||||
let capabilityQuestions = (await baseMixin.methods.dispatchStoreAction(storeActions.GET_CAPABILITY_QUESTIONS, {
|
||||
carId: store.getters.vehicle.carId,
|
||||
partNumber: windshieldPart.partNumber
|
||||
})).data;
|
||||
|
||||
capabilityQuestions.forEach(question => {
|
||||
question.answers = question.answers.map(answer => {
|
||||
return {
|
||||
...answer,
|
||||
answerResult: answer.answerResult1
|
||||
partsOrQuestions = [
|
||||
{
|
||||
"glassName": "Single",
|
||||
"glassLocation": "Windshield",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "A",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": true,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
},
|
||||
],
|
||||
"partQuestions": null
|
||||
},
|
||||
{
|
||||
"glassName": "Front",
|
||||
"glassLocation": "Driver",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "B",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": true,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
},
|
||||
],
|
||||
"partQuestions": null
|
||||
},
|
||||
{
|
||||
"glassName": "Rear",
|
||||
"glassLocation": "Driver",
|
||||
"parts": [
|
||||
|
||||
{
|
||||
"partNumber": "C",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
},
|
||||
],
|
||||
"partQuestions": null
|
||||
}
|
||||
]
|
||||
|
||||
partsOrQuestions = [
|
||||
{
|
||||
"glassName": "Single",
|
||||
"glassLocation": "Windshield",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "A",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": true,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
}
|
||||
})
|
||||
});
|
||||
],
|
||||
"partQuestions": null,
|
||||
"capabilityQuestions": [
|
||||
{
|
||||
"questionSequence": 1,
|
||||
"questionText": "Is this the first question?",
|
||||
"answers": [
|
||||
{
|
||||
"answerResult1": "DYNAMIC",
|
||||
"answerResult2": "1",
|
||||
"answerText": "Yes",
|
||||
"nextQuestionSequence": null,
|
||||
"answerResult": "DYNAMIC"
|
||||
},
|
||||
{
|
||||
"answerResult1": "Unknown",
|
||||
"answerResult2": "0",
|
||||
"answerText": "No",
|
||||
"nextQuestionSequence": null,
|
||||
"answerResult": "Unknown"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"glassName": "Front",
|
||||
"glassLocation": "Driver",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "B",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": true,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
}
|
||||
],
|
||||
"partQuestions": null,
|
||||
"capabilityQuestions": [
|
||||
{
|
||||
"questionSequence": 1,
|
||||
"questionText": "Is this the second question?",
|
||||
"answers": [
|
||||
{
|
||||
"answerResult1": "Oh yeah",
|
||||
"answerResult2": "1",
|
||||
"answerText": "Yes",
|
||||
"nextQuestionSequence": null,
|
||||
"answerResult": "Oh yeah"
|
||||
},
|
||||
{
|
||||
"answerResult1": "Maybe",
|
||||
"answerResult2": "0",
|
||||
"answerText": "No",
|
||||
"nextQuestionSequence": null,
|
||||
"answerResult": "Maybe"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"glassName": "Rear",
|
||||
"glassLocation": "Driver",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "C",
|
||||
"description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
|
||||
"color": "Green Tint, Blue Shade",
|
||||
"requiresRecalibration": true,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"recalibrationType": null,
|
||||
"childParts": null,
|
||||
"childPartQuestions": []
|
||||
}
|
||||
],
|
||||
"partQuestions": null
|
||||
}
|
||||
]
|
||||
|
||||
for (let partOrQuestion of partsOrQuestions) {
|
||||
if (this.hasCapabilityQuestions([partOrQuestion])) {
|
||||
let capabilityQuestionsForGlassLocation = (await baseMixin.methods.dispatchStoreAction(storeActions.GET_CAPABILITY_QUESTIONS, {
|
||||
carId: "CR00064847", // store.getters.vehicle.carId,
|
||||
partNumber: "DW01929GBYN" // glassLocationWithCapabilityQuestion.parts[0].partNumber
|
||||
})).data;
|
||||
|
||||
capabilityQuestionsForGlassLocation.forEach(question => {
|
||||
question.answers = question.answers.map(answer => {
|
||||
return {
|
||||
...answer,
|
||||
answerResult: answer.answerResult1
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
partOrQuestion.capabilityQuestions = capabilityQuestionsForGlassLocation;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, { partsOrQuestions, capabilityQuestions });
|
||||
|
||||
self.$router.navigateWithSaving(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, { partsOrQuestions });
|
||||
} else {
|
||||
// if single parts only
|
||||
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
|
||||
|
|
@ -112,7 +275,7 @@ export default {
|
|||
|
||||
self.$refs.loadingModal.showModal();
|
||||
navigateToHeritageFunnel();
|
||||
|
||||
|
||||
// For quote pages MVP release
|
||||
// self.$router.navigate(self.navigationScenarios.HAS_NO_MORE_QUESTIONS, self.$route);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -749,18 +749,19 @@ export const actions = {
|
|||
})
|
||||
},
|
||||
|
||||
getPartFromCapabilityQuestionAnswer(context, selectedAnswerResult1) {
|
||||
getPartFromCapabilityQuestionAnswer(context, glassLocation) {
|
||||
const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
|
||||
|
||||
const part = pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD).parts[0];
|
||||
const part = pageData.partsOrQuestions.find(x => x.glassLocation === glassLocation).parts[0];
|
||||
const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers;
|
||||
const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(x => x.glassLocation === glassLocation);
|
||||
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.ApplyCapabilityAnswerToPart.method,
|
||||
endpoint: endpoints.ApplyCapabilityAnswerToPart.url,
|
||||
payload: {
|
||||
part,
|
||||
capabilityAnswerResults: capabilityQuestionAnswers
|
||||
capabilityAnswerResults: capabilityQuestionAnswersForPart
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue