siimee/frontend/src/views/SurveyView.vue

<template lang="pug">
main.view--survey.f-col.start.w-full
    header.w-full.f-col
        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 }}

            h3(v-else-if="step == 1") What can i help you with, 
                span {{ name }}?
                br
                span I am seeking a 
                    span(v-if="!seeking") ___________.
                    span(v-else class="fade") {{ seeking }}.
            
            h3(v-else-if="step == 2") Looking for a {{ seeking }} then. 
                span You're in the right place. 
                br
                span How would you like to use siimee? 
                br
                span I am 
                    span(v-if="!urgency") ___________.
                    span(v-else class="fade") {{ urgency }}.
            
            h3(v-else-if="[3, 4, 5, 6].includes(step)")
                span I am a 
                span(v-if="!role && !experience" class="fade") _________ _________
                span(v-else-if="role && !experience" class="fade") _________ {{ role }}
                span(v-else-if="!role && experience" class="fade") {{ experience }} _________
                span(v-else class="fade") {{ experience }} {{ role }}
                span .&nbsp;
                br
                span Looking for a&nbsp;
                span(v-if="!distance && !duration" class="fade") ________ ________&nbsp;
                span(v-else-if="!distance && duration" class="fade") {{ duration }} ________&nbsp;
                span(v-else-if="distance && !duration" class="fade") _________ {{ distance }}&nbsp;
                span(v-else class="fade") {{ duration }} {{ distance }}&nbsp;
                span role.
        
            h3(v-else)
                p My name is {{ name }}.
                    span(v-if="pronouns") My pronouns are {{ pronouns }}.
                p I am&nbsp;
                    span a {{ experience }}
                    span {{ role }}
                p Looking for a {{ duration }},&nbsp;
                    span {{ distance }}&nbsp;
                    span {{ seeking }}.
                p I am proficient in 
                    span(v-for="(lang, i) in language") {{ lang }} &nbsp;
                        span(v-if="i > 1") , 

    article.match.w-full
        ul.w-full
            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"
                            @hovered="onInputChange"
                            @input="onInputChange"
                        )
                        div(v-else-if="step >= priorityQuestions.length")
                            button(@click="step = 0") save
                    footer.f-row
                        button(@click="back(q.response_key_prompt)").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 { checkLoginStatus } from '../router/guards'
import { surveyFactory } from '../utils'
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'
import InputString from '../components/form/input-string.vue'

export default {
    components: { SurveyForm, ButtonMulti, ButtonChoice, InputString },
    props: {
        pid: {
            type: Number,
            required: true,
        },
    },
    data() {
        return {
            validSurvey: null,
            componentMap: stepToComponentMap,
            step: 0,
            name: '',
            seeking: '',
            urgency: '',
            role: '',
            duration: '',
            distance: '',
            experience: '',
            position: '',
            language: '',
            pronouns: '',
            zipcode: '',
        }
    },
    computed: {
        profileQuestions() {
            if (!this.validSurvey) return []
            return this.validSurvey.steps.filter(
                step => step.response_key_category == 'profile',
            )
        },
        priorityQuestions() {
            if (!this.validSurvey) return []
            return this.validSurvey.steps.filter(
                step => step.response_key_category != 'profile',
            )
        },
    },
    async created() {
        /**
         * Before this ever gets called, surveyFactory.questions
         * must be set by App.created()
         */
        this.validSurvey = await surveyFactory.createSurvey(
            allSteps['usa'],
            possible['usa']['roles'],
        )
    },
    methods: {
        /**
         * Set state from promptVal key:value object
         * from button-coice or button-multi
         */
        onButtonSelect(promptVal) {
            for (const [prompt, val] of Object.entries(promptVal)) {
                this[prompt] = val
                if (prompt == 'seeking') {
                    this.validSurvey.setRoleResponses(val)
                }
            }
            this.step++
        },
        onInputChange(prompt, val) {
            this[prompt] = val
        },
        back(prompt) {
            this[prompt] = ''
            this.step--
        },
    },
}
</script>

<style lang="postcss">
.slide-up
    &-leave, &-enter
        &-active
            transition-delay: 500ms
            transition-property: opacity, background-color, font-size, transform, color
            transition-timing-function: cubic-bezier(1, 0.3, 0.5, 1)
            transition-duration: 300ms
    &-enter-from, &-leave-to
        opacity: 0

.fade
    animation: fadeIn 300ms ease-in

@keyframes fadeIn
    0%
        opacity: 0
    50%
        opacity: 0.5
    100%
        opacity:1

h1
    color: white

main
    padding: 5vh
    display: flex
    header
        p
            color: #666
            line-height: 1.3em
        color: #ccc
        font-style: italic
        text-align: left

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%
    header, footer, ul
        padding: 1vh
    ul
        display: flex
        /* color: blue */
        width: 100%
        li
            flex-direction: column
            border: 0px solid yellow
            width: 100%
            padding: 0
            text-align: left
            label
                margin-right: 1vh
            > h3
                text-transform: capitalize
                padding: 1vh 0
            > div > span
                display: block
                text-align: center
</style>