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='aspects.map(data => data.percentage)'
                        :target-data='targetScore'
                        :profile-name='name'
                        v-if='isTab'
                    )

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

            // Skills Tab
            template(#item-content.4='{ item }')
                .tab--skills
                    p Education
                    w-timeline(:items='skills.education')
                    
                    p Licenses & Certificates
                    w-timeline(:items='skills.licenses')

                    p Skills
                    w-timeline(:items='skills.skills')

                    p Experience
                    w-timeline(:items='skills.experience')

        // 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.icon-compass(xl)
                    .w-flex.column.justify-start
                        p
                            span {{ tabContent[item].matchPerc }}%
                        p.text-capitalize {{ item }}
</template>

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

import { currentProfile } from '../services'

export default {
    components: { SpiderChart },
    props: {
        aspects: {
            required: true,
            type: Array,
        },
        tabContent: {
            required: true,
            type: Object,
        },
        name:{
            required:true,
            type: String
        },
        isTab: {
            required: false,
            type: Boolean,
            default: false,
        },
        showIcon: {
            required: false,
            type: Boolean,
            default: true,
        },
    },
    emits: ['tab-change'],
    data: () => ({
        aspirations: [
            {  title: 'Full-Time', content: 'Full-time for me is working 40 hrs a week in a non-contractual position.', icon: 'wi-check-circle' },
            {  title: 'On-site', content: 'I prefer to be onsite 5 days a week at my primary hospital location.', icon: 'wi-cross-circle' },
            { title: 'Relocate', content: 'I am willing to relocate to states on the east coast. My family is back east.', icon: 'wi-warning-circle' },
            { title: 'Management Skills', content: 'Proactive with leading teams and managing benchmark goals for the department.', icon: 'wi-info-circle' },
            { title: 'Mentorship', content: 'I am seeking mentorship in leadership and building a strong team dynamic.', icon: 'wi-cross-circle' },
            { title: 'Work in Los Angeles, California', content: 'I am eager to work in Los Angeles, California to explore new opportunities in healthcare.', icon: 'wi-warning-circle' },
            { title: 'Work in ICU', content: 'Passionate about working in ICU, providing critical care and making a difference in patients\' lives.', icon: 'wi-info-circle' },
        ],
        skills: {
            education: [
                { title: 'Masters Degree, Science in Nursing', content: 'UCLA', icon: 'wi-check-circle' },
            ],
            licenses: [
                { title: 'California RN License', content: 'FRXD45643YHT678', icon: 'wi-cross-circle' },
                { title: 'ACLS & PALS', content: 'IIDVg909473662678', icon: 'wi-warning-circle' },
                { title: 'BCLS Certification', content: 'LUB9839582', icon: 'wi-cross-circle' },
                { title: 'Diversity Training', content: '', icon: 'wi-warning-circle' },
            ],
            skills: [
                { title: 'Excel Spreadsheet', content: 'Advanced Excel user, adept at creating complex formulas, charts, and pivot tables for data analysis.', icon: 'wi-info-circle' },
                { title: 'fetal heart monitoring', content: 'Proficient in fetal heart monitoring, interpreting data, and promptly acting to ensure fetal well-being.', icon: 'wi-info-circle' },
                { title: 'problem-solving', content: 'Strong problem-solving skills, able to identify issues and implement effective solutions under pressure.', icon: 'wi-info-circle' },
            ],
            experience: [
                { title: 'surgical settings', content: 'Experienced in surgical settings, assisting surgeons and managing patient care during procedures.', icon: 'wi-info-circle' },

            ],
        },
    }),
    computed: {
        targetScore(){
            try{
                let aspectResponses = currentProfile._profile.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
                return aspectResponses.map(r => Number(r.val)) 
            }
            catch(e){
                console.warn('error: No aspect responses for current profile.')
                return [1,1,1,1,1,1]
            }
        }
    },
    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>