:poop: pre-refactor survery

frontend/src/components/onboarding/Aspects.vue

@@ -1,13 +1,15 @@
 <template lang="pug">
-form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
-p(v-for='question in aspectQuestions')
-    QuestionResponse(
-        :question='question' 
-        @updated='updateRadio'
-        @updateIsAnswered='updateIsAnswered'
-        @update-all='updateAll'
-        v-if='question.isBeingAnswered' 
-    )
+p {{ aspectQuestions }}
+//- form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
+
+//- p(v-for='question in aspectQuestions')
+//-     QuestionResponse(
+//-         :question='question'
+//-         @updated='updateRadio'
+//-         @updateIsAnswered='updateIsAnswered'
+//-         @update-all='updateAll'
+//-         v-if='question.isBeingAnswered'
+//-     )
 </template>
 
 <script>

frontend/src/components/onboarding/FormInput.vue

@@ -1,16 +1,38 @@
 <template lang="pug">
 .form-input
-    span(style='text-align:center;') {{ parsedPrompt.start }}
+    span(style='text-align: center') {{ parsedPrompt.start }}
     br
     br
-    span(style='text-align:center;') {{ parsedPrompt.mid }}
-    input(v-if="question.survey_stage !== 'image' && question.survey_stage !== 'blurb' && question.survey_stage !== 'password'" :placeholder='question.placeholder' type='text' v-model='input')
-    input.pass(v-else-if="question.survey_stage === 'password'" :placeholder='question.placeholder' type='password' v-model='input' style="-webkit-text-security: circle")
-    w-button.ma1.grow(v-else-if="question.survey_stage === 'image'" @click="submitImage") UPLOAD IMAGE
-    textarea(v-else-if="question.survey_stage === 'blurb'" rows="4" cols="50" v-model='input' :placeholder="`${question.placeholder}`")
-    span(style='text-align:center;') {{ parsedPrompt.end }}
-    w-button.ma1.grow(@click="handleSubmit({ question, input })") NEXT
-    
+    span(style='text-align: center') {{ parsedPrompt.mid }}
+    input(
+        :placeholder='question.placeholder'
+        @keyup.enter='handleSubmit({ question, input })'
+        type='text'
+        v-if='question.survey_stage !== "image" && question.survey_stage !== "blurb" && question.survey_stage !== "password"'
+        v-model='input'
+    )
+    input.pass(
+        :placeholder='question.placeholder'
+        @keyup.enter='handleSubmit({ question, input })'
+        style='-webkit-text-security: circle'
+        type='password'
+        v-else-if='question.survey_stage === "password"'
+        v-model='input'
+    )
+    w-button.ma1.grow(
+        @click='submitImage'
+        v-else-if='question.survey_stage === "image"'
+    ) UPLOAD IMAGE
+    textarea(
+        :placeholder='`${question.placeholder}`'
+        @keyup.enter='handleSubmit({ question, input })'
+        cols='50'
+        rows='4'
+        v-else-if='question.survey_stage === "blurb"'
+        v-model='input'
+    )
+    span(style='text-align: center') {{ parsedPrompt.end }}
+    w-button.ma1.grow(@click='handleSubmit({ question, input })') NEXT
 </template>
 <script>
 export default {
@@ -27,7 +49,8 @@ export default {
         parsedPrompt: {},
     }),
     created() {
-        const parsedPromptArr = this.question.response_key_prompt.split('[break]')
+        const parsedPromptArr =
+            this.question.response_key_prompt.split('[break]')
         this.parsedPrompt.start = parsedPromptArr[0]
         this.parsedPrompt.mid = parsedPromptArr[1]
         this.parsedPrompt.end = parsedPromptArr[2]

frontend/src/components/onboarding/QuestionResponse.vue

@@ -1,11 +1,18 @@
 <template lang="pug">
 w-card.question
-    p {{question.question}} 
+    p {{ question }}
     section.radio-buttons.w-flex.row.justify-space-between
-        p(v-for="label in question.labels") {{label}}
-    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
-    w-button.ma1.grow(v-if='question.id !== aspectsCount' @click="updateAnswers") NEXT
-    w-button.ma1.grow(v-else @click="updateAll") SUBMIT ANSWERS
+        p(v-for='label in question.labels') {{ label }}
+    w-radios.w-flex.row.justify-space-between(
+        :items='radioItems'
+        @update:model-value='onUpdate'
+        color='red'
+    )
+    w-button.ma1.grow(
+        @click='handleSubmit'
+        v-if='question.id !== aspectsCount'
+    ) NEXT
+    w-button.ma1.grow(@click='updateAll' v-else) SUBMIT ANSWERS
     p(v-if='noChoiceMade') Tough choices, we know! Just answer to the best of your ability. The team over at Siimee values the answers you provide us so that we can show you results catered to your specific needs.
 </template>
 
@@ -19,35 +26,38 @@ export default {
             required: true,
         },
     },
-    emits: ['updated', 'update-is-answered', 'update-all'],
+    emits: ['updated', 'update-answers', 'update-all'],
     data: () => ({
-        radioItems: [
-            { answer: 1 },
-            { answer: 2 },
-            { answer: 3 },
-            { answer: 4 },
-            { answer: 5 },
-        ],
+        radioItems: [1, 2, 3, 4, 5],
         isAnswered: false,
+        answer: null,
         noChoiceMade: null,
-        aspectsCount: aspectsArr.length
+        aspectsCount: aspectsArr.length,
     }),
     methods: {
-        onUpdate(e) {
+        onUpdate(index) {
             this.isAnswered = true
             this.noChoiceMade = false
-            this.$emit('updated', { ...this.question, answer: e + 1 })
+            this.answer = this.radioItems[index]
+        },
+        handleSubmit() {
+            const payload = {
+                question: this.question,
+                input: this.answer,
+            }
+            console.log('updated payload :>> ', payload)
+            this.$emit('update-answers', payload)
         },
         updateAnswers() {
-            this.isAnswered ?
-            this.$emit('update-is-answered', this.question.id) :
-            this.noChoiceMade = true
+            this.isAnswered
+                ? this.$emit('update-answers', this.question)
+                : (this.noChoiceMade = true)
         },
         updateAll() {
-            this.isAnswered ?
-            this.$emit('update-all') :
-            this.noChoiceMade = true
-        }
+            this.isAnswered
+                ? this.$emit('update-all')
+                : (this.noChoiceMade = true)
+        },
     },
 }
 </script>

frontend/src/components/onboarding/index.js

@@ -10,6 +10,7 @@ import Aspects from './Aspects.vue'
 import FormInput from './FormInput.vue'
 import FormTags from './FormTags.vue'
 import FormDropdown from './FormDropdown.vue'
+import QuestionResponse from './QuestionResponse.vue'
 
 export default {
     Splash,
@@ -24,4 +25,5 @@ export default {
     FormDropdown,
     FormTags,
     FormInput,
+    QuestionResponse,
 }

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

@@ -1,31 +0,0 @@
-import Joi from 'joi'
-
-/**
- * answers schema object
- */
-const answersSchema = {
-    type: 'object',
-    properties: Joi.object().keys({
-        name: Joi.string().required(),
-        email: Joi.string().email({ minDomainSegments: 2, tlds: false }),
-        // TODO: Refine password regex to have more secure requirements
-        password: Joi.string().min(10).max(30).pattern(new RegExp('[a-zA-Z0-9]+')),
-        // TODO: Change if going international (only works in usa)
-        zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
-        seeking: Joi.string(),
-        urgency: Joi.string(),
-        presence: Joi.string(),
-        duration: Joi.string(),
-        pronouns: Joi.string(),
-        language: Joi.string(),
-        image: Joi.any(),
-        distance: Joi.string(),
-        blurb: Joi.string(),
-        aspects: Joi.array().items(Joi.number().allow(null))
-    }),
-    validate(instance) {
-        return this.properties.validate(instance)
-    },
-}
-
-export { answersSchema }

frontend/src/entities/survey/survey.js

@@ -1,7 +1,7 @@
 /** @module survey/survey */
 import { _baseRecord } from '../index.js'
 import { surveySchema } from './survey.schema.js'
-import { answersSchema } from './survey.answer.schema.js'
+import { answerValidator } from './survey.answer.validator.js'
 import { aspectsArr } from '../../utils/lang.js'
 
 const SCORED = aspectsArr
@@ -37,15 +37,25 @@ class Survey extends _baseRecord {
         /**  Fields */
         this.steps = [...questionSteps] // ! required
         this.aspectQuestions = _formatAspectQuestions(this.steps)
-        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
+        console.log(
+            'this.aspectQuestions: ',
+            JSON.stringify(this.aspectQuestions),
+        )
     }
 
-    validateAnswer(answer) {
-        const validate = answersSchema.validate(answer)
+    validateAnswer(payload) {
+        const { question, input } = payload
+
+        // Continue our ugly hacks
+        const validationType =
+            question.category == 'aspect'
+                ? question.category
+                : question.survey_stage
+        const validate = answerValidator[validationType].validate(input)
         if (validate.error) {
             console.error(`error: ${validate.error}`)
         }
-        return !validate.error ? true: false
+        return !validate.error ? true : false
     }
 
     isValid() {

frontend/src/utils/lang.js

@@ -7,11 +7,17 @@ const allSteps = {
     usa: {
         splash: 'splash',
         name: 'name',
-        email: 'email',
+        aspect01: 'aspect-1',
+        aspect02: 'aspect-2',
+        aspect03: 'aspect-3',
         password: 'password',
         zipcode: 'zipcode',
         seeking: 'seeking',
         urgency: 'urgency',
+        aspect04: 'aspect-4',
+        aspect05: 'aspect-5',
+        aspect06: 'aspect-6',
+        email: 'email',
         presence: 'presence',
         duration: 'duration',
         pronouns: 'pronouns',
@@ -19,7 +25,6 @@ const allSteps = {
         image: 'image',
         distance: 'distance',
         blurb: 'blurb',
-        aspects: 'aspects',
         // experience: 'experience',
         // roles: 'role',
     },
@@ -27,6 +32,7 @@ const allSteps = {
 
 const promptToComponent = {
     splash: 'Splash',
+    aspect: 'QuestionResponse', // Special hacky case
     name: 'FormInput',
     email: 'FormInput',
     password: 'FormInput',
@@ -40,7 +46,6 @@ const promptToComponent = {
     image: 'FormInput',
     distance: 'FormInput',
     blurb: 'FormInput',
-    aspects: 'Aspects',
     // experience: 'FormTags',
     // role: 'FormDropdown',
 }
@@ -91,7 +96,10 @@ possible.usa = {
             'analyst',
             'architect',
             'developer',
-            'engineer', 'manager', 'technician', ],
+            'engineer',
+            'manager',
+            'technician',
+        ],
         candidate: ['hiring_manager', 'recruiter'],
     },
     pronouns: ['she/her', 'she/they', 'he/him', 'he/they', 'they/them'],
@@ -103,20 +111,28 @@ possible.usa = {
 // TODO: set up a separate object of similar prompts based off of
 // employer/employee, right now is generic
 const promptOverrides = {
-    name: "First things first, could you provide us with your name? [break] I am called [break] when others address me.",
+    name: 'First things first, could you provide us with your name? [break] I am called [break] when others address me.',
     email: "In order for others to reach out to you on Siimee, you'll need to provide your email address.[break]When reaching out to me, [break] is my preferred email.",
     password:
         "So far so good! Next we'll need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters.[break]My [break] is a very secure passcode that only I will have access to!",
-    zipcode: "Looking good! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area.[break]My zip code, [break] is the general area where I wish to see results in.",
-    seeking: "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?[break] I am a [break] seeking an employer/employee.",
+    zipcode:
+        "Looking good! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area.[break]My zip code, [break] is the general area where I wish to see results in.",
+    seeking:
+        "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?[break] I am a [break] seeking an employer/employee.",
     blurb: "Please provide us with a short blurb about yourself. What's your backstory?[break] My origin story starts like this:[break]",
     image: "Hey, you're almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:",
-    pronouns: 'When others refer to you, what pronouns do you prefer they use?[break]I prefer to be called [break] when others refer to me.',
-    urgency: "How soon do you need the position filled or you need to be employed? [break]I am currently [break] when it comes to employment opportunities right now.",
-    presence: "Would you prefer remote, hybrid, in-person work?[break] Personally I'd prefer a [break] job right now. It's just what works best for me.",
-    duration: "What kind of duration would you prefer? Are you looking for part-time, full-time, other?[break] Currently, I'm looking for a [break] job at this time.",
-    language: "What language is your native language?[break] I consider [break] language as my native language.",
-    distance: "What distance from your home are you looking to work in?[break] Preferably, I'd like to work [break] from my place of residence.",
+    pronouns:
+        'When others refer to you, what pronouns do you prefer they use?[break]I prefer to be called [break] when others refer to me.',
+    urgency:
+        'How soon do you need the position filled or you need to be employed? [break]I am currently [break] when it comes to employment opportunities right now.',
+    presence:
+        "Would you prefer remote, hybrid, in-person work?[break] Personally I'd prefer a [break] job right now. It's just what works best for me.",
+    duration:
+        "What kind of duration would you prefer? Are you looking for part-time, full-time, other?[break] Currently, I'm looking for a [break] job at this time.",
+    language:
+        'What language is your native language?[break] I consider [break] language as my native language.',
+    distance:
+        "What distance from your home are you looking to work in?[break] Preferably, I'd like to work [break] from my place of residence.",
 }
 
 const inputPlaceholders = {
@@ -131,17 +147,26 @@ const inputPlaceholders = {
 const invalidInputPrompts = {
     name: "So sorry, but what's your name?",
     email: "It looks like that email isn't valid, try en email that is formatted like so: joe@joe.com",
-    password: "That password doesn't fit our requirements, please follow the above instructions to generate a secure password.",
-    zipcode: "Oops! That isn't a recognized zipcode, please enter a 5 digit zipcode like: 97869",
-    blurb: "Whoa! Cool story. Unfortunately your backstory is either too long or too short. Please tell us a bit about yourself between 1 and 100 characters.",
+    password:
+        "That password doesn't fit our requirements, please follow the above instructions to generate a secure password.",
+    zipcode:
+        "Oops! That isn't a recognized zipcode, please enter a 5 digit zipcode like: 97869",
+    blurb: 'Whoa! Cool story. Unfortunately your backstory is either too long or too short. Please tell us a bit about yourself between 1 and 100 characters.',
     image: "It appears you didn't upload an image. Please provide Siimee with an image in case you want to show others what you look like.",
-    seeking: "In order to provide you with the best results, Siimee will need to know whether you're an employer looking to fill a position, or a candidate looking for an employment. Please take a look at our above options and choose one.",
-    pronouns: "Ensuring that others on our platform are aware of what your preferred pronouns are is important to us. Please choose from one of the above options.",
-    urgency: "Looks like you left this field blank. Take a look at our provided options and tell us when you'd like be employed.",
-    presence: "Hold up! So sorry to put a pause here, but it looks like you haven't chosen whether to work remotely or in person. No worries, if you're unsure, just choose the 'flexible' option.",
-    duration: "Looks like you haven't filled out what kind of work you're most interested in. As in, part-time, full-time. Take a look at our above options and choose whatever feels right for you right now. You can always edit them later!",
-    language: "We try our best to provide results in the language of your choosing. ¿Prefieres ver resultados en español? Or would you prefer to see results in english?",
-    distance: "Whoa! You either left this field blank or tried to input an astronomically large distance you'd like to see results from. Please input a distance you'd like to see results in.",
+    seeking:
+        "In order to provide you with the best results, Siimee will need to know whether you're an employer looking to fill a position, or a candidate looking for an employment. Please take a look at our above options and choose one.",
+    pronouns:
+        'Ensuring that others on our platform are aware of what your preferred pronouns are is important to us. Please choose from one of the above options.',
+    urgency:
+        "Looks like you left this field blank. Take a look at our provided options and tell us when you'd like be employed.",
+    presence:
+        "Hold up! So sorry to put a pause here, but it looks like you haven't chosen whether to work remotely or in person. No worries, if you're unsure, just choose the 'flexible' option.",
+    duration:
+        "Looks like you haven't filled out what kind of work you're most interested in. As in, part-time, full-time. Take a look at our above options and choose whatever feels right for you right now. You can always edit them later!",
+    language:
+        'We try our best to provide results in the language of your choosing. ¿Prefieres ver resultados en español? Or would you prefer to see results in english?',
+    distance:
+        "Whoa! You either left this field blank or tried to input an astronomically large distance you'd like to see results from. Please input a distance you'd like to see results in.",
 }
 
 export {

frontend/src/utils/survey.js

@@ -1,6 +1,14 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
-import { promptOverrides, promptToComponent, inputPlaceholders, invalidInputPrompts ,possible, aspectsArr } from './lang.js'
+import {
+    allSteps,
+    promptOverrides,
+    promptToComponent,
+    inputPlaceholders,
+    invalidInputPrompts,
+    possible,
+    aspectsArr,
+} from './lang.js'
 
 /**
  * Make a step from match or step information
@@ -16,6 +24,12 @@ const formatStep = (match, step) => {
         response_key_prompt: match ? match.response_key_prompt : step,
         response_key_description: match ? match.response_key_description : null,
     }
+    // Embarassing hack
+    const uglyMatch = step.split('-')
+    if (uglyMatch.length > 1 && uglyMatch[0] == 'aspect') {
+        responseKey.aspect = match.response_key_category
+        responseKey.category = 'aspect'
+    }
     return {
         ...responseKey,
         responses: responsesByCategory[step] ? responsesByCategory[step] : [],
@@ -23,11 +37,21 @@ const formatStep = (match, step) => {
 }
 const associateWithComponent = responseKeyLike => {
     let component = promptToComponent[responseKeyLike.response_key_prompt]
+    // Embarassing hack
+    if (responseKeyLike.category == 'aspect') {
+        component = promptToComponent[responseKeyLike.category]
+    }
     return { ...responseKeyLike, component }
 }
 
 const hasMatch = (step, inArray) => {
-    return inArray.find(q => q.response_key_prompt == step)
+    const uglyMatch = step.split('-')
+    // Embarassing hack
+    if (uglyMatch.length > 1 && uglyMatch[0] == 'aspect') {
+        return inArray.find(q => q.response_key_id == uglyMatch[1])
+    } else {
+        return inArray.find(q => q.response_key_prompt == step)
+    }
 }
 
 class SurveyFactory {
@@ -43,16 +67,23 @@ class SurveyFactory {
             if (match) {
                 seenIds.push(match.response_key_id)
             }
+            // Reformat something from the db into something the gui likes
             const responseKeyLike = formatStep(match, step)
+
+            // Lookup a matching component
             const withComponent = associateWithComponent(responseKeyLike)
 
             // Mutate the object with extra stuff
+            const langStub = responseKeyLike.response_key_prompt
+            withComponent.survey_stage = langStub
             if (promptOverrides[responseKeyLike.response_key_prompt]) {
-                const langStub = responseKeyLike.response_key_prompt
                 withComponent.response_key_prompt = promptOverrides[langStub]
                 withComponent.placeholder = inputPlaceholders[langStub]
                 withComponent.invalidInputPrompt = invalidInputPrompts[langStub]
-                withComponent.survey_stage = langStub
+            } else {
+                console.warn(
+                    `WARN: ${withComponent.survey_stage} must have promptOverride`,
+                )
             }
 
             return withComponent
@@ -61,7 +92,7 @@ class SurveyFactory {
         let unseen = this.questionsFromDb.filter(
             q =>
                 !seenIds.includes(q.response_key_id) &&
-                aspectsArr.includes(q.response_key_id)
+                aspectsArr.includes(q.response_key_id),
         )
         return [...stepsInCommon, ...unseen]
     }
@@ -73,7 +104,7 @@ class SurveyFactory {
             console.error(err)
         }
     }
-    async createSurvey(langFile, roleTree) {
+    async createSurvey(langFile = allSteps['usa'], roleTree) {
         if (!this.questionsFromDb.length) {
             const res = await this.getQuestions()
             console.warn(

frontend/src/views/OnboardingView.vue

@@ -7,12 +7,11 @@ main.view--onboarding
         .answers(v-for='(value, key) in answered')
             span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
             span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
-            
-        h3(v-if="currentStep == 1") Welcome to Siimee Onboarding! Let's get started!
+
+        //- h3(v-if='currentStep == 1') Welcome to Siimee Onboarding! Let's get started!
         br
         .step(v-for='(step, i) in survey.steps')
             component(
-                :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
                 :is='step.component'
                 :question='step'
                 @handle-submit='onSubmit'
@@ -26,7 +25,7 @@ main.view--onboarding
             p {{ survey.steps[currentStep].invalidInputPrompt }}
 
         footer
-            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length -2 }} survey steps
+            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length - 2 }} survey steps
 
     article(v-else)
         SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
@@ -34,7 +33,6 @@ main.view--onboarding
 
 <script>
 import { surveyFactory } from '@/utils'
-import { allSteps } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
 import SurveyCompleteView from './SurveyCompleteView.vue'
 
@@ -55,7 +53,7 @@ export default {
         invalidResponse: false,
     }),
     async created() {
-        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
+        this.survey = await surveyFactory.createSurvey()
     },
     methods: {
         onSubmit() {
@@ -72,13 +70,13 @@ export default {
                 const k = payload.question.survey_stage
                 this.answered[k] = payload.input
 
-                if (!this.survey.validateAnswer(this.answered)) {
+                if (!this.survey.validateAnswer(payload)) {
                     this.invalidResponse = true
                     return
                 }
 
                 // once validated, don't log password in answered object
-                this.answered[k] = k === 'password' ? undefined : payload.input 
+                this.answered[k] = k === 'password' ? undefined : payload.input
                 console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
                 if (k === 'aspects') return
             }