siimee/frontend/src/components/ProfileCard.vue

<template lang="pug">
w-card.profile-card-list--card.xs12
    header.xs12.w-flex.column.center
        NamePlate(
            :ethnicity='card.ethnicity'
            :is-list='isList'
            :is-paired='isPaired'
            :locale='card.locale'
            :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.icon-chat(xl)
                | start chat

            //- TODO: Uncomment me
            //- SummaryBar(
            //-     :aspects='aspects'
            //-     :is-tab='isPaired'
            //-     :tab-content='card.summary'
            //-     @tab-change='onTab'
            //- )

            //- This version forces tabs on
            SummaryBar(
                :aspects='aspects'
                :is-tab='true'
                :name='card.name'
                :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.icon-chat(xl)
            | start chat
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 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 () => {
    currentProfile._loading = true
    const profileId = currentProfile.id.value
    const targetId = props.card.pid
    await postMembershipByProfileId({
        profileId,
        targetId,
    })
    await currentProfile.updateQueue(profileId, targetId, false)
    await currentProfile.getGroupings()
    currentProfile._loading = false

    let goToRoute = { name: 'HomeView' }
    router.push(goToRoute)
}

/**
 * Send to the back of the matchQueue
 * and forward back home
 */
const onPass = async () => {
    currentProfile._loading = true
    await currentProfile.updateQueue(
        currentProfile.id.value,
        props.card.pid,
        true,
    )
    currentProfile._loading = false

    let goToRoute = { name: 'HomeView' }
    router.push(goToRoute)
}
</script>

<style lang="sass">
@import '../assets/sass/main'

.profile-card-list--card
    background-color: $black
    color: #fff
    width: 100%
    max-width: 450px
    margin: 11px auto
    header > .w-button
        background-color: $dark-green
        color: #fff
    footer
        margin-bottom: 22px
        p
            font-family: Source Pro, AppleGothic, sans-serif
            margin: 11px auto
            padding: 0 7px
            line-height: 1.619em
</style>