survey setup, bring in sidebar and start adding css

frontend/src/App.vue

@@ -1,18 +1,17 @@
 <template lang="pug">
-sidebar
-main.f-col.start.w-full
-    router-view
-    main-nav
+
+
+router-view
+
 </template>
 
 <script>
 import * as sss from '@/sss/import.css'
-import sidebar from './components/Sidebar.vue'
-import mainNav from './components/MainNav.vue'
+
+
 
 export default {
     name: 'app',
-    components: { sidebar, mainNav },
 }
 </script>
 

frontend/src/components/Archive/form.vue → frontend/src/components/form.vue

@@ -21,6 +21,23 @@
                     @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

frontend/src/entities/profile/profile.js

@@ -14,7 +14,7 @@ class Profile extends _baseRecord {
     constructor({ email, ...profileData }) {
         super()
 
-        this.type = this.constructor.name.toLowerCase()
+        this.type = this.constructor.name.toLowerCase() 
 
         /**  Fields */
         this.email = email // ! required

frontend/src/entities/survey/index.js

@@ -1,2 +1,2 @@
 export * from './survey'
-export * from './survey.schema'
+export * from './survey.schema'

frontend/src/entities/survey/survey.js

@@ -0,0 +1,33 @@
+/** @module survey/survey */
+import { _baseRecord } from '..'
+import { surveySchema } from './survey.schema'
+
+class Survey extends _baseRecord {
+    constructor(questionArray) {
+        super()
+
+        this.type = this.constructor.name.toLowerCase()
+
+        /**  Fields */
+        this.steps = questionArray // ! required
+
+        return this
+    }
+
+    isValid() {
+        const validate = surveySchema.validate(this)
+
+        /**
+         * Log out some useful error messages
+         */
+        if (validate.error) {
+            console.error(`error: ${validate.error} - ${this.type} validation`)
+        }
+
+        /** validate(this) always returns something so force it to a bool */
+        return !validate.error ? true : false
+    }
+
+}
+
+export { Survey }

frontend/src/entities/survey/survey.schema.js

@@ -1,4 +1,3 @@
-/** @module entities/surveySchema */
 import Joi from 'joi'
 import { allModules } from '..'
 
@@ -17,16 +16,21 @@ const surveySchema = {
         lastUpdatedAt: Joi.string(),
         type: Joi.string(),
 
-        /** our fields */
-        email: Joi.string()
-            .email({
-                minDomainSegments: 2,
-                tlds: { allow: ['com', 'net'] },
-            })
-            .required(),
+        /** Survey fields */
+        steps: Joi.array().items(
+            Joi.array().items(
+                Joi.object({
+                    id: Joi.number(),
+                    type: Joi.string(),
+                    question: Joi.string(),
+                    // TODO: specify responses to be array or null later
+                    responses: Joi.any(),
+                })
+            )
+        ).required(),
     }),
     /** fields required before saving */
-    required: ['email'],
+    required: ['steps'],
     validate(instance) {
         return this.properties.validate(instance)
     },

frontend/src/router/index.js

@@ -5,6 +5,7 @@ import Matches from '../views/Matches.vue'
 import Chats from '../views/Chats.vue'
 import Login from '../views/Login.vue'
 import Register from '../views/Register.vue'
+import Survey from '../views/Survey.vue'
 
 const routes = [
     {
@@ -37,6 +38,11 @@ const routes = [
         component: Login,
         name: `login`,
     },
+    {
+        path: `/survey`,
+        component: Survey,
+        name: `survey`,
+    },
     {
         path: `/register`,
         component: Register,

frontend/src/services/index.js

@@ -1,2 +1,3 @@
 export * from './profile.service'
 export * from './grouping.service'
+export * from './survey.service'

frontend/src/services/survey.service.js

@@ -0,0 +1,51 @@
+import { db } from '../utils/db'
+import { Survey } from '../entities/survey'
+
+/**
+ * Get Survey for first time profile creation from the database and
+ * create a class from the data and
+ * validate the incoming against the schema
+ * @param {number} profileId
+ * @returns {array} instantiated Profile objects (see: /entites/profile)
+ */
+const fetchSurveyByProfileId = profileId => {
+    // const surveyForProfileId = await db.get(`/user/${profileId}/profiles`)
+    const myquestions = [
+        [
+            {
+                id: 1,
+                type: 'input-string',
+                question: 'whats your favorite color',
+                responses: null,
+            },
+        ],
+        [
+            {
+                id: 2,
+                type: 'tag-cloud',
+                question: 'whats your favorite number',
+                responses: ['1', '2', '3'],
+            },
+        ],
+        [
+            {
+                id: 3,
+                type: 'checklist',
+                question: 'what is your current status',
+                responses: ['employed', 'unemployed'],
+            },
+        ],
+        [
+            {
+                id: 4,
+                type: 'slider',
+                question: 'whats your favorite number',
+                responses: ['1', '2', '3'],
+            },
+        ],
+    ]
+    const mysurvey = new Survey(myquestions)
+    return mysurvey
+}
+
+export { fetchSurveyByProfileId }

frontend/src/views/Survey.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+sidebar
+main.f-col.start.w-full
+    article.match
+        h1 Survey Page
+        siimeform(:form="validSurvey.steps")
+    mainNav
+</template>
+
+<script>
+import siimeform from '../components/form.vue'
+import sidebar from '../components/Sidebar.vue'
+import mainNav from '../components/MainNav.vue'
+import { fetchSurveyByProfileId } from '../services'
+
+export default {
+    components: { siimeform, sidebar, mainNav },
+    computed: { 
+        validSurvey: () => fetchSurveyByProfileId(),
+    },
+}
+</script>
+
+<style lang="postcss">
+h1
+    color: white
+
+main
+    padding: 5vh
+    display: flex
+
+article
+    height: 100%
+    width: 100%
+    flex-direction: column
+
+.form
+    border: 1px solid #fff
+    width: 100%
+    header
+        color: #ccc
+        font-style: italic
+    > *
+        padding: 1vh
+    ul
+        display: flex
+        color: blue
+        width: 100%
+        li
+            flex-direction: column
+            border: 0px solid yellow
+            width: 100%
+            label
+                margin-right: 1vh
+            > *
+                text-transform: capitalize
+                padding: 1vh
+</style>

frontend/src/views/home.vue

@@ -1,18 +1,21 @@
 <template lang="pug">
-article#home
-    h1(v-if="user") {{ user.user_name }}
-    profile-card-list(:uid='mypid' :profiles='swipables')
-    
-
+sidebar
+main.f-col.start.w-full
+    article#home
+        h1(v-if="user") {{ user.user_name }}
+        profile-card-list(:uid='mypid' :profiles='swipables')
+    main-nav
 </template>
 
 <script>
+import sidebar from '../components/Sidebar.vue'
+import mainNav from '../components/MainNav.vue'
 import profileCardList from '../components/ProfileCardList.vue'
 import batch20 from '../../../backend/db/generated/_batch_20.js'
 
 export default {
     name: 'HomeView',
-    components: { profileCardList },
+    components: { profileCardList, sidebar, mainNav },
     data: () => ({
         swipables: [   
             // { 
@@ -75,5 +78,11 @@ export default {
 </script>
 
 <style lang="postcss">
-#home
+main
+    position: relative
+    height: 100%
+    > article
+        height: 100%
+        width: 100%
+        flex-direction: column
 </style>