:recycle: adding form components for a better survey

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

@@ -0,0 +1,53 @@
+<template lang="pug">
+.form--step.button-choice
+    header
+        p selections {{selected}}
+    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>
+
+<script setup>
+import { defineProps, defineEmits, ref } from 'vue'
+
+const emit = defineEmits(['selected'])
+
+const props = defineProps({
+    opts: {
+        required: true,
+        type: Array,
+        default: () => ['up', 'down'],
+        // default: () => ['up', 'left', 'right', 'down'],
+    },
+})
+
+const selected = ref([])
+
+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)
+    }
+    emit('selected', selected.value)
+}
+</script>
+
+<style lang="postcss">
+// prettier-ignore
+@import '@/sss/theme.sss'
+
+.button-choice
+    color: white
+    main
+        flex-wrap: wrap
+        button
+            padding: 1em
+            border: 2px teal solid
+            border-radius: 4px
+            &.selected
+                border: 2px teal dotted
+</style>

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

@@ -0,0 +1,60 @@
+<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
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref } from 'vue'
+
+const emit = defineEmits(['selected', 'next'])
+
+const props = defineProps({
+    opts: {
+        required: true,
+        type: Array,
+        default: () => [
+            ['up', 'down'],
+            ['left', 'right'],
+        ],
+    },
+})
+
+const selected = ref([])
+
+const selectOption = (step, optionVal) => {
+    selected.value[step] = optionVal
+    emit('selected', selected.value)
+}
+
+const next = () => {
+    emit('next', selected.value)
+    selected.value = []
+}
+</script>
+
+<style lang="postcss">
+// prettier-ignore
+@import '@/sss/theme.sss'
+
+.button-multi
+    color: white
+.step
+    flex-wrap: wrap
+    display: none
+    &.selected
+        display: block
+    button
+        padding: 1em
+        border: 2px teal solid
+        border-radius: 4px
+        &.selected
+            border: 2px teal dotted
+</style>

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

@@ -0,0 +1,50 @@
+<template lang="pug">
+.form--step.input-string
+    header
+        p input {{input}}
+    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
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref } from 'vue'
+
+const emit = defineEmits(['next'])
+
+const props = defineProps({
+    default: {
+        required: true,
+        type: Array,
+        default: () => 'start',
+    },
+    multiline: {
+        required: false,
+        type: Boolean,
+        default: true,
+    },
+})
+
+const input = ref(props.default)
+
+const next = () => {
+    emit('next', input.value)
+}
+</script>
+
+<style lang="postcss">
+// prettier-ignore
+@import '@/sss/theme.sss'
+
+.input-string
+    color: white
+    main
+        flex-wrap: wrap
+        button
+            padding: 1em
+            border: 2px teal solid
+            border-radius: 4px
+            &.selected
+                border: 2px teal dotted
+</style>

frontend/src/views/Survey.vue

@@ -1,17 +1,129 @@
 <template lang="pug">
 main.f-col.start.w-full
-    article.match
-        h1 Survey Page
-        SurveyForm(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
+    ButtonMulti
+    //- ButtonChoice
+    //- InputString
+    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
+        //- SurveyForm(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
     MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
 import SurveyForm from '../components/form.vue'
 import { fetchSurveyByProfileId } from '../services'
+import ButtonMulti from '../components/form/button-multi.vue'
+import ButtonChoice from '../components/form/button-choice.vue'
+import InputString from '../components/form/input-string.vue'
+
+const locations = ['remote', 'in_person']
+const roles = [
+    ['recruiter', 'hiring_manager'],
+    [
+        'junior_engineer',
+        'mid-level_engineer',
+        'senior_engineer',
+        'staff_engineer',
+    ],
+]
 
 export default {
-    components: { SurveyForm },
+    components: { SurveyForm, ButtonMulti, ButtonChoice, InputString },
     props: {
         pid: {
             type: Number,
@@ -21,8 +133,23 @@ export default {
     data() {
         return {
             validSurvey: null,
+            step: 0,
+            name: '',
+            seeking: '',
+            role: '',
+            experience: '',
+            position: '',
+            location: '',
+            zipcode: '',
         }
     },
+    methods: {
+        saveNext(val) {
+            console.log(val)
+            this.seeking = val
+            this.step++
+        },
+    },
     async created() {
         this.validSurvey = await fetchSurveyByProfileId(this.pid)
         console.log('survey for:', this.validSurvey)
@@ -42,7 +169,14 @@ article
     height: 100%
     width: 100%
     flex-direction: column
-
+    ul
+        height: 100%
+        list-style: none
+        button
+            padding: 1em
+        p
+            padding: 1em
+            color: white
 .form
     border: 1px solid #fff
     width: 100%