Merge branch 'more-skeleton' of ssh://gitea.yvvas.com:4022/fyindr/siimee into more-skeleton

backend/db/data-generator/mock.js

     response_keys: [
         {
             response_key_id: 1,
-            response_key_category: 'grit',
-            response_key_prompt: 'can you power through adversity',
+            response_key_category: 'visionary_vs_implementer',
+            response_key_prompt: 'While managing your team, do you find success in your employees being more Visionary or Implementer?',
             response_key_description: 'first round draft scoring question',
         },
         {
             response_key_id: 2,
-            response_key_category: 'openness',
+            response_key_category: 'creative_vs_methodical',
             response_key_prompt:
-                'are you open with your emotions with everyone',
+                'In your department, do you find more success in your employees being Creative or Methodical in their job duties?',
             response_key_description: 'first round draft scoring question',
         },
         {
             response_key_id: 3,
-            response_key_category: 'bravery',
+            response_key_category: 'collaborative_vs_independent',
             response_key_prompt:
-                'do you speak-up when you feel something is wrong',
+                'Do you structure and encourage your team to be a Collaborative or Independent environment?',
             response_key_description: 'first round draft scoring question',
         },
         {
             response_key_id: 4,
-            response_key_category: 'empathy',
+            response_key_category: 'innovative_vs_conventional',
             response_key_prompt:
-                'do you stop to help others when they are struggling',
+                'Do you find higher success in employees on your team that are Innovative or Conventional?',
             response_key_description: 'first round draft scoring question',
         },
         {
             response_key_id: 5,
-            response_key_category: 'honesty',
+            response_key_category: 'big_Picture_vs_focused',
             response_key_prompt:
-                'when telling a story do you exaggerate for dramatic effect',
+                'As a hiring leader, are you a Big Picture or Focused thinker when it comes to how you operate in your job duties?',
             response_key_description: 'first round draft scoring question',
         },
         {
             response_key_id: 6,
-            response_key_category: 'respect',
+            response_key_category: 'guided_vs_self-managed',
             response_key_prompt:
-                'do you treat difficult people as well as you treat your close friends',
+                'Do you prefer your employees to be Guided or Self-managed in achieving completion of their responsibilities?',
             response_key_description: 'first round draft scoring question',
         },
         {

frontend/src/utils/aspects.js

+/* Only keeping until fully migrated to backend table. Will be deleted soon. */
 const Aspects = [
     {
         employer_question: 'While managing your team, do you find success in your employees being more Visionary or Implementer?',

frontend/src/views/OnboardingView.vue

 <template lang="pug">
+article
+    form(@submit.prevent="onSubmit")
+        .questionnaire
+            .question(
+                v-for="q in questionnaireQuestions"
+            )
+                label {{q.question}}
+                .question--response
+                    .question--answers 
+                        h3 {{q.answers[0].charAt(0).toUpperCase() + q.answers[0].slice(1)}}
+                        h3 {{q.answers[1].charAt(0).toUpperCase() + q.answers[1].slice(1)}}
+                    .question--radio-buttons
+                        input(type='radio' :id="'q'+(q.id)+'_a1'" :name="'q'+(q.id)" value="a1" v-model="questionnaireAnswers[q.id-1]") 
+                        input(type='radio' :id="'q'+(q.id)+'_a2'" :name="'q'+(q.id)" value="a2" v-model="questionnaireAnswers[q.id-1]") 
+                        input(type='radio' :id="'q'+(q.id)+'_a3'" :name="'q'+(q.id)" value="a3" v-model="questionnaireAnswers[q.id-1]") 
+                        input(type='radio' :id="'q'+(q.id)+'_a4'" :name="'q'+(q.id)" value="a4" v-model="questionnaireAnswers[q.id-1]") 
+                        input(type='radio' :id="'q'+(q.id)+'_a5'" :name="'q'+(q.id)" value="a5" v-model="questionnaireAnswers[q.id-1]") 
+        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
 //- 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: [],
+            // onboardingQuestions: [],
+            // currentStep: 0,
+            // onboardingAnswers: [],
             validSurvey: null,
-            questionnaireAnswers: Array(num_of_ans).join(".").split(".") 
+            questionnaireQuestions:[],
+            questionnaireAnswers: Array(6).join(".").split(".") 
         }
     },
     computed:{
-        aspects() { 
-            return aspects
-        },
-        onboardingStep(){
-            if(!this.onboardingQuestions.length) return []
-            return this.onboardingQuestions[this.currentStep]
-        }
+        // onboardingStep(){
+        //     if(!this.onboardingQuestions.length) return []
+        //     return this.onboardingQuestions[this.currentStep]
+        // },
+        // questionnaireAnswers(){
+        //     let num_of_ans = 6 // TODO make dynamic once we know which questions we will be asking
+        //     return Array(num_of_ans).join(".").split(".") 
+        // }
     },
     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 = []
+        // gather questionnaire questions
+        this.validSurvey.steps.forEach(q => {
+            if(q.response_key_id  && q.response_key_id  < 7) {
+                let id = q.response_key_id
+                let question = q.response_key_prompt
+                let answers = q.response_key_category.split('_vs_')
+                answers.forEach((a,i) => {
+                    if(a.indexOf('_') !== -1){
+                        answers[i] = a.split('_').join(' ')
+                    }
+                })
+                this.questionnaireQuestions.push({
+                    id,
+                    question,
+                    answers
+                })
             }
-        }
-        var last_step = [...fooSteps]
-        this.onboardingQuestions.push(last_step)
+        })
+        // 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() {
                 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
-        },
+        // 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{
+body{
+    background-color: #1F2024;
+}
+article{
+    color: #FFFFFF;
+}
+.questionnaire{
     display: flex;
     flex-direction:column;
 }
-.aspect--response{
-    display: flex;
-    flex-direction: column;
+.question{
+    margin-top: 44px;
+}
+.question > label{
+    font-size: 18px; 
+    line-height: 23px;
 }
-.aspect--answers{
+.question--response{
+    margin-top: 22px;
+    margin-inline: 19px;
+}
+.question--answers{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
-.aspect--radio-buttons{
-    width: 90%;
-    margin: auto;
+.question--radio-buttons{
+    padding: 0 25px;
+    margin: 16px auto auto auto;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
+.question--radio-buttons > input {
+    width: 24px;
+    height: 24px;
+}
 </style>