:sparkle: adding form generation | using Joi for form validation | created form step-through component

frontend/src/App.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 .cards.f-row
-    card(v-for="card in cards" :card="card" @remove="remove")
+    card(v-for="card in cards" :card="card" @on-remove="remove")
+.form.f-row
+    siimee-form(:form="profileForm")
 hello-world(msg="Hello Vue 3 + Vite")
 </template>
 
@@ -8,12 +10,14 @@ hello-world(msg="Hello Vue 3 + Vite")
 import * as sss from '@/sss/import.css'
 
 import { ref } from 'vue'
+import { profileForm } from '@/utils/forms'
 
 import helloWorld from '@/components/HelloWorld.vue'
 import card from '@/components/card.vue'
+import form from '@/components/form.vue'
 
 export default {
-    components: { card, helloWorld },
+    components: { card, 'siimee-form': form, helloWorld },
     setup() {
 
         const cards = ref([
@@ -27,10 +31,10 @@ export default {
             cards.value.splice(i, 1)
             console.log(cards.value)
         }
-
         return { 
             cards,
-            remove
+            remove,
+            profileForm
         }
     }
 }

frontend/src/components/card.vue

@@ -1,16 +1,28 @@
 <template lang="pug">
 .card.f-col.start.b-solid.rounded.bg-primary.mr-1
-    header.t-right.dark.ph-1.pt-1
-        h3 {{ card.name }}
-
-    main.ph-1
-        section
-            img(alt="Vue logo" src="@/assets/logo.png").w-full
-
-    footer.ph-1.b-1
-        button(@click="state.count++").b-solid.rounded.p-0 {{ state.count }}
-        button(@click="close").b-solid.rounded.p-0 close
-
+    .front(v-if="!state.flipped")
+        header.t-right.dark.ph-1.pt-1
+            h3 hidden
+
+        main.ph-1
+            section
+                img(alt="Vue logo" src="@/assets/logo.png").w-full
+
+        footer.ph-1.b-1
+            button(@click="state.count++").b-solid.rounded.p-0 {{ state.count }}
+            button(@click="flip").b-solid.rounded.p-0 flip
+            button(@click="close").b-solid.rounded.p-0 close
+    .back(v-else)
+        header.t-right.dark.ph-1.pt-1
+            h3 revealed: {{ card.name }}
+
+        main.ph-1
+            section
+                img(alt="Vue logo" src="@/assets/logo.png").w-full
+
+        footer.ph-1.b-1
+            button(@click="flip").b-solid.rounded.p-0 unflip
+            button(@click="close").b-solid.rounded.p-0 close
 </template>
 
 <script setup>
@@ -26,13 +38,16 @@ const props = defineProps({
 const state = reactive({
     count: 0,
     loaded: false,
-    profile: null
+    profile: null,
+    flipped: false
 })
 
 const close = e => {
-    instance.emit('remove', props.card)
+    instance.emit('on-remove', props.card)
+}
+const flip = e => {
+    state.flipped = !state.flipped
 }
-
 </script>
 
 <style lang="postcss">

frontend/src/components/form.vue

@@ -0,0 +1,122 @@
+<template lang="pug">
+.form.f-col.start.mr-1.w-full
+    header
+        p answers to save: {{ answers }}
+
+    ul(v-for="(step, i) in formSteps").w-full
+        li(v-for="prompt in step" v-show="(i + 1) == state.step").f-row.start.b-solid
+            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(
+                    v-for="response in prompt.responses"
+                    :prompt-question="makeKebob(prompt.question)"
+                    @click="respondFromTag"
+                    :disabled="response == answers[makeKebob(prompt.question)]"
+                ).p-0 {{ response }}
+    
+    footer.f-row.w-full
+        button(@click="back" :disabled="state.step == 1").p-1 back
+        button(@click="next" :disabled="state.step == formSteps.length").p-1 next
+        button(@click="next" :disabled="state.step != formSteps.length").p-1 save
+        .f-grow
+        p step: {{ state.step }} of {{ formSteps.length }}
+</template>
+
+<script setup>
+import Joi from 'joi'
+import { validatorMapping, makeKebob } from '@/utils'
+import { defineProps, reactive, getCurrentInstance } from 'vue'
+
+const instance = getCurrentInstance()
+
+const props = defineProps({ 
+    form: { 
+        type: Array,
+        required: true
+    } 
+})
+
+/**
+ * Our form is comprised of steps, and each step has a series of questions
+ */
+const formSteps = props.form
+/**
+ * Create state object to store answers based on the questions in formSteps 
+ */
+const answers = reactive({})
+const resetAnswers = () => {
+    formSteps.forEach(step => {
+        step.forEach(prompt => {
+            answers[makeKebob(prompt.question)] = 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 = {}
+    formSteps[step].forEach(prompt => {
+        const key = makeKebob(prompt.question)
+        schema[key] = validatorMapping[prompt.type]
+        answeredThisStep[key] = answers[key]
+    })
+    return Joi.object(schema).validate(answeredThisStep)
+}
+const state = reactive({ step: 1 })
+/**
+ * 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 === formSteps.length) {
+        alert('saved...')
+        resetAnswers()
+        state.step = 1
+    } else if(state.step < formSteps.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">
+@import '@/sss/theme.sss'
+
+.form
+    color: $light
+    ul
+        list-style: none
+        li
+            padding: 1em
+</style>

frontend/src/utils/forms.js

@@ -0,0 +1,28 @@
+const profileForm = [
+  [
+    {
+      type: "input-string",
+      question: "what is your name",
+      responses: null,
+    },
+    {
+      type: "tag-cloud",
+      question: "what is your favorite color",
+      responses: ["red", "blue", "green", "white", "black"],
+    },
+  ],
+  [
+    {
+      type: "input-string",
+      question: "what is your quest",
+      responses: null,
+    },
+    {
+      type: "input-string",
+      question: "what is the average flight speed of an unladen swallow",
+      responses: null,
+    },
+  ],
+];
+
+export { profileForm };

frontend/src/utils/index.js

@@ -1,5 +1,15 @@
-import { Connector } from './db'
+import Joi from "joi";
+import { Connector } from "./db";
 
-const api = new Connector('kittens')
+const api = new Connector("kittens");
 
-export { api }
+const validatorMapping = {
+  "input-string": Joi.string(),
+  "tag-cloud": Joi.string(),
+};
+
+const makeKebob = (input) => {
+  return input.toLowerCase().split(" ").join("-");
+};
+
+export { api, validatorMapping, makeKebob };