CSR-803: prettify formatting changes

This commit is contained in:
Adam Caouette 2022-11-05 20:28:08 -04:00
parent ef9f259ff4
commit e6b27f2098
6 changed files with 627 additions and 595 deletions

View file

@ -90,7 +90,7 @@ export default {
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes" "buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
} }
*/ */
question.answerSelected = returnedAnswer; question.answerSelected = returnedAnswer;
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer); const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);

View file

@ -1,22 +1,16 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
>
<questions-page <questions-page
ref="questionsPage" ref="questionsPage"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="questions-required" :validationRules="questions - required"
v-model="selectedAnswers2" v-model="selectedAnswers2"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" :currentGlassPieceIndex="currentGlassPieceIndex" />
/>
</Form> </Form>
</template> </template>
@ -81,25 +75,30 @@ export default {
// are there alreadyAnsweredQuestions? // are there alreadyAnsweredQuestions?
const alreadyAnsweredQuestions = store.getters.damage.capabilityQuestionAnswers; const alreadyAnsweredQuestions = store.getters.damage.capabilityQuestionAnswers;
this.questionsData = this.pageData.partsOrQuestions.filter((x) => x.capabilityQuestions).map((glass, i) => { this.questionsData = this.pageData.partsOrQuestions
// NOTE: questions for property "questions" can differ between layouts .filter((x) => x.capabilityQuestions)
glass.questions = glass.capabilityQuestions; .map((glass, i) => {
glass.answerKey = glass.glassLocation + "-" + glass.glassName; // NOTE: questions for property "questions" can differ between layouts
// reset selectedAnswers for this glass glass.questions = glass.capabilityQuestions;
this.selectedAnswers2[glass.answerKey] = []; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glass
this.selectedAnswers2[glass.answerKey] = [];
const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions); const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions);
// Set up watch for each set of glass questions // Set up watch for each set of glass questions
this.$watch("selectedAnswers2." + glass.answerKey, (newValue) => { this.$watch(
if (newValue && Object.keys(newValue).length > 0) { "selectedAnswers2." + glass.answerKey,
this.handleAnswerUpdates(newValue, glass.answerKey); (newValue) => {
} if (newValue && Object.keys(newValue).length > 0) {
}, { deep: true }); this.handleAnswerUpdates(newValue, glass.answerKey);
}
return updatedGlass; },
}); { deep: true }
);
return updatedGlass;
});
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
@ -114,9 +113,13 @@ export default {
const questionAnswersArray = this.questionsData.map((glass) => { const questionAnswersArray = this.questionsData.map((glass) => {
// get answerResult2 of returned answer // get answerResult2 of returned answer
let selectedAnswerResult2; let selectedAnswerResult2;
glass.questions.forEach(q => { glass.questions.forEach((q) => {
const idx = q.answers.findIndex(a => a.answerResult === glass.answerData.answerResult); const idx = q.answers.findIndex(
if (idx !== -1) { selectedAnswerResult2 = q.answers[idx].answerResult2 } (a) => a.answerResult === glass.answerData.answerResult
);
if (idx !== -1) {
selectedAnswerResult2 = q.answers[idx].answerResult2;
}
}); });
return { return {

View file

@ -1,22 +1,16 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
>
<questions-page <questions-page
ref="questionsPage" ref="questionsPage"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="questions-required" :validationRules="questions - required"
v-model="selectedAnswers2" v-model="selectedAnswers2"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" :currentGlassPieceIndex="currentGlassPieceIndex" />
/>
</Form> </Form>
</template> </template>
@ -81,24 +75,29 @@ export default {
// are there alreadyAnsweredQuestions? // are there alreadyAnsweredQuestions?
const alreadyAnsweredQuestions = store.getters.damage.moldingQuestionAnswers; const alreadyAnsweredQuestions = store.getters.damage.moldingQuestionAnswers;
this.questionsData = this.pageData.partsOrQuestions.filter(x => x.parts[0].childPartQuestions.length).map((glass, i) => { this.questionsData = this.pageData.partsOrQuestions
// NOTE: questions for property "questions" can differ between layouts .filter((x) => x.parts[0].childPartQuestions.length)
glass.questions = glass.parts[0].childPartQuestions; .map((glass, i) => {
glass.answerKey = glass.glassLocation + "-" + glass.glassName; // NOTE: questions for property "questions" can differ between layouts
// reset selectedAnswers for this glass glass.questions = glass.parts[0].childPartQuestions;
this.selectedAnswers2[glass.answerKey] = []; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glass
this.selectedAnswers2[glass.answerKey] = [];
const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions); const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions);
this.$watch("selectedAnswers2." + glass.answerKey, (newValue) => { this.$watch(
if (newValue && Object.keys(newValue).length > 0) { "selectedAnswers2." + glass.answerKey,
this.handleAnswerUpdates(newValue, glass.answerKey); (newValue) => {
} if (newValue && Object.keys(newValue).length > 0) {
}, { deep: true }); this.handleAnswerUpdates(newValue, glass.answerKey);
}
return updatedGlass; },
}); { deep: true }
);
return updatedGlass;
});
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {

View file

@ -1,22 +1,16 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
@submit="onSubmit" <questions-page
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
>
<questions-page
ref="questionsPage" ref="questionsPage"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="questions-required" :validationRules="questions - required"
v-model="selectedAnswers" v-model="selectedAnswers"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" :currentGlassPieceIndex="currentGlassPieceIndex" />
/>
</Form> </Form>
</template> </template>
@ -81,25 +75,30 @@ export default {
// are there alreadyAnsweredQuestions? // are there alreadyAnsweredQuestions?
const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers; const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers;
this.questionsData = this.pageData.partsOrQuestions.filter(x => x.partQuestions).map((glass, i) => { this.questionsData = this.pageData.partsOrQuestions
// NOTE: questions for property "questions" can differ between layouts .filter((x) => x.partQuestions)
glass.questions = glass.partQuestions; .map((glass, i) => {
glass.answerKey = glass.glassLocation + "-" + glass.glassName; // NOTE: questions for property "questions" can differ between layouts
// reset selectedAnswers for this glass glass.questions = glass.partQuestions;
this.selectedAnswers[glass.answerKey] = []; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glass
this.selectedAnswers[glass.answerKey] = [];
const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions); const updatedGlass = this.setupInitialData(glass, i, alreadyAnsweredQuestions);
// Set up watch for each set of glass questions // Set up watch for each set of glass questions
this.$watch("selectedAnswers." + glass.answerKey, (newValue) => { this.$watch(
if (newValue && Object.keys(newValue).length > 0) { "selectedAnswers." + glass.answerKey,
this.handleAnswerUpdates(newValue, glass.answerKey); (newValue) => {
} if (newValue && Object.keys(newValue).length > 0) {
}, {deep: true}); this.handleAnswerUpdates(newValue, glass.answerKey);
}
return updatedGlass; },
}); { deep: true }
);
return updatedGlass;
});
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
@ -130,10 +129,11 @@ export default {
); );
// call API parts method // call API parts method
const partsLookup = await this.dispatchStoreAction(this.storeActions.GET_PARTS) const partsLookup = await this.dispatchStoreAction(this.storeActions.GET_PARTS).catch(
.catch(() => { () => {
return this.$refs.funnelFooter.removeLoader(); return this.$refs.funnelFooter.removeLoader();
}); }
);
const glassPiecePartsForStore = partsLookup.data.glassPieceParts; const glassPiecePartsForStore = partsLookup.data.glassPieceParts;
@ -146,4 +146,3 @@ export default {
}, },
}; };
</script> </script>

View file

@ -81,7 +81,9 @@ export default {
!answeredGlass.glassName || !answeredGlass.glassName ||
!answeredGlass.answeredQuestions || !answeredGlass.answeredQuestions ||
(!answeredGlass.result && !answeredGlass.partNum) (!answeredGlass.result && !answeredGlass.partNum)
) { return } ) {
return;
}
// test if glass parts match // test if glass parts match
if ( if (
@ -96,9 +98,12 @@ export default {
return; return;
} }
// determine which answer was previously chosen // determine which answer was previously chosen
const chosenAns = glass.questions[answeredQuestion.questionNum - 1].answers.find((a) => { const chosenAns = glass.questions[
answeredQuestion.questionNum - 1
].answers.find((a) => {
return ( return (
a.answerText.toUpperCase() === answeredQuestion.selectedAnswerText.toUpperCase() a.answerText.toUpperCase() ===
answeredQuestion.selectedAnswerText.toUpperCase()
); );
}); });
// set the answerString to use for answerSelected // set the answerString to use for answerSelected
@ -109,10 +114,13 @@ export default {
} }
// mark this question as answered (question-chain will read this) // mark this question as answered (question-chain will read this)
glass.questions[answeredQuestion.questionNum - 1].answerSelected = answerString; glass.questions[answeredQuestion.questionNum - 1].answerSelected =
answerString;
// mark this question as suppressed if needed (question-chain uses this) // mark this question as suppressed if needed (question-chain uses this)
if (answeredQuestion.suppressThisQuestion) { if (answeredQuestion.suppressThisQuestion) {
glass.questions[answeredQuestion.questionNum - 1].suppressThisQuestion = true; glass.questions[
answeredQuestion.questionNum - 1
].suppressThisQuestion = true;
} }
}); });
@ -137,10 +145,10 @@ export default {
handleAnswerUpdates(answer, glassKey, vm) { handleAnswerUpdates(answer, glassKey, vm) {
// only runs when all questions in a question-chain have been answered // 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 // 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 // (does not get run for each invididual question's answer, only when
// all relevant questions for the current part have been answered) // all relevant questions for the current part have been answered)
/* answer example format: /* answer example format:
{ {
"answerResult": "DD11132", "answerResult": "DD11132",
"answeredQuestions": [ "answeredQuestions": [
@ -161,7 +169,6 @@ export default {
// loop through every answered question on the currently answered glass part // loop through every answered question on the currently answered glass part
answer.answeredQuestions?.forEach((answeredQuestion) => { answer.answeredQuestions?.forEach((answeredQuestion) => {
/* answeredQuestion example format: /* answeredQuestion example format:
{ {
"questionText": "Is your Grand Cherokee the Laredo model?", "questionText": "Is your Grand Cherokee the Laredo model?",
@ -177,7 +184,6 @@ export default {
// loop through all glass pieces data // loop through all glass pieces data
self.questionsData.forEach((glassPiece, pieceIndex) => { self.questionsData.forEach((glassPiece, pieceIndex) => {
/* glassPiece example format: /* glassPiece example format:
{ {
"glassName": "Single", "glassName": "Single",
@ -205,10 +211,9 @@ export default {
"answerData": null "answerData": null
} }
*/ */
// limit duplicate search to glass pieces that follow after the currently being answered glass piece // limit duplicate search to glass pieces that follow after the currently being answered glass piece
if (pieceIndex > answer.glassIndex) { if (pieceIndex > answer.glassIndex) {
let indexToSuppressTo; let indexToSuppressTo;
// reset this glass piece, in case user is changing their previous answers // reset this glass piece, in case user is changing their previous answers
glassPiece.answerData = null; glassPiece.answerData = null;
@ -216,7 +221,6 @@ export default {
// loop through this glass piece's questions, looking for a questionText match // loop through this glass piece's questions, looking for a questionText match
glassPiece.questions.forEach((question, questionIndex) => { glassPiece.questions.forEach((question, questionIndex) => {
// clear out any previously set answers // clear out any previously set answers
question.answerSelected = null; question.answerSelected = null;
@ -244,10 +248,17 @@ export default {
// handle duplicate's nextQuestion logic on other related questions // handle duplicate's nextQuestion logic on other related questions
if (matchedAnswer.nextQuestionSequence) { if (matchedAnswer.nextQuestionSequence) {
// clear any suppression on the nextQuestion // clear any suppression on the nextQuestion
glassPiece.questions[matchedAnswer.nextQuestionSequence - 1].suppressThisQuestion = null; glassPiece.questions[
matchedAnswer.nextQuestionSequence - 1
].suppressThisQuestion = null;
// if the duplicate is 1ST question in array, set indexToSuppressTo // if the duplicate is 1ST question in array, set indexToSuppressTo
if (questionIndex === 0) { if (questionIndex === 0) {
if (!indexToSuppressTo || matchedAnswer.nextQuestionSequence < indexToSuppressTo) { indexToSuppressTo = matchedAnswer.nextQuestionSequence} if (
!indexToSuppressTo ||
matchedAnswer.nextQuestionSequence < indexToSuppressTo
) {
indexToSuppressTo = matchedAnswer.nextQuestionSequence;
}
} }
} }
@ -255,7 +266,10 @@ export default {
glassPiece.questions.forEach((q) => { glassPiece.questions.forEach((q) => {
q.answers.forEach((a) => { q.answers.forEach((a) => {
// revert any previously set nextQuestion logic modifications // revert any previously set nextQuestion logic modifications
if (a.originalNextQuestionSequence === question.questionSequence) { if (
a.originalNextQuestionSequence ===
question.questionSequence
) {
// restore original nextQuestionSequence // restore original nextQuestionSequence
a.nextQuestionSequence = a.originalNextQuestionSequence; a.nextQuestionSequence = a.originalNextQuestionSequence;
self.originalNextQuestionSequence = null; self.originalNextQuestionSequence = null;
@ -271,18 +285,22 @@ export default {
// update questions that lead to duplicated question // update questions that lead to duplicated question
if (matchedAnswer.nextQuestionSequence) { if (matchedAnswer.nextQuestionSequence) {
a.originalNextQuestionSequence = a.nextQuestionSequence; a.originalNextQuestionSequence =
a.nextQuestionSequence = matchedAnswer.nextQuestionSequence; a.nextQuestionSequence;
a.nextQuestionSequence =
matchedAnswer.nextQuestionSequence;
} else { } else {
a.originalNextQuestionSequence = a.nextQuestionSequence; a.originalNextQuestionSequence =
a.nextQuestionSequence;
a.nextQuestionSequence = null; a.nextQuestionSequence = null;
a.originalAnswerResult = a.originalAnswerResult || a.answerResult; a.originalAnswerResult =
a.originalAnswerResult || a.answerResult;
a.answerResult = matchedAnswer.answerResult; a.answerResult = matchedAnswer.answerResult;
} }
} }
}); });
}); });
// suppress current question // suppress current question
question.suppressThisQuestion = true; question.suppressThisQuestion = true;
@ -303,30 +321,30 @@ export default {
}; };
// set the answerData (used as indicator that it has been already answered) // set the answerData (used as indicator that it has been already answered)
glassPiece.answerData = { glassPiece.answerData = {
answerResult: matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence : matchedAnswer.answerResult, answerResult: matchedAnswer.nextQuestionSequence
? matchedAnswer.nextQuestionSequence
: matchedAnswer.answerResult,
answeredQuestions: [answeredQuestionObj], answeredQuestions: [answeredQuestionObj],
}; };
// suppress this glass piece because it has an answer // suppress this glass piece because it has an answer
glassPiece.isSuppressedPart = true; glassPiece.isSuppressedPart = true;
} }
} }
}); });
// Update key to force re-render of glass piece with duplicate question in case user changes previous related answer in the chain // Update key to force re-render of glass piece with duplicate question in case user changes previous related answer in the chain
self.questionsData[pieceIndex].key = self.questionsData[pieceIndex].key + Date.now().toString(); self.questionsData[pieceIndex].key =
self.questionsData[pieceIndex].key + Date.now().toString();
} }
}); });
}); });
// set final answer data for the current answered glass part // set final answer data for the current answered glass part
self.questionsData[answer.glassIndex].answerData = { self.questionsData[answer.glassIndex].answerData = {
answerResult: answer.answerResult, answerResult: answer.answerResult,
answeredQuestions: answer.answeredQuestions, answeredQuestions: answer.answeredQuestions,
} };
// this part has been fully answered, so advance to next part's question chain // this part has been fully answered, so advance to next part's question chain
for (let i = answer.glassIndex + 1; i < this.questionsData.length; i++) { for (let i = answer.glassIndex + 1; i < this.questionsData.length; i++) {
@ -336,7 +354,6 @@ export default {
break; break;
} }
} }
}, },
// Can't use `this` because navigateForward is also called from vin-pages-mixin // Can't use `this` because navigateForward is also called from vin-pages-mixin
async navigateForward(partsOrQuestions, vm) { async navigateForward(partsOrQuestions, vm) {
@ -427,7 +444,6 @@ export default {
{ partsOrQuestions } { partsOrQuestions }
); );
} else { } else {
// if single parts only // if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions); const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);

File diff suppressed because it is too large Load diff