:sparkles: polished SpiderChart component | introduced ProfileCardItem vs ProfileCard

frontend/src/components/ProfileCard.vue

@@ -27,6 +27,8 @@ w-card.profile-card-list--card.xs12.pa12
             v-if='!isPaired || isList'
         )
 
+    SpiderChart
+
     footer(v-if='!isList && !isPaired')
         .pa12
             p {{ card.summary.about.tab }}
@@ -46,6 +48,7 @@ import NamePlate from './NamePlate.vue'
 import AspectBar from './AspectBar.vue'
 import SummaryBar from './SummaryBar.vue'
 import TagList from './TagList.vue'
+import SpiderChart from './SpiderChart.vue'
 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()

frontend/src/components/ProfileCardItem.vue

@@ -0,0 +1,109 @@
+<template lang="pug">
+w-card.profile-card-list--card.xs12.pa12
+    header.xs12.w-flex.column.center
+        NamePlate(
+            :is-list='isList'
+            :is-paired='isPaired'
+            :name='card.name'
+            :pid='card.pid'
+            :pronouns='card.pronouns'
+            :role='card.role'
+        )
+
+        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
+            w-icon.mr1(xl) mdi mdi-chat
+            | start chat
+
+        template(v-if='!isList')
+            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            TagList(v-if='!isPaired || isList')
+
+    article.xs12.w-flex.column.justify-space-between
+        AspectBar(
+            :key='aspect.name'
+            :labels='aspect.labels'
+            :percentage='aspect.percentage'
+            v-for='aspect in aspects'
+            v-if='!isPaired || isList'
+        )
+
+    footer(v-if='!isList && !isPaired')
+        .pa12
+            p {{ card.summary.about.tab }}
+        PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+    updateQueueByProfileId,
+    postMembershipByProfileId,
+    currentProfile,
+} from '../services'
+
+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 router = useRouter()
+// const isPaired = ref(true)
+const isPaired = ref(false)
+
+const props = defineProps({
+    card: {
+        type: Object,
+        required: true,
+    },
+    aspects: {
+        type: Array,
+        required: true,
+    },
+    isList: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+})
+
+/**
+ * Attempt to pair with target profile
+ * Creates a grouping, and a membership
+ * for both profileId and targetId
+ */
+const onPair = async () => {
+    const group = await postMembershipByProfileId({
+        profileId: currentProfile.id.value,
+        targetId: props.card.pid,
+    })
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, false)
+    currentProfile.getGroupings()
+    console.warn('created grouping:', group)
+
+    let goToRoute = { name: 'HomeView' }
+    // if (group.membershipMatch.hasMatch) {
+    //     goToRoute = { name: 'PairsView' }
+    // }
+    router.push(goToRoute)
+}
+
+/**
+ * Send to the back of the matchQueue
+ * and forward back home
+ */
+const onPass = async () => {
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, true)
+    router.push({ name: 'HomeView' })
+}
+</script>
+
+<style lang="sass">
+.profile-card-list--card
+    background-color: #000
+    color: #fff
+    header > .w-button
+        background-color: #116006
+        color: #fff
+</style>

frontend/src/components/ProfileCardList.vue

@@ -4,7 +4,7 @@ section.profile-card-list.xs12.w-flex.column
         w-select(:items="['one', 'two', 'three']" outline) Label
     
     article
