siimee/frontend/src/components/SummaryBar.vue

<template lang="pug">
section.w-flex.column.pb5
    nav.fill-width.w-flex.column.justify-space-between
        // Tabbed Layout
        w-tabs(
            :items='Object.keys(tabContent)'
            @input='onTabChanged'
            center
            fill-bar
            v-if='isTab'
        )
            template(#item-title='{ item }')
                .w-flex.column.justify-start
                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
                    p(v-else) &nbsp;
                    p {{ item }}
            // About Tab
            template(#item-content.1='{ item }')
                .tab--about
                    p {{ tabContent[item].tab }}
                    br
                    p {{ tabContent[item].tab }}
                    br
                    hr

            // Passion Tab
            template(#item-content.2='{ item }')
                .tab--passion
                    p {{ tabContent[item].tab }}
                    SpiderChart(
                        :labels='aspects.map(label => label.name)'
                        :profile-data='profileScore'
                        :target-data='targetScore'
                        profile-name='lucy'
                        v-if='isTab'
                    )

            // Aspirations Tab
            template(#item-content.3='{ item }')
                .tab--aspirations
                    p {{ tabContent[item].tab }}

            // Skills Tab
            template(#item-content.4='{ item }')
                .tab--skills
                    p {{ tabContent[item].tab }}

        // Untabbed Layout
        ul.w-flex.row.justify-space-between(v-else)
            template(
                :key='index'
                v-for='(item, index) in Object.keys(tabContent)'
            )
                li.w-flex.row(v-if='item !== "about"')
                    w-icon.mr1(xl) mdi mdi-heart
                    .w-flex.column.justify-start
                        p 
                            span {{ tabContent[item].matchPerc }}%
                        p.text-capitalize {{ item }}
</template>

<script>
import SpiderChart from './SpiderChart.vue'

export default {
    components: { SpiderChart },
    props: {
        aspects: {
            required: true,
            type: Array,
        },
        tabContent: {
            required: true,
            type: Object,
        },
        isTab: {
            required: false,
            type: Boolean,
            default: false,
        },
        showIcon: {
            required: false,
            type: Boolean,
            default: true,
        },
    },
    emits: ['tab-change'],
    data: () => ({
        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
    }),
    methods: {
        onTabChanged(tabs) {
            this.$emit('tab-change', tabs)
        },
    },
}
</script>
<style lang="sass">
    section
        font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
        ul
            margin: 11px 0
            li
                margin: 0 7px
                font-size: .8em
                p > span
                    font-weight: bold
                    font-size: 1em
            li:not(:last-child)
                border-right: 1px solid #fff
</style>