CSR-762 Fix estimate page, start on question-chain
This commit is contained in:
parent
04f4a9369b
commit
b14ca820ac
6 changed files with 54 additions and 17 deletions
|
|
@ -261,9 +261,10 @@ export default {
|
||||||
// this.$emit("isCheckedChanged", val);
|
// this.$emit("isCheckedChanged", val);
|
||||||
// },
|
// },
|
||||||
handleAnswerChange(eventValue) {
|
handleAnswerChange(eventValue) {
|
||||||
// console.log({
|
console.log({
|
||||||
// bqEvent: eventValue
|
bqEvent: eventValue
|
||||||
// })
|
})
|
||||||
|
this.$emit("change", eventValue);
|
||||||
this.$emit("update:modelValue", eventValue);
|
this.$emit("update:modelValue", eventValue);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,7 @@ export default {
|
||||||
// const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
|
// const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
|
||||||
|
|
||||||
if (this.isChecked) {
|
if (this.isChecked) {
|
||||||
console.log("HI THERE");
|
// console.log("HI THERE");
|
||||||
this.handleChange(this.modelValue);
|
this.handleChange(this.modelValue);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -241,7 +241,7 @@ export default {
|
||||||
|
|
||||||
this.valueToEmit = newValue;
|
this.valueToEmit = newValue;
|
||||||
} else {
|
} else {
|
||||||
console.log("not multi");
|
// console.log("not multi");
|
||||||
this.valueToEmit = this.value;
|
this.valueToEmit = this.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -253,7 +253,7 @@ export default {
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
console.log("handleClick");
|
// console.log("handleClick");
|
||||||
this.handleSelectionChange(e);
|
this.handleSelectionChange(e);
|
||||||
// console.log("HC");
|
// console.log("HC");
|
||||||
// console.log({
|
// console.log({
|
||||||
|
|
@ -335,8 +335,7 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- TODO KO Scope this? -->
|
<style lang="scss" scoped>
|
||||||
<style lang="scss">
|
|
||||||
input {
|
input {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
|
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-for="(q, i) in questions" :key="i">
|
<div v-for="(q, i) in questions" :key="i">
|
||||||
|
q.answerSelected: {{q.answerSelected}}<br/>
|
||||||
|
currentQuestionNum: {{currentQuestionNum}}
|
||||||
<transition appear name="fade" mode="out-in">
|
<transition appear name="fade" mode="out-in">
|
||||||
<buttonQuestion
|
<!-- <buttonQuestion
|
||||||
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
|
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
|
||||||
class="radioQuestion"
|
class="radioQuestion"
|
||||||
:class="(q.questionSequence === currentQuestionNum) && 'current-question'"
|
:class="(q.questionSequence === currentQuestionNum) && 'current-question'"
|
||||||
|
|
@ -9,7 +11,18 @@
|
||||||
:answers="q.answers"
|
:answers="q.answers"
|
||||||
:groupName="`question-${glassIndex}-${q.questionSequence}`"
|
:groupName="`question-${glassIndex}-${q.questionSequence}`"
|
||||||
v-model="q.answerSelected"
|
v-model="q.answerSelected"
|
||||||
@isCheckedChanged="handleAnswer"
|
isRequired
|
||||||
|
:validationRules="validationRules"
|
||||||
|
/> -->
|
||||||
|
<buttonQuestion
|
||||||
|
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
|
||||||
|
class="radioQuestion"
|
||||||
|
:class="(q.questionSequence === currentQuestionNum) && 'current-question'"
|
||||||
|
:questionText="q.questionText"
|
||||||
|
:answers="q.answers"
|
||||||
|
:groupName="`question-${glassIndex}-${q.questionSequence}`"
|
||||||
|
:modelValue="q.answerSelected"
|
||||||
|
@update:modelValue="handleAnswer(q, $event)"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
/>
|
/>
|
||||||
|
|
@ -67,6 +80,10 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log({
|
||||||
|
modelValue: this.modelValue,
|
||||||
|
questions: this.questions
|
||||||
|
})
|
||||||
if (!this.modelValue?.length > 0 && this.questions.length > 0) {
|
if (!this.modelValue?.length > 0 && this.questions.length > 0) {
|
||||||
// set this.currentQuestionNum to first valid question
|
// set this.currentQuestionNum to first valid question
|
||||||
this.currentQuestionNum = this.questions[0].questionSequence;
|
this.currentQuestionNum = this.questions[0].questionSequence;
|
||||||
|
|
@ -77,7 +94,12 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleAnswer(returnedAnswer) {
|
handleAnswer(question, returnedAnswer) {
|
||||||
|
console.log({
|
||||||
|
returnedAnswer: returnedAnswer
|
||||||
|
})
|
||||||
|
|
||||||
|
question.answerSelected = returnedAnswer;
|
||||||
/*
|
/*
|
||||||
returnedAnswer example format:
|
returnedAnswer example format:
|
||||||
{
|
{
|
||||||
|
|
@ -86,13 +108,19 @@ export default {
|
||||||
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
|
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer.value);
|
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
|
||||||
|
|
||||||
|
console.log({
|
||||||
|
isQuestionChainComplete: isQuestionChainComplete
|
||||||
|
})
|
||||||
if (isQuestionChainComplete) {
|
if (isQuestionChainComplete) {
|
||||||
this.$emit("update:modelValue", isQuestionChainComplete);
|
this.$emit("update:modelValue", isQuestionChainComplete);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getQuestionChainAnswerIfComplete(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
|
||||||
|
console.log("getQuestionChainAnswerIfComplete: ", {
|
||||||
|
returnedAnswer: returnedAnswer
|
||||||
|
})
|
||||||
if (!returnedAnswer) { return false }
|
if (!returnedAnswer) { return false }
|
||||||
|
|
||||||
// Example returnedAnswers:
|
// Example returnedAnswers:
|
||||||
|
|
@ -127,6 +155,10 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log({
|
||||||
|
questionType: questionType,
|
||||||
|
returnedAnswerArray: returnedAnswerArray
|
||||||
|
})
|
||||||
// return false if there's a nextQuestion... or return an object with final answers (truthy)
|
// return false if there's a nextQuestion... or return an object with final answers (truthy)
|
||||||
if (questionType === "nextQuestion") {
|
if (questionType === "nextQuestion") {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
validationRules="option-required"
|
validationRules="option-required"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isRepair">
|
<div v-else>
|
||||||
<alert
|
<alert
|
||||||
class="my-4"
|
class="my-4"
|
||||||
cmsWidgetName="AlertQuoteReady"
|
cmsWidgetName="AlertQuoteReady"
|
||||||
|
|
@ -87,7 +87,6 @@
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
ref="funnelFooter"
|
ref="funnelFooter"
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@isDisabled="!meta.valid"
|
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction"
|
@ForwardClicked="forwardButtonAction"
|
||||||
/>
|
/>
|
||||||
|
|
@ -131,7 +130,7 @@ export default {
|
||||||
name: "estimate",
|
name: "estimate",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedVinLookupMethod: "",
|
selectedVinLookupMethod: null,
|
||||||
serviceZipCode: this.getZipFromStore(),
|
serviceZipCode: this.getZipFromStore(),
|
||||||
emailAddress: this.getEmailFromStore(),
|
emailAddress: this.getEmailFromStore(),
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
|
|
|
||||||
|
|
@ -122,10 +122,11 @@ export default {
|
||||||
},
|
},
|
||||||
async forwardButtonAction() {
|
async forwardButtonAction() {
|
||||||
const questionAnswersArray = this.partsQuestionsData.map((glass) => {
|
const questionAnswersArray = this.partsQuestionsData.map((glass) => {
|
||||||
|
console.log(glass)
|
||||||
return {
|
return {
|
||||||
glassLocation: glass.glassLocation,
|
glassLocation: glass.glassLocation,
|
||||||
glassName: glass.glassName,
|
glassName: glass.glassName,
|
||||||
result: glass.answerData.answerResult,
|
result: glass.answerData.result,
|
||||||
answeredQuestions: glass.answerData.answeredQuestions,
|
answeredQuestions: glass.answerData.answeredQuestions,
|
||||||
isSuppressedPart: glass.isSuppressedPart,
|
isSuppressedPart: glass.isSuppressedPart,
|
||||||
};
|
};
|
||||||
|
|
@ -193,7 +194,7 @@ export default {
|
||||||
|
|
||||||
// only look for duplicates forward... to parts that follow after the currently being answered part
|
// only look for duplicates forward... to parts that follow after the currently being answered part
|
||||||
if (gpIndex > answer.glassIndex) {
|
if (gpIndex > answer.glassIndex) {
|
||||||
|
console.log("RESETTING ANSWERDATA")
|
||||||
let suppressUntil;
|
let suppressUntil;
|
||||||
// reset this glass part, in case user is changing their previous answers
|
// reset this glass part, in case user is changing their previous answers
|
||||||
glass.answerData = null;
|
glass.answerData = null;
|
||||||
|
|
@ -297,6 +298,7 @@ export default {
|
||||||
return !q.suppressQuestion;
|
return !q.suppressQuestion;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log("REMAINING QUESTIONS", remainingQuestions)
|
||||||
if (remainingQuestions.length < 1) {
|
if (remainingQuestions.length < 1) {
|
||||||
// this is the final answer for this glass part
|
// this is the final answer for this glass part
|
||||||
|
|
||||||
|
|
@ -313,6 +315,8 @@ export default {
|
||||||
answeredQuestions: [answeredQuestionObj],
|
answeredQuestions: [answeredQuestionObj],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log(glass.answerData)
|
||||||
|
|
||||||
// suppress this glass because it has an answer
|
// suppress this glass because it has an answer
|
||||||
glass.isSuppressedPart = true;
|
glass.isSuppressedPart = true;
|
||||||
}
|
}
|
||||||
|
|
@ -416,6 +420,7 @@ export default {
|
||||||
|
|
||||||
this.selectedAnswers[glass.key] = [];
|
this.selectedAnswers[glass.key] = [];
|
||||||
if (!alreadyAnsweredQuestions) {
|
if (!alreadyAnsweredQuestions) {
|
||||||
|
console.log("NULLING ANSWERDATA")
|
||||||
glass.answerData = null;
|
glass.answerData = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@
|
||||||
:value="value"
|
:value="value"
|
||||||
:groupName="groupName"
|
:groupName="groupName"
|
||||||
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
|
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||||
|
:validationRules="validationRules"
|
||||||
@change="handleAnswerChange"
|
@change="handleAnswerChange"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue