siimee/frontend/src/views/OnboardingView.vue

<template lang="pug">
main.view--onboarding
    article(
        style='display: flex; flex-direction: column; align-items: center'
        v-if='survey'
    )
        .step(v-for='(step, i) in survey.steps')
            component(
                :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
                :is='step.component'
                :question='step'
                @handle-submit='onSubmit'
                @update-answers='updateAnswers'
                v-if='step.component'
            )
            p(v-else) {{ step }}
            p step: {{ i + 1 }} of {{ survey.steps.length }}
            //- component(
            //-     :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
            //-     :is='step.component'
            //-     :question='step'
            //-     @handle-submit='onSubmit'
            //-     @update-answers='updateAnswers'
            //-     v-if='step && currentStep == i'
            //- )
            //- p(v-if='currentStep == i') step: {{ i+1 }} of {{ survey.steps.length }}
</template>

<script>
import { surveyFactory } from '@/utils'
import { allSteps } from '@/utils/lang'
import stepViews from '@/components/onboarding'

// import savesurveybyprfileid - call it on submit
// paginate to save every steps answers
export default {
    name: 'OnboardingView',
    components: {
        ...stepViews,
    },
    data: () => ({
        answered: {},
        aspectQuestions: [],
        currentStep: 0,
        survey: null,
    }),
    async created() {
        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
    },
    methods: {
        onSubmit() {
            console.log(JSON.stringify(this.answered))
        },
        goToStep(num) {
            this.currentStep = num
        },
        updateAnswers(payload) {
            const k = payload.question.response_key_prompt
            this.answered[k] = payload.answer
            console.log(`${k}:`, this.answered[k])
            this.goToStep(this.currentStep + 1)
        },
    },
}
</script>