siimee/frontend/src/views/SurveyCompleteView.vue

<template lang="pug">
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.
        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 {{ key }} 
                    p You Answered: {{ value }}
                    br
        w-button.ma1(@click="changeAnswers") Change Answers
        w-button.ma1(@click="finalSubmit") Submit Answers
</template>

<script>
export default {
    props: {
        answers: {
            type: Object,
            default: () => ({}),
        },
        surveySteps: {
            type: Array,
            default: () => [],
        },
    },
    data: () => ({
        surveyObjects: [],
        formInputs: [],
        questionResponses: [],
        formDropdowns: [],
    }),
    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
            }
        })
    },
}
</script>