:wrench: onboarding component subfolder | overriding guards temporarily

backend/db/seeds/04-responses.js

@@ -23,7 +23,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/App.vue

@@ -6,10 +6,7 @@ w-app
         SideBar(@updatePid="setPid" :pid="profile.id.value")
         
     RouterView(
-        v-if="profile.isLoggedIn"
-        :pid="profile.id.value"
         @updatePid="setPid"
-        @show-sidebar="showSidebar = !showSidebar"
     )
 </template>
 
@@ -21,8 +18,8 @@ import TopNav from './components/TopNav.vue'
 import { currentProfile } from './services'
 import { surveyFactory } from './utils'
 
-const DEV_MODE = import.meta.env.VITE_DEV == 'true'
-// const DEV_MODE = false
+// const DEV_MODE = import.meta.env.VITE_DEV == 'true'
+const DEV_MODE = false
 const DEV_PID = 45
 
 export default {

frontend/src/components/PairingButton.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 .pairing-button.w-flex.row
     template(v-if='status == "pristine"')
-        w-button(:class='status')(@click='pass')
+        w-button(:class='status' @click='pass')
             p.pa4.text-upper pass
-        w-button(:class='status')(@click='pair')
+        w-button(:class='status' @click='pair')
             p.pa4.text-upper pair
     template(v-else-if='status == "pending"')
         w-button(:class='status')

frontend/src/components/onboarding/AccountType.vue

@@ -0,0 +1,17 @@
+<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
+</template>
+<script>
+export default {
+    name: 'AccountType',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Aspects.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+form(@submit.prevent="this.$emit('handle-submit')").questionnaire
+    QuestionResponse(v-for="question in aspectQuestions" :question="question")
+    w-button.ma1.grow(type="submit" bg-color="success")
+        w-icon.mr1 wi-check
+        | SUBMIT ANSWERS
+</template>
+<script>
+import QuestionResponse from '../QuestionResponse.vue'
+
+export default {
+    name: 'Aspects',
+    components: {
+        QuestionResponse
+    },
+    props: {
+        aspectQuestions:{
+            required: true,
+            type: Array
+        },
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/CompanyID.vue

@@ -0,0 +1,19 @@
+<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
+</template>
+<script>
+// todo add v-model to input, pass down answers array from parent
+export default {
+    name: 'CompanyID',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Interests.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+h3 Interests
+p What are some interests you would like in your next candidates?
+w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+</template>
+<script>
+export default {
+    name: 'Interests',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/LicensesAndCertifications.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+h3 Licenses & Certifications
+p Are there any licenses and certification requirements?
+w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+</template>
+<script>
+export default {
+    name: 'LicensesAndCertifications',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Location.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+h3 Location
+p Where would you like to select your candidates from?
+w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+</template>
+<script>
+export default {
+    name: 'Location',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Role.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+h3 ACTIVELY SEARCHING
+p What is your role at your company?
+w-select.mt4(
+    :items="[{label: 'RECRUITER'},{label: 'HIRING MANAGER'}]"
+    placeholder="i am")
+w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+</template>
+<script>
+export default {
+    name: 'Role',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Skills.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+h3 RECRUITER
+p What are some skills you are looking for at your company?
+w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") NEXT
+</template>
+<script>
+export default {
+    name: 'Skills',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/Splash.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+.splash-icon(style="width:347px; height:347px; background-color: red;")
+div(style="text-align:center;")
+    w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") GET STARTED
+</template>
+<script>
+export default {
+    name: 'Splash',
+    props: {
+        currentStep:{
+            required: true,
+            type: Number,
+            default: 0
+        }
+    },
+}
+</script>

frontend/src/components/onboarding/index.js

@@ -0,0 +1,21 @@
+import Splash from './Splash.vue'
+import AccountType from './AccountType.vue'
+import CompanyID from './CompanyID.vue'
+import Role from './Role.vue'
+import Skills from './Skills.vue'
+import Location from './Location.vue'
+import Interests from './Interests.vue'
+import LicensesAndCertifications from './LicensesAndCertifications.vue'
+import Aspects from './Aspects.vue'
+
+export default {
+    Splash,
+    AccountType,
+    CompanyID,
+    Role,
+    Skills,
+    Location,
+    Interests,
+    LicensesAndCertifications,
+    Aspects,
+}

frontend/src/main.js

@@ -8,7 +8,8 @@ import components from './wave'
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
-const DEV = import.meta.env.VITE_DEV == 'true'
+// const DEV = import.meta.env.VITE_DEV == 'true'
+const DEV = false
 
 /**
  * Check between route changes for login/timeout

frontend/src/router/guards.js

@@ -10,7 +10,7 @@ const checkLoginStatus = (destination, nextCb) => {
         !currentProfile.isLoggedIn &&
         !currentProfile.isComplete 
     ) {
-        nextCb('survey')
+        nextCb('onboarding')
     } else if(
         destination.meta.requiresCompleteProfile &&
         destination.meta.requiresAuth &&

frontend/src/services/survey.service.js

@@ -32,6 +32,22 @@ const updateSurveyByProfileId = async (surveyResponses, profileId) => {
     })
 }
 
+// const updateSurveyByProfileId = async (surveyResponses, profileId) => {
+//     surveyResponses.forEach(responseKeyIdwithVal => {
+//         const keyId = responseKeyIdwithVal.response_key_id
+//         const val = responseKeyIdwithVal.val
+//         // PATCH
+//         db.patch(`/profile/${profileId}/update/${keyId}`, [
+//             {
+//                 response_id: 2,
+//                 profile_id: profileId,
+//                 response_key_id: keyId,
+//                 val: val,
+//             },
+//         ])
+//     })
+// }
+
 const scoreSurveyByProfileId = async (profileId, maxDistance = 99) => {
     const scoreSurvey = await db.get(
         `/profile/${profileId}/score?max_distance=${maxDistance}`,

frontend/src/utils/onboardingStepComponents.js

@@ -0,0 +1,39 @@
+const OnboardingStepComponents = [
+    {
+        id: 0,
+        component:'Splash',
+    },
+    {
+        id: 1,
+        component:'AccountType',
+    },
+    {
+        id: 2,
+        component:'CompanyID',
+    },
+    {
+        id: 3,
+        component:'Role',
+    },
+    {
+        id: 4,
+        component:'Skills',
+    },
+    {
+        id: 5,
+        component:'Location',
+    },
+    {
+        id: 6,
+        component:'Interests',
+    },
+    {
+        id: 7,
+        component:'LicensesAndCertifications',
+    },
+    {
+        id: 8,
+        component:'Aspects',
+    }
+]
+export default OnboardingStepComponents

frontend/src/views/OnboardingView.vue

@@ -1,20 +1,29 @@
 <template lang="pug">
 main.view--onboarding
-    article
-        form(@submit.prevent="onSubmit").questionnaire
-            QuestionResponse(v-for="question in questions" :question="question" @updated="onUpdate")
-            w-button.ma1.grow(type="submit" bg-color="success")
-                w-icon.mr1 wi-check
-                | SUBMIT ANSWERS
-    MainNav
+    article(style="display: flex;flex-direction: column;align-items: center;")
+        component(
+            :is="onboardingStep.component"
+            :currentStep="currentStep"
+            :aspectQuestions="onboardingStep.component == 'Aspects'? aspectQuestions : null"
+            @go-to-step="goToStep"
+            @handle-submit="onboardingStep.component == 'Aspects'? onSubmit : null"
+        )
+        //- form(@submit.prevent="onSubmit").questionnaire
+        //-     QuestionResponse(v-for="question in questions" :question="question" @updated="onUpdate")
+        //-     w-button.ma1.grow(type="submit" bg-color="success")
+        //-         w-icon.mr1 wi-check
+        //-         | SUBMIT ANSWERS
+    //- MainNav
 </template>
 
 <script>
 import { surveyFactory } from '@/utils'
 import { allSteps, possible } from '@/utils/lang'
+import stepViews from '@/components/onboarding'
+import OnboardingStepComponents from '../utils/onboardingStepComponents'
 
-import QuestionResponse from '../components/QuestionResponse.vue'
-const SCORED = [1, 2, 3, 4, 5, 6]
+// import QuestionResponse from '../components/QuestionResponse.vue'
+const SCORED = [1, 2, 3, 4, 5, 6] // consider expanding + modifying DB table
 const _isScored = id => SCORED.includes(id)
 
 const _makeCategoryFriendly = responseCategory => {
@@ -26,7 +35,7 @@ const _makeCategoryFriendly = responseCategory => {
     return labels
 }
 
-const _formatSteps = steps => {
+const _formatAspectQuestions = steps => {
     return steps
         .map(q => {
             if (!_isScored(q.response_key_id)) return null
@@ -39,14 +48,27 @@ const _formatSteps = steps => {
         .filter(step => step != null)
 }
 
+// import savesurveybyprfileid - call it on submit
+// paginate to save every steps answers
 export default {
     name: 'OnboardingView',
-    components: { QuestionResponse },
+    components: { 
+        ...stepViews,
+        // QuestionResponse 
+        },
     data: () => {
         return {
-            validSurvey: null,
-            questions: [],
             answered: {},
+            aspectQuestions: [],
+            currentStep: 0,
+            onboardingStepComponents: [],
+            validSurvey: null,
+        }
+    },
+    computed : {
+        onboardingStep(){
+            if(!this.onboardingStepComponents.length) return []
+            return this.onboardingStepComponents[this.currentStep]
         }
     },
     async created() {
@@ -54,17 +76,22 @@ export default {
             allSteps['usa'],
             possible['usa']['roles'],
         )
-        this.questions = _formatSteps(survey.steps)
+        this.aspectQuestions = _formatAspectQuestions(survey.steps)
+        this.onboardingStepComponents = OnboardingStepComponents
     },
     methods: {
         onUpdate(payload) {
-            this.answered[payload.id] = payload
+            console.log('payload: ', payload)
+            // this.answered[payload.id] = payload
         },
         onSubmit() {
             Object.values(this.answered).forEach(ans =>
                 console.log(ans.question, ans.answer),
             )
         },
+        goToStep(num){
+            this.currentStep = num
+        },
     },
 }
 </script>