Merge branch 'questionnaire-endpoint' of fyindr/siimee into dev

frontend/src/router/index.js

@@ -6,6 +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 OnboardingView from '../views/OnboardingView.vue'
 
 const routes = [
     {
@@ -46,6 +47,12 @@ const routes = [
         name: `SurveyView`,
         meta: { requiresAuth: true, requiresCompleteProfile: false },
     },
+    {
+        path: `/onboarding`,
+        component: OnboardingView,
+        name: `OnboardingView`,
+        meta: { requiresAuth: true, requiresCompleteProfile: false },
+    },
     {
         path: `/login`,
         component: LoginView,

frontend/src/utils/aspects.js

@@ -0,0 +1,34 @@
+const Aspects = [
+    {
+        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']
+    },
+    {
+        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']
+    },
+    {
+        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']
+    },
+    {
+        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']
+    },
+    {
+        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']
+    },
+    {
+        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']
+    },
+]
+
+export default Aspects

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>