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

CSR-803: PR refactoring

Browse source
This commit is contained in:
Adam Caouette 2022-11-09 14:58:22 -05:00
parent 35368a2c07
commit 2812c9e511
7 changed files with 75 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@
:class="q.questionSequence === currentQuestionNum && 'current-question'" :class="q.questionSequence === currentQuestionNum && 'current-question'"
:questionText="q.questionText" :questionText="q.questionText"
:answers="q.answers" :answers="q.answers"
:groupName="`question-${glassPieceIndex}-${q.questionSequence}`" :groupName="`question-${index}-${q.questionSequence}`"
:modelValue="q.answerSelected" :modelValue="q.answerSelected"
@update:modelValue="handleAnswer(q, $event)" @update:modelValue="handleAnswer(q, $event)"
isRequired isRequired
@ -32,7 +32,7 @@ export default {
questionData: Object, questionData: Object,
validationRules: String, validationRules: String,
modelValue: Object, modelValue: Object,
glassPieceIndex: Number, index: Number,
answerKey: String, answerKey: String,
}, },
async created() { async created() {
@ -155,7 +155,7 @@ export default {
return { return {
answerResult: questionAnswer, answerResult: questionAnswer,
answeredQuestions: answeredQuestions, answeredQuestions: answeredQuestions,
index: this.glassPieceIndex, index: this.index,
}; };
} }
}, },

6
src/common-components/questions-page/questions-page.vue → src/common-components/questions-page-layout/questions-page-layout.vue
View file

