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'"
:questionText="q.questionText"
:answers="q.answers"
:groupName="`question-${glassPieceIndex}-${q.questionSequence}`"
:groupName="`question-${index}-${q.questionSequence}`"
:modelValue="q.answerSelected"
@update:modelValue="handleAnswer(q, $event)"
isRequired
@ -32,7 +32,7 @@ export default {
questionData: Object,
validationRules: String,
modelValue: Object,
glassPieceIndex: Number,
index: Number,
answerKey: String,
},
async created() {
@ -155,7 +155,7 @@ export default {
return {
answerResult: questionAnswer,
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"
v-model="selectedAnswers[questionsDatum.answerKey]"
:questionData="questionsDatum.questions"
:glassPieceIndex="i"
:index="i"
v-if="showThisQuestionChain(questionsDatum, i)"
:answerKey="questionsDatum.answerKey"
:validationRules="validationRules" />
@ -52,7 +52,7 @@ export default {
questionsData: Array,
validationRules: String,
modelValue: Array,
currentGlassPieceIndex: Number,
index: Number,
},
computed: {
selectedAnswers: {
@ -69,7 +69,7 @@ export default {
if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
return false;
} // 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() {
this.$emit("forwardButtonAction");

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

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

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

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

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

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

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

@ -66,7 +66,7 @@ export default {
currentPageComesAfterPage(currentPage = this.$route.query.fmgPage, fmgPage) {
return this.comparePageIndices(currentPage, fmgPage) > 0;
},
setupInitialData(glass, i, alreadyAnsweredQuestions, vm) {
setupInitialData(glass, index, alreadyAnsweredQuestions, vm) {
const self = vm ?? this;
// clear answerData if no questions are already answered
@ -124,8 +124,8 @@ export default {
}
});
// advance the currentGlassPieceIndex
self.currentGlassPieceIndex = i;
// advance the currentGlassIndex
self.currentGlassIndex = index;
const answerResult = answeredGlass.partNum
? answeredGlass.partNum
@ -182,9 +182,9 @@ export default {
// HANDLE DUPLICATE QUESTIONS
// loop through all glass pieces data
self.questionsData.forEach((glassPiece, pieceIndex) => {
/* glassPiece example format:
// loop through all glass data
self.questionsData.forEach((glass, glassIndex) => {
/* glass example format:
{
"glassName": "Single",
"glassLocation": "Windshield",
@ -213,14 +213,14 @@ export default {
*/
// 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;
// reset this glass piece, in case user is changing their previous answers
glassPiece.answerData = null;
glassPiece.isSuppressedPart = null;
glass.answerData = null;
glass.isSuppressedPart = null;
// 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
question.answerSelected = null;
@ -248,7 +248,7 @@ export default {
// handle duplicate's nextQuestion logic on other related questions
if (matchedAnswer.nextQuestionSequence) {
// clear any suppression on the nextQuestion
glassPiece.questions[
glass.questions[
matchedAnswer.nextQuestionSequence - 1
].suppressThisQuestion = null;
// 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
glassPiece.questions.forEach((q) => {
glass.questions.forEach((q) => {
q.answers.forEach((a) => {
// revert any previously set nextQuestion logic modifications
if (
@ -305,7 +305,7 @@ export default {
question.suppressThisQuestion = true;
// are there any questions left that are not suppressed?
const remainingQuestions = glassPiece.questions.filter((q) => {
const remainingQuestions = glass.questions.filter((q) => {
return !q.suppressThisQuestion;
});
@ -320,7 +320,7 @@ export default {
suppressThisQuestion: question.suppressThisQuestion,
};
// set the answerData (used as indicator that it has been already answered)
glassPiece.answerData = {
glass.answerData = {
answerResult: matchedAnswer.nextQuestionSequence
? matchedAnswer.nextQuestionSequence
: matchedAnswer.answerResult,
@ -328,14 +328,14 @@ export default {
};
// 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
self.questionsData[pieceIndex].key =
self.questionsData[pieceIndex].key + Date.now().toString();
self.questionsData[glassIndex].key =
self.questionsData[glassIndex].key + Date.now().toString();
}
});
});
@ -350,7 +350,7 @@ export default {
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.questionsData[i].answerData?.answerResult) {
this.currentGlassPieceIndex = i;
this.currentGlassIndex = i;
break;
}
}

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

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