:recycle: total reorg of survey questions | redid mock data for better detail

backend/db/data-generator/mock.js

             tag_description: 'verified',
             is_active: true,
         },
+        {
+            tag_id: 3,
+            tag_category: 'reveal',
+            tag_description: 'pronoun',
+            is_active: true,
+        },
+        {
+            tag_id: 4,
+            tag_category: 'reveal',
+            tag_description: 'image',
+            is_active: true,
+        },
+        {
+            tag_id: 5,
+            tag_category: 'reveal',
+            tag_description: 'blurb',
+            is_active: true,
+        },
+        {
+            tag_id: 6,
+            tag_category: 'reveal',
+            tag_description: 'urgency',
+            is_active: true,
+        },
     ],
     tag_associations: [
         {
         },
         {
             tag_association_id: 4,
-            profile_id: 5,
+            profile_id: 45,
             membership_id: null,
             tag_id: 1,
             is_deleted: false,
         },
+        {
+            tag_association_id: 5,
+            profile_id: 45,
+            membership_id: 1,
+            tag_id: 4,
+            is_deleted: false,
+        },
+        {
+            tag_association_id: 6,
+            profile_id: 45,
+            membership_id: 1,
+            tag_id: 5,
+            is_deleted: false,
+        },
+        {
+            tag_association_id: 7,
+            profile_id: 2,
+            membership_id: 1,
+            tag_id: 5,
+            is_deleted: false,
+        },
     ],
     response_keys: [
         {
             response_key_id: 1,
             response_key_category: 'grit',
-            response_key_prompt: 'what is your name',
+            response_key_prompt: 'can you power through adversity',
             response_key_description: null,
         },
         {
             response_key_id: 2,
             response_key_category: 'openness',
-            response_key_prompt: 'what is your favorite color',
+            response_key_prompt: 'are you open with your emotions with everyone',
             response_key_description: null,
         },
         {
             response_key_id: 3,
             response_key_category: 'bravery',
-            response_key_prompt: 'what is your quest',
+            response_key_prompt: 'do you speak-up when you feel something is wrong',
             response_key_description: null,
         },
         {
             response_key_id: 4,
             response_key_category: 'empathy',
             response_key_prompt:
-                'what is the average flight speed of an unladen swallow',
+                'do you stop to help others when they are struggling',
             response_key_description: null,
         },
         {
             response_key_id: 5,
             response_key_category: 'honesty',
-            response_key_prompt: 'what is your favorite color',
+            response_key_prompt: 'when telling a story do you exaggerate for dramatic effect',
             response_key_description: null,
         },
         {
             response_key_id: 6,
             response_key_category: 'respect',
-            response_key_prompt: 'what kind of schedule are you looking for',
+            response_key_prompt: 'do you treat difficult people as well as you treat your close friends',
             response_key_description: null,
         },
         {
             response_key_id: 7,
             response_key_category: 'profile',
-            response_key_prompt: 'what is your zip code',
+            response_key_prompt: 'zipcode',
             response_key_description: null,
         },
         {
         {
             response_key_id: 10,
             response_key_category: 'profile',
-            response_key_prompt: 'distance',
+            response_key_prompt: 'duration',
             response_key_description: null,
         },
         {
             response_key_id: 11,
             response_key_category: 'profile',
-            response_key_prompt: 'duration',
+            response_key_prompt: 'presence',
             response_key_description: null,
         },
         {
             response_key_prompt: 'role',
             response_key_description: null,
         },
+        {
+            response_key_id: 15,
+            response_key_category: 'profile',
+            response_key_prompt: 'pronouns',
+            response_key_description: null,
+        },
+        {
+            response_key_id: 16,
+            response_key_category: 'profile',
+            response_key_prompt: 'distance',
+            response_key_description: null,
+        },
     ],
     responses: [],
-    memberships: [],
-    groupings: [],
+    memberships: [
+        {
+            membership_id: 1,
+            profile_id: 45,
+            grouping_id: 1,
+            membership_type: 'participant',
+            can_edit: 0,
+            is_active: 1,
+        },
+        {
+            membership_id: 2,
+            profile_id: 2,
+            grouping_id: 1,
+            membership_type: 'participant',
+            can_edit: 0,
+            is_active: 1,
+        },
+        {
+            membership_id: 3,
+            profile_id: 45,
+            grouping_id: 2,
+            membership_type: 'participant',
+            can_edit: 0,
+            is_active: 1,
+        },
+        {
+            membership_id: 4,
+            profile_id: 3,
+            grouping_id: 2,
+            membership_type: 'participant',
+            can_edit: 0,
+            is_active: 0,
+        }
+    ],
+    groupings: [
+        {
+            grouping_id: 1,
+            grouping_name: '1654664154.291_45_2',
+            grouping_type: 'match',
+        },
+        {
+            grouping_id: 2,
+            grouping_name: '1654664154.291_45_3',
+            grouping_type: 'match',
+        }
+    ],
     messages: [],
     match_queues: [
         {
         {
             match_queue_id: 2,
             profile_id: 45,
-            target_id: 2,
+            target_id: 5,
             is_deleted: false,
         },
         {
             match_queue_id: 3,
             profile_id: 45,
-            target_id: 3,
+            target_id: 6,
+            is_deleted: false,
+        },
+        {
+            match_queue_id: 4,
+            profile_id: 45,
+            target_id: 7,
+            is_deleted: false,
+        },
+        {
+            match_queue_id: 5,
+            profile_id: 45,
+            target_id: 8,
+            is_deleted: false,
+        },
+        {
+            match_queue_id: 6,
+            profile_id: 45,
+            target_id: 9,
+            is_deleted: false,
+        },
+        {
+            match_queue_id: 7,
+            profile_id: 2,
+            target_id: 4,
+            is_deleted: false,
+        },
+        {
+            match_queue_id: 8,
+            profile_id: 2,
+            target_id: 10,
             is_deleted: false,
         },
     ],

backend/lib/routes/notification/index.js

         auth: false,
         cors: true,
         handler: async (request, h) => {
+            const { profile_id } = request.params
             const input = new PassThrough({ objectMode: true })
             const eventType = 'stonk'
 
-            const msg = { name: 'BDGRS', price: (500 + Math.floor(Math.random() * 100)).toString(), order: null }
+            const msg = { profile_id, name: 'BDGRS', price: (500 + Math.floor(Math.random() * 100)).toString(), order: null }
 
             // Write to the input stream
             setInterval(() => {
 
             // h.event() Added at plugin registration
             // h is the toolkit
-            return h.event(input, h, { event: eventType })
+            const streamOptions = { event: `${profile_id}.${eventType}` }
+            return h.event(input, h, streamOptions)
         },
 
         /** Validate based on validators object */

backend/lib/services/notification.js

         //     stream = new Transformer(streamOptions, false)
         //     event.pipe(stream)
         // }
+        console.log('streamOptions :', streamOptions)
         return h.response(active)
             .header('content-type', 'text/event-stream')
             .header('content-encoding', 'identity')

frontend/src/App.vue

         */
         if(DEV_MODE) { this.setPid(DEV_PID) }
 
-        this.setupChatter()
-        this.setupToaster()
+        if(currentProfile.isLoggedIn()) {
+            console.warn(`setting up Chatter and Toaster for ${this.getPid}...`)
+            this.setupChatter()
+            this.setupToaster()
+        }
         console.log('---')
     },
     methods: {
          * For push notifications and chat
          */
         setupToaster() {
-            const t = new StonkAlert(this.pid)
+            const t = new StonkAlert(this.getPid)
         },
         setupChatter() {
             const c = new Chatter()
     display: flex
     flex-direction: row
     text-align: center
-    color: $primary
+    color: $light
     font-family: $sans
     background-color: $secondary
     overflow-x: hidden

frontend/src/components/ProfileCardList.vue

                     :style="{ 'background-image': `url(${profile.avatar})` }"
                 )
                 .card__content
-                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
+                    button(@click="view(profile.pid)").p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
 </template>
 
 <script setup>
 // AHP Button behavior
 
 const accept = async () => {
-    console.log('accepted aka do NOT reinsert')
     // need to pass these arguments (profileId, targetId, status)
     // the url structure is
     // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
     // TODO: next step is grouping/membership
     const checkMembership = await fetchMembershipsByProfileId(profileId)
     if (!checkMembership.length) {
-        console.log('Make membership')
         postMembershipByProfileId({ profileId, targetId })
     }
     emit('reload')
 }
 const view = pid => {
-    router.push({
-        name: 'ProfileView',
-        params: { pid },
-    })
+    router.push({ path: `/matches/${pid}` })
 }
 const pass = () => {
-    console.log('passed aka do reinsert')
     // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=true`)
     const profileId = props.pid
     const targetId = props.profiles[0].pid

frontend/src/router/index.js

         name: 'MatchesView',
         meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
+    {
+        path: '/matches/:pid',
+        component: ProfileView,
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
+    },
     {
         path: `/survey`,
         component: SurveyView,

frontend/src/services/login.service.js

         // Make reactive with vue observer
         this.id = ref(null)
 
-        this.matches = []
         this.responses = []
+        this.tags = []
     }
     isLoading() {
         return this._loading
     isComplete() {
         return this.responses.length == surveyFactory.questions.length
     }
-    hasMatches() {
-        return this.matches.length && this.matches.length > 0
-    } 
     hasResponses() {
         return this.responses.length && this.responses.length > 0
     } 
         return this.id.value
     }
     logout() { this.id.value = null }
+    
+    async getTags() {
+        this.tags = []
+        return this.tags
+    }
 
     async getResponses() {
         try {

frontend/src/services/notification.service.js

         super(profileId)
 
         this.stonks = {}
-        this.listenFor('stonk', message => {
+        this.listenFor(`${profileId}.stonk`, message => {
             const parsed = JSON.parse(message.data)
             this.stonks[parsed.name] = parsed
             console.log('updated:', this.stonks)

frontend/src/services/survey.service.js

  * @returns {array} instantiated Profile objects (see: /entites/profile)
  */
 const fetchQuestions = async () => {
-    return await db.get(`/survey/questions`)
+    const questions = await db.get(`/survey/questions`)
+    // Add responses to match the format from the survery factory
+    return questions.map(q => {
+        q.responses = !q.responses ? [] : q.responses
+        return q
+    })
 }
 
 const saveSurveyByProfileId = async (surveyResponses, profileId) => {

frontend/src/sss/partials/_typography.sss

 
 h1
     font-size: $ms-5
-    line-height: $ms-4
+    line-height: $ms-5
 h2
     font-size: $ms-3
-    line-height: $ms-2
+    line-height: $ms-3
 h3
     font-size: $ms-2
-    line-height: $ms-1
+    line-height: $ms-2
 h4
     font-size: $ms-1
-    line-height: $ms-0
+    line-height: $ms-2
 p
     font-size: $ms-1
-    line-height: $ms-0
+    line-height: $ms-2
 
 .t
     &-center

frontend/src/utils/lang.js

     experience: 'ButtonChoice',
     role: 'ButtonChoice',
     duration: 'ButtonChoice',
-    distance: 'ButtonChoice',
+    presence: 'ButtonChoice',
     language: 'ButtonMulti',
+    pronouns: 'ButtonMulti',
+    image: 'InputString',
+    zipcode: 'InputString',
+    blurb: 'InputString',
+    distance: 'InputRange',
 }
-
+// TODO: Combine these two
 const allSteps = {
     usa: {
         name: 'name',
+        pronouns: 'pronouns',
         seeking: 'seeking',
         urgency: 'urgency',
         experience: 'experience',
-        role: 'role',
+        roles: 'role',
         duration: 'duration',
-        distance: 'distance',
+        presence: 'presence',
         language: 'language',
+        zipcode: 'zipcode',
+        distance: 'distance',
+        blurb: 'blurb',
+        image: 'image',
+    }
+}
+
+const allResponses = {
+    usa: {
+        questionaire: {
+            never: 'never',
+            rarely: 'rarely',
+            not_really: 'not really',
+            occasionally: 'occasionally',
+            mostly: 'mostly',
+            often: 'often',
+            everytime: 'everytime',
+        }
     }
 }
 
     urgency: [
         'actively_looking',
         'open_to_the_right_opportunity',
-        'just_browsing',
-        'networking',
+        'casually_browsing',
     ],
-    // key 10
-    distance: [
+    // key 11
+    presence: [
         'remote',
         'in_person',
         'hybrid',
         'flexible'
     ],
-    // key 11
+    // key 10
     duration: [
         'full-time',
         'part-time',
         'contract',
         'flexible',
     ],
-    // Everything else concats under role, key: 14
+    // Experience and roles concat, key: 14
     experience: [
         'associate',
         'junior',
         'mid-level',
         'senior',
         'staff',
-        'chief_of',
-        'director_of',
     ],
     roles: {
         type: [
             'recruiter',
         ]
     },
+    pronouns: [
+        'she/her',
+        'she/they',
+        'he/him',
+        'he/they',
+        'they/them',
+    ],
+    image: [],
+    zipcode: [],
+    blurb: []
 }
 
-export { allSteps, stepToComponentMap, possible }
+export { allSteps, allResponses, stepToComponentMap, possible }

frontend/src/utils/survey.js

 class SurveyFactory {
     constructor(responses) {
         this.responsesByCategory = responses
-        this.questions = []
+        this.questionsFromDb = []
     }
     _setSteps(langFile) {
         const stepsToProcess = [...Object.values(langFile) ]
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
             // Match question to step
-            const match = this.questions.filter(q => q.response_key_prompt == step)[0]
+            const match = this.questionsFromDb.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_category: match ? match.response_key_category: 'profile',
                 response_key_prompt: match ? match.response_key_prompt: step,
+                response_key_description: match ? match.response_key_description: null,
                 responses: this.responsesByCategory[step] ? this.responsesByCategory[step] : [] 
             }
         })
-        const unseen = this.questions.filter(q => !seenIds.includes(q.response_key_id))
+        const unseen = this.questionsFromDb.filter(q => !seenIds.includes(q.response_key_id))
         return [...stepsInCommon, ...unseen]
     }
     async getQuestions() {
-        this.questions = await fetchQuestions()
+        this.questionsFromDb = await fetchQuestions()
     }
     async createSurvey(langFile, roleTree) {
-        if(!this.questions.length) {
+        if(!this.questionsFromDb.length) {
             console.error('Attempted to create a survey before getting questions')
             await this.getQuestions()
         }

frontend/src/views/ProfileView.vue

  
     article(v-if="!loading")
         h3 {{ profile }}
-        RouterLink(:to="{ name: 'HomeView' }") back
+        button(@click="$router.go(-1)") back
 
     p(v-else) Loading...
 

frontend/src/views/SurveyView.vue

 <template lang="pug">
 main.view--survey.f-col.start.w-full
     header.w-full.f-col
-        p survey for profile: {{ pid }}
+        p survey for profile: {{ current }}
         //- Transition(name="slide-up" :duration="1600")
         //-     h3(v-if="step == 0") hello, what shall i call you?
         //-         span(v-for="letter in name" class="fade") {{ letter }}
     article.match.w-full
         ul.w-full
             template(v-for="(q, i) in profileQuestions" :key="q.response_key_prompt")
-                p {{q}}
-                //- 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"
-                //-             @hovered="onInputChange"
-                //-             @input="onInputChange"
-                //-         )
-                //-     footer.f-row
-                //-         button(@click="back(q.response_key_prompt)").w-full back
+                li(v-if="step == i")
+                    p {{q.response_key_category}}: 
+                        span in db:
+                        span(v-if="q.response_key_id") true - id:{{q.response_key_id}} | 
+                        span(v-else) false | 
+                        span {{q.response_key_prompt}}? 
+                        span {{q.response_key_description}} 
+
+                        div(v-if="q.responses.length")
+                            button(
+                                v-for="(res, index) in q.responses"
+                                :key="index"
+                                @click="profile[q.response_key_prompt] = res; step++"
+                                :disabled="profile[q.response_key_prompt] == res"
+                            ).p-0 {{res}}
+                        div(v-else-if="q.response_key_category === 'profile'")
+                            input(v-model="profile[q.response_key_prompt]" @keyup.enter="step++") 
+                            label >{{ profile[q.response_key_prompt]}}
+                        div(v-else).f-col
+                            input(type="range" min="-3" max="3" list="ticks" v-model="questionaire[q.response_key_category]").w-full
+                            label {{ questionaireResponses[parseInt(questionaire[q.response_key_category]) + 3] }} 
+                    nav.f-row
+                        button(:disabled="step == 0" @click="step--") back
+                        p {{step + 1}} of {{profileQuestions.length}}
+                        button(@click="step++") next
+            li(v-if="step == profileQuestions.length")
+                p Does this look correct?
+                h4 {{ profile }}
+                h4 {{questionaire}}
+                nav.f-row
+                    button(@click="step--") back
+                    p(@click="step = 0").p-1 start over
+                    button(@click="$router.push({ name: 'HomeView' })") save
+            
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
-import { surveyFactory } from '../utils'
-import { allSteps, possible, stepToComponentMap } from '../utils/lang'
+import { surveyFactory } from '@/utils'
+import { allSteps, allResponses, possible, stepToComponentMap } from '@/utils/lang'
+import { currentProfile } from '@/services'
 
-import SurveyForm from '../components/form.vue'
-import ButtonMulti from '../components/form/button-multi.vue'
-import ButtonChoice from '../components/form/button-choice.vue'
-import InputString from '../components/form/input-string.vue'
+import SurveyForm from '@/components/form.vue'
+import ButtonMulti from '@/components/form/button-multi.vue'
+import ButtonChoice from '@/components/form/button-choice.vue'
+import InputString from '@/components/form/input-string.vue'
 
 export default {
     components: { SurveyForm, ButtonMulti, ButtonChoice, InputString },
             validSurvey: null,
             componentMap: stepToComponentMap,
             step: 0,
-            name: '',
-            seeking: '',
-            urgency: '',
-            role: '',
-            duration: '',
-            distance: '',
-            experience: '',
-            position: '',
-            language: '',
-            pronouns: '',
-            zipcode: '',
+            profile: {
+                name: '',
+                seeking: '',
+                urgency: '',
+                experience: '',
+                role: '',
+                duration: '',
+                distance: '',
+                position: '',
+                language: '',
+                pronouns: '',
+                zipcode: '',
+                image: '',
+                blurb: ''
+            },
+            questionaire: {
+                grit: 0,
+                openness: 0,
+                bravery: 0,
+                empathy: 0,
+                honesty: 0,
+                respect: 0,
+            },
+            questionaireResponses: Object.values(allResponses.usa.questionaire)
         }
     },
     computed: {
+        current() {
+            return currentProfile
+        },
         profileQuestions() {
             if (!this.validSurvey) return []
             return this.validSurvey.steps