@ -18,7 +18,7 @@
ref="questionChain" ref="questionChain"
v-model="selectedAnswers[questionsDatum.answerKey]" v-model="selectedAnswers[questionsDatum.answerKey]"
:questionData="questionsDatum.questions" :questionData="questionsDatum.questions"
:glassPieceIndex="i" :index="i"
v-if="showThisQuestionChain(questionsDatum, i)" v-if="showThisQuestionChain(questionsDatum, i)"
:answerKey="questionsDatum.answerKey" :answerKey="questionsDatum.answerKey"
:validationRules="validationRules" /> :validationRules="validationRules" />
@ -52,7 +52,7 @@ export default {
questionsData: Array, questionsData: Array,
validationRules: String, validationRules: String,
modelValue: Array, modelValue: Array,
currentGlassPieceIndex: Number, index: Number,
}, },
computed: { computed: {
selectedAnswers: { selectedAnswers: {
@ -69,7 +69,7 @@ export default {
if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) { if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
return false; return false;
} // return false if no questions or if suppressed } // return false if no questions or if suppressed
return this.currentGlassPieceIndex === i || glass.answerData?.answerResult?.length > 0; return this.index === i || glass.answerData?.answerResult?.length > 0;
}, },
handleForwardButtonAction() { handleForwardButtonAction() {
this.$emit("forwardButtonAction"); this.$emit("forwardButtonAction");

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

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<questions-page <questions-page-layout
ref="questionsPage" ref="questionsPageLayout"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
@ -10,13 +10,13 @@
v-model="selectedAnswers" v-model="selectedAnswers"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" /> :index="currentGlassIndex" />
</Form> </Form>
</template> </template>
<script> <script>
// Components // Components
import questionsPage from "@/common-components/questions-page/questions-page"; import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -57,7 +57,7 @@ export default {
return { return {
questionsData: [], questionsData: [],
selectedAnswers: {}, selectedAnswers: {},
currentGlassPieceIndex: 0, currentGlassIndex: 0,
}; };
}, },
computed: { computed: {
@ -77,31 +77,27 @@ export default {
this.questionsData = this.pageData.partsOrQuestions this.questionsData = this.pageData.partsOrQuestions
.filter((x) => x.capabilityQuestions) .filter((x) => x.capabilityQuestions)
.map((glassPiece, i) => { .map((glass, index) => {
// NOTE: questions for property "questions" can differ between layouts // NOTE: questions for property "questions" can differ between layouts
glassPiece.questions = glassPiece.capabilityQuestions; glass.questions = glass.capabilityQuestions;
glassPiece.answerKey = glassPiece.glassLocation + "-" + glassPiece.glassName; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glassPiece // reset selectedAnswers for this glass
this.selectedAnswers[glassPiece.answerKey] = []; this.selectedAnswers[glass.answerKey] = [];
const updatedGlassPiece = this.setupInitialData( const updatedGlass = this.setupInitialData(glass, index, alreadyAnsweredQuestions);
glassPiece,
i,
alreadyAnsweredQuestions
);
// Set up watch for each set of glass questions // Set up watch for each set of glass questions
this.$watch( this.$watch(
"selectedAnswers." + glassPiece.answerKey, "selectedAnswers." + glass.answerKey,
(newValue) => { (newValue) => {
if (newValue && Object.keys(newValue).length > 0) { if (newValue && Object.keys(newValue).length > 0) {
this.handleAnswerUpdates(newValue, glassPiece.answerKey); this.handleAnswerUpdates(newValue, glass.answerKey);
} }
}, },
{ deep: true } { deep: true }
); );
return updatedGlassPiece; return updatedGlass;
}); });
}, },
methods: { methods: {
@ -170,7 +166,7 @@ export default {
}, },
components: { components: {
Form, Form,
questionsPage, questionsPageLayout,
}, },
}; };
</script> </script>

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

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<questions-page <questions-page-layout
ref="questionsPage" ref="questionsPageLayout"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
@ -10,13 +10,13 @@
v-model="selectedAnswers" v-model="selectedAnswers"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" /> :index="currentGlassIndex" />
</Form> </Form>
</template> </template>
<script> <script>
// Components // Components
import questionsPage from "@/common-components/questions-page/questions-page"; import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -57,7 +57,7 @@ export default {
return { return {
questionsData: [], questionsData: [],
selectedAnswers: {}, selectedAnswers: {},
currentGlassPieceIndex: 0, currentGlassIndex: 0,
}; };
}, },
computed: { computed: {
@ -77,30 +77,26 @@ export default {
this.questionsData = this.pageData.partsOrQuestions this.questionsData = this.pageData.partsOrQuestions
.filter((x) => x.parts[0].childPartQuestions.length) .filter((x) => x.parts[0].childPartQuestions.length)
.map((glassPiece, i) => { .map((glass, index) => {
// NOTE: questions for property "questions" can differ between layouts // NOTE: questions for property "questions" can differ between layouts
glassPiece.questions = glassPiece.parts[0].childPartQuestions; glass.questions = glass.parts[0].childPartQuestions;
glassPiece.answerKey = glassPiece.glassLocation + "-" + glassPiece.glassName; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glassPiece // reset selectedAnswers for this glass
this.selectedAnswers[glassPiece.answerKey] = []; this.selectedAnswers[glass.answerKey] = [];
const updatedGlassPiece = this.setupInitialData( const updatedGlass = this.setupInitialData(glass, index, alreadyAnsweredQuestions);
glassPiece,
i,
alreadyAnsweredQuestions
);
this.$watch( this.$watch(
"selectedAnswers." + glassPiece.answerKey, "selectedAnswers." + glass.answerKey,
(newValue) => { (newValue) => {
if (newValue && Object.keys(newValue).length > 0) { if (newValue && Object.keys(newValue).length > 0) {
this.handleAnswerUpdates(newValue, glassPiece.answerKey); this.handleAnswerUpdates(newValue, glass.answerKey);
} }
}, },
{ deep: true } { deep: true }
); );
return updatedGlassPiece; return updatedGlass;
}); });
}, },
methods: { methods: {
@ -155,7 +151,7 @@ export default {
}, },
components: { components: {
Form, Form,
questionsPage, questionsPageLayout,
}, },
}; };
</script> </script>

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

@ -1,7 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<questions-page <questions-page-layout
ref="questionsPage" ref="questionsPageLayout"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
@ -10,13 +10,13 @@
v-model="selectedAnswers" v-model="selectedAnswers"
@forwardButtonAction="forwardButtonAction" @forwardButtonAction="forwardButtonAction"
@backButtonAction="backButtonAction" @backButtonAction="backButtonAction"
:currentGlassPieceIndex="currentGlassPieceIndex" /> :index="currentGlassIndex" />
</Form> </Form>
</template> </template>
<script> <script>
// Components // Components
import questionsPage from "@/common-components/questions-page/questions-page"; import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -57,7 +57,7 @@ export default {
return { return {
questionsData: [], questionsData: [],
selectedAnswers: {}, selectedAnswers: {},
currentGlassPieceIndex: 0, currentGlassIndex: 0,
}; };
}, },
computed: { computed: {
@ -77,31 +77,27 @@ export default {
this.questionsData = this.pageData.partsOrQuestions this.questionsData = this.pageData.partsOrQuestions
.filter((x) => x.partQuestions) .filter((x) => x.partQuestions)
.map((glassPiece, i) => { .map((glass, index) => {
// NOTE: questions for property "questions" can differ between layouts // NOTE: questions for property "questions" can differ between layouts
glassPiece.questions = glassPiece.partQuestions; glass.questions = glass.partQuestions;
glassPiece.answerKey = glassPiece.glassLocation + "-" + glassPiece.glassName; glass.answerKey = glass.glassLocation + "-" + glass.glassName;
// reset selectedAnswers for this glassPiece // reset selectedAnswers for this glass
this.selectedAnswers[glassPiece.answerKey] = []; this.selectedAnswers[glass.answerKey] = [];
const updatedGlassPiece = this.setupInitialData( const updatedGlass = this.setupInitialData(glass, index, alreadyAnsweredQuestions);
glassPiece,
i,
alreadyAnsweredQuestions
);
// Set up watch for each set of glass questions // Set up watch for each set of glass questions
this.$watch( this.$watch(
"selectedAnswers." + glassPiece.answerKey, "selectedAnswers." + glass.answerKey,
(newValue) => { (newValue) => {
if (newValue && Object.keys(newValue).length > 0) { if (newValue && Object.keys(newValue).length > 0) {
this.handleAnswerUpdates(newValue, glassPiece.answerKey); this.handleAnswerUpdates(newValue, glass.answerKey);
} }
}, },
{ deep: true } { deep: true }
); );
return updatedGlassPiece; return updatedGlass;
}); });
}, },
methods: { methods: {
@ -139,14 +135,16 @@ export default {
} }
); );
const glassPiecePartsForStore = partsLookup.data.glassPieceParts; const glassPartsForStore = partsLookup.data.glassPieceParts;
this.navigateForward(glassPiecePartsForStore); debugger; // eslint-disable-line no-debugger
this.navigateForward(glassPartsForStore);
}, },
}, },
components: { components: {
Form, Form,
questionsPage, questionsPageLayout,
}, },
}; };
</script> </script>

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

