siimee/frontend/src/components/ProfileCard.vue

<template lang="pug">
w-card.profile-card-list--card.xs12
    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'
        )

        template(v-if='!isList')
            w-button.text-upper.xs12.pa6(v-if='currentTab == 0 && isPaired')
                w-icon.mr1(xl) mdi mdi-chat
                | start chat

            SummaryBar(
                :aspects='aspects'
                :is-tab='isPaired'
                :tab-content='card.summary'
                @tab-change='onTab'
            )
            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')
        .px3
            p {{ card.summary.about.tab }}
        PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
        w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
            w-icon.mr1(xl) mdi mdi-chat
            | start chat
</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,
    },
})

/**
 * Track tab state for conditional rendering
 */
const currentTab = ref(0)
const onTab = tabIndex => {
    if (currentTab.value == tabIndex) return
    currentTab.value = tabIndex
}

/**
 * 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
    width: 100%
    max-width: 450px
    margin: 11px auto
    header > .w-button
        background-color: #116006
        color: #fff
    footer
        margin-bottom: 22px
        p
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
            margin: 11px auto
            padding: 0 7px
            line-height: 1.619em
</style>