siimee/frontend/src/App.vue

<template lang="pug">
.cards.f-row
    card(v-for="card in cards" :card="card" @on-remove="remove")
.form.f-row(v-if="completedForm")
    siimee-form(:form="completedForm")
hello-world(msg="Hello Vue 3 + Vite")
</template>

<script>
import * as sss from '@/sss/import.css'

import { ref, onMounted } from 'vue'
import { profileForm } from '@/utils/forms'
import { Connector } from '@/utils/db'

import helloWorld from '@/components/HelloWorld.vue'
import card from '@/components/card.vue'
import form from '@/components/form.vue'

export default {
    components: { card, 'siimee-form': form, helloWorld },
    setup() {

        const cards = ref([
            { name: 'jwick' },
            { name: 'hwick' },
            { name: 'kwick' },
        ])

        const remove = card => {
            const i = cards.value.indexOf(card)
            cards.value.splice(i, 1)
        }

        const db = new Connector()
        const completedForm = ref([])
        const compileForm = async () => {
            const responseKeys = await db.get('/survey/questions')
            const responsesById = responseKeys.reduce((resMap, res) => {
                resMap[res.response_key_id] = res
                return resMap
            }, {})
            completedForm.value = profileForm.map(step => {
                const stepWithPrompts = []
                step.forEach(prompt => {
                    stepWithPrompts.push({
                        ...prompt,
                        category: responsesById[prompt.id]['response_key_category'],
                        question: responsesById[prompt.id]['response_key_prompt'],
                    })
                })
                return stepWithPrompts
            })
        }
        onMounted(compileForm)

        return { 
            cards,
            remove,
            completedForm
        }
    }
}
</script>

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

#app
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: $primary
    font-family: $sans
    padding: $ms-0
    background-color: $secondary
</style>