-        ProfileCard.match-layout(
+        ProfileCardItem.match-layout(
             v-for="(card, i) in cards"
             :key="`${card.pid}-${i}`"
             :card="card"
@@ -21,7 +21,7 @@ import {
     postMembershipByProfileId,
     currentProfile,
 } from '../services'
-import ProfileCard from './ProfileCard.vue'
+import ProfileCardItem from './ProfileCardItem.vue'
 
 class Aspect {
     constructor({ name, labels, percentage = 50 }) {

frontend/src/components/SpiderChart.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-div
-    canvas(id='spiderChart')
+.spider-chart
+    canvas(id='spider-chart-canvas')
 </template>
 <script>
 import {Chart, registerables} from 'chart.js'
@@ -16,25 +16,19 @@ const data = {
         'Ordered'
     ],
     datasets:[{
-        label: 'First dataset',
+        label: 'Lucy',
+        data: [5.7,5.2,4.8,5.2,4.9,4.9],
         fill: true,
-        backgroundColor: 'rgb(255, 33, 33)',
-        borderColor: 'rgb(255, 99, 132)',
-        data: [1,2,3,4,5,6],
-        pointBackgroundColor: 'rgb(255, 99, 132)',
-        pointBorderColor: '#fff',
-        pointHoverBackgroundColor: '#fff',
-        pointHoverBorderColor: 'rgb(255, 99, 132)'
+        backgroundColor: 'rgba(242, 205, 92, 0.3)',
+        borderColor: '#F2CD5C',
+        borderWidth: '1px',
     }, {
-        label: 'My Second Dataset',
-        data: [6,5,4,3,2,1],
+        label: 'Role',
+        data: [5.3,4.8,5.7,4.8,5.6,4.8],
         fill: true,
-        backgroundColor: 'rgba(54, 162, 235, 0.2)',
-        borderColor: 'rgb(54, 162, 235)',
-        pointBackgroundColor: 'rgb(54, 162, 235)',
-        pointBorderColor: '#fff',
-        pointHoverBackgroundColor: '#fff',
-        pointHoverBorderColor: 'rgb(54, 162, 235)'
+        backgroundColor: 'rgba(3, 136, 166, 0.30)',
+        borderColor: '#0388A6',
+        borderWidth: '1px',
     }]
 }
 
@@ -42,9 +36,32 @@ const config = {
     type: 'radar',
     data: data,
     options: {
-        elements:{
-            line:{
-                borderWidth: 3
+        plugins:{
+            legend: {
+                position: 'bottom',
+                labels:{
+                    color: '#FFFFFF',
+                    boxWidth: 10,
+                }
+            },
+        },
+        scales:{
+            r:{
+                angleLines:{
+                    color: '#FFFFFF'
+                },
+                grid:{
+                    color: '#EAF0F4',
+                    lineWidth: 1,
+                },
+                pointLabels:{
+                    color: '#FFFFFF',
+                },
+                suggestedMax: 6,
+                ticks: {
+                    display: false,
+                    stepSize: 1.6,
+                },
             }
         }
     }
@@ -58,8 +75,13 @@ export default{
         }
     },
     mounted() {
-        const ctx = document.getElementById('spiderChart');
+        const ctx = document.getElementById('spider-chart-canvas');
         new Chart(ctx, this.spiderChartData);
     }
 }
-</script>
+</script>
+<style lang="sass">
+.spider-chart
+    display: flex
+    margin: 3vw auto
+</style>

frontend/src/views/HomeView.vue

@@ -1,35 +1,34 @@
 <template lang="pug">
-SpiderChart
-//- main.view--home
-    //- article(v-if='cards.length && !loading')
-    //-     ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
+main.view--home
+    article(v-if='cards.length && !loading')
+        ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
 
-    //- p(v-else-if='cards.length === 0') No profiles in match_queue.
-    //- w-spinner(v-else bounce)
+    p(v-else-if='cards.length === 0') No profiles in match_queue.
+    w-spinner(v-else bounce)
 
-    //- 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'
-    //-         )
+    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'
+            )
 
-    //- MainNav
+    MainNav
 </template>
 
 <script>
@@ -39,7 +38,6 @@ import TagList from '../components/TagList.vue'
 import AspectBar from '../components/AspectBar.vue'
 import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
-import SpiderChart from '../components/SpiderChart.vue'
 
 import { Card } from '../entities'
 
@@ -87,7 +85,6 @@ export default {
         TagList,
         SummaryBar,
         PairingButton,
-        SpiderChart,
     },
     mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {