:recycle: Refactored Onboarding and SurveyComplete based off of recent changes

frontend/src/components/onboarding/QuestionResponse.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 w-card.question
-    p {{ question }}
+    p {{ question.survey_stage }}
     section.radio-buttons.w-flex.row.justify-space-between
         p(v-for='label in question.labels') {{ label }}
     w-radios.w-flex.row.justify-space-between(

frontend/src/views/OnboardingView.vue

@@ -2,7 +2,7 @@
 main.view--onboarding
     article(
         style='display: flex; flex-direction: column; align-items: center'
-        v-if='incomplete'
+        v-if='currentStep !== survey.steps.length'
     )
         .answers(v-for='(value, key) in answered')
             span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
@@ -25,7 +25,7 @@ main.view--onboarding
             p {{ survey.steps[currentStep].invalidInputPrompt }}
 
         footer
-            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length - 2 }} survey steps
+            p(v-if='currentStep != 0') You have completed: {{ currentStep }} / {{ survey.steps.length }} survey steps
 
     article(v-else)
         SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
@@ -49,7 +49,6 @@ export default {
         aspectQuestions: [],
         currentStep: 0,
         survey: null,
-        incomplete: true,
         invalidResponse: false,
     }),
     async created() {
@@ -58,7 +57,6 @@ export default {
     methods: {
         onSubmit() {
             console.log(JSON.stringify(this.answered))
-            this.incomplete = null
         },
         goToStep(num) {
             this.currentStep = num

frontend/src/views/SurveyCompleteView.vue

@@ -4,16 +4,23 @@ main.view--surveycomplete
         h2 Thanks for Completing Our Survey!!
         h1 Please review your answers and let us know if you need to change anything.
         br
-        h1 Your Profile Info:
-        div(v-for='(answer, key) in answers')
-            span(v-if='answer && key != "aspects"')  Your {{ key }}: {{ answer }}
+        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
-        div(v-if="answers.aspects")
-            h1 Your Survey Answers:
-        div(v-for='(aspect, index) in answers.aspects')
-            div(v-if='aspect')
-                p {{ surveyObjects[index].response_key_prompt }}
-                p You Answered: {{ aspect }}
+        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 {{ key }} 
+                    p You Answered: {{ value }}
+                    br
         w-button.ma1(@click="changeAnswers") Change Answers
         w-button.ma1(@click="finalSubmit") Submit Answers
 </template>
@@ -32,10 +39,24 @@ export default {
     },
     data: () => ({
         surveyObjects: [],
+        formInputs: [],
+        questionResponses: [],
+        formDropdowns: [],
     }),
     created() {
-        // TO ADD ASPECT: when creating new survey aspect step, increment slice number here
-        this.surveyObjects = this.surveySteps.slice(-7)
+        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
+            }
+        })
     },
 }
 </script>