Merge branch 'main-nav' of fyindr/siimee into dev

frontend/src/App.vue

@@ -1,13 +1,8 @@
 <template lang="pug">
 w-app
-    .nav(v-if="profile.isLoggedIn" style="display: flex; justify-content: space-between;")
-        header
-            h2 current - profile: {{ profile.id }}
-        w-drawer(v-model="openDrawer")
-            SideBar(@updatePid="setPid" :pid="profile.id.value")
-        w-button(@click="openDrawer = true" outline="")
-            | Active Chats
-
+    w-drawer(v-model="openDrawer")
+        SideBar(@updatePid="setPid" :pid="profile.id.value")
+        
     RouterView(
         v-if="profile.isLoggedIn"
         :pid="profile.id.value"

frontend/src/components/AspectBar.vue

@@ -11,15 +11,9 @@ export default {
         labels: {
             required: true,
             type: Array,
-            default: () => ['left', 'right'],
         },
         percentage: {
-            required: true,
-            type: Number,
-            default: 50,
-        },
-        size: {
-            required: true,
+            required: false,
             type: Number,
             default: 50,
         },

frontend/src/components/NamePlate.vue

@@ -1,16 +1,49 @@
 <template lang="pug">
-.xs12
-    h1.text-capitalize first last
-        span O    
-    p.text-capitalize job title | location, st    
-    p.text-capitalize gender 
-        span.text-capitalize | pronouns
-        span.text-capitalize | ethnicity    
+.name-plate.xs12.w-flex.justify-center
+    section(v-if="pid" :class="{ box: !isList }")
+        router-link(:to="`/profile/${pid}`")
+            h1.text-capitalize {{ name }}
+                span O
+            p.text-capitalize {{role}}&nbsp;
+                span.text-capitalize(v-if="isList") |&nbsp;
+                    span.text-capitalize location, st
+            p.text-capitalize(v-if="!isList") {{ pronouns }}&nbsp;
+                span.text-capitalize | ethnicity
 </template>
 
 <script>
 export default {
-    props: {},
+    props: {
+        pid: {
+            type: Number,
+            required: true,
+        },
+        name: {
+            type: Object,
+            required: true,
+        },
+        isList: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
+    },
     data: () => ({}),
 }
 </script>
+<style lang="sass">
+.name-plate
+    section
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: center
+        padding: 15px 15px
+        min-height: 10vh
+        width: 100%
+        &.box
+            border: 1px black solid
+            height: 15vw
+            width: 15vw
+            text-align: center
+</style>

frontend/src/components/ProfileCard.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+w-card.profile-card-list--card.xs12.pa12
+    header.xs12.w-flex.column.center
+        NamePlate(:pid="card.pid" :name="card.name" :role="card.role" :is-list="isList")
+        template(v-if="!isList")
+            SummaryBar
+            TagList
+
+    article.xs12.w-flex.column.justify-space-between
+        AspectBar(
+            v-for="aspect in aspects"
+            :labels="aspect.labels"
+            :percentage="aspect.percentage"
+            :key="aspect.name"
+        )
+    
+    footer(v-if="!isList")
+        .pa12
+            p {{ bio }}
+        PairingButton
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import NamePlate from './NamePlate.vue'
+import AspectBar from './AspectBar.vue'
+import SummaryBar from './SummaryBar.vue'
+import TagList from './TagList.vue'
+import PairingButton from './PairingButton.vue'
+
+const props = defineProps({
+    card: {
+        type: Object,
+        required: true,
+    },
+    aspects: {
+        type: Array,
+        required: true,
+    },
+    bio: {
+        type: String,
+        required: false,
+        default: null,
+    },
+    isList: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+})
+</script>

frontend/src/components/ProfileCardList.vue

@@ -1,58 +1,50 @@
 <template lang="pug">
-section.profile-card-list(:style="{'display': 'flex', 'overflow':'auto',}")
-    .swipe(
-        v-if="!isGrid"
-        :config="config"
-        :key="profile.pid"
-        @throwout="swipped(profile)"
-        v-for="(profile, i) in loadedProfiles"
-        :style="{ 'z-index': 1000-i }"
-    )
-
-        w-card.card.randomize(
-            :image="`${profile.avatar}`"
-            :style="{'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)`}"
-        )
-            .card--content
-                p(style="color: magenta;") profile: {{ profile.pid }}
-                .card--content--lower
-                    h4 {{ profile.name }}
-                    nav.swipe_icons
-                        //- Accept
-                        button(@click="accept(profile.pid)") Accept
-                        button(@click="view(profile.pid)") view
-                        //- Pass
-                        button(@click="pass(profile.pid)") Pass
+section.profile-card-list.xs12.w-flex.column
+    header.xs12.w-flex 
+        w-select(:items="['one', 'two', 'three']" outline) Label
     
-    .match-layout(
-        v-else
-        v-for="(profile, i) in loadedProfiles"
-        :key="`${profile.pid}-${i}`"
-    )
-        .card.bg-cover(
-            :style="{ 'background-image': `url(${profile.avatar})` }"
+    article
+        ProfileCard.match-layout(
+            v-for="(card, i) in cards"
+            :key="`${card.pid}-${i}`"
+            :card="card" :aspects="aspects" :bio="bio" :is-list="true"
         )
-            .card--content
-                p(style="color: magenta;") profile: {{ profile.pid }}
-                .card--content--lower
-                    h4 {{ profile.name }}
-                    nav.swipe_icons
-                        button(@click="view(profile.pid)") view
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import {
     updateQueueByProfileId,
     postMembershipByProfileId,
     currentProfile,
 } from '../services'
+import ProfileCard from './ProfileCard.vue'
+
+class Aspect {
+    constructor({ name, labels, percentage = 50 }) {
+        this.name = name
+        this.labels = labels
+        this.percentage = percentage
+    }
+}
+const aspects = ref([
+    new Aspect({ name: 'creativity', labels: ['creative', 'methodical'] }),
+    new Aspect({ name: 'dynamism', labels: ['dynamic', 'ordered'] }),
+    new Aspect({ name: 'precision', labels: ['precise', 'resourceful'] }),
+    new Aspect({ name: 'vision', labels: ['visionary', 'implementer'] }),
+    new Aspect({ name: 'focus', labels: ['big picture', 'focused'] }),
+    new Aspect({ name: 'attention', labels: ['guided', 'self-managed'] }),
+])
+const bio = ref(
+    'this is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long description',
+)
 
 const router = useRouter()
 const emit = defineEmits(['reload'])
 
 const props = defineProps({
-    profiles: {
+    cards: {
         type: [Object, Array],
         default: () => [
             {
@@ -72,18 +64,6 @@ const props = defineProps({
     },
 })
 
-const swipped = profile => {
-    const index = loadedProfiles.findIndex(u => u.pid == profile.pid)
-    loadedProfiles.splice(index, 1)
-    profile.id = Date.now() + (Math.random() * 100000).toFixed()
-    loadedProfiles.unshift({ ...profile })
-}
-
-const randomize = max => {
-    const pos = Math.random() > 0.5 ? -1 : 1
-    return Math.floor(Math.random() * max) * pos
-}
-
 // AHP Button behavior
 const accept = async targetId => {
     if (targetId == props.pid) return
@@ -133,14 +113,4 @@ const pass = targetId => {
     updateQueueByProfileId(props.pid, targetId, true)
     emit('reload')
 }
-
-// from the data() section
-const config = {
-    // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
-    minThrowOutDistance: 250,
-    maxThrowOutDistance: 300,
-}
-
-// Copy profiles so we don't mutate the original
-const loadedProfiles = [...props.profiles]
 </script>

frontend/src/components/SummaryBar.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
-nav.xs12
-    ul.xs12.w-flex.row
-        li(v-if="showAbout") about
-        li(v-for="[label, percentage] in summary" :key="label").w-flex.row
-            w-icon(xl).mr1 mdi mdi-heart
-            .w-flex.column.justify-start
-                p {{ percentage }}%
-                p.text-capitalize {{ label }}
+section.w-flex.column.pb5
+    nav.xs12
+        ul.xs12.w-flex.row
+            li(v-if="showAbout") about
+            li(v-for="[label, percentage] in summary" :key="label").w-flex.row
+                w-icon(xl).mr1 mdi mdi-heart
+                .w-flex.column.justify-start
+                    p {{ percentage }}%
+                    p.text-capitalize {{ label }}
 </template>
 
 <script>

frontend/src/components/TagList.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
-w-tag(v-for="tag in tags" color="pink-light1" bg-color="pink-light5")
-    w-icon(v-if="icon" class="mr1" sm) {{ icon.family }} {{ icon.family }}-{{ icon.shape }}
-    p {{ tag }}
+section.w-flex.row.pb5
+    w-tag(v-for="tag in tags" color="pink-light1" bg-color="pink-light5").w-flex.grow.mr12.pa12
+        w-icon(v-if="icon" class="mr1" sm) {{ icon.family }} {{ icon.family }}-{{ icon.shape }}
+        p {{ tag }}
 </template>
 
 <script>
@@ -10,7 +11,11 @@ export default {
         tags: {
             required: true,
             type: Array,
-            default: () => ['tag', 'tag', 'tag'],
+            default: () => [
+                'tag one',
+                'tag another thing',
+                'tag something long',
+            ],
         },
         icon: {
             type: Object,

frontend/src/entities/card/card.js

@@ -1,21 +1,84 @@
-/** @module entities/card */
+/** @module card/card */
 
-/** Class representing a card */
+class Aspect {
+    constructor({ name, labels, percentage = 50 }) {
+        this.name = name
+        this.labels = labels
+        this.percentage = percentage
+    }
+}
+
+/**
+ * Class representing a profile card
+ * NOT to be confused with a profile
+ * this should be treated as a profile
+ * card facade
+ */
 class Card {
-    /**
-     * Create the a card object.
-     * @param {number} pid
-     * @param {string} name
-     * @param {string} avatar
-     * @return {Card} the card instance object
-     */
-    constructor({ pid, name, avatar }) {
+    constructor({ pid, name, role }) {
         this.pid = pid
+
+        /**  Fields */
         this.name = name
-        this.avatar = avatar
+
+        this.role = role ? role : null
+
+        this.presence = null
+        this.urgency = null
+        this.pronouns = null
+        this.ethinicity = null
+        this.locale = null
+        this.email = null
+
+        this.images = []
+        this.tags = []
+
+        this.bio = null
+        this.aspects = [
+            new Aspect({
+                name: 'creativity',
+                labels: ['creative', 'methodical'],
+            }),
+            new Aspect({
+                name: 'dynamism',
+                labels: ['dynamic', 'ordered'],
+            }),
+            new Aspect({
+                name: 'precision',
+                labels: ['precise', 'resourceful'],
+            }),
+            new Aspect({
+                name: 'vision',
+                labels: ['visionary', 'implementer'],
+            }),
+            new Aspect({
+                name: 'focus',
+                labels: ['big picture', 'focused'],
+            }),
+            new Aspect({
+                name: 'attention',
+                labels: ['guided', 'self-managed'],
+            }),
+        ]
 
         return this
     }
 }
 
-export { Card }
+const makeCardFromProfile = profile => {
+    const c = new Card({
+        pid: profile.profile_id,
+        name: profile.user_name,
+        role: profile?.profile_prefs?.role?.val,
+    })
+
+    c.presence = profile?.profile_prefs?.presence?.val
+    c.urgency = profile?.profile_prefs?.urgency?.val
+    c.pronouns = profile?.profile_prefs?.pronouns?.val
+    c.ethinicity = profile?.profile_prefs?.ethnicity?.val
+    c.locale = `${profile.city}, ${profile.state}`
+    c.email = profile.user_email
+    c.bio = profile.profile_description
+    return c
+}
+export { Card, makeCardFromProfile }

frontend/src/services/chat.service.js

@@ -21,6 +21,7 @@ const providerMethods = {
 const setupPubnub = async uuid => {
     const publishKey = import.meta.env.VITE_PUBNUB_PUBLISH_KEY
     const subscribeKey = import.meta.env.VITE_PUBNUB_SUBSCRIBE_KEY
+
     if (!uuid) return console.error('no pubnub uuid set')
 
     const pubnubClient = await new PubNub({
@@ -80,8 +81,8 @@ class Chatter {
         this.uuid = `${uuid}`
         this.provider = await setupPubnub(this.uuid)
 
-        //  step 1: build the this.groupings object from the backend
-        // ? .await for the groupings to be fetched before subscribing to channels
+        //  step_1: build the this.groupings object from the backend
+        //  await for the groupings to be fetched before subscribing to channels
         await this._setupAllChannels(groupings)
         this._listenFor({ listeners: this.listeners })
         this.subscribe({ channels: this.subscriptions })
@@ -96,7 +97,6 @@ class Chatter {
      * @return {object} timestamp
      */
     async publish(channel, message) {
-        // console.log('publishing message to channel:', channel)
         return providerMethods.publish({
             channel,
             message: new ChatMessage(message),

frontend/src/utils/index.js

@@ -22,6 +22,7 @@ const makeKebob = input => {
 
 const surveyFactory = new SurveyFactory(possible['usa'])
 
+
 const mixins = { pidMixin, cardMixin }
 
 
@@ -74,31 +75,31 @@ const randomMedia = () => {
 
 const randomSurveyResponses = count => {
     const surveyResponses = [
-        { id: null ,"idOrPrompt": "email", "val": `${randomEmail()}` },
-        { id: null ,"idOrPrompt": "name", "val": `john test-${count}` },
-        { id: 99 ,"idOrPrompt": 15, "val": randomValFrom(possible.usa.pronouns) },
-        { id: null ,"idOrPrompt": "seeking", "val": Math.random() > 0.2 ? possible.usa.seeking[0] : possible.usa.seeking[1] },
-        { id: 99 ,"idOrPrompt": 13, "val": randomValFrom(possible.usa.urgency) },
-        { id: null ,"idOrPrompt": "experience", "val": randomValFrom(possible.usa.experience) },
-        { id: 99 ,"idOrPrompt": 14, "val": "swe" },
-        { id: 99 ,"idOrPrompt": 10, "val": randomValFrom(possible.usa.duration) },
-        { id: 99 ,"idOrPrompt": 9, "val": randomValFrom(possible.usa.language) },
-        { id: 99 ,"idOrPrompt": 11, "val": randomValFrom(possible.usa.presence) },
-        { id: 99 ,"idOrPrompt": 7, "val": `${randomValFrom(possibleZipcodes)}` },
-        { id: 99 ,"idOrPrompt": 16, "val": `${randomNumber(55)}` },
-        { id: 99 ,"idOrPrompt": 12, "val": "this is a test of the survey signup" },
-        { id: 99 ,"idOrPrompt": 8, "val": randomMedia() },
-        { id: 99 ,"idOrPrompt": 1, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99 ,"idOrPrompt": 2, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99 ,"idOrPrompt": 3, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99 ,"idOrPrompt": 4, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99 ,"idOrPrompt": 5, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99 ,"idOrPrompt": 6, "val": `${randomNumber(3) - randomNumber(3)}` }
+        { id: null, "idOrPrompt": "email", "val": `${randomEmail()}` },
+        { id: null, "idOrPrompt": "name", "val": `john test-${count}` },
+        { id: 99, "idOrPrompt": 15, "val": randomValFrom(possible.usa.pronouns) },
+        { id: null, "idOrPrompt": "seeking", "val": Math.random() > 0.2 ? possible.usa.seeking[0] : possible.usa.seeking[1] },
+        { id: 99, "idOrPrompt": 13, "val": randomValFrom(possible.usa.urgency) },
+        { id: null, "idOrPrompt": "experience", "val": randomValFrom(possible.usa.experience) },
+        { id: 99, "idOrPrompt": 14, "val": "swe" },
+        { id: 99, "idOrPrompt": 10, "val": randomValFrom(possible.usa.duration) },
+        { id: 99, "idOrPrompt": 9, "val": randomValFrom(possible.usa.language) },
+        { id: 99, "idOrPrompt": 11, "val": randomValFrom(possible.usa.presence) },
+        { id: 99, "idOrPrompt": 7, "val": `${randomValFrom(possibleZipcodes)}` },
+        { id: 99, "idOrPrompt": 16, "val": `${randomNumber(55)}` },
+        { id: 99, "idOrPrompt": 12, "val": "this is a test of the survey signup" },
+        { id: 99, "idOrPrompt": 8, "val": randomMedia() },
+        { id: 99, "idOrPrompt": 1, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, "idOrPrompt": 2, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, "idOrPrompt": 3, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, "idOrPrompt": 4, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, "idOrPrompt": 5, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, "idOrPrompt": 6, "val": `${randomNumber(3) - randomNumber(3)}` }
     ]
     return surveyResponses
 }
 
-export { 
+export {
     api,
     validatorMapping,
     surveyFactory,

frontend/src/views/HomeView.vue

@@ -1,20 +1,39 @@
 <template lang="pug">
-main.view--home(
-    style='display: flex; flex-direction: column; gap: 40px; margin-top: 1em'
-)
-    header
-        SummaryBar
-        TagList(:icon="{ family: 'mdi', shape: 'heart' }")
-        AspectBar
-        PairingButton
-        h2 Match Queue
-
+main.view--home
+    
     article(v-if='cards.length && !loading')
-        ProfileCardList(:pid='pid' :profiles='cards' @reload='getCards')
+        ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
 
     p(v-else-if='cards.length === 0') No profiles in match_queue.
     p(v-else) Loading...
 
+    footer
+        w-form
+            w-input.mb2(
+                inner-icon-left='mdi mdi-account'
+                label='Full Name'
+                label-position='inside'
+                outline
+            )
+            w-input.mb2(
+                inner-icon-left='mdi mdi-mail'
+                label='E-mail'
+                label-position='inside'
+                outline
+            )
+            w-input.mb2(
+                inner-icon-left='mdi mdi-lock'
+                label='Password'
+                label-position='inside'
+                outline
+                type='password'
+            )
+
+        SummaryBar
+        TagList(:icon='{ family: "mdi", shape: "heart" }')
+        AspectBar
+        PairingButton
+
     MainNav
 </template>
 
@@ -27,6 +46,7 @@ import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
 
 import { Card } from '../entities'
+
 import {
     fetchQueueByProfileId,
     fetchMembershipsByProfileId,
@@ -88,9 +108,10 @@ export default {
             this.loading = false
         },
         // this can be placed in utils/notification.js
+
         notify(payload) {
             this.$waveui.notify({
-                message: payload.timetoken,
+                message: payload,
                 timeout: 6000,
                 bgColor: 'white',
                 color: 'success',

frontend/src/views/MatchesView.vue

@@ -15,25 +15,9 @@ main.view--matches.f-col.start.w-full
 <script>
 import ProfileCardList from '../components/ProfileCardList.vue'
 
-import { Card } from '../entities'
 import { fetchMembershipsByProfileId } from '../services'
 import { mixins } from '../utils'
 
-/** Callback used to format incoming into card */
-const convertToCard = grouping => {
-    if (grouping.type !== 'grouping') {
-        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
-    }
-    if (!grouping.profile.isValid()) {
-        console.warn(`Profile in ${grouping} is not a valid profile.`)
-    }
-    return new Card({
-        pid: grouping.profile.profile_id,
-        name: grouping.profile.user_name,
-        avatar: grouping.profile.profile_media[0],
-    })
-}
-
 export default {
     name: 'MatchView',
     components: { ProfileCardList },
@@ -43,8 +27,7 @@ export default {
         async getCards() {
             this.loading = true
             try {
-                const matchList = await fetchMembershipsByProfileId(this.pid)
-                this.cards = this._reformat(matchList, convertToCard)
+                this.cards = await fetchMembershipsByProfileId(this.pid)
             } catch (err) {
                 console.error(err)
             }

frontend/src/views/ProfileView.vue

@@ -1,37 +1,43 @@
 <template lang="pug">
-main.view--profile.f-col.start.w-full
+main.view--profile
     header 
-        h2 Profile Page
+        button(@click='$router.go(-1)') back
 
     article(v-if='!loading')
-        h3 name: {{ profile.user_name }}
-            span(v-if='profile.profile_prefs?.pronouns') &nbsp;({{ profile.profile_prefs?.pronouns.val }})
-        p(v-if='profile.user_email') {{ profile.user_email }}
+        ProfileCard(
+            :aspects='card.aspects'
+            :bio='card.bio'
+            :is-list='false'
+            :card='card'
+        )
+        //- h3 name: {{ profile.user_name }}
+        //-     span(v-if='profile.profile_prefs?.pronouns') &nbsp;({{ profile.profile_prefs?.pronouns.val }})
+        //- p(v-if='profile.user_email') {{ profile.user_email }}
 
-        p I am looking for a&nbsp;
-            span {{ profile.profile_prefs?.presence?.val }}&nbsp;
-            span {{ profile.profile_prefs?.role?.val }}&nbsp;
-            span role&nbsp;
-            span no further than {{ profile.profile_prefs?.distance?.val }} miles away&nbsp;
-            span from {{ profile.profile_prefs?.zipcode?.val }}
+        //- p I am looking for a&nbsp;
+        //-     span {{ profile.profile_prefs?.presence?.val }}&nbsp;
+        //-     span {{ profile.profile_prefs?.role?.val }}&nbsp;
+        //-     span role&nbsp;
+        //-     span no further than {{ profile.profile_prefs?.distance?.val }} miles away&nbsp;
+        //-     span from {{ profile.profile_prefs?.zipcode?.val }}
 
-        p I am {{ profile.profile_prefs?.urgency?.val.split('_').join(' ') }}.
+        //- p I am {{ profile.profile_prefs?.urgency?.val.split('_').join(' ') }}.
 
-        img(
-            :src='profile.profile_media[0]'
-            alt='profile-avatar'
-            style='max-height: 200px; width: auto'
-            v-if='profile.reveal.map(t => t.description).includes("image")'
-        )
-        h3(v-else) image not revealed
+        //- img(
+        //-     :src='profile.profile_media[0]'
+        //-     alt='profile-avatar'
+        //-     style='max-height: 200px; width: auto'
+        //-     v-if='profile.reveal.map(t => t.description).includes("image")'
+        //- )
+        //- h3(v-else) image not revealed
 
-        p About: {{ profile.profile_description }}
+        //- p About: {{ profile.profile_description }}
 
-        p reveal: {{ profile.reveal.map(t => t.description) }}
-        p tags: {{ profile.tags.map(t => t.description) }}
-        p images: {{ profile.profile_media }}
-        p responses: {{ profile.responses.length }}
-        button(@click='$router.go(-1)') back
+        //- p reveal: {{ profile.reveal.map(t => t.description) }}
+        //- p tags: {{ profile.tags.map(t => t.description) }}
+        //- p images: {{ profile.profile_media }}
+        //- p responses: {{ profile.responses.length }}
+        //- button(@click='$router.go(-1)') back
 
     p(v-else) Loading...
 
@@ -39,13 +45,17 @@ main.view--profile.f-col.start.w-full
 </template>
 
 <script>
+import ProfileCard from '../components/ProfileCard.vue'
 import { fetchProfileByProfileId } from '../services'
+import { makeCardFromProfile } from '../entities'
 
 export default {
     name: 'ProfileView',
+    components: { ProfileCard },
     data: () => ({
         loading: true,
         profile: {},
+        card: {},
     }),
     created() {
         this.getProfile()
@@ -60,6 +70,10 @@ export default {
             } catch (err) {
                 console.error(err)
             }
+            this.card = makeCardFromProfile(this.profile)
+            this.card.bio = this.profile.profile_description
+                ? this.profile.profile_description
+                : 'this is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long description'
             this.loading = false
         },
     },

frontend/src/wave.js

@@ -10,12 +10,14 @@ import {
     WCheckbox,
     WDrawer,
     WFlex,
+    WForm,
     WIcon,
     WImage,
     WInput,
     WMenu,
     WProgress,
     WOverlay,
+    WSelect,
     WSlider,
     WSpinner,
     WSteps,
@@ -32,12 +34,14 @@ export default {
     WCheckbox,
     WDrawer,
     WFlex,
+    WForm,
     WIcon,
     WImage,
     WInput,
     WMenu,
     WProgress,
     WOverlay,
+    WSelect,
     WSlider,
     WSpinner,
     WSteps,