siimee/frontend/src/components/form.vue

<template lang="pug">
.form.f-col.start.mr-1.w-full(v-if='form.length')
    header
        p answers to save: {{ answers }}

    ul.w-full(v-for='(step, i) in form')
        li.f-row.start.b-solid.p-0(
            v-for='prompt in step'
            v-if='step && step.length'
            v-show='(i + 1) == state.step'
        )
            h3 {{ prompt.question }}?
            .response-wrapper(v-if='prompt.type === "input-string"')
                label {{ prompt.type }}
                input(v-model='answers[makeKebob(prompt.question)]')
            .response-wrapper(v-else-if='prompt.type === "tag-cloud"')
                label {{ prompt.type }}
                button.p-0(
                    :disabled='response == answers[makeKebob(prompt.question)]'
                    :prompt-question='makeKebob(prompt.question)'
                    @click='respondFromTag'
                    v-for='response in prompt.responses'
                ) {{ response }}
            //- TODO: Checklist
            .response-wrapper(v-if='prompt.type === "checklist"')
                .checklist(v-for='response in prompt.responses')
                    input(
                        type='checkbox'
                        :id='response'
                        :name='response'
                        v-model='answers[makeKebob(prompt.question)]')
                    label {{ response}}
            //- TODO: Slider from -3 to 0 to +3 (increments of 1)
            .response-wrapper(v-if='prompt.type === "slider"')
                label {{ prompt.type }}
                input(
                    type='range'
                    min='-3'
                    max='3'
                    v-model='answers[makeKebob(prompt.question)]')

    footer.f-row.w-full
        button.p-1(:disabled='state.step == 1' @click='back') back
        button.p-1(:disabled='state.step == form.length' @click='next') next
        button.p-1(:disabled='state.step != form.length' @click='next') save
        .f-grow
        p step: {{ state.step }} of {{ form.length }}
</template>

<script setup>
import Joi from 'joi'
import { validatorMapping, makeKebob } from '@/utils'
import { defineProps, reactive } from 'vue'

const props = defineProps({
    form: {
        type: Array,
        required: true,
    },
})
/**
 * Our form is comprised of steps, and each step has a series of questions
 */
const state = reactive({ step: 1 })

/**
 * Create state object to store answers based on the questions in formSteps
 */
const answers = reactive({})
const resetAnswers = () => {
    Object.keys(answers).forEach(key => (answers[key] = null))
}
resetAnswers()
/**
 * Callback for clicking a tag to respond
 */
const respondFromTag = e => {
    const answer = e.target.textContent
    const questionKey =
        e.target.attributes.getNamedItem('prompt-question').nodeValue
    answers[questionKey] = answer
}
/**
 * Check answered fields in current step, build a validator, then validate the answers by prompt.type
 * @param {number} step // The current step
 * @returns {object} // Joi object
 */
const isValid = step => {
    const schema = {}
    const answeredThisStep = {}
    props.form[step].forEach(prompt => {
        const key = makeKebob(prompt.question)
        schema[key] = validatorMapping[prompt.type]
        answeredThisStep[key] = answers[key]
    })
    return Joi.object(schema).validate(answeredThisStep)
}
/**
 * Save or take the-nNext step in the form
 */
const next = e => {
    const validity = isValid(state.step - 1)
    if (validity.error) return console.error(validity.error)

    // Save or next
    if (state.step === props.form.length) {
        alert('saved...')
        resetAnswers()
        state.step = 1
    } else if (state.step < props.form.length) {
        state.step++
    } else {
        console.error(
            `Cannot perform action: next() | on form step: ${state.step} of ${props.formSteps.length}`,
        )
    }
}
/**
 * Back a step in the form
 */
const back = e => {
    if (state.step > 1) {
        state.step--
    } else {
        console.error(
            `Cannot perform action: back() | on form step: ${state.step} of ${props.formSteps.length}`,
        )
    }
}
</script>

<style lang="postcss">
// prettier-ignore
@import '@/sss/theme.sss'

.form
    color: $light
    ul
        list-style: none
</style>