Merge branch 'onboarding-submission' of fyindr/siimee into dev

backend/db/seeds/04-responses.js

@@ -28,7 +28,7 @@ exports.seed = async knex => {
     for (let i = 1; i <= len; i += 1) {
         responsesToPush.push(responses.shift())
         if (i % batchSize === 0 || i > responses.length) {
-            await knex('responses').insert(responsesToPush)
+            // await knex('responses').insert(responsesToPush)
             responsesToPush = []
         }
     }

frontend/src/components/DynamicTagList.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.ListControls(style="display:flex; flex-direction:row;")
+    input(type="text" :placeholder='`Add ${placeholder}...`' v-model="newTag")
+    w-button.ma1(@click="addTag") +
+TagList(:tags="mutableTags")
+</template>
+<script>
+import TagList from './TagList.vue'
+export default {
+    name: 'DynamicTagList',
+    components:{
+        TagList,
+    },
+    props:{
+        tags: {
+            required: true,
+            type: Array,
+        },
+        placeholder:{
+            required: true,
+            type: String,
+        }
+    },
+    data() {
+        return {
+            newTag: null,
+            mutableTags: this.tags,
+        }    
+    },
+    methods:{
+        addTag(){
+            if(!this.newTag){
+                console.warn('Type a new tag before adding')
+                return
+            }
+            this.mutableTags.push(this.newTag)
+            this.newTag = ''
+        }
+    }
+}
+</script>

frontend/src/components/onboarding/AccountType.vue

@@ -1,17 +1,38 @@
 <template lang="pug">
-h3 {Name}, let's get started on your profile while we verify your account
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") JOBS
+.account-typpe
+    h3 {{ question }}
+    //- w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
+    w-button.ma1.grow(@click='handleSubmit("Recruiter")') CANDIDATES
+    w-button.ma1.grow(@click='handleSubmit("Jobseeker")') JOBS
 </template>
 <script>
 export default {
     name: 'AccountType',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+        aspectQuestions: {
+            required: false,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        question:
+            "{Name}, let's get started on your profile while we verify your account.",
+    }),
+    methods: {
+        handleSubmit(accountType) {
+            let payload = {
+                key: 'AccountType',
+                question: this.question,
+                answer: accountType,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/Aspects.vue

@@ -1,28 +1,47 @@
 <template lang="pug">
-form(@submit.prevent="this.$emit('handle-submit')").questionnaire
-    QuestionResponse(v-for="question in aspectQuestions" :question="question")
-    w-button.ma1.grow(type="submit" bg-color="success")
-        w-icon.mr1 wi-check
-        | SUBMIT ANSWERS
+.aspects
+    form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
+        QuestionResponse(
+            :question='question'
+            @updated='updateRadio'
+            v-for='question in aspectQuestions'
+        )
+        w-button.ma1.grow(bg-color='success' type='submit')
+            w-icon.mr1 wi-check
+            | SUBMIT ANSWERS
 </template>
 <script>
 import QuestionResponse from './QuestionResponse.vue'
+const answered = [null, null, null, null, null, null]
 
 export default {
     name: 'Aspects',
     components: {
-        QuestionResponse
+        QuestionResponse,
     },
     props: {
-        aspectQuestions:{
+        aspectQuestions: {
             required: true,
-            type: Array
+            type: Array,
+        },
+    },
+    emits: ['handle-submit', 'update-answers'],
+    async created() {
+        this.aspectQuestions.forEach((q,i) => {
+            console.log(`Aspect #${i}: ${JSON.stringify(q)}`) 
+        })
+    },
+    methods: {
+        updateRadio(onRadioSelect) {
+            answered[onRadioSelect.id-1] = onRadioSelect.answer
+            this.$emit('update-answers', {
+                key: 'Aspects',
+                question: {
+                    response_key_prompt: 'aspects'
+                },
+                answer: answered,
+            })
         },
-        currentStep:{
-            required: true,
-            type: Number,
-            default: 0
-        }
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/CompanyID.vue

@@ -1,19 +1,39 @@
 <template lang="pug">
-h3 Company ID
-p PLEASE ENTER YOUR COMPANY ID#:
-input(type="text" placeholder="Get this from your admin.")
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.company-id
+    h3 Company ID
+    p {{ question }}
+    input(
+        placeholder='Get this from your admin.'
+        type='text'
+        v-model='companyID'
+    )
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
-// todo add v-model to input, pass down answers array from parent
 export default {
     name: 'CompanyID',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        companyID: null,
+        question: 'PLEASE ENTER YOUR COMPANY ID#:',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'CompanyID',
+                question: this.question,
+                answer: this.companyID,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/FormDropdown.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.role
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selection')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+
+<script>
+export default {
+    name: 'FormDropdown',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        selection: null,
+    }),
+    computed: {
+        items() {
+            return this.question.responses.map(res => ({ label: res }))
+        },
+    },
+    methods: {
+        handleSubmit() {
+            if (!this.selection) {
+                console.warn('Please select a role.')
+                return
+            }
+            let payload = {
+                question: this.question,
+                answer: this.selection,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormInput.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.form-input
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    input(placeholder='i am a little teapot' type='text' v-model='input')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+export default {
+    name: 'FormInput',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        input: null,
+    }),
+    methods: {
+        handleSubmit() {
+            if(this.question.response_key_prompt === 'password') {
+                this.$emit('update-answers') // no password collection
+                return
+            }
+
+            let payload = {
+                question: this.question,
+                answer: this.input,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormTags.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.form-tags
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    DynamicTagList(:placeholder='"a tag"' :tags='tags')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'FormTags',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        tags: [],
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                question: this.question,
+                answer: this.tags,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Interests.vue

@@ -1,17 +1,41 @@
 <template lang="pug">
-h3 Interests
-p What are some interests you would like in your next candidates?
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.interests
+    h3 Interests
+    p {{ question }}
+    DynamicTagList(:placeholder='"interest"' :tags='interests')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
+
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Interests',
+    components: {
+        DynamicTagList,
+    },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        interests: [],
+        question:
+            'What are some interests you would like in your next candidates?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Interests',
+                question: this.question,
+                answer: this.interests,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/LicensesAndCertifications.vue

@@ -1,17 +1,42 @@
 <template lang="pug">
-h3 Licenses & Certifications
-p Are there any licenses and certification requirements?
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.licenses-certifications
+    h3 Licenses &amp; Certifications
+    p {{ question }}
+    DynamicTagList(
+        :placeholder='"requirement"'
+        :tags='licensesAndCertifications'
+    )
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'LicensesAndCertifications',
+    components: {
+        DynamicTagList,
+    },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        licensesAndCertifications: [],
+        question: 'Are there any licenses and certification requirements?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'LicensesAndCertifications',
+                question: this.question,
+                answer: this.licensesAndCertifications,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/Location.vue

@@ -1,17 +1,39 @@
 <template lang="pug">
-h3 Location
-p Where would you like to select your candidates from?
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.location
+    h3 Location
+    p {{ question }}
+    DynamicTagList(:placeholder='"location"' :tags='locations')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Location',
+    components: {
+        DynamicTagList,
+    },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        locations: [],
+        question: 'Where would you like to select your candidates from?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Location',
+                question: this.question,
+                answer: this.locations,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/Role.vue

@@ -1,20 +1,40 @@
 <template lang="pug">
-h3 ACTIVELY SEARCHING
-p What is your role at your company?
-w-select.mt4(
-    :items="[{label: 'RECRUITER'},{label: 'HIRING MANAGER'}]"
-    placeholder="i am")
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.role
+    h3 ACTIVELY SEARCHING
+    p {{ question }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selectedRole')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
+
 <script>
 export default {
     name: 'Role',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    data: () => ({
+        items: [{ label: 'RECRUITER' }, { label: 'HIRING MANAGER' }],
+        question: 'What is your role at your company?',
+        selectedRole: null,
+    }),
+    methods: {
+        handleSubmit() {
+            if (!this.selectedRole) {
+                console.warn('Please select a role.')
+                return
+            }
+            let payload = {
+                key: 'Role',
+                question: this.question,
+                answer: this.selectedRole,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/Skills.vue

@@ -1,17 +1,39 @@
 <template lang="pug">
-h3 RECRUITER
-p What are some skills you are looking for at your company?
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+.skills
+    h3 RECRUITER
+    p {{ question }}
+    DynamicTagList(:placeholder='"skill"' :tags='skills')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Skills',
+    components: {
+        DynamicTagList,
+    },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        question: 'What are some skills you are looking for at your company?',
+        skills: [],
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Skills',
+                question: this.question,
+                answer: this.skills,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
     },
 }
-</script>
+</script>

frontend/src/components/onboarding/Splash.vue

@@ -1,17 +1,27 @@
 <template lang="pug">
-.splash-icon(style="width:347px; height:347px; background-color: red;")
-div(style="text-align:center;")
-    w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") GET STARTED
+.splash
+    .splash--icon(style='width: 347px; height: 347px; background-color: red')
+    div(style='text-align: center')
+        w-button.ma1.grow(@click='handleSubmit') GET STARTED
+
 </template>
+
 <script>
 export default {
     name: 'Splash',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
+    emits: ['update-answers'],
+    methods: {
+        handleSubmit() {
+            this.$emit('update-answers', null)
+        },
+    },
+
 }
-</script>
+</script>

frontend/src/components/onboarding/index.js

@@ -7,6 +7,9 @@ import Location from './Location.vue'
 import Interests from './Interests.vue'
 import LicensesAndCertifications from './LicensesAndCertifications.vue'
 import Aspects from './Aspects.vue'
+import FormInput from './FormInput.vue'
+import FormTags from './FormTags.vue'
+import FormDropdown from './FormDropdown.vue'
 
 export default {
     Splash,
@@ -18,4 +21,7 @@ export default {
     Interests,
     LicensesAndCertifications,
     Aspects,
-}
+    FormDropdown,
+    FormTags,
+    FormInput,
+}

frontend/src/entities/survey/survey.js

@@ -2,24 +2,42 @@
 import { _baseRecord } from '../index.js'
 import { surveySchema } from './survey.schema.js'
 
+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)
+}
+
 class Survey extends _baseRecord {
-    constructor(questionSteps, roles) {
+    constructor(questionSteps) {
         super()
 
         this.type = this.constructor.name.toLowerCase()
 
         /**  Fields */
         this.steps = [...questionSteps] // ! required
-        this.roleTree = roles
-
-        return this
-    }
-    setRoleResponses(position) {
-        const roleStep = this.steps.filter(
-            step => step.response_key_prompt == 'role',
-        )[0]
-        roleStep.responses = this.roleTree[position]
+        this.aspectQuestions = _formatAspectQuestions(this.steps)
+        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
     }
+
     isValid() {
         const validate = surveySchema.validate(this)
 

frontend/src/utils/index.js

@@ -41,7 +41,7 @@ const makeKebob = input => {
     return input.toLowerCase().split(' ').join('-')
 }
 
-const surveyFactory = new SurveyFactory(possible['usa'])
+const surveyFactory = new SurveyFactory()
 
 const mixins = { pidMixin, profileMixin }
 

frontend/src/utils/lang.js

@@ -3,20 +3,23 @@ const DELIMITER = '_'
 // TODO: Combine these two
 const allSteps = {
     usa: {
-        email: 'email',
+        splash: 'splash',
         name: 'name',
-        pronouns: 'pronouns',
-        seeking: 'seeking',
-        urgency: 'urgency',
-        experience: 'experience',
-        roles: 'role',
-        duration: 'duration',
-        presence: 'presence',
-        language: 'language',
+        email: 'email',
+        password: 'password',
+        // pronouns: 'pronouns',
+        // seeking: 'seeking',
+        // urgency: 'urgency',
+        // experience: 'experience',
+        // roles: 'role',
+        // duration: 'duration',
+        // presence: 'presence',
+        // language: 'language',
         zipcode: 'zipcode',
-        distance: 'distance',
+        // distance: 'distance',
         blurb: 'blurb',
         image: 'image',
+        aspects: 'aspects'
     },
 }
 
@@ -37,17 +40,7 @@ possible.usa = {
     email: [],
     name: [],
     seeking: ['position', 'candidate'],
-    language: [
-        'javascript',
-        'python',
-        'c#',
-        'c++',
-        'go',
-        'java',
-        'ruby',
-        'html',
-        'css',
-    ],
+    language: ['english', 'spanish'],
     // key 13
     urgency: [
         'actively_looking',

frontend/src/utils/onboardingStepComponents.js

@@ -1,39 +0,0 @@
-const OnboardingStepComponents = [
-    {
-        id: 0,
-        component:'Splash',
-    },
-    {
-        id: 1,
-        component:'AccountType',
-    },
-    {
-        id: 2,
-        component:'CompanyID',
-    },
-    {
-        id: 3,
-        component:'Role',
-    },
-    {
-        id: 4,
-        component:'Skills',
-    },
-    {
-        id: 5,
-        component:'Location',
-    },
-    {
-        id: 6,
-        component:'Interests',
-    },
-    {
-        id: 7,
-        component:'LicensesAndCertifications',
-    },
-    {
-        id: 8,
-        component:'Aspects',
-    }
-]
-export default OnboardingStepComponents

frontend/src/utils/survey.js

@@ -1,9 +1,55 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
+import { possible } from './lang.js'
+
+const promptToComponent = {
+    splash: 'Splash',
+    name: 'FormInput',
+    email: 'FormInput',
+    password: 'FormInput',
+    zipcode: 'FormInput',
+    // seeking: 'FormDropdown',
+    // urgency: 'FormDropdown',
+    // presence: 'FormDropdown',
+    // duration: 'FormDropdown',
+    // experience: 'FormTags',
+    // pronouns: 'FormDropdown',
+    // language: 'FormDropdown',
+    image: 'FormInput',
+    // distance: 'FormInput',
+    blurb: 'FormInput',
+    aspects: 'Aspects'
+}
+/**
+ * Make a step from match or step information
+ * @param {object} match
+ * @param {object} step
+ * @returns something like a response_key with possible responses
+ */
+const formatStep = (match, step) => {
+    const responsesByCategory = possible['usa']
+    const responseKey = {
+        response_key_id: match ? match.response_key_id : null,
+        response_key_category: match ? match.response_key_category : 'profile',
+        response_key_prompt: match ? match.response_key_prompt : step,
+        response_key_description: match ? match.response_key_description : null,
+    }
+    return {
+        ...responseKey,
+        responses: responsesByCategory[step] ? responsesByCategory[step] : [],
+    }
+}
+const associateWithComponent = responseKeyLike => {
+    let component = promptToComponent[responseKeyLike.response_key_prompt]
+    return { ...responseKeyLike, component }
+}
+
+const hasMatch = (step, inArray) => {
+    return inArray.find(q => q.response_key_prompt == step)
+}
 
 class SurveyFactory {
-    constructor(responses) {
-        this.responsesByCategory = responses
+    constructor() {
         this.questionsFromDb = []
     }
     _setSteps(langFile) {
@@ -11,28 +57,18 @@ class SurveyFactory {
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
             // Match question to step
-            const match = this.questionsFromDb.filter(
-                q => q.response_key_prompt == step,
-            )[0]
+            const match = hasMatch(step, this.questionsFromDb)
             if (match) {
                 seenIds.push(match.response_key_id)
             }
-            return {
-                response_key_id: match ? match.response_key_id : null,
-                response_key_category: match
-                    ? match.response_key_category
-                    : 'profile',
-                response_key_prompt: match ? match.response_key_prompt : step,
-                response_key_description: match
-                    ? match.response_key_description
-                    : null,
-                responses: this.responsesByCategory[step]
-                    ? this.responsesByCategory[step]
-                    : [],
-            }
+            const responseKeyLike = formatStep(match, step)
+            const withComponent = associateWithComponent(responseKeyLike)
+            console.log('withComponent :>> ', withComponent)
+            return withComponent
         })
-        const unseen = this.questionsFromDb.filter(
-            q => !seenIds.includes(q.response_key_id),
+        // temporary extra condition in filter 
+        let unseen = this.questionsFromDb.filter(
+            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
         )
         return [...stepsInCommon, ...unseen]
     }

frontend/src/views/HomeView.vue

@@ -15,7 +15,6 @@ main.view--home
 <script>
 import 'wave-ui/dist/wave-ui.css'
 import ProfileCardList from '../components/ProfileCardList.vue'
-import TagList from '../components/TagList.vue'
 import AspectBar from '../components/AspectBar.vue'
 import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
@@ -57,7 +56,6 @@ export default {
     components: {
         ProfileCardList,
         AspectBar,
-        TagList,
         SummaryBar,
         PairingButton,
     },

frontend/src/views/OnboardingView.vue

@@ -1,46 +1,24 @@
 <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='onboardingStep.component == "Aspects" ? onSubmit : null'
-        )
-    //- MainNav
+    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 && currentStep == i'
+            )
 </template>
 
 <script>
 import { surveyFactory } from '@/utils'
-import { allSteps, possible } from '@/utils/lang'
+import { allSteps } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
-import OnboardingStepComponents from '../utils/onboardingStepComponents'
-
-const SCORED = [1, 2, 3, 4, 5, 6] // consider expanding + modifying DB table
-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),
-            }
-        })
-        .filter(step => step != null)
-}
 
 // import savesurveybyprfileid - call it on submit
 // paginate to save every steps answers
@@ -53,36 +31,29 @@ export default {
         answered: {},
         aspectQuestions: [],
         currentStep: 0,
-        onboardingStepComponents: [],
-        validSurvey: null,
+        survey: 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
+        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
     },
     methods: {
-        onUpdate(payload) {
-            console.log('payload: ', payload)
-            // this.answered[payload.id] = payload
-        },
         onSubmit() {
-            Object.values(this.answered).forEach(ans =>
-                console.log(ans.question, ans.answer),
-            )
+            console.log(JSON.stringify(this.answered))
         },
         goToStep(num) {
             this.currentStep = num
         },
+        updateAnswers(payload) {
+            // null payload is passed on splash page
+            if(payload){
+                const k = payload.question.response_key_prompt
+                this.answered[k] = payload.answer
+                console.log(`${k}:`, this.answered[k])
+                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
+                if(k === 'aspects') return
+            }
+            this.goToStep(this.currentStep + 1)
+        },
     },
 }
 </script>