@ -66,7 +66,7 @@ export default {
currentPageComesAfterPage(currentPage = this.$route.query.fmgPage, fmgPage) { currentPageComesAfterPage(currentPage = this.$route.query.fmgPage, fmgPage) {
return this.comparePageIndices(currentPage, fmgPage) > 0; return this.comparePageIndices(currentPage, fmgPage) > 0;
}, },
setupInitialData(glass, i, alreadyAnsweredQuestions, vm) { setupInitialData(glass, index, alreadyAnsweredQuestions, vm) {
const self = vm ?? this; const self = vm ?? this;
// clear answerData if no questions are already answered // clear answerData if no questions are already answered
@ -124,8 +124,8 @@ export default {
} }
}); });
// advance the currentGlassPieceIndex // advance the currentGlassIndex
self.currentGlassPieceIndex = i; self.currentGlassIndex = index;
const answerResult = answeredGlass.partNum const answerResult = answeredGlass.partNum
? answeredGlass.partNum ? answeredGlass.partNum
@ -182,9 +182,9 @@ export default {
// HANDLE DUPLICATE QUESTIONS // HANDLE DUPLICATE QUESTIONS
// loop through all glass pieces data // loop through all glass data
self.questionsData.forEach((glassPiece, pieceIndex) => { self.questionsData.forEach((glass, glassIndex) => {
/* glassPiece example format: /* glass example format:
{ {
"glassName": "Single", "glassName": "Single",
"glassLocation": "Windshield", "glassLocation": "Windshield",
@ -213,14 +213,14 @@ export default {
*/ */
// 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.index) { if (glassIndex > answer.index) {
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; glass.answerData = null;
glassPiece.isSuppressedPart = null; glass.isSuppressedPart = null;
// 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) => { glass.questions.forEach((question, questionIndex) => {
// clear out any previously set answers // clear out any previously set answers
question.answerSelected = null; question.answerSelected = null;
@ -248,7 +248,7 @@ 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[ glass.questions[
matchedAnswer.nextQuestionSequence - 1 matchedAnswer.nextQuestionSequence - 1
].suppressThisQuestion = null; ].suppressThisQuestion = null;
// if the duplicate is 1ST question in array, set indexToSuppressTo // if the duplicate is 1ST question in array, set indexToSuppressTo
@ -263,7 +263,7 @@ export default {
} }
// update answers in this glass piece's questions with duplication logic modifications // update answers in this glass piece's questions with duplication logic modifications
glassPiece.questions.forEach((q) => { glass.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 ( if (
@ -305,7 +305,7 @@ export default {
question.suppressThisQuestion = true; question.suppressThisQuestion = true;
// are there any questions left that are not suppressed? // are there any questions left that are not suppressed?
const remainingQuestions = glassPiece.questions.filter((q) => { const remainingQuestions = glass.questions.filter((q) => {
return !q.suppressThisQuestion; return !q.suppressThisQuestion;
}); });
@ -320,7 +320,7 @@ export default {
suppressThisQuestion: question.suppressThisQuestion, suppressThisQuestion: question.suppressThisQuestion,
}; };
// 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 = { glass.answerData = {
answerResult: matchedAnswer.nextQuestionSequence answerResult: matchedAnswer.nextQuestionSequence
? matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence
: matchedAnswer.answerResult, : matchedAnswer.answerResult,
@ -328,14 +328,14 @@ export default {
}; };
// suppress this glass piece because it has an answer // suppress this glass piece because it has an answer
glassPiece.isSuppressedPart = true; glass.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[glassIndex].key =
self.questionsData[pieceIndex].key + Date.now().toString(); self.questionsData[glassIndex].key + Date.now().toString();
} }
}); });
}); });
@ -350,7 +350,7 @@ export default {
for (let i = answer.index + 1; i < this.questionsData.length; i++) { for (let i = answer.index + 1; i < this.questionsData.length; i++) {
// if this part has not yet been fully answered, then make it the current part // if this part has not yet been fully answered, then make it the current part
if (!this.questionsData[i].answerData?.answerResult) { if (!this.questionsData[i].answerData?.answerResult) {
this.currentGlassPieceIndex = i; this.currentGlassIndex = i;
break; break;
} }
} }

4
src/mixins/vehicle-questions-mixin.spec.js
View file

@ -664,10 +664,10 @@ describe("vehicle-questions-mixin", () => {
// Act // Act
wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm); wrapper.vm.handleAnswerUpdates(answerNo, "", wrapper.vm);
const glassPieceWithDuplicate = wrapper.vm.questionsData[1]; const glassWithDuplicate = wrapper.vm.questionsData[1];
// Assert // Assert
expect(glassPieceWithDuplicate.key).not.toBe("testkey2"); expect(glassWithDuplicate.key).not.toBe("testkey2");
}); });
test("then that question should be supressed", () => { test("then that question should be supressed", () => {