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.
        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
        w-button.ma1(@click="changeAnswers") Change Answers
</template>

<script>
import { currentProfile } from '../services'
export default {
    props: {
        surveySteps: {
            type: Array,
            default: () => [],
        },
    },
    data: () => ({
        responses: {},
        aspectQuestions: {},
        surveyStages: {},
        aspectResponses: [],
    }),
    created() {
        this.parseSurvey(this.surveySteps)
        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) {
            surveySteps.forEach(step => {
                const isAspect = step.category === 'aspect'
                if (isAspect) {
                    this.aspectQuestions[`${step.response_key_id}`] =
                        step.response_key_prompt
                } else {
                    this.surveyStages[`${step.response_key_id}`] =
                        step.survey_stage
                }
            })
        },
        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>