siimee/frontend/src/components/ProfileCardList.vue

<template lang="pug">
section.profile-card-list
    .swipe(
        v-if="!isGrid"
        :config="config"
        :key="profile.pid"
        @throwout="swipped(profile)"
        v-for="(profile, i) in loadedProfiles"
        :style="{ 'z-index': 1000-i }"
    )
        .card.randomize(
            :style="{ 'background-image': `url(${profile.avatar})`, '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") Accept
                        button(@click="view(profile.pid)") view
                        //- Pass
                        button(@click="pass") Pass
    
    .match-layout(
        v-else
        :key="profile.pid"
        v-for="(profile, i) in loadedProfiles"
    )
            .card.bg-cover(
                :style="{ 'background-image': `url(${profile.avatar})` }"
            )
                .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 { useRouter } from 'vue-router'
import {
    updateQueueByProfileId,
    fetchMembershipsByProfileId,
    postMembershipByProfileId,
} from '../services'

const router = useRouter()
const emit = defineEmits(['reload'])

const props = defineProps({
    profiles: {
        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,
    },
})

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 () => {
    // 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
    const targetId = props.profiles[0].pid
    updateQueueByProfileId(profileId, targetId, false)
    // TODO: next step is grouping/membership
    const checkMembership = await fetchMembershipsByProfileId(profileId)
    if (!checkMembership.length) {
        postMembershipByProfileId({ profileId, targetId })
    }
    emit('reload')
}
const view = pid => {
    router.push({ path: `/matches/${pid}` })
}
const pass = () => {
    const targetId = props.profiles[0].pid
    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>