siimee/frontend/src/views/OnboardingView.vue

<template lang="pug">
main.view--onboarding
    article(style='display: flex; flex-direction: column; align-items: center')
        component(
            :aspectQuestions='onboardingStep.component == "Aspects" ? aspectQuestions : null'
            :currentStep='currentStep'
            :is='onboardingStep.component'
            @go-to-step='goToStep'
            @handle-submit="onSubmit"
            @update-answers="updateAnswers"
        )
</template>

<script>
import { surveyFactory } from '@/utils'
import { allSteps, possible } from '@/utils/lang'
import stepViews from '@/components/onboarding'
import OnboardingStepComponents from '../utils/onboardingStepComponents'

const SCORED = [1, 2, 3, 4, 5, 6] 
const _isScored = id => SCORED.includes(id)

const _makeCategoryFriendly = responseCategory => {
    const labels = responseCategory.split('_vs_')
    labels.forEach((a, i) => {
        if (a.indexOf('_') == -1) return
        labels[i] = a.split('_').join(' ')
    })
    return labels
}

const _formatAspectQuestions = steps => {
    return steps
        .map(q => {
            if (!_isScored(q.response_key_id)) return null
            return {
                id: q.response_key_id,
                question: q.response_key_prompt,
                labels: _makeCategoryFriendly(q.response_key_category),
                answer: null,
            }
        })
        .filter(step => step != null)
}

// import savesurveybyprfileid - call it on submit
// paginate to save every steps answers
export default {
    name: 'OnboardingView',
    components: {
        ...stepViews,
    },
    data: () => ({
        answered: {},
        aspectQuestions: [],
        currentStep: 0,
        onboardingStepComponents: [],
        validSurvey: null,
    }),
    computed: {
        onboardingStep() {
            if (!this.onboardingStepComponents.length) return []
            return this.onboardingStepComponents[this.currentStep]
        },
    },
    async created() {
        const survey = await surveyFactory.createSurvey(
            allSteps['usa'],
            possible['usa']['roles'],
        )
        this.aspectQuestions = _formatAspectQuestions(survey.steps)
        this.onboardingStepComponents = OnboardingStepComponents
    },
    methods: {
        onSubmit() {
            console.log(JSON.stringify(this.answered))
            // Object.values(this.answered).forEach(ans =>
            //     console.log(ans.question, ans.answer),
            // )
        },
        goToStep(num) {
            this.currentStep = num
        },
        updateAnswers(payload){
            this.answered[payload.key] = payload.answer
            console.log(`Updated answers: ${JSON.stringify(this.answered)}`);
        }
    },
}
</script>