:file_folder: new questionnaire endpoint with aspects json import and basic form submission logic

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

frontend/src/utils/aspects.js

@@ -0,0 +1,28 @@
+const Aspects = [
+    {
+        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?',
+        answers: ['Creative', 'Methodical']
+    },
+    {
+        question: 'Do you prefer to work in a Collaborative or Independent environment?',
+        answers: ['Collaborative', 'Independent']
+    },
+    {
+        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?',
+        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?',
+        answers: ['Guided', 'Self-managed']
+    },
+]
+
+export default Aspects

frontend/src/views/QuestionnaireView.vue

@@ -0,0 +1,73 @@
+<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>