:wrench WIP onboarding answer collection | dynamic tag list

backend/db/seeds/04-responses.js

@@ -28,7 +28,7 @@ exports.seed = async knex => {
     for (let i = 1; i <= len; i += 1) {
         responsesToPush.push(responses.shift())
         if (i % batchSize === 0 || i > responses.length) {
-            await knex('responses').insert(responsesToPush)
+            // await knex('responses').insert(responsesToPush)
             responsesToPush = []
         }
     }

frontend/src/components/DynamicTagList.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+.ListControls(style="display:flex; flex-direction:row;")
+    input(type="text" :placeholder='`Add ${placeholder}...`' v-model="newTag")
+    w-button.ma1(@click="addTag") +
+TagList(:tags="mutableTags")
+</template>
+<script>
+import TagList from './TagList.vue'
+export default {
+    name: 'DynamicTagList',
+    components:{
+        TagList,
+    },
+    props:{
+        tags: {
+            required: true,
+            type: Array,
+        },
+        placeholder:{
+            required: true,
+            type: String,
+        }
+    },
+    data() {
+        return {
+            newTag: null,
+            mutableTags: this.tags,
+        }    
+    },
+    methods:{
+        addTag(){
+            if(!this.newTag){
+                console.warn('Type a new tag before adding')
+                return
+            }
+            this.mutableTags.push(this.newTag)
+        }
+    }
+}
+</script>

frontend/src/components/onboarding/AccountType.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
 h3 {Name}, let's get started on your profile while we verify your account
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") JOBS
+//- w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
+w-button.ma1.grow(@click="handleSubmit('candidates')") CANDIDATES
+w-button.ma1.grow(@click="handleSubmit('jobs')") JOBS
 </template>
 <script>
 export default {
@@ -13,5 +14,16 @@ export default {
             default: 0
         }
     },
+    emits: ['go-to-step', 'update-answers'],
+    methods: {
+        handleSubmit(answer){
+            let payload = {
+                key: 'AccountType',
+                value: answer
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        }
+    }
 }
 </script>

frontend/src/components/onboarding/CompanyID.vue

@@ -1,11 +1,10 @@
 <template lang="pug">
 h3 Company ID
 p PLEASE ENTER YOUR COMPANY ID#:
-input(type="text" placeholder="Get this from your admin.")
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+input(type="text" placeholder="Get this from your admin." v-model="companyID")
+w-button.ma1.grow(@click="handleSubmit") NEXT
 </template>
 <script>
-// todo add v-model to input, pass down answers array from parent
 export default {
     name: 'CompanyID',
     props: {
@@ -15,5 +14,19 @@ export default {
             default: 0
         }
     },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        companyID: null, 
+    }),
+    methods: {
+        handleSubmit(){
+            let payload = {
+                key: 'CompanyID',
+                value: this.companyID
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        }
+    }
 }
 </script>

frontend/src/components/onboarding/Interests.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
 h3 Interests
 p What are some interests you would like in your next candidates?
+DynamicTagList(:tags="interests" :placeholder="'interest'")
 w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Interests',
+    components:{
+        DynamicTagList
+    },
     props: {
         currentStep:{
             required: true,
@@ -13,5 +18,8 @@ export default {
             default: 0
         }
     },
+    data: () => ({
+        interests: []
+    })
 }
 </script>

frontend/src/components/onboarding/LicensesAndCertifications.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
 h3 Licenses & Certifications
 p Are there any licenses and certification requirements?
+DynamicTagList(:tags="licensesAndCertifications" :placeholder="'requirement'")
 w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'LicensesAndCertifications',
+    components:{
+        DynamicTagList
+    },
     props: {
         currentStep:{
             required: true,
@@ -13,5 +18,8 @@ export default {
             default: 0
         }
     },
+    data: () => ({
+        licensesAndCertifications: []
+    })
 }
 </script>

frontend/src/components/onboarding/Location.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
 h3 Location
 p Where would you like to select your candidates from?
+DynamicTagList(:tags="locations" :placeholder="'location'")
 w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Location',
+    components:{
+        DynamicTagList
+    },
     props: {
         currentStep:{
             required: true,
@@ -13,5 +18,8 @@ export default {
             default: 0
         }
     },
+    data: () => ({
+        locations: []
+    })
 }
 </script>

frontend/src/components/onboarding/Role.vue

@@ -2,9 +2,10 @@
 h3 ACTIVELY SEARCHING
 p What is your role at your company?
 w-select.mt4(
-    :items="[{label: 'RECRUITER'},{label: 'HIRING MANAGER'}]"
+    v-model="selected"
+    :items="items"
     placeholder="i am")
-w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+w-button.ma1.grow(@click="handleSubmit") NEXT
 </template>
 <script>
 export default {
@@ -16,5 +17,23 @@ export default {
             default: 0
         }
     },
+    data: () => ({
+        items: [{label: 'RECRUITER'},{label: 'HIRING MANAGER'}],
+        selected: null,
+    }),
+    methods: {
+        handleSubmit(){
+            if(!this.selected) {
+                console.warn('Please select a role.')
+                return
+            } 
+            let payload = {
+                key: 'Role',
+                value: this.selected
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        }
+    }
 }
 </script>

frontend/src/components/onboarding/Skills.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
 h3 RECRUITER
 p What are some skills you are looking for at your company?
+DynamicTagList(:tags="skills" :placeholder="'skill'")
 w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
 </template>
 <script>
+import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Skills',
+    components:{
+        DynamicTagList
+    },
     props: {
         currentStep:{
             required: true,
@@ -13,5 +18,8 @@ export default {
             default: 0
         }
     },
+    data: () => ({
+        skills: []
+    })
 }
 </script>

frontend/src/views/HomeView.vue

@@ -15,7 +15,6 @@ main.view--home
 <script>
 import 'wave-ui/dist/wave-ui.css'
 import ProfileCardList from '../components/ProfileCardList.vue'
-import TagList from '../components/TagList.vue'
 import AspectBar from '../components/AspectBar.vue'
 import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
@@ -57,7 +56,6 @@ export default {
     components: {
         ProfileCardList,
         AspectBar,
-        TagList,
         SummaryBar,
         PairingButton,
     },

frontend/src/views/OnboardingView.vue

@@ -7,8 +7,8 @@ main.view--onboarding
             :is='onboardingStep.component'
             @go-to-step='goToStep'
             @handle-submit='onboardingStep.component == "Aspects" ? onSubmit : null'
+            @update-answers="updateAnswers"
         )
-    //- MainNav
 </template>
 
 <script>
@@ -17,7 +17,7 @@ import { allSteps, possible } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
 import OnboardingStepComponents from '../utils/onboardingStepComponents'
 
-const SCORED = [1, 2, 3, 4, 5, 6] // consider expanding + modifying DB table
+const SCORED = [1, 2, 3, 4, 5, 6] 
 const _isScored = id => SCORED.includes(id)
 
 const _makeCategoryFriendly = responseCategory => {
@@ -71,10 +71,6 @@ export default {
         this.onboardingStepComponents = OnboardingStepComponents
     },
     methods: {
-        onUpdate(payload) {
-            console.log('payload: ', payload)
-            // this.answered[payload.id] = payload
-        },
         onSubmit() {
             Object.values(this.answered).forEach(ans =>
                 console.log(ans.question, ans.answer),
@@ -83,6 +79,10 @@ export default {
         goToStep(num) {
             this.currentStep = num
         },
+        updateAnswers(payload){
+            this.answered[payload.key] = payload.value
+            // console.log('this.answered: ', this.answered)
+        }
     },
 }
 </script>