:recycle: more tweaks to mock questions | making responses work with frontend survey questions | lang file | widget Map

backend/db/data-generator/mock.js

             response_key_prompt: 'blurb',
             response_key_description: null,
         },
+        {
+            response_key_id: 13,
+            response_key_category: 'profile',
+            response_key_prompt: 'urgency',
+            response_key_description: null,
+        },
+        {
+            response_key_id: 14,
+            response_key_category: 'profile',
+            response_key_prompt: 'role',
+            response_key_description: null,
+        },
     ],
     responses: [],
     memberships: [],

frontend/src/entities/survey/survey.js

 
         /**  Fields */
         this.steps = [
-            ...Object.values(questionSteps),
+            ...questionSteps
         ] // ! required
         
         return this

frontend/src/entities/survey/survey.schema.js

 
         /** Survey fields */
         steps: Joi.array().items(
-            Joi.array().items(
-                Joi.object({
-                    id: Joi.number(),
-                    type: Joi.string(),
-                    question: Joi.string(),
-                    // TODO: specify responses to be array or null later
-                    responses: Joi.any(),
-                })
-            )
+            Joi.object({
+                id: Joi.number(),
+                type: Joi.string(),
+                question: Joi.string(),
+                // TODO: specify responses to be array or null later
+                responses: Joi.any(),
+            })
         ).required(),
     }),
     /** fields required before saving */

frontend/src/services/survey.service.js

 import { db } from '../utils/db'
-import { Survey } from '../entities/survey'
 
 /**
  * Get Survey for first time profile creation from the database and
  * @param {number} profileId
  * @returns {array} instantiated Profile objects (see: /entites/profile)
  */
