Merge pull request #689 from Safelite/feature/CSR-108
CSR-108: refactoring
This commit is contained in:
commit
0c80eb40a4
6 changed files with 262 additions and 200 deletions
|
|
@ -96,7 +96,7 @@ describe("buttonQuestion.vue", () => {
|
||||||
const answer = { 'Name': 'testName', 'Text': 'testText' };
|
const answer = { 'Name': 'testName', 'Text': 'testText' };
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(buttonQuestion.methods.getValues.call(localThis, answer)).toBe('testText');
|
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testText');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -107,7 +107,7 @@ describe("buttonQuestion.vue", () => {
|
||||||
const answer = { 'Name': 'testName', 'Text': 'testText' };
|
const answer = { 'Name': 'testName', 'Text': 'testText' };
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(buttonQuestion.methods.getValues.call(localThis, answer)).toBe('testName');
|
expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testName');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
<span class="fw-bold w-100">{{ questionText }}</span>
|
<span class="fw-bold w-100">{{ questionText }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 d-flex justify-content-center">
|
<div class="w-100 d-flex justify-content-center">
|
||||||
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formattedGroupName">
|
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formatString(groupName)">
|
||||||
<legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
|
<legend class="sr-only" :data-focus-target="formatString(groupName)" :id="formatString(groupName)" tabindex="-1">
|
||||||
{{ questionText }}
|
{{ questionText }}
|
||||||
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
|
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
|
||||||
</legend>
|
</legend>
|
||||||
|
|
@ -15,13 +15,13 @@
|
||||||
<component
|
<component
|
||||||
:is="buttonType"
|
:is="buttonType"
|
||||||
@isCheckedChanged="handleCheckedChanged"
|
@isCheckedChanged="handleCheckedChanged"
|
||||||
:buttonID="answer.Name ? formattedGroupName + '-' + answer.Name : formattedGroupName + '-' + answer"
|
:buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
|
||||||
:value="getValues(answer)"
|
:value="getValue(answer)"
|
||||||
:buttonLabel="answer.Text ? answer.Text : answer"
|
:buttonLabel="answer.Text ? answer.Text : getAnswerString(answer, 'Name')"
|
||||||
:buttonLabelSubCopy="answer.SubText"
|
:buttonLabelSubCopy="answer.SubText"
|
||||||
:textPosition="textPosition"
|
:textPosition="textPosition"
|
||||||
:isMultiSelect="isMultiSelect"
|
:isMultiSelect="isMultiSelect"
|
||||||
:groupName="formattedGroupName"
|
:groupName="formatString(groupName)"
|
||||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||||
:loaderColor="loaderColor"
|
:loaderColor="loaderColor"
|
||||||
:loaderPosition="loaderPosition"
|
:loaderPosition="loaderPosition"
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="row form-test-error mt-1">
|
<div class="row form-test-error mt-1">
|
||||||
<error-message :name="formattedGroupName" v-if="!suppressError"></error-message>
|
<error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -95,9 +95,6 @@ export default {
|
||||||
valueToLogType: String,
|
valueToLogType: String,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
formattedGroupName() {
|
|
||||||
return this.groupName.replace(" ", "-");
|
|
||||||
},
|
|
||||||
getFieldSetClasses() {
|
getFieldSetClasses() {
|
||||||
if (this.isOverflowScrollable) {
|
if (this.isOverflowScrollable) {
|
||||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||||
|
|
@ -155,13 +152,23 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getValues(answer){
|
formatString(str) {
|
||||||
if (this.useTextForValue){
|
return str.replace(" ", "-");
|
||||||
return answer.Text
|
},
|
||||||
}
|
getValue(answer){
|
||||||
|
if (this.useTextForValue) { return answer.Text }
|
||||||
return answer.Name ? answer.Name : answer;
|
return answer.Name ? answer.Name : answer;
|
||||||
},
|
},
|
||||||
|
getAnswerString(answer, prop = "Name") {
|
||||||
|
switch (typeof answer) {
|
||||||
|
case "string":
|
||||||
|
case "number":
|
||||||
|
case "boolean":
|
||||||
|
return this.formatString(answer.toString());
|
||||||
|
default:
|
||||||
|
return answer[prop] ? this.formatString(answer[prop]) : this.formatString(answer.toString());
|
||||||
|
}
|
||||||
|
},
|
||||||
handleCheckedChanged(val) {
|
handleCheckedChanged(val) {
|
||||||
if(this.selectingInitiatesLoad) {
|
if(this.selectingInitiatesLoad) {
|
||||||
this.selectedValues = val.value;
|
this.selectedValues = val.value;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
:answers="q.answers"
|
:answers="q.answers"
|
||||||
:groupName="`${keyString}-${q.questionSequence}`"
|
:groupName="`${keyString}-${q.questionSequence}`"
|
||||||
v-model="q.answerSelected"
|
v-model="q.answerSelected"
|
||||||
@isCheckedChanged="handleChainCompleted"
|
@isCheckedChanged="handleAnswer"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
/>
|
/>
|
||||||
|
|
@ -58,12 +58,15 @@ export default {
|
||||||
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
|
q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText :
|
||||||
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
|
q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
|
||||||
nextQuestionSequence: a.nextQuestionSequence,
|
nextQuestionSequence: a.nextQuestionSequence,
|
||||||
|
answerResult: a.answerResult,
|
||||||
|
questionSequence: q.questionSequence,
|
||||||
|
questionType: a.nextQuestionSequence ? "nextQuestion" : "answer",
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
answerSelected: q.answerSelected || "",
|
answerSelected: q.answerSelected || "",
|
||||||
};
|
};
|
||||||
question.answerPair = answerPair;
|
question.answerPair = answerPair;
|
||||||
if (!q.isDuplicateQuestion) {
|
if (!q.suppressQuestion) {
|
||||||
this.questions.push(question);
|
this.questions.push(question);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -76,17 +79,24 @@ export default {
|
||||||
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
|
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleChainCompleted(returnedAnswer) {
|
handleAnswer(returnedAnswer) {
|
||||||
const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer.value);
|
/*
|
||||||
|
returnedAnswer example format:
|
||||||
|
{
|
||||||
|
"checkValue": "1|answer|DD11132|Yes",
|
||||||
|
"value": "1|answer|DD11132|Yes",
|
||||||
|
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer.checkValue);
|
||||||
|
|
||||||
if (isQuestionChainComplete) {
|
if (isQuestionChainComplete) {
|
||||||
this.$emit("update:modelValue", isQuestionChainComplete);
|
this.$emit("update:modelValue", isQuestionChainComplete);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleReturnedAnswer(returnedAnswer) { // this method will return either a final answer or Boolean false
|
getQuestionChainAnswerIfComplete(returnedAnswer) { // this method will return either a final answer or Boolean false
|
||||||
if (!returnedAnswer) { return false }
|
if (!returnedAnswer) { return false }
|
||||||
|
|
||||||
// Example returnedAnswers:
|
// Example returnedAnswers:
|
||||||
|
|
@ -98,31 +108,20 @@ export default {
|
||||||
const questionType = returnedAnswerArray[1];
|
const questionType = returnedAnswerArray[1];
|
||||||
const questionAnswer = returnedAnswerArray[2];
|
const questionAnswer = returnedAnswerArray[2];
|
||||||
const questionAnswerText = returnedAnswerArray[3];
|
const questionAnswerText = returnedAnswerArray[3];
|
||||||
|
const answeredQuestions = [];
|
||||||
|
|
||||||
this.questions.forEach((q) => {
|
this.questions.forEach((q) => {
|
||||||
// mark this question as "answered"
|
// find this question and mark it as "answered" by populating answerSelected
|
||||||
if (q.questionSequence === questionNum) {
|
if (q.questionSequence === questionNum) {
|
||||||
q.answerSelected = returnedAnswer;
|
q.answerSelected = returnedAnswer;
|
||||||
q.answerNumber = questionNum;
|
q.answerNumber = questionNum;
|
||||||
|
q.selectedAnswerText = questionAnswerText;
|
||||||
}
|
}
|
||||||
// remove all previous answers after the index of this one in questions
|
// remove all answers AFTER this question...
|
||||||
|
// (needed in case user is changing previously answered questions)
|
||||||
if ((q.questionSequence > questionNum)) {
|
if ((q.questionSequence > questionNum)) {
|
||||||
delete q.answerSelected;
|
delete q.answerSelected;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// return false if there's a nextQuestion... or return an object with "final" answers
|
|
||||||
if (questionType === "nextQuestion") {
|
|
||||||
// update to next question index
|
|
||||||
this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question
|
|
||||||
// scroll the next question into view
|
|
||||||
this.$nextTick(() => {
|
|
||||||
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
|
|
||||||
})
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
const answeredQuestions = [];
|
|
||||||
this.questions.forEach(( q ) => {
|
|
||||||
if (q.answerSelected) {
|
if (q.answerSelected) {
|
||||||
answeredQuestions.push({
|
answeredQuestions.push({
|
||||||
questionText: q.questionText,
|
questionText: q.questionText,
|
||||||
|
|
@ -131,9 +130,24 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// reset current question index
|
|
||||||
|
// return false if there's a nextQuestion... or return an object with final answers (truthy)
|
||||||
|
if (questionType === "nextQuestion") {
|
||||||
|
|
||||||
|
// update to next question index
|
||||||
|
this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question
|
||||||
|
// scroll the next question into view
|
||||||
|
this.$nextTick(() => {
|
||||||
|
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});
|
||||||
|
})
|
||||||
|
return false;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// reset current question index (removes .current-question class)
|
||||||
this.currentQuestionNum = 0; // reset count
|
this.currentQuestionNum = 0; // reset count
|
||||||
|
|
||||||
|
// return an object with the part answer, all the answered questions, and the part index
|
||||||
return {
|
return {
|
||||||
answerResult: questionAnswer,
|
answerResult: questionAnswer,
|
||||||
answeredQuestions: answeredQuestions,
|
answeredQuestions: answeredQuestions,
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,6 @@
|
||||||
<div v-for="(part, i) in partsQuestionsData" :key="i">
|
<div v-for="(part, i) in partsQuestionsData" :key="i">
|
||||||
<questionChain
|
<questionChain
|
||||||
ref="questionChain"
|
ref="questionChain"
|
||||||
:key="part.key"
|
|
||||||
:keyString="part.key"
|
:keyString="part.key"
|
||||||
v-model="selectedAnswers[part.glassLocation + '-' + part.glassName]"
|
v-model="selectedAnswers[part.glassLocation + '-' + part.glassName]"
|
||||||
:questionData="part.partQuestions"
|
:questionData="part.partQuestions"
|
||||||
|
|
@ -65,7 +64,6 @@ import { Form, defineRule } from "vee-validate";
|
||||||
import { required } from "@/helpers/validation-rules";
|
import { required } from "@/helpers/validation-rules";
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
||||||
|
|
||||||
// DEFINE VALIDATION RULES
|
// DEFINE VALIDATION RULES
|
||||||
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
|
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
|
||||||
|
|
@ -153,77 +151,112 @@ export default {
|
||||||
const partQuestionsFromPageData = store.getters.pageData(fmgPageValues.PART_QUESTIONS);
|
const partQuestionsFromPageData = store.getters.pageData(fmgPageValues.PART_QUESTIONS);
|
||||||
return partQuestionsFromPageData && Object.keys(partQuestionsFromPageData).length > 0;
|
return partQuestionsFromPageData && Object.keys(partQuestionsFromPageData).length > 0;
|
||||||
},
|
},
|
||||||
handleAnswerUpdates(key, answer) { // only runs when all questions in a question-chain have been answered
|
handleAnswerUpdates(key, 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
|
// 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 relevent questions for the current part have been answered)
|
// all relevent questions for the current part have been answered)
|
||||||
const glassPartWithAnswer = this.partsQuestionsData[answer.partIndex];
|
|
||||||
const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : [];
|
/*
|
||||||
|
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 = [];
|
const answeredQuestionIndexes = [];
|
||||||
|
|
||||||
// since user has answered a question differently than anything that was preloaded,
|
// if user has answered a question differently than anything that was preloaded,
|
||||||
// then clear out the preloaded answers
|
// we need to clear out any preloaded answers
|
||||||
this.selectedAnswers = {};
|
this.selectedAnswers = {};
|
||||||
|
|
||||||
// examine all the answers returned that were part of the user's journey through question-chain
|
// loop through every answered question on the currently answered glass part
|
||||||
|
|
||||||
// loop through every answered question on currently answered glass part
|
|
||||||
answer.answeredQuestions?.forEach((aq) => {
|
answer.answeredQuestions?.forEach((aq) => {
|
||||||
|
|
||||||
// gather all the question numbers of the answered questions
|
// keep track of this question number
|
||||||
answeredQuestionIndexes.push(aq.questionNum);
|
answeredQuestionIndexes.push(aq.questionNum);
|
||||||
|
|
||||||
const answeredQuestionText = aq.questionText.toUpperCase();
|
const answeredQuestionText = aq.questionText.toUpperCase();
|
||||||
const answeredQuestionAnswer = aq.selectedAnswerText.toUpperCase();
|
const answeredQuestionAnswer = aq.selectedAnswerText.toUpperCase();
|
||||||
|
|
||||||
// HANDLE DUPLICATE QUESTIONS
|
// HANDLE DUPLICATE QUESTIONS
|
||||||
// loop through all glass parts data (but only examining parts after currently being answered part)
|
|
||||||
this.partsQuestionsData.forEach((glassPart, i) => {
|
|
||||||
|
|
||||||
// restrict duplicate logic to only parts that follow the currently being answered part
|
// loop through all glass parts data
|
||||||
if (i > answer.partIndex) {
|
this.partsQuestionsData.forEach((glassPart, gpIndex) => {
|
||||||
|
|
||||||
// loop through this glass part's part questions, looking for a questionText match
|
// only look for duplicates forward... to parts that follow after the currently being answered part
|
||||||
glassPart.partQuestions.forEach((pq, pqIndex) => {
|
if (gpIndex > answer.partIndex) {
|
||||||
// clear out any previously set answers
|
|
||||||
//delete pq.answerSelected;
|
|
||||||
pq.answerSelected = null;
|
|
||||||
|
|
||||||
// does pq.questionText match answeredQuestionText? (aka do we have a duplicate question?)
|
let suppressUntil;
|
||||||
if (pq.questionText.toUpperCase() === answeredQuestionText) {
|
// reset this glass part, in case user is changing their previous answers
|
||||||
|
|
||||||
// which one of this partQuestions' answers matches our answer?
|
|
||||||
let matchedAnswer;
|
|
||||||
pq.answers.forEach((ans, ansIndex) => {
|
|
||||||
// delete pq.answers[ansIndex].selected;
|
|
||||||
pq.answers[ansIndex].selected = null;
|
|
||||||
if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
|
|
||||||
matchedAnswer = ans;
|
|
||||||
pq.answers[ansIndex].selected = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (matchedAnswer) {
|
|
||||||
const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex];
|
|
||||||
|
|
||||||
// remove answerData from this glass part
|
|
||||||
glassPart.answerData = null;
|
glassPart.answerData = null;
|
||||||
glassPart.isSuppressedPart = null;
|
glassPart.isSuppressedPart = null;
|
||||||
|
|
||||||
// Update the key to re-render this part's question-chain component
|
// loop through this glass part's part questions, looking for a questionText match
|
||||||
this.partsQuestionsData[i].key = this.partsQuestionsData[i].glassLocation + this.partsQuestionsData[i].glassName + Date.now().toString();
|
glassPart.partQuestions.forEach((pq, pqIndex) => {
|
||||||
|
|
||||||
// handle suppressing downstream in this question chain
|
// clear out any previously set answers
|
||||||
const rejectedAnswer = thisAnsweredPartQuestion.answers.filter((ans) => {
|
pq.answerSelected = null;
|
||||||
return !ans.selected;
|
|
||||||
|
// 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 thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex];
|
||||||
|
let matchedAnswer;
|
||||||
|
let rejectedAnswers = []; // set as an array, in case we ever have questions with more than 2 answers...
|
||||||
|
|
||||||
|
// which one of this partQuestions' 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;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (rejectedAnswer[0].nextQuestionSequence) {
|
// Update the key to re-render this part's question-chain component
|
||||||
glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressDuplicateQuestion = true;
|
this.partsQuestionsData[gpIndex].key = this.partsQuestionsData[gpIndex].glassLocation + this.partsQuestionsData[gpIndex].glassName + Date.now().toString();
|
||||||
}
|
|
||||||
|
// handle suppressing downstream in this question chain
|
||||||
|
|
||||||
if (matchedAnswer.nextQuestionSequence) {
|
if (matchedAnswer.nextQuestionSequence) {
|
||||||
// ensure that accepted answer is NOT suppressed
|
// ensure that the question that the accepted answer has set to be next is NOT suppressed
|
||||||
glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressDuplicateQuestion = null;
|
glassPart.partQuestions[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
|
// handle suppressing upstream in this question chain
|
||||||
|
|
@ -240,7 +273,7 @@ export default {
|
||||||
thisAns.originalAnswerResult = null;
|
thisAns.originalAnswerResult = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// search for any of the answers that lead to the duplicated question
|
// search for any answers that lead to the duplicated question
|
||||||
if (thisAns.nextQuestionSequence === pq.questionSequence) {
|
if (thisAns.nextQuestionSequence === pq.questionSequence) {
|
||||||
// update either the nextQuestionSequence or the answerResult
|
// update either the nextQuestionSequence or the answerResult
|
||||||
if (matchedAnswer.nextQuestionSequence) {
|
if (matchedAnswer.nextQuestionSequence) {
|
||||||
|
|
@ -257,9 +290,9 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
// suppress current question
|
// suppress current question
|
||||||
thisAnsweredPartQuestion.suppressDuplicateQuestion = true;
|
thisAnsweredPartQuestion.suppressQuestion = true;
|
||||||
|
|
||||||
const thisGlassPart = "glassPart" + i;
|
const thisGlassPart = "glassPart" + gpIndex;
|
||||||
if (this.foundDuplicateQuestions[thisGlassPart]) {
|
if (this.foundDuplicateQuestions[thisGlassPart]) {
|
||||||
if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredPartQuestion.questionSequence)) {
|
if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredPartQuestion.questionSequence)) {
|
||||||
this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredPartQuestion.questionSequence);
|
this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredPartQuestion.questionSequence);
|
||||||
|
|
@ -270,7 +303,7 @@ export default {
|
||||||
|
|
||||||
// are there any questions left that are not suppressed?
|
// are there any questions left that are not suppressed?
|
||||||
const remainingQuestions = glassPart.partQuestions.filter((q) => {
|
const remainingQuestions = glassPart.partQuestions.filter((q) => {
|
||||||
return !q.suppressDuplicateQuestion;
|
return !q.suppressQuestion;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (remainingQuestions.length < 1) {
|
if (remainingQuestions.length < 1) {
|
||||||
|
|
@ -281,7 +314,7 @@ export default {
|
||||||
questionText: pq.questionText,
|
questionText: pq.questionText,
|
||||||
selectedAnswerText: matchedAnswer.answerText,
|
selectedAnswerText: matchedAnswer.answerText,
|
||||||
questionNum: pq.questionSequence,
|
questionNum: pq.questionSequence,
|
||||||
isDuplicateQuestion: pq.suppressDuplicateQuestion,
|
suppressQuestion: pq.suppressQuestion,
|
||||||
};
|
};
|
||||||
// set the answerData as 'already answered'
|
// set the answerData as 'already answered'
|
||||||
glassPart.answerData = {
|
glassPart.answerData = {
|
||||||
|
|
@ -293,14 +326,12 @@ export default {
|
||||||
glassPart.isSuppressedPart = true;
|
glassPart.isSuppressedPart = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
} // END of if (matchedAnswer)
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update the key to re-render this part's question-chain component
|
// Update the key to re-render this part's question-chain component
|
||||||
this.partsQuestionsData[i].key = this.partsQuestionsData[i].glassLocation + this.partsQuestionsData[i].glassName + Date.now().toString();
|
this.partsQuestionsData[gpIndex].key = this.partsQuestionsData[gpIndex].glassLocation + this.partsQuestionsData[gpIndex].glassName + Date.now().toString();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -308,6 +339,8 @@ export default {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// DETERMINE ANSWERED QUESTIONS LIST FOR THIS GLASS PART
|
||||||
|
|
||||||
// look through all (this part's) part questions for any duplicates that were suppressed;
|
// look through all (this part's) part questions for any duplicates that were suppressed;
|
||||||
// add them to the list of answered questions if found
|
// add them to the list of answered questions if found
|
||||||
|
|
||||||
|
|
@ -319,13 +352,15 @@ export default {
|
||||||
// };
|
// };
|
||||||
|
|
||||||
const thisPartsDupes = this.foundDuplicateQuestions["glassPart" + answer.partIndex];
|
const thisPartsDupes = this.foundDuplicateQuestions["glassPart" + answer.partIndex];
|
||||||
|
const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : [];
|
||||||
|
const glassPartAnswered = this.partsQuestionsData[answer.partIndex];
|
||||||
|
|
||||||
thisPartsDupes?.forEach((dupe) => {
|
thisPartsDupes?.forEach((dupe) => {
|
||||||
// dupe is a single integer
|
// dupe is a single integer
|
||||||
const dupeQuestion = glassPartWithAnswer.partQuestions[dupe - 1];
|
const dupeQuestion = glassPartAnswered.partQuestions[dupe - 1];
|
||||||
const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
|
const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
|
||||||
|
|
||||||
glassPartWithAnswer.partQuestions.forEach((q) => {
|
glassPartAnswered.partQuestions.forEach((q) => {
|
||||||
let includeThisDupeInAnsweredQuestions = false;
|
let includeThisDupeInAnsweredQuestions = false;
|
||||||
|
|
||||||
// did one of the answers of this question point to the duplicated question?
|
// did one of the answers of this question point to the duplicated question?
|
||||||
|
|
@ -347,7 +382,7 @@ export default {
|
||||||
questionNum: dupeQuestion.questionSequence,
|
questionNum: dupeQuestion.questionSequence,
|
||||||
questionText: dupeQuestion.questionText,
|
questionText: dupeQuestion.questionText,
|
||||||
selectedAnswerText: dupeQuestionAnswer.answerText,
|
selectedAnswerText: dupeQuestionAnswer.answerText,
|
||||||
isDuplicateQuestion: dupeQuestion.suppressDuplicateQuestion,
|
suppressQuestion: dupeQuestion.suppressQuestion,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -363,7 +398,7 @@ export default {
|
||||||
filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a,b) => a.questionNum - b.questionNum);
|
filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a,b) => a.questionNum - b.questionNum);
|
||||||
|
|
||||||
// set final answer data for the current answered glass part
|
// set final answer data for the current answered glass part
|
||||||
glassPartWithAnswer.answerData = {
|
glassPartAnswered.answerData = {
|
||||||
answerResult: answer.answerResult,
|
answerResult: answer.answerResult,
|
||||||
answeredQuestions: filteredCompleteAnsweredQuestions,
|
answeredQuestions: filteredCompleteAnsweredQuestions,
|
||||||
}
|
}
|
||||||
|
|
@ -386,8 +421,12 @@ export default {
|
||||||
this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => {
|
this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => {
|
||||||
part.key = part.glassLocation + "-" + part.glassName;
|
part.key = part.glassLocation + "-" + part.glassName;
|
||||||
this.selectedAnswers[part.key] = [];
|
this.selectedAnswers[part.key] = [];
|
||||||
|
if (!alreadyAnsweredQuestions) {
|
||||||
|
part.answerData = null;
|
||||||
|
}
|
||||||
|
|
||||||
alreadyAnsweredQuestions?.forEach((savedPart) => {
|
alreadyAnsweredQuestions?.forEach((savedPart) => {
|
||||||
|
|
||||||
if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
|
if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -412,8 +451,8 @@ export default {
|
||||||
// mark this partQuestion as answered (question-chain will read this)
|
// mark this partQuestion as answered (question-chain will read this)
|
||||||
part.partQuestions[aq.questionNum-1].answerSelected = answerString;
|
part.partQuestions[aq.questionNum-1].answerSelected = answerString;
|
||||||
// mark this partQuestion as duplicate if it is (question-chain will read this)
|
// mark this partQuestion as duplicate if it is (question-chain will read this)
|
||||||
if (aq.isDuplicateQuestion) {
|
if (aq.suppressQuestion) {
|
||||||
part.partQuestions[aq.questionNum-1].isDuplicateQuestion = true;
|
part.partQuestions[aq.questionNum-1].suppressQuestion = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -426,6 +465,7 @@ export default {
|
||||||
answeredQuestions: savedPart.answeredQuestions
|
answeredQuestions: savedPart.answeredQuestions
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set up watch for each set of part questions, which gets updated when all questions for a part have been answered
|
// Set up watch for each set of part questions, which gets updated when all questions for a part have been answered
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
:value="value"
|
:value="value"
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
v-model="checkValue"
|
v-model="checkValue"
|
||||||
|
:checked="checkValue"
|
||||||
@change="handleInputChange()"
|
@change="handleInputChange()"
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,6 @@
|
||||||
v-model="checkValue"
|
v-model="checkValue"
|
||||||
:checked="checkValue"
|
:checked="checkValue"
|
||||||
@change="handleInputChange"
|
@change="handleInputChange"
|
||||||
:aria-label="value"
|
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
@ -165,6 +164,7 @@ export default {
|
||||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||||
|
|
||||||
const validateValue = value;
|
const validateValue = value;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
handleChange,
|
handleChange,
|
||||||
errors,
|
errors,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue