:recycle: dynamically set responses for roles | correctly stepping through survey with dynamic cmponent and madlib

frontend/src/components/form/button-choice.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .form--step.button-choice
     header
-        p selections {{selected}}
+        p selections {{selected}} {{opts}}
     main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
         button(v-for="op in opts" :class="isSelected(op)" @click="selectOption(op)") {{ op }}
 </template>
@@ -18,6 +18,10 @@ const props = defineProps({
         default: () => ['up', 'down'],
         // default: () => ['up', 'left', 'right', 'down'],
     },
+    prompt: {
+        required: true,
+        type: String
+    },
 })
 
 const selected = ref([])
@@ -32,7 +36,9 @@ const selectOption = optionVal => {
     } else {
         selected.value = selected.value.filter(val => val != optionVal)
     }
-    emit('selected', selected.value)
+    const sel = {}
+    sel[props.prompt] = selected.value[0]
+    emit('selected', sel)
 }
 </script>
 

frontend/src/components/form/button-multi.vue

@@ -1,20 +1,14 @@
 <template lang="pug">
 .form--step.button-multi
-    header.f-row
-        p {{selected.length}} | {{selected.length == opts.length}}
-        p
-            span(v-for="sel in selected") {{ sel }}&nbsp;
-
-    main.f-col(v-for="(op, i) in opts" :class="[{ 'selected': selected.length == i }, `step-${i}`, 'step']")
-        button(v-for="val in op" @click="selectOption(i, val)") {{ val }}
-    main(v-if="opts.length == selected.length").selected
-        button(@click="next") next
+    main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
+        button(v-for="op in opts" :class="isSelected(op)" @click="selectOption(op)" :disabled="selected.includes(op)") {{ op }}
+    button(@click="next") next
 </template>
 
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue'
 
-const emit = defineEmits(['selected', 'next'])
+const emit = defineEmits(['onButtonSelect'])
 
 const props = defineProps({
     opts: {
@@ -25,17 +19,31 @@ const props = defineProps({
             ['left', 'right'],
         ],
     },
+    prompt: {
+        required: true,
+        type: String
+    },
 })
 
+
 const selected = ref([])
 
-const selectOption = (step, optionVal) => {
-    selected.value[step] = optionVal
-    emit('selected', selected.value)
+const isSelected = val => {
+    return selected.value.includes(val) ? 'selected' : ''
+}
+
+const selectOption = optionVal => {
+    if (!selected.value.includes(optionVal)) {
+        selected.value.push(optionVal)
+    } else {
+        selected.value = selected.value.filter(val => val != optionVal)
+    }
 }
 
 const next = () => {
-    emit('next', selected.value)
+    const sel = {}
+    sel[props.prompt] = selected.value
+    emit('selected', sel)
     selected.value = []
 }
 </script>

frontend/src/components/form/input-string.vue

@@ -5,18 +5,18 @@
     main.f-col
         input(v-if="!multiline" v-model="input")
         textarea(v-else cols="50" rows="8" v-model="input")
-        button(@click="next").w-full next
+        button(@click="selectOption").w-full next
 </template>
 
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue'
 
-const emit = defineEmits(['next'])
+const emit = defineEmits(['onButtonSelect'])
 
 const props = defineProps({
     default: {
         required: true,
-        type: Array,
+        type: String,
         default: () => 'start',
     },
     multiline: {
@@ -24,12 +24,18 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    prompt: {
+        required: true,
+        type: String
+    },
 })
 
 const input = ref(props.default)
 
-const next = () => {
-    emit('next', input.value)
+const selectOption = () => {
+    const sel = {}
+    sel[props.prompt] = input.value
+    emit('selected', sel)
 }
 </script>
 

frontend/src/entities/survey/survey.js

@@ -3,7 +3,7 @@ import { _baseRecord } from '..'
 import { surveySchema } from './survey.schema'
 
 class Survey extends _baseRecord {
-    constructor(questionSteps) {
+    constructor(questionSteps, roles) {
         super()
 
         this.type = this.constructor.name.toLowerCase()
@@ -12,10 +12,16 @@ class Survey extends _baseRecord {
         this.steps = [
             ...questionSteps
         ] // ! required
-        
+        this.roleTree = roles
+
         return this
     }
-
+    setRoleResponses(position) {
+        const roleStep = this.steps.filter(step => step.response_key_prompt == 'role')[0]
+        roleStep.responses = this.roleTree[position]
+        console.log(roleStep)
+        console.log(this.roleTree[position])
+    }
     isValid() {
         const validate = surveySchema.validate(this)
 

frontend/src/utils/lang.js

@@ -2,10 +2,11 @@ const DELIMITER = '_'
 
 const stepToComponentMap = {
     name: 'InputString',
-    seeking: 'ButtonMulti',
+    seeking: 'ButtonChoice',
     urgency: 'ButtonChoice',
-    distance: 'ButtonChoice',
+    role: 'ButtonChoice',
     duration: 'ButtonChoice',
+    distance: 'ButtonChoice',
     language: 'ButtonMulti',
 }
 
@@ -14,8 +15,9 @@ const allSteps = {
         name: 'name',
         seeking: 'seeking',
         urgency: 'urgency',
-        distance: 'distance',
+        role: 'role',
         duration: 'duration',
+        distance: 'distance',
         language: 'language',
     }
 }
@@ -77,7 +79,7 @@ possible.usa = {
             'system',
             'test',
         ],
-        seeker: [
+        position: [
             'administrator',
             'analyst',
             'architect',
@@ -86,7 +88,7 @@ possible.usa = {
             'manager',
             'technician',
         ],
-        provider: [
+        candidate: [
             'hiring_manager',
             'recruiter',
         ]

frontend/src/utils/survey.js

@@ -7,7 +7,6 @@ class SurveyFactory {
     }
     async setSteps(langFile) {
         const stepsToProcess = [...Object.values(langFile) ]
-        console.log(stepsToProcess)
         const questions = await fetchQuestionsByProfileId()
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
@@ -25,9 +24,9 @@ class SurveyFactory {
         const unseen = questions.filter(q => !seenIds.includes(q.response_key_id))
         return [...stepsInCommon, ...unseen]
     }
-    async createSurvey(langFile) {
+    async createSurvey(langFile, roleTree) {
         const steps = await this.setSteps(langFile)
-        return new Survey(steps)
+        return new Survey(steps, roleTree)
     }
 }
 

frontend/src/views/Survey.vue

@@ -1,119 +1,48 @@
 <template lang="pug">
 main.f-col.start.w-full
-    ButtonMulti
+    //- 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 }}
+    header.w-full.f-col
+        h3(v-if="!name") hello, what shall i call you?
+        h3(v-if="step == 1") What can i help you with, 
+            span {{ name }}?
+            br
+            span I am seeking a ___________.
+        h3(v-else-if="step == 2") A {{ seeking }} then. You're in the right place.
+            span How would you like to use siimee? 
+            br
+            span I am ________________.
+        h3(v-else-if="[3, 4, 5].includes(step)")
+            span I am a _________. 
+            br
+            span Looking for a ________
+            span  ________ 
+            span in _______.
 
     article.match.w-full
         ul.w-full
-            li(v-if="step == 0")
-                header
-                    p step 1
-                section
-                    input(v-model="name")
-                footer
-                    button(@click="step++").w-full next
-            
-            li(v-if="step == 1")
-                header
-                    p step 1
-                section
-                    p 
-                        span(v-if="name") {{ name }}  
-                        span(v-else) ______________
-                        span .  
-                        span Let's get started on you profile while we verify your account.
-                footer.f-row
-                    button(@click="step--").w-full back
-                    button(@click="step++").w-full next
-            
-            li(v-if="step == 2")
-                header
-                    p step 2
-                section
-                    p
-                        span What are you looking for 
-                        span {{ name }}
-                        span ?
-                footer.f-col.w-full
-                    button(@click="saveNext('position')") a position
-                    button(@click="saveNext('cadidate')") a candidate
-            
-            li(v-if="step == 3")
-                header
-                    p step 3
-                section
-                    p
-                        span {{ seeking }} 
-                        span . 
-                        span You're in the right place. How would you like to use siimee?
-                section
-                    p
-                        span i am 
-                        select
-                            option actively searching
-                            option networking
-                            option exploring
-                footer.f-row
-                    button(@click="step--").w-full back
-                    button(@click="step++").w-full next
-            
-            li(v-if="step == 4")
-                header
-                    p step 4
-                section
-                    p
-                        span i am 
-                        span(v-if="role") a {{ role }}. 
-                        span(v-else) ______________. 
-                section
-                    p
-                        span(v-if="location") Looking for a {{ location }}, 
-                        span(v-else) Looking for a ______________, 
-                        span(v-if="experience") {{ experience }}&nbsp;
-                        span(v-else) ______________ 
-                        span(v-if="position") {{ position }}ing role. 
-                        span(v-else) ______________ role. 
-                
-                footer(v-if="!role").f-row
-                    button(@click="role = 'recruiter'") a recruiter
-                    button(@click="role = 'hiring_manager'") a hiring manager
-                footer.f-row(v-else-if="!location")
-                    button(@click="location = 'remote'") remote
-                    button(@click="location = 'in_person'") in person
-                footer.f-row(v-else-if="location == 'in_person' && zipcode.length > 5")
-                    input(v-model="zipcode")
-                footer.f-row(v-else-if="!experience")
-                    button(@click="experience = 'junior'") junior
-                    button(@click="experience = 'mid-level'") mid-level
-                    button(@click="experience = 'senior'") senior
-                    button(@click="experience = 'staff'") staff
-                footer.f-row(v-else-if="!position")
-                    button(@click="position = 'engineer'") engineering
-                footer.f-row(v-else)
-                    button(@click="step++").w-full next
-
-            li(v-if="step == 5")
-                header
-                    p step 5
-                section
-                    SurveyForm(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
-                footer.f-row
-                    button(@click="step--").w-full back
-                    button(@click="step=0").w-full save
+            template(v-for="(q, i) in profileQuestions" :key="q.response_key_prompt")
+                li(v-if="step == i").f-col
+                    p step: {{ i }}
+                        component(
+                            v-if="componentMap[q.response_key_prompt]"
+                            :is="componentMap[q.response_key_prompt]"
+                            :opts="q.responses"
+                            :prompt="q.response_key_prompt"
+                            @selected="onButtonSelect"
+                        )
+                        div(v-else-if="step >= priorityQuestions.length")
+                            button(@click="step = 0") save
+                    footer.f-row
+                        button(@click="step--").w-full back
         //- SurveyForm(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
     MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
 import { surveyFactory } from '../utils'
-import { allSteps, stepToComponentMap } from '../utils/lang'
+import { allSteps, possible, stepToComponentMap } from '../utils/lang'
 import SurveyForm from '../components/form.vue'
 import ButtonMulti from '../components/form/button-multi.vue'
 import ButtonChoice from '../components/form/button-choice.vue'
@@ -137,6 +66,7 @@ export default {
             role: '',
             experience: '',
             position: '',
+            language: '',
             location: '',
             zipcode: '',
         }
@@ -152,13 +82,21 @@ export default {
         }
     },
     async created() {
-        this.validSurvey = await surveyFactory.createSurvey(allSteps['usa'])
-        console.log('profile:', this.profileQuestions)
+        this.validSurvey = await surveyFactory.createSurvey(allSteps['usa'], possible['usa']['roles'])
     },
     methods: {
-        saveNext(val) {
-            console.log(val)
-            this.seeking = val
+        /**
+         * Set state from promptVal key:value object
+         * from button-coice or button-multi
+         */
+        onButtonSelect(promptVal){
+            console.log('promptVal :', promptVal)
+            for(const [prompt, val] of Object.entries(promptVal)) {
+                this[prompt] = val
+                if(prompt == 'seeking') {
+                    this.validSurvey.setRoleResponses(val)
+                }
+            }
             this.step++
         },
     },
@@ -172,6 +110,13 @@ h1
 main
     padding: 5vh
     display: flex
+    header
+        p
+            color: #666
+            line-height: 1.3em
+        color: #ccc
+        font-style: italic
+        text-align: left
 
 article
     height: 100%
@@ -188,12 +133,6 @@ article
 .form
     border: 1px solid #fff
     width: 100%
-    header
-        color: #ccc
-        font-style: italic
-        p
-            line-height: 1.3em
-            text-align: left
     header, footer, ul
         padding: 1vh
     ul