-const fetchSurveyByProfileId = async profileId => {
-    const myquestions = await db.get(`/survey/questions`)
-    const allsteps = {}
-    const questionsPerStep = 3
-    const stepsNeeded = Math.ceil(myquestions.length / questionsPerStep)
-
-    // Create the steps needed inside allsteps
-    for (let i = 1; i <= stepsNeeded; i++) {
-        allsteps[`step-${i}`] = []
-    }
-
-    // Add the questions into each step, dividing into questionsPerStep
-    for (let i = 0; i < myquestions.length; i++) {
-        const question = myquestions[i]
-
-        // Set the input type based on category
-        const type =
-            question.response_key_category != 'profile'
-                ? 'input-slide'
-                : 'input-string'
-
-        // Reformats myquestions into the format we want
-        const reformatted = {
-            id: question.response_key_id,
-            type,
-            question: question.response_key_prompt,
-            responses: null,
-            description: question.response_key_description,
-            category: question.response_key_category,
-        }
-        for (let n = 1; n <= stepsNeeded; n++) {
-            if (i >= questionsPerStep * (n - 1) && i < questionsPerStep * n) {
-                allsteps[`step-${n}`].push(reformatted)
-            }
-        }
-    }
-    const mysurvey = new Survey(allsteps)
-    return mysurvey
+const fetchQuestionsByProfileId = async profileId => {
+    return await db.get(`/survey/questions`)
 }
 
 const saveSurveyByProfileId = async (surveyResponses, profileId) => {
 }
 
 export {
-    fetchSurveyByProfileId,
+    fetchQuestionsByProfileId,
     saveSurveyByProfileId,
     updateSurveyByProfileId,
     scoreSurveyByProfileId,

frontend/src/utils/index.js

 import { Connector } from './db'
 import { Login } from './login'
 import { Authenticator } from './auth'
+import { SurveyFactory } from './survey'
+import { possible } from './lang'
 
 const api = new Connector('kittens')
 
 
 const loginHandler = new Login()
 const authHandler = new Authenticator()
+const surveyFactory = new SurveyFactory(possible['usa'])
 
-export { api, validatorMapping, loginHandler, authHandler, makeKebob }
+export { api, validatorMapping, loginHandler, authHandler, surveyFactory, makeKebob }

frontend/src/utils/lang.js

+const DELIMITER = '_'
+
+const stepToComponentMap = {
+    name: 'InputString',
+    seeking: 'ButtonMulti',
+    urgency: 'ButtonChoice',
+    distance: 'ButtonChoice',
+    duration: 'ButtonChoice',
+    language: 'ButtonMulti',
+}
+
+const allSteps = {
+    usa: {
+        name: 'name',
+        seeking: 'seeking',
+        urgency: 'urgency',
+        distance: 'distance',
+        duration: 'duration',
+        language: 'language',
+    }
+}
+
+const possible = {}
+possible.usa = {
+    name: [],
+    seeking: ['position', 'candidate'],
+    language: [
+        'javascript',
+        'python',
+        'c#',
+        'c++',
+        'go',
+        'java',
+        'ruby',
+        'html',
+        'css',
+    ],
+    // key 13
+    urgency: [
+        'actively_looking',
+        'open_to_the_right_opportunity',
+        'just_browsing',
+        'networking',
+    ],
+    // key 10
+    distance: [
+        'remote',
+        'in_person',
+        'hybrid',
+        'flexible'
+    ],
+    // key 11
+    duration: [
+        'full-time',
+        'part-time',
+        'contract',
+        'flexible',
+    ],
+    // Everything else concats under role, key: 14
+    experience_levels: [
+        'associate',
+        'junior',
+        'mid-level',
+        'senior',
+        'staff',
+        'chief_of',
+        'director_of',
+    ],
+    roles: {
+        type: [
+            'back-end',
+            'database',
+            'front-end',
+            'full-stack',
+            'qa',
+            'security',
+            'system',
+            'test',
+        ],
+        seeker: [
+            'administrator',
+            'analyst',
+            'architect',
+            'developer',
+            'engineer',
+            'manager',
+            'technician',
+        ],
+        provider: [
+            'hiring_manager',
+            'recruiter',
+        ]
+    },
+}
+
+export { allSteps, stepToComponentMap, possible }

frontend/src/utils/survey.js

+import { Survey } from '../entities'
+import { fetchQuestionsByProfileId } from '../services'
+
+class SurveyFactory {
+    constructor(responses) {
+        this.responsesByCategory = responses
+    }
+    async setSteps(langFile) {
+        const stepsToProcess = [...Object.values(langFile) ]
+        console.log(stepsToProcess)
+        const questions = await fetchQuestionsByProfileId()
+        const seenIds = []
+        const stepsInCommon = stepsToProcess.map(step => {
+            // Match question to step
+            const match = questions.filter(q => q.response_key_prompt == step)[0]
+            if(match) { seenIds.push(match.response_key_id) }
+            return {
+                response_key_category: match ? match.response_key_category: 'profile',
+                response_key_description: match ? match.response_key_description: null,
+                response_key_id: match ? match.response_key_id: null,
+                response_key_prompt: match ? match.response_key_prompt: step,
+                responses: this.responsesByCategory[step] ? this.responsesByCategory[step] : [] 
+            }
+        })
+        const unseen = questions.filter(q => !seenIds.includes(q.response_key_id))
+        return [...stepsInCommon, ...unseen]
+    }
+    async createSurvey(langFile) {
+        const steps = await this.setSteps(langFile)
+        return new Survey(steps)
+    }
+}
+
+export { SurveyFactory }

frontend/src/views/Survey.vue

     ButtonMulti
     //- ButtonChoice
     //- InputString
+    h5(v-if="profileQuestions.length" v-for="q in profileQuestions")
+        span(v-if="componentMap[q.response_key_prompt]") {{ componentMap[q.response_key_prompt] }}:
+        span(v-else) InputString:
+        span {{ q.response_key_prompt }} | 
+        span(v-if="q.responses")
+            button(v-for="resp in q.responses") {{ resp }}
+
     article.match.w-full
         ul.w-full
             li(v-if="step == 0")
 </template>
 
 <script>
+import { surveyFactory } from '../utils'
+import { allSteps, stepToComponentMap } from '../utils/lang'
 import SurveyForm from '../components/form.vue'
-import { fetchSurveyByProfileId } from '../services'
 import ButtonMulti from '../components/form/button-multi.vue'
 import ButtonChoice from '../components/form/button-choice.vue'
 import InputString from '../components/form/input-string.vue'
 
-const locations = ['remote', 'in_person']
-const roles = [
-    ['recruiter', 'hiring_manager'],
-    [
-        'junior_engineer',
-        'mid-level_engineer',
-        'senior_engineer',
-        'staff_engineer',
-    ],
-]
-
 export default {
     components: { SurveyForm, ButtonMulti, ButtonChoice, InputString },
     props: {
     data() {
         return {
             validSurvey: null,
+            componentMap: stepToComponentMap,
             step: 0,
             name: '',
             seeking: '',
             zipcode: '',
         }
     },
+    computed: {
+        profileQuestions() {
+            if(!this.validSurvey) return []
+            return this.validSurvey.steps.filter(step => step.response_key_category == 'profile')
+        },
+        priorityQuestions() {
+            if(!this.validSurvey) return []
+            return this.validSurvey.steps.filter(step => step.response_key_category != 'profile')
+        }
+    },
+    async created() {
+        this.validSurvey = await surveyFactory.createSurvey(allSteps['usa'])
+        console.log('profile:', this.profileQuestions)
+    },
     methods: {
         saveNext(val) {
             console.log(val)
             this.step++
         },
     },
-    async created() {
-        this.validSurvey = await fetchSurveyByProfileId(this.pid)
-        console.log('survey for:', this.validSurvey)
-    },
 }
 </script>