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

Merge pull request #689 from Safelite/feature/CSR-108

Browse source 
CSR-108: refactoring
This commit is contained in:
AdamCaouetteSafelite 2022-08-23 09:50:01 -04:00 committed by GitHub
commit 0c80eb40a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 262 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common-components/button-question/button-question.spec.js
View file

@ -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');
}); });
}); });

37
src/common-components/button-question/button-question.vue
View file

@ -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;

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

@ -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,75 +79,86 @@ 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:
// "1|nextQuestion|3|No" // "1|nextQuestion|3|No"
// "5|answer|DW02104|Yes" // "5|answer|DW02104|Yes"
const returnedAnswerArray = returnedAnswer.split("|"); const returnedAnswerArray = returnedAnswer.split("|");
const questionNum = parseInt(returnedAnswerArray[0]); const questionNum = parseInt(returnedAnswerArray[0]);
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 }
if ((q.questionSequence > questionNum)) { // remove all answers AFTER this question...
delete q.answerSelected; // (needed in case user is changing previously answered questions)
} if ((q.questionSequence > questionNum)) {
}); delete q.answerSelected;
}
// return false if there's a nextQuestion... or return an object with "final" answers if (q.answerSelected) {
if (questionType === "nextQuestion") { answeredQuestions.push({
// update to next question index questionText: q.questionText,
this.currentQuestionNum = parseInt(questionAnswer); // update count to display next question selectedAnswerText: q.answerSelected.split("|")[3],
// scroll the next question into view questionNum: q.questionSequence,
this.$nextTick(() => { });
document.querySelector('.current-question').scrollIntoView({behavior: "smooth"}); }
})
return false;
} else {
const answeredQuestions = [];
this.questions.forEach(( q ) => {
if (q.answerSelected) {
answeredQuestions.push({
questionText: q.questionText,
selectedAnswerText: q.answerSelected.split("|")[3],
questionNum: q.questionSequence,
}); });
}
});
// reset current question index
this.currentQuestionNum = 0; // reset count
return { // return false if there's a nextQuestion... or return an object with final answers (truthy)
answerResult: questionAnswer, if (questionType === "nextQuestion") {
answeredQuestions: answeredQuestions,
partIndex: this.partIndex,
};
} // 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
// return an object with the part answer, all the answered questions, and the part index
return {
answerResult: questionAnswer,
answeredQuestions: answeredQuestions,
partIndex: this.partIndex,
};
}
},
},
components: {
buttonQuestion,
}, },
},
components: {
buttonQuestion,
},
}; };
</script> </script>

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

@ -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,154 +151,187 @@ 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) {
// when selectedAnswers updates, user has completed this part's question chain and has a final answer // only runs when all questions in a question-chain have been answered
// (does not get run for each invididual question's answer, only when // when selectedAnswers updates, user has completed this part's question chain and has a final answer
// all relevent questions for the current part have been answered) // (does not get run for each invididual question's answer, only when
const glassPartWithAnswer = this.partsQuestionsData[answer.partIndex]; // all relevent questions for the current part have been answered)
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) => { // loop through all glass parts data
this.partsQuestionsData.forEach((glassPart, gpIndex) => {
// restrict duplicate logic to only parts that follow the currently being answered part // only look for duplicates forward... to parts that follow after the currently being answered part
if (i > answer.partIndex) { 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 // loop through this glass part's part questions, looking for a questionText match
glassPart.partQuestions.forEach((pq, pqIndex) => { glassPart.partQuestions.forEach((pq, pqIndex) => {
// clear out any previously set answers // clear out any previously set answers
//delete pq.answerSelected;
pq.answerSelected = null; pq.answerSelected = null;
// does pq.questionText match answeredQuestionText? (aka do we have a duplicate question?) // 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) { if (pq.questionText.toUpperCase() === answeredQuestionText) {
// which one of this partQuestions' answers matches our answer? const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex];
let matchedAnswer; let matchedAnswer;
pq.answers.forEach((ans, ansIndex) => { let rejectedAnswers = []; // set as an array, in case we ever have questions with more than 2 answers...
// delete pq.answers[ansIndex].selected;
pq.answers[ansIndex].selected = null; // which one of this partQuestions' answers matches our answer?
pq.answers.forEach((ans) => {
if (ans.answerText.toUpperCase() === answeredQuestionAnswer) { if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
matchedAnswer = ans; matchedAnswer = ans;
pq.answers[ansIndex].selected = true; ans.selected = true;
} else {
rejectedAnswers.push(ans);
ans.selected = null;
} }
}); });
if (matchedAnswer) { // Update the key to re-render this part's question-chain component
const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex]; this.partsQuestionsData[gpIndex].key = this.partsQuestionsData[gpIndex].glassLocation + this.partsQuestionsData[gpIndex].glassName + Date.now().toString();
// remove answerData from this glass part // handle suppressing downstream in this question chain
glassPart.answerData = null;
glassPart.isSuppressedPart = null;
// 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();
// handle suppressing downstream in this question chain
const rejectedAnswer = thisAnsweredPartQuestion.answers.filter((ans) => {
return !ans.selected;
});
if (rejectedAnswer[0].nextQuestionSequence) {
glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressDuplicateQuestion = true;
}
if (matchedAnswer.nextQuestionSequence) {
// ensure that accepted answer is NOT suppressed
glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressDuplicateQuestion = null;
}
// handle suppressing upstream in this question chain
glassPart.partQuestions.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 of the 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 if (matchedAnswer.nextQuestionSequence) {
thisAnsweredPartQuestion.suppressDuplicateQuestion = true; // ensure that the question that the accepted answer has set to be next is NOT suppressed
glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion = null;
const thisGlassPart = "glassPart" + i; // if the duplicate is the 1ST question, then set suppressUntil var to lowest nextQuestion number
if (this.foundDuplicateQuestions[thisGlassPart]) { if (pqIndex === 0) {
if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredPartQuestion.questionSequence)) { if (!suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence }
this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredPartQuestion.questionSequence); if (matchedAnswer.nextQuestionSequence < suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence}
}
}
// handle suppressing upstream in this question chain
glassPart.partQuestions.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;
}
} }
} else {
this.foundDuplicateQuestions[thisGlassPart] = [thisAnsweredPartQuestion.questionSequence];
}
// are there any questions left that are not suppressed?
const remainingQuestions = glassPart.partQuestions.filter((q) => {
return !q.suppressDuplicateQuestion;
}); });
});
if (remainingQuestions.length < 1) {
// this is the final answer for this glass part // suppress current question
thisAnsweredPartQuestion.suppressQuestion = true;
// mark this part as completely answered by adding answerData
const answeredQuestionObj = { const thisGlassPart = "glassPart" + gpIndex;
questionText: pq.questionText, if (this.foundDuplicateQuestions[thisGlassPart]) {
selectedAnswerText: matchedAnswer.answerText, if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredPartQuestion.questionSequence)) {
questionNum: pq.questionSequence, this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredPartQuestion.questionSequence);
isDuplicateQuestion: pq.suppressDuplicateQuestion,
};
// 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;
} }
} else {
this.foundDuplicateQuestions[thisGlassPart] = [thisAnsweredPartQuestion.questionSequence];
}
} // END of if (matchedAnswer) // are there any questions left that are not suppressed?
const remainingQuestions = glassPart.partQuestions.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 // 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,8 +339,10 @@ 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
// EX answeredQuestionIndexes: [1,5,11,13] // EX answeredQuestionIndexes: [1,5,11,13]
@ -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

1
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -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

2
src/ux-components/list-button/list-button.vue
View file

@ -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,