siimee/frontend/src/views/PairsView.vue

<template lang="pug">
main.view--pairs
    article
        template(v-if='isLoading')
            w-spinner(bounce)
        template(v-else)
            w-tabs(:items='tabs' fill-bar slider-color='yellow')
                template(#item-title='{ item }')
                    span {{ item.title }}
                //- pending tab
                template(#item-content.1='{ item }')
                    PairsList(:pairs='pending' tab-name='pending')
                //- paired tab 
                template(#item-content.2='{ item }')
                    PairsList(:pairs='paired' tab-name='paired')

    MainNav
</template>

<script>
import { Card } from '../entities'
import PairsList from '../components/PairsList.vue'

import { currentProfile } from '../services'
import { mixins } from '../utils'

const convertGroupingToCard = grouping => {
    if (grouping.type !== 'grouping') {
        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
    }
    if (!grouping.profile.isValid()) {
        console.warn(`Profile in ${grouping} is not a valid profile.`)
    }
    return {
        profile: new Card({
            pid: grouping.profile.profile_id,
            name: grouping.profile.user_name,
            avatar: grouping.profile.profile_media[0],
        }),
        grouping,
    }
}

export default {
    name: 'PairsView',
    components: { PairsList },
    mixins: [mixins.profileMixin],
    data: () => ({
        tabs: [{ title: 'Pending' }, { title: 'Paired' }],
    }),
    computed: {
        pending() {
            if (!this.isLoggedIn || !currentProfile.pendingGroupings) return []
            return this._reformat(
                currentProfile.pendingGroupings,
                convertGroupingToCard,
            )
        },
        paired() {
            if (!this.isLoggedIn || !currentProfile.pairedGroupings) return []
            return this._reformat(
                currentProfile.pairedGroupings,
                convertGroupingToCard,
            )
        },
    },
    methods: {
        _reformat(data, mapCb) {
            return data.map(mapCb)
        },
    },
}
</script>

<style lang="sass">
.view--pairs
    max-width: 450px
    width: 100%
    margin: 0 auto
    background-color: #1F2024
    .w-tabs
        &__bar-item
            height: 50px
            font-family: 'Century Gothic'
            color: #FFFFFF
            &.primary
                color: #F2CD5C
    .select--matches
        display: flex
        justify-content: space-between
        margin: 0 25px
        > div
            width: 100%
            text-align: center
            font-size: 16px
            line-height: 40px
    .active
        border-bottom: 3px solid #f2cd5c
        color: #f2cd5c
    .idle
        color: #bcc5d3
</style>