diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 9fa281f50..3ac603eb2 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -7,8 +7,9 @@ :class="(q.questionSequence === currentQuestionNum) && 'current-question'" :questionText="q.questionText" :answers="q.answers" - :groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`" - v-model="selectedValue" + :groupName="`${keyString}-${q.questionSequence}`" + v-model="q.answerSelected" + @isCheckedChanged="handleChainCompleted" isRequired :validationRules="validationRules" /> @@ -24,8 +25,8 @@ export default { name: "questionChain", data() { return { - currentQuestionNum: 1, - questions: [{ "BlankObject": "NOT USED... placeholder for question #0 to simplify indexing"}], + currentQuestionNum: 0, + questions: [], }; }, props: { @@ -33,13 +34,13 @@ export default { validationRules: String, modelValue: Array, partIndex: Number, - key: String, + keyString: String, }, async created() { // validate form upon create to prevent out of sync / persistent valid states await useValidateForm(); // do a test validation check, without triggering full validation - this.questionData.partQuestions.map((q, i) => { + this.questionData.map((q, i) => { let answerPair = []; const question = { questionText: q.questionText, @@ -47,7 +48,7 @@ export default { answers: q.answers.map((a) => { answerPair.push(a.nextQuestionSequence ? a.nextQuestionSequence : a.answerResult); return { - Text: a.answerText + " (" + a.answerResult + a.nextQuestionSequence + ")", + Text: a.answerText, // Name will either be nextQuestionSequence or answerResult // Name will be used by list-button as the input value. // It must be a single string or number, so concatenating together a string with @@ -59,34 +60,32 @@ export default { nextQuestionSequence: a.nextQuestionSequence, } }), - answerSelected: "", + answerSelected: q.answerSelected || "", }; question.answerPair = answerPair; - if (!q.suppressQuestion) { + if (!q.isDuplicateQuestion) { this.questions.push(question); } }); - // set this.currentQuestionNum to first valid question - this.currentQuestionNum = this.questions[1].questionSequence; - }, - computed: { - selectedValue: { - get: function() { - return this.modelValue[0]; - }, - set: function(returnedAnswer) { - const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer); - if (isQuestionChainComplete) { - this.$emit("update:modelValue", isQuestionChainComplete); - } - } - }, - currentQuestion() { - return this.questions[this.currentQuestionNum]; - }, + if (!this.modelValue?.length > 0) { + // set this.currentQuestionNum to first valid question + this.currentQuestionNum = this.questions[0].questionSequence; + // scroll the next question into view + this.$nextTick(() => { + document.querySelector('.current-question').scrollIntoView({behavior: "smooth"}); + }) + } + }, methods: { + handleChainCompleted(returnedAnswer) { + const isQuestionChainComplete = this.handleReturnedAnswer(returnedAnswer.value); + + if (isQuestionChainComplete) { + this.$emit("update:modelValue", isQuestionChainComplete); + } + }, handleReturnedAnswer(returnedAnswer) { // this method will return either a final answer or Boolean false if (!returnedAnswer) { return false } @@ -103,7 +102,7 @@ export default { this.questions.forEach((q) => { // mark this question as "answered" if (q.questionSequence === questionNum) { - q.answerSelected = questionAnswerText; + q.answerSelected = returnedAnswer; q.answerNumber = questionNum; } // remove all previous answers after the index of this one in questions @@ -112,11 +111,14 @@ export default { } }); - // update to next question index - this.currentQuestionNum = questionType === "nextQuestion" ? parseInt(questionAnswer) : questionNum; // update count to display next question - // 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 = []; @@ -124,30 +126,23 @@ export default { if (q.answerSelected) { answeredQuestions.push({ questionText: q.questionText, - selectedAnswerText: q.answerSelected, - questionNum: q.answerNumber, + selectedAnswerText: q.answerSelected.split("|")[3], + questionNum: q.questionSequence, }); } }); + // reset current question index + this.currentQuestionNum = 0; // reset count + return { answerResult: questionAnswer, answeredQuestions: answeredQuestions, partIndex: this.partIndex, }; + } }, }, - watch: { - currentQuestion: { - handler() { - // scrolls page to next active question - this.$nextTick(() => { - document.querySelector('.current-question').scrollIntoView({behavior: "smooth"}); - }) - }, - deep: true - } - }, components: { buttonQuestion, }, diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 8d5b33bec..9cf0b6856 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -59,6 +59,14 @@ const endpoints = { url: "/parts/api/v1/parts/parts", method: "POST", }, + GetCapabilityQuestions: { + url: "/parts/api/v1/parts/capability-questions", + method: "GET" + }, + ApplyCapabilityAnswerToPart: { + url: "/parts/api/v1/parts/apply-capability-answer-to-part", + method: "POST" + }, SaveOrder: { url: "/order/api/v1/order/save", method: "POST", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 9f8ad36f6..a80694834 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -21,6 +21,8 @@ const storeActions = { GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", GET_PARTS: "getParts", + GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions", + GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer", SAVE_ORDER: "saveOrder", LOAD_ORDER: "loadOrder", UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE: "updateStoreWithSaveOrderResponse", @@ -55,6 +57,7 @@ const storeActions = { SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup", SAVE_GLASS_PARTS: "saveGlassParts", SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers", + SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers" }; export { storeActions }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index cce109c43..ba0adc7cb 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -17,6 +17,7 @@ const storeMutations = { UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", UPDATE_PART_QUESTION_ANSWERS: "updatePartQuestionAnswers", + UPDATE_CAPABILITY_QUESTION_ANSWERS: "updateCapabilityQuestionAnswers", UPDATE_GLASS_PARTS: "updateGlassParts", UPDATE_OTHER_PARTS: "updateOtherParts", diff --git a/src/helpers/heritage-integration/cookie-helper.js b/src/helpers/heritage-integration/cookie-helper.js index 775a64fec..3eed5950b 100644 --- a/src/helpers/heritage-integration/cookie-helper.js +++ b/src/helpers/heritage-integration/cookie-helper.js @@ -9,9 +9,6 @@ export function updateOrCreateFunnelCookie() { const wasClaimRegistrationDelayed = getFunnelCookie()?.HasDelayedClaimRegistration; const shouldSuppressConceptFunnel = getFunnelCookie()?.SuppressConceptFunnel; - // Create the cookie - document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}={}; path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()};`; - // Set up cookie with all the props. setFunnelCookieProperties({ LastTouched: new Date().toUTCString(), @@ -48,14 +45,14 @@ export function getFunnelCookie() { Removes cookie from browser. */ export function deleteFunnelCookie() { - document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=; Max-Age=0; path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()}`; + createOrUpdateCookie(cookieNames.FUNNEL_SESSION_INFO, undefined, { maxAge: 0 }); } /* Gets cookie domain value. Localhost will be empty "". */ export function getCookieDomainValue() { - return location.hostname.includes("localhost") ? "" : `domain=${getDomainWithoutSubdomain()};`; + return isLocalhost() ? "" : `domain=${getDomainWithoutSubdomain()};`; } /* @@ -106,10 +103,17 @@ export function getSessionIdValue(){ return '00000000-0000-0000-0000-000000000000'; } -export function setCookieProperties(properties) { +/* + Updates session ID cookie with new expiration date +*/ +export function updateSessionIdCookie() { + createOrUpdateCookie(cookieNames.SESSION_ID, getSessionIdValue(), { maxAge: 60 * 30 }); +} + +export function setCookieProperties(properties, { useDefaultFunnelCookieAttributes = true, maxAge, isSecure }) { if (typeof properties == "object") { Object.keys(properties).forEach(key => { - document.cookie = `${key}=${properties[key]}`; + createOrUpdateCookie(key, properties[key], { useDefaultFunnelCookieAttributes, maxAge, isSecure }); }); } } @@ -133,20 +137,39 @@ function setFunnelCookieProperties(properties) { Object.keys(properties).forEach(key => { cookie[key] = properties[key]; }); - - const cookieValueJson = JSON.stringify(cookie); - - document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${cookieValueJson}; path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()}`; } + + const cookieValueJson = JSON.stringify(cookie ?? {}); + createOrUpdateCookie(cookieNames.FUNNEL_SESSION_INFO, cookieValueJson, {}); } } +/* + Used to create a cookie. + `useDefaultFunnelCookieAttributes` will set the path and domain to our defaults +*/ +function createOrUpdateCookie(key, value = "", { useDefaultFunnelCookieAttributes = true, maxAge, isSecure = true }) { + let cookieToAdd = `${key}=${value}; `; + + if (useDefaultFunnelCookieAttributes) { + cookieToAdd += `path=${applicationConfig.COOKIE_PATH}; ${getCookieDomainValue()} `; + } + if (isSecure && !isLocalhost()) { + cookieToAdd += `secure; `; + } + if (!isNaN(maxAge)) { + cookieToAdd += `max-age=${maxAge};`; + } + + document.cookie = cookieToAdd; +} + /* Gets current domain without the subdomain for cookie. */ function getDomainWithoutSubdomain() { let url = location.hostname; - if (url.includes("localhost")) { + if (isLocalhost()) { return "localhost"; } @@ -169,4 +192,8 @@ function getCookieValueByName(name) { return parts.pop().split(";").shift(); } return ""; +} + +function isLocalhost() { + return location.hostname.includes("localhost"); } \ No newline at end of file diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 67a3dc8ae..cc00e49d9 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -6,7 +6,7 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { cookieNames } from "@/constants/cookie-names"; import { Form } from "vee-validate"; import baseMixin from "@/mixins/base-mixin"; -import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper"; +import { getCookieDomainValue, setCookieProperties } from "@/helpers/heritage-integration/cookie-helper"; import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics"; import { queryStrings } from "@/constants/query-strings"; import { routerParams } from "@/router/router-constants/router-params"; @@ -106,7 +106,7 @@ export function setupCookies({ funnelCookieValue = "", includeHeritageCookie = t Object.keys(cookies).forEach(key => { const cookieValue = key == cookieNames.FUNNEL_SESSION_INFO ? funnelCookieValue : cookies[key]; if (includeHeritageCookie || key != cookieNames.FUNNEL_SESSION_INFO) - document.cookie = `${key}=${cookieValue}; path=/; ${getCookieDomainValue()}`; + setCookieProperties({ [key]: cookieValue }, { isSecure: false }); }); } diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue index 3dd402d68..ea51194e8 100644 --- a/src/layouts/capability-questions/capability-questions.vue +++ b/src/layouts/capability-questions/capability-questions.vue @@ -11,7 +11,6 @@
-

CAPABILITY QUESTIONS TEMPORARY PLACEHOLDER

-
- -
+ { - if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) { - return { - glassName: p.glassName, - glassLocation: p.glassLocation, - partQuestions: p.partQuestions, - }; - } - }), - currentPartNum: 0, + selectedAnswer: [], + // TODO This shouldn't be an object with property `partQuestions` + capabilityQuestionsData: { + partQuestions: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).capabilityQuestions + } }; }, computed: { AlertFewMoreQuestionsHeader() { - return this.getCmsContent("AlertPartsQuestions", "HeadlineText"); + return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText"); }, AlertFewMoreQuestionsCopy() { - return this.getCmsContent("AlertPartsQuestions", "BodyText"); + return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText"); }, + windshieldPart() { + return this.pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD); + }, + windshieldPartInfo() { + return this.windshieldPart.parts[0]; + }, + pageData() { + return this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS); + } }, methods: { arePagePrerequisitesValid() { - return false; // TODO - DO TRUE TEST OF PAGEDATA - // return Object.keys(store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)).length > 0; - }, - showThisPartQuestionChain(part, i) { - if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion - if (this.currentPartNum === i || part.answerData?.answerResult.length > 0) { return true; } - return false; - }, - backButtonAction() { - // route to move backwards - this.$router.navigateWithoutSaving( - this.navigationScenarios.CLICKED_BACK, - this.$route - ); + const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS); + return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).length > 0; }, async forwardButtonAction() { - // TODO: TO COME - }, - }, - watch: { - selectedModel(model) { - this.capabilityQuestionsData[model.partIndex].answerData = { - answerResult: model.answerResult, - answeredQuestions: model.answeredQuestions, - } - this.currentPartNum = model.partIndex + 1; + const selectedAnswerResult1 = this.selectedAnswer.answerResult; + const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2; + + this.dispatchStoreAction(storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, { + glassName: this.windshieldPart.glassName, + glassLocation: this.windshieldPart.glassLocation, + result1: selectedAnswerResult1, + result2: selectedAnswerResult2 + }); + + const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER)).data; + let partsOrQuestions = this.pageData.partsOrQuestions; + partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer; + + this.navigateForward(partsOrQuestions); }, }, components: { diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index fd7f38750..8082e42f7 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -24,8 +24,9 @@ { return Array.isArray(p.partQuestions) && p.partQuestions.length > 0; }), - selectedAnswer: [], + selectedAnswers: {}, currentPartNum: 0, newAnswersArray: [], partsQuestionsData: [], @@ -112,24 +113,14 @@ export default { }, mixins: [vehicleQuestionsMixin], mounted() { - this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => { - part.key = part.glassLocation + part.glassName; - return part; - }); + this.LoadInitialPartsData(); }, methods: { showThisPartQuestionChain(part, i) { - if (part.partQuestions?.length < 1 || part.suppressPart) { return false; } // return false if no partQuestions or if suppressed + if (part.partQuestions?.length < 1 || part.isSuppressedPart) { return false; } // return false if no partQuestions or if suppressed if (this.currentPartNum === i || part.answerData?.answerResult?.length > 0) { return true; } return false; }, - backButtonAction() { - // route to move backwards - this.$router.navigateWithoutSaving( - this.navigationScenarios.CLICKED_BACK, - this.$route - ); - }, async forwardButtonAction() { const partQuestionAnswersArray = this.partsQuestionsData.map((item) => { return { @@ -137,6 +128,7 @@ export default { glassName: item.glassName, result: item.answerData.answerResult, answeredQuestions: item.answerData.answeredQuestions, + isSuppressedPart: item.isSuppressedPart, }; }); @@ -155,51 +147,28 @@ export default { }); const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts; - const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(glassNameAndPartsForStore); - const hasChildPartQuestions = this.hasChildPartQuestions(glassNameAndPartsForStore); - const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore); - - // NAVIGATE FORWARD - if (hasGlassLocationWithMultipleParts) { - // if multiple parts on any glass - // go to vehicle-parts page and pass the partsData - this.$router.navigateWithSaving(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore}); - } else if (hasChildPartQuestions) { - // if any childpart questions - // go to molding-questions page and pass the partsData - this.$router.navigateWithSaving(this.navigationScenarios.HAS_MOLDING_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore}); - } else if (hasCapabilityQuestions) { - // if has capability questions - // go to capability-questions page and pass the partsData - this.$router.navigateWithSaving(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore}); - } else { - // if single parts only - const collectedGlassParts = this.reducedGlassPartsArray(glassNameAndPartsForStore); - // save to store lineItems.glassParts - this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts); - // go to heritage quote page - this.$refs.loadingModal.showModal(); - navigateToHeritageFunnel(); - } + this.navigateForward(glassNameAndPartsForStore); }, arePagePrerequisitesValid() { const partQuestionsFromPageData = store.getters.pageData(fmgPageValues.PART_QUESTIONS); return partQuestionsFromPageData && Object.keys(partQuestionsFromPageData).length > 0; }, - }, - watch: { - selectedAnswer(answer) { - // when selectedAnswer updates, user has completed this part's question chain and has a final answer + 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 // (does not get run for each invididual question's answer, only when // all relevent questions for the current part have been answered) - const glassPart = this.partsQuestionsData[answer.partIndex]; - const completeAnsweredQuestions = [...answer.answeredQuestions]; + const glassPartWithAnswer = this.partsQuestionsData[answer.partIndex]; + const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : []; const answeredQuestionIndexes = []; + // since user has answered a question differently than anything that was preloaded, + // then clear out the preloaded answers + this.selectedAnswers = {}; + // examine all the answers returned that were part of the user's journey through question-chain // 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 answeredQuestionIndexes.push(aq.questionNum); @@ -216,14 +185,18 @@ export default { // loop through this glass part's part questions, looking for a questionText match glassPart.partQuestions.forEach((pq, pqIndex) => { - // does pq.questionText match answeredQuestionText? (do we have a duplicate question?) + // clear out any previously set answers + //delete pq.answerSelected; + pq.answerSelected = null; + // does pq.questionText match answeredQuestionText? (aka do we have a duplicate question?) if (pq.questionText.toUpperCase() === answeredQuestionText) { + // which one of this partQuestions' answers matches our answer? - let matchedAnswer; pq.answers.forEach((ans, ansIndex) => { - delete pq.answers[ansIndex].selected; + // delete pq.answers[ansIndex].selected; + pq.answers[ansIndex].selected = null; if (ans.answerText.toUpperCase() === answeredQuestionAnswer) { matchedAnswer = ans; pq.answers[ansIndex].selected = true; @@ -234,8 +207,8 @@ export default { const thisAnsweredPartQuestion = glassPart.partQuestions[pqIndex]; // remove answerData from this glass part - delete glassPart.answerData; - delete glassPart.suppressPart; + 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(); @@ -246,11 +219,11 @@ export default { }); if (rejectedAnswer[0].nextQuestionSequence) { - glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressQuestion = true; + glassPart.partQuestions[rejectedAnswer[0].nextQuestionSequence - 1].suppressDuplicateQuestion = true; } if (matchedAnswer.nextQuestionSequence) { // ensure that accepted answer is NOT suppressed - delete glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion; + glassPart.partQuestions[matchedAnswer.nextQuestionSequence - 1].suppressDuplicateQuestion = null; } // handle suppressing upstream in this question chain @@ -260,11 +233,11 @@ export default { if (thisAns.originalNextQuestionSequence === pq.questionSequence) { // restore original nextQuestionSequence thisAns.nextQuestionSequence = thisAns.originalNextQuestionSequence; - delete thisAns.originalNextQuestionSequence; + this.originalNextQuestionSequence = null; // restore original answerResult if (thisAns.originalAnswerResult) { thisAns.answerResult = thisAns.originalAnswerResult; - delete thisAns.originalAnswerResult; + thisAns.originalAnswerResult = null; } } // search for any of the answers that lead to the duplicated question @@ -284,7 +257,7 @@ export default { }); // suppress current question - thisAnsweredPartQuestion.suppressQuestion = true; + thisAnsweredPartQuestion.suppressDuplicateQuestion = true; const thisGlassPart = "glassPart" + i; if (this.foundDuplicateQuestions[thisGlassPart]) { @@ -297,7 +270,7 @@ export default { // are there any questions left that are not suppressed? const remainingQuestions = glassPart.partQuestions.filter((q) => { - return !q.suppressQuestion; + return !q.suppressDuplicateQuestion; }); if (remainingQuestions.length < 1) { @@ -308,6 +281,7 @@ export default { questionText: pq.questionText, selectedAnswerText: matchedAnswer.answerText, questionNum: pq.questionSequence, + isDuplicateQuestion: pq.suppressDuplicateQuestion, }; // set the answerData as 'already answered' glassPart.answerData = { @@ -316,7 +290,7 @@ export default { }; // suppress this glassPart because it has an answer - glassPart.suppressPart = true; + glassPart.isSuppressedPart = true; } } // END of if (matchedAnswer) @@ -324,6 +298,10 @@ export default { } }); + + // 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(); + } }); @@ -344,10 +322,10 @@ export default { thisPartsDupes?.forEach((dupe) => { // dupe is a single integer - const dupeQuestion = glassPart.partQuestions[dupe - 1]; + const dupeQuestion = glassPartWithAnswer.partQuestions[dupe - 1]; const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true); - glassPart.partQuestions.forEach((q) => { + glassPartWithAnswer.partQuestions.forEach((q) => { let includeThisDupeInAnsweredQuestions = false; // did one of the answers of this question point to the duplicated question? @@ -359,7 +337,7 @@ export default { } }); - // is this q.questionSequnce listed as the duplicated question's nextQuestionSequence? + // is this q.questionSequence listed as the duplicated question's nextQuestionSequence? if ((q.questionSequence === dupeQuestionAnswer.nextQuestionSequence) && (answeredQuestionIndexes.includes(q.questionSequence))) { includeThisDupeInAnsweredQuestions = true; } @@ -369,12 +347,13 @@ export default { questionNum: dupeQuestion.questionSequence, questionText: dupeQuestion.questionText, selectedAnswerText: dupeQuestionAnswer.answerText, + isDuplicateQuestion: dupeQuestion.suppressDuplicateQuestion, }); } }); }); - // make sure there are no duplicated dupes... + // make sure there are no duplicated dupes in the list... const foundInCompleteAnsweredQuestions = new Set(); let filteredCompleteAnsweredQuestions = completeAnsweredQuestions.filter(el => { const duplicate = foundInCompleteAnsweredQuestions.has(el.questionText); @@ -384,7 +363,7 @@ export default { filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a,b) => a.questionNum - b.questionNum); // set final answer data for the current answered glass part - glassPart.answerData = { + glassPartWithAnswer.answerData = { answerResult: answer.answerResult, answeredQuestions: filteredCompleteAnsweredQuestions, } @@ -397,6 +376,68 @@ export default { break; } } + + }, + LoadInitialPartsData() { + + // are there alreadyAnsweredQuestions? + const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers; + + this.partsQuestionsData = this.partsQuestionsFromApi.map((part, i) => { + part.key = part.glassLocation + "-" + part.glassName; + this.selectedAnswers[part.key] = []; + + alreadyAnsweredQuestions?.forEach((savedPart) => { + if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) { + return; + } + if (part.glassLocation === savedPart.glassLocation && part.glassName === savedPart.glassName) { + let answerString = ""; + + // matches; loop through answeredQuestions for matches + savedPart.answeredQuestions.forEach((aq) => { + if (!aq.questionNum || !aq.selectedAnswerText) { + return; + } + // determine which answer was previously chosen + const theAns = part.partQuestions[aq.questionNum-1].answers.find((a) => { + return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase(); + }); + if (theAns.nextQuestionSequence) { + answerString = `${aq.questionNum}|nextQuestion|${theAns.nextQuestionSequence}|${theAns.answerText}` + } else { + answerString = `${aq.questionNum}|answer|${theAns.answerResult}|${theAns.answerText}` + } + + // mark this partQuestion as answered (question-chain will read this) + part.partQuestions[aq.questionNum-1].answerSelected = answerString; + // mark this partQuestion as duplicate if it is (question-chain will read this) + if (aq.isDuplicateQuestion) { + part.partQuestions[aq.questionNum-1].isDuplicateQuestion = true; + } + }); + + // advance the currentPartNum + this.currentPartNum = i; + + // add answerData to current part + part.answerData = { + answerResult: savedPart.result, + answeredQuestions: savedPart.answeredQuestions + } + } + }); + + // Set up watch for each set of part questions, which gets updated when all questions for a part have been answered + this.$watch("selectedAnswers." + part.key, (newValue) => { + if (newValue) { + this.handleAnswerUpdates(part.key, newValue); + } + }, {deep: true}) + + return part; + }); + }, }, components: { diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index b226a913d..e3524e3f0 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -1,7 +1,7 @@