:wrench: WIP entire onboarding flow. working step through, still missing input forms+correct step structure+styles

frontend/src/router/index.js

@@ -6,7 +6,7 @@ import ChatView from '../views/ChatView.vue'
 import MatchesView from '../views/MatchesView.vue'
 import LoginView from '../views/LoginView.vue'
 import SurveyView from '../views/SurveyView.vue'
-import QuestionnaireView from '../views/QuestionnaireView.vue'
+import OnboardingView from '../views/OnboardingView.vue'
 
 const routes = [
     {
@@ -48,9 +48,9 @@ const routes = [
         meta: { requiresAuth: true, requiresCompleteProfile: false },
     },
     {
-        path: `/questionnaire`,
-        component: QuestionnaireView,
-        name: `QuestionnaireView`,
+        path: `/onboarding`,
+        component: OnboardingView,
+        name: `OnboardingView`,
         meta: { requiresAuth: true, requiresCompleteProfile: false },
     },
     {

frontend/src/utils/aspects.js

@@ -1,26 +1,32 @@
 const Aspects = [
     {
-        question: 'While operating in your professional role, do you identify yourself to be a Visionary or Implementer?',
+        employer_question: 'While managing your team, do you find success in your employees being more Visionary or Implementer?',
+        seeker_question: 'While operating in your professional role, do you identify yourself to be a Visionary or Implementer?',
         answers: ['Visionary', 'Implementer']
     },
     {
-        question: 'As a professional, do you consider yourself to be Creative or Methodical in your execution of job duties?',
+        employer_question: 'In your department, do you find more success in your employees being Creative or Methodical in their job duties?',
+        seeker_question: 'As a professional, do you consider yourself to be Creative or Methodical in your execution of job duties?',
         answers: ['Creative', 'Methodical']
     },
     {
-        question: 'Do you prefer to work in a Collaborative or Independent environment?',
+        employer_question: 'Do you structure and encourage your team to be a Collaborative or Independent environment?',
+        seeker_question: 'Do you prefer to work in a Collaborative or Independent environment?',
         answers: ['Collaborative', 'Independent']
     },
     {
-        question: 'Are you Innovative or Convetional?',
+        employer_question: 'Do you find higher success in employees on your team that are Innovative or Conventional?',
+        seeker_question: 'Are you Innovative or Convetional?',
         answers: ['Innovative', 'Conventional']
     },
     {
-        question: 'As a professional, are you a Big Picture thinker or Focused thinker when it comes to how you operate in your job duties?',
+        employer_question: 'As a hiring leader, are you a Big Picture or Focused thinker when it comes to how you operate in your job duties?',
+        seeker_question: 'As a professional, are you a Big Picture thinker or Focused thinker when it comes to how you operate in your job duties?',
         answers: ['Big Picture', 'Focused']
     },
     {
-        question: 'While working on job related tasks, do you prefer to be Guided or Self-managed in achieveing completion of your responsibilities?',
+        employer_question: 'Do you prefer your employees to be Guided or Self-managed in achieving completion of their responsibilities?',
+        seeker_question: 'While working on job related tasks, do you prefer to be Guided or Self-managed in achieveing completion of your responsibilities?',
         answers: ['Guided', 'Self-managed']
     },
 ]

frontend/src/views/OnboardingView.vue

@@ -0,0 +1,133 @@
+<template lang="pug">
+//- br
+//- br
+//- article
+//-     form(@submit.prevent="onSubmit")
+//-         .aspects
+//-             .aspect(
+//-                 v-for="(aspect, i) in aspects"
+//-             )
+//-                 label {{aspect.seeker_question}}
+//-                 //- label {{aspect.employer_question}}
+//-                 br
+//-                 br
+//-                 .aspect--response
+//-                     .aspect--answers
+//-                         h3 {{aspect.answers[0]}}
+//-                         h3 {{aspect.answers[1]}}
+//-                     .aspect--radio-buttons
+//-                         input(type="radio" :id="'q'+(i+1)+'_a1'"  :name="'q'+(i+1)" value="a1" v-model="questionnaireAnswers[i]")
+//-                         input(type="radio" :id="'q'+(i+1)+'_a2'"  :name="'q'+(i+1)" value="a2" v-model="questionnaireAnswers[i]")
+//-                         input(type="radio" :id="'q'+(i+1)+'_a3'"  :name="'q'+(i+1)" value="a3" v-model="questionnaireAnswers[i]")
+//-                         input(type="radio" :id="'q'+(i+1)+'_a4'"  :name="'q'+(i+1)" value="a4" v-model="questionnaireAnswers[i]")
+//-                         input(type="radio" :id="'q'+(i+1)+'_a5'"  :name="'q'+(i+1)" value="a5" v-model="questionnaireAnswers[i]")
+//-                 br
+//-                 br
+//-         br
+//-         w-flex
+//-             w-button.ma1.grow(type="submit" bg-color="success")
+//-                 w-icon.mr1 wi-check
+//-                 | SUBMIT ANSWERS
+br
+h3 Current Step: {{currentStep}}
+br
+ul
+    li(v-for="question in onboardingStep")
+        p {{question}}
+br
+button(@click="goToStep(currentStep - 1)") previous
+br
+button(@click="goToStep(currentStep + 1)") next
+</template>
+<script>    
+import aspects from '../utils/aspects'
+import { surveyFactory } from '@/utils'
+import { allSteps, possible } from '@/utils/lang'
+
+
+export default {
+    name:'OnboardingView',
+    props: {
+        pid: {
+            type: Number,
+            default: () => 45,
+        },
+    },
+    data: () => {
+        let num_of_ans = aspects.length // need 1 answer for every aspect question
+        return {
+            onboardingQuestions: [],
+            currentStep: 0,
+            onboardingAnswers: [],
+            validSurvey: null,
+            questionnaireAnswers: Array(num_of_ans).join(".").split(".") 
+        }
+    },
+    computed:{
+        aspects() { 
+            return aspects
+        },
+        onboardingStep(){
+            if(!this.onboardingQuestions.length) return []
+            return this.onboardingQuestions[this.currentStep]
+        }
+    },
+    async created(){
+        this.validSurvey = await surveyFactory.createSurvey(
+            allSteps['usa'],
+            possible['usa']['roles'],
+        )
+        var step = []
+        var fooSteps = [...this.validSurvey.steps]
+        while(fooSteps.length > (this.validSurvey.steps.length % 3)){
+            var q = fooSteps.shift()
+            step.push(q)
+            if(step.length == 3){
+                this.onboardingQuestions.push(step)
+                step = []
+            }
+        }
+        var last_step = [...fooSteps]
+        this.onboardingQuestions.push(last_step)
+    },
+    methods: {
+        onSubmit() {
+            this.questionnaireAnswers.forEach((ans,ind)=>{
+                console.log(`Question ${ind+1} was ${ans==''? 'left blank.' : `answered ${ans}`}`)
+            })
+        },
+        goToStep(num){
+            if(num < 0){
+                this.currentStep = this.onboardingQuestions.length-1
+            }
+            else if(num >= this.onboardingQuestions.length) {
+                this.currentStep = 0
+            }
+            else 
+                this.currentStep = num
+        },
+    },
+}
+</script>
+<style>
+.aspects{
+    display: flex;
+    flex-direction:column;
+}
+.aspect--response{
+    display: flex;
+    flex-direction: column;
+}
+.aspect--answers{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.aspect--radio-buttons{
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+</style>

frontend/src/views/QuestionnaireView.vue

@@ -1,73 +0,0 @@
-<template lang="pug">
-br
-br
-article
-    form(@submit.prevent="onSubmit")
-        .aspects
-            .aspect(
-                v-for="(aspect, i) in aspects"
-            )
-                label {{aspect.question}}
-                br
-                br
-                .aspect--response
-                    .aspect--answers
-                        h3 {{aspect.answers[0]}}
-                        h3 {{aspect.answers[1]}}
-                    .aspect--radio-buttons
-                        input(type="radio" :id="'q'+(i+1)+'_a1'"  :name="'q'+(i+1)" value="a1" v-model="questionnaireAnswers[i]")
-                        input(type="radio" :id="'q'+(i+1)+'_a2'"  :name="'q'+(i+1)" value="a2" v-model="questionnaireAnswers[i]")
-                        input(type="radio" :id="'q'+(i+1)+'_a3'"  :name="'q'+(i+1)" value="a3" v-model="questionnaireAnswers[i]")
-                        input(type="radio" :id="'q'+(i+1)+'_a4'"  :name="'q'+(i+1)" value="a4" v-model="questionnaireAnswers[i]")
-                        input(type="radio" :id="'q'+(i+1)+'_a5'"  :name="'q'+(i+1)" value="a5" v-model="questionnaireAnswers[i]")
-                br
-                br
-        br
-        w-flex
-            w-button.ma1.grow(type="submit" bg-color="primary") Submit Rating
-</template>
-<script>
-import aspects from '../utils/aspects'
-
-export default {
-    name:'QuestionnaireView',
-    data: () => {
-        let num_of_ans = aspects.length // need 1 answer for every aspect question
-        return {
-            questionnaireAnswers: Array(num_of_ans).join(".").split(".") 
-        }
-    },
-    computed:{
-        aspects() { return aspects }
-    },
-    methods: {
-        onSubmit() {
-            this.questionnaireAnswers.forEach((ans,ind)=>{
-                console.log(`Question ${ind+1} was ${ans==''? 'left blank.' : `answered ${ans}`}`)
-            })
-        }
-    },
-}
-</script>
-<style>
-.aspects{
-    display: flex;
-    flex-direction:column;
-}
-.aspect--response{
-    display: flex;
-    flex-direction: column;
-}
-.aspect--answers{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-.aspect--radio-buttons{
-    width: 90%;
-    margin: auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-</style>