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='[5.7, 5.2, 4.8, 5.2, 4.9, 4.9]'
                        :role-data='[5.3, 4.8, 5.7, 4.8, 5.6, 4.8]'
                        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 {{ tabContent[item].matchPerc }}%
                        p {{ 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'],
    methods: {
        onTabChanged(tabs) {
            this.$emit('tab-change', tabs)
        },
    },
}
</script>