siimee/frontend/src/components/ProfileCardList.vue

<template lang="pug">
section.profile_card_list.w-full
    .profile_card_list_container.w-full
        .swipe(
            v-if="!isGrid"
            :config="config"
            :key="profile.pid"
            @throwout="swipped(profile)"
            v-for="(profile, i) in loadedProfiles"
            :style="{ 'z-index': 1000-i }"
        )
            .card.b-solid.rounded.p-0.bg-cover.randomize(
                :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
            )
                .card__content
                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
                nav.swipe_icons.w-full.f-row.between
                    //- Accept
                    button.p-1(@click="accept") Accept
                    //- Hold
                    button.p-1(@click="view(profile.pid)") view
                    //- Pass
                    button.p-1(@click="pass") Pass
        
        .match-layout(
            v-else
            :key="profile.pid"
            v-for="(profile, i) in loadedProfiles"
        )
                .card.b-solid.rounded.p-0.bg-cover(
                    :style="{ 'background-image': `url(${profile.avatar})` }"
                )
                .card__content
                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
</template>

<script setup>
import { useRouter } from 'vue-router'
import { defineProps, defineEmits } from 'vue'
import {
    updateQueueByProfileId,
    fetchMembershipsByProfileId,
    postMembershipByProfileId,
} from '../services'

const router = useRouter()
const emit = defineEmits(['reload-queue'])
// TODO: Please review this conversion from script to script setup
// converted from the props section
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 () => {
    console.log('accepted aka do NOT reinsert')
    // 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) {
        console.log('Make membership')
        postMembershipByProfileId({ profileId, targetId })
    }
    emit('reload-queue')
}
const view = pid => {
    router.push({
        name: 'ProfileView',
        params: { pid },
    })
}
const pass = () => {
    console.log('passed aka do reinsert')
    // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=true`)
    const profileId = props.pid
    const targetId = props.profiles[0].pid
    updateQueueByProfileId(profileId, targetId, true)
    emit('reload-queue')
}

// 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>

<style lang="postcss">
.profile_card_list_container
    display: flex
    justify-content: center

.swipe
    position: absolute
.randomize
    position: relative

.card
    position: relative
    background-color: #fff
    width: 250px
    max-width: 85vw
    height: 50vh
    background-position: center
    &_content
        width: 100%
        height: 100%
    h3
        position: absolute
        bottom: 0

.swipe_icons
    position: fixed
    bottom: 5vh
    width: 250px
</style>