siimee/frontend/src/components/ProfileCardList.vue

<template lang="pug">
section.profile-card-list.xs12.w-flex.column
    header.xs12.w-flex 
        w-select(:items='["one", "two", "three"]' outline) Label

    article
        ProfileCard.match-layout(
            :aspects='aspects'
            :card='card'
            :is-list='true'
            :key='`${card.pid}-${i}`'
            v-for='(card, i) in cards'
        )
</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 router = useRouter()
const emit = defineEmits(['reload'])

const props = defineProps({
    cards: {
        type: [Object, Array],
        default: () => [
            {
                pid: '1',
                name: 'Full Name',
                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                metadata: { age: '21', rawMetadata: 'Some Text Here!' },
            },
        ],
    },
    pid: {
        type: Number,
        default: 9999,
    },
    isGrid: {
        type: Boolean,
    },
})

// AHP Button behavior
const accept = async targetId => {
    if (targetId == props.pid) return
    // need to pass these arguments (profileId, targetId, status)
    // the url structure is
    // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
    // http://localhost:3001/api/profile/38/queue/9/delete?include_profile=true&reinsert=true
    const profileId = props.pid
    await updateQueueByProfileId(profileId, targetId, false)
    const { membershipMatch, groupingName } = await postMembershipByProfileId({
        profileId,
        targetId,
    })

    // Reuse old grouping name if theres a match
    let channel = groupingName
    if (membershipMatch?.hasMatch) {
        channel = membershipMatch.groupings[0].grouping_name
    }
    await subscribeToChannel(channel)
    emit('reload')
}

const subscribeToChannel = async channelName => {
    // create a chatter reference from the current profile
    const chatter = currentProfile.chatter

    /**
     * publish a new message to the chatter with the channel and the message & title is optional
     */
    // You MUST send chatter channels as an array in an object
    chatter.subscribe({ channels: [channelName] })
    const res = await chatter.publish(channelName, {
        title: 'New Message',
        description: `This is the checking to see if we are subscribed to the ${channelName} channel!`,
    })
    // PubNub response will be a timecode of when the message was published
    //router.push({ path: `/chat/${pid}` })
}

const pass = targetId => {
    if (targetId == props.pid) return
    updateQueueByProfileId(props.pid, targetId, true)
    emit('reload')
}
</script>

<style lang="sass">
.profile-card-list
    > header > .w-select >.primary
        margin-top: 0
</style>