:construction: Started to finalize Survey Complete Page

frontend/src/router/guards.js

@@ -47,6 +47,7 @@ const loginIfToken = async () => {
     ) {
         await currentProfile.login(
             sessionData.profileId,
+            // NOTE: probably not correct...
             WaveUI.notify,
             sessionData.accessToken,
         )

frontend/src/views/OnboardingView.vue

@@ -30,8 +30,7 @@ main.view--onboarding
             p(v-if='currentStep != 0') You have completed: {{ currentStep }} / {{ survey?.steps?.length }} survey steps
 
     article(v-else)
-        // TODO: format answers and surveySteps on created based off of existing responses
-        SurveyCompleteView(:answers='answered' :surveySteps='survey.steps' :responses='responses')
+        SurveyCompleteView(:surveySteps='survey.steps' :responses='responses')
 </template>
 
 <script>
@@ -56,9 +55,10 @@ export default {
         invalidResponse: false,
     }),
     async created() {
+        // TODO: Troubleshoot bug where not all responses are returned at SurveyCompleteView
+        console.log('currentProfile :=>', currentProfile)
         this.survey = await surveyFactory.createSurvey()
         hashedAccessToken = this.grabStoredCookie('siimee_access')
-        console.log('currentProfile.isLoggedIn :=>', currentProfile.isLoggedIn)
         try {
             const sessionData = await this.verifySession(hashedAccessToken)
             await currentProfile.login(
@@ -116,6 +116,7 @@ export default {
             })
         },
         async updateAnswers(payload) {
+            console.log('this.survey.steps :=>', this.survey.steps)
             if (payload) {
                 const k = payload.question.survey_stage
                 this.answered[k] = payload.input

frontend/src/views/SurveyCompleteView.vue

@@ -3,60 +3,109 @@ main.view--surveycomplete
     article(style='display: flex; flex-direction: column; align-items: center; text-align: center;')
         h2 Thanks for Completing Our Survey!!
         h1 Please review your answers and let us know if you need to change anything.
+        div(v-for='response in responses')
+            p Your {{ response.stage }}: 
+            p {{ response.val }}
+            br
+        div.survey-spacer
+        div(v-for='aspectResponse in aspectResponses')
+            p {{ aspectResponse.question }} :
+            br
+            p {{ aspectResponse.response }}
+            br
         br
-        p(v-for='input in formInputs')
-            p(v-for='(value, key) in answers')
-                p(v-if='input.survey_stage == key && key !== "password"')
-                    p Your {{ key }}: {{ value }}
-        br
-        p(v-for='input in formDropdowns')
-            p(v-for='(value, key) in answers')
-                p(v-if='input.survey_stage == key')
-                    p Your {{ key }}: {{ value }}
-        br
-        p(v-for='(response, responseIndex) in questionResponses')
-            p(v-for='(value, key) in answers')
-                p(v-if='response.survey_stage == key') 
-                    p Survey Question {{ responseIndex + 1 }}: 
-                    p {{ response.response_key_prompt }}
-                    p You Answered: {{ value }}
-                    br
         w-button.ma1(@click="changeAnswers") Change Answers
-        w-button.ma1(@click="finalSubmit") Submit Answers
 </template>
 
 <script>
+import { currentProfile } from '../services'
 export default {
     props: {
-        answers: {
-            type: Object,
-            default: () => ({}),
-        },
         surveySteps: {
             type: Array,
             default: () => [],
         },
     },
     data: () => ({
-        surveyObjects: [],
-        formInputs: [],
-        questionResponses: [],
-        formDropdowns: [],
+        responses: {},
+        aspectQuestions: {},
+        surveyStages: {},
+        aspectResponses: [],
     }),
     created() {
-        this.surveySteps.forEach((step) => {
-            switch (step.component) {
-                case 'FormInput':
-                    this.formInputs.push(step)
-                    break
-                case 'FormDropdown':
-                    this.formDropdowns.push(step)
-                    break
-                case 'QuestionResponse':
-                    this.questionResponses.push(step)
-                    break
-            }
-        })
+        // TODO: Troubleshoot bug where not all responses are returned
+        console.log('currentProfile :=>', currentProfile)
+        this.aspectQuestions = this.parseSurvey(this.surveySteps, false)
+        this.surveyStages = this.parseSurvey(this.surveySteps, true)
+        this.aspectResponses = this.grabAspectResponses(
+            currentProfile._profile.responses,
+            this.aspectQuestions,
+        )
+        const responses = this.grabResponsesFromProfile(this.aspectQuestions)
+        this.responses = this.appendStagesToResponses(
+            responses,
+            this.surveyStages,
+        )
+    },
+    methods: {
+        parseSurvey(surveySteps, isStage) {
+            const parsedAspects = {}
+            const parsedStages = {}
+            surveySteps.forEach(step => {
+                const isAspect = step.category === 'aspect'
+                if (isAspect) {
+                    parsedAspects[`${step.response_key_id}`] =
+                        step.response_key_prompt
+                } else {
+                    parsedStages[`${step.response_key_id}`] = step.survey_stage
+                }
+            })
+            return isStage ? parsedStages : parsedAspects
+        },
+        grabResponsesFromProfile(aspectQuestions) {
+            const aspectQuestionsKeys = Object.keys(aspectQuestions).map(Number)
+            const responses = currentProfile._profile.responses
+                .map(response => {
+                    if (
+                        !aspectQuestionsKeys.includes(response.response_key_id)
+                    ) {
+                        return response
+                    }
+                })
+                .filter(res => {
+                    return typeof res === 'object'
+                })
+            return responses
+        },
+        appendStagesToResponses(responses, surveyStages) {
+            const responsesWithStages = responses.map(response => {
+                return {
+                    ...response,
+                    stage: surveyStages[`${response.response_key_id}`],
+                }
+            })
+            return responsesWithStages
+        },
+        grabAspectResponses(responses, questions) {
+            return responses
+                .map(response => {
+                    const prompt = questions[`${response.response_key_id}`]
+                    if (prompt) {
+                        return {
+                            question: questions[`${response.response_key_id}`],
+                            response: response.val,
+                        }
+                    }
+                })
+                .filter(res => {
+                    return typeof res === 'object'
+                })
+        },
     },
 }
 </script>
+<style>
+.survey-spacer {
+    height: 1.25rem;
+}
+</style>