136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<script setup>
|
|
const router = useRoute('pages-user-profile-tab')
|
|
const connectionData = ref([])
|
|
|
|
const fetchProjectData = async () => {
|
|
if (router.params.tab === 'connections') {
|
|
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
|
|
|
connectionData.value = data
|
|
}
|
|
}
|
|
|
|
watch(router, fetchProjectData, { immediate: true })
|
|
|
|
const moreBtnList = [
|
|
{
|
|
title: 'Share connection',
|
|
value: 'Share connection',
|
|
},
|
|
{
|
|
title: 'Block connection',
|
|
value: 'Block connection',
|
|
},
|
|
{
|
|
type: 'divider',
|
|
class: 'my-2',
|
|
},
|
|
{
|
|
title: 'Delete',
|
|
value: 'Delete',
|
|
class: 'text-error',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
v-for="data in connectionData"
|
|
:key="data.name"
|
|
sm="6"
|
|
lg="4"
|
|
cols="12"
|
|
>
|
|
<VCard>
|
|
<div class="vertical-more">
|
|
<MoreBtn
|
|
item-props
|
|
:menu-list="moreBtnList"
|
|
/>
|
|
</div>
|
|
|
|
<VCardText>
|
|
<div class="d-flex flex-column align-center justify-center">
|
|
<VAvatar
|
|
size="100"
|
|
:image="data.avatar"
|
|
class="mb-6"
|
|
/>
|
|
|
|
<h5 class="text-h5">
|
|
{{ data.name }}
|
|
</h5>
|
|
<div class="text-body-1">
|
|
{{ data.designation }}
|
|
</div>
|
|
|
|
<div class="d-flex align-center flex-wrap gap-4 my-6">
|
|
<VChip
|
|
v-for="chip in data.chips"
|
|
:key="chip.title"
|
|
:color="chip.color"
|
|
size="small"
|
|
>
|
|
{{ chip.title }}
|
|
</VChip>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-space-around">
|
|
<div class="text-center">
|
|
<h5 class="text-h5">
|
|
{{ data.projects }}
|
|
</h5>
|
|
<div class="text-body-1">
|
|
Projects
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<h5 class="text-h5">
|
|
{{ data.tasks }}
|
|
</h5>
|
|
<div class="text-body-1">
|
|
Tasks
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<h5 class="text-h5">
|
|
{{ data.connections }}
|
|
</h5>
|
|
<div class="text-body-1">
|
|
Connections
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-center gap-4 mt-6">
|
|
<VBtn
|
|
:prepend-icon="data.isConnected ? 'ri-user-follow-line' : 'ri-user-add-line'"
|
|
:variant="data.isConnected ? 'elevated' : 'outlined'"
|
|
>
|
|
{{ data.isConnected ? 'connected' : 'connect' }}
|
|
</VBtn>
|
|
|
|
<IconBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
rounded
|
|
>
|
|
<VIcon icon="ri-mail-open-line" />
|
|
</IconBtn>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.vertical-more {
|
|
position: absolute;
|
|
inset-block-start: 1rem;
|
|
inset-inline-end: 0.5rem;
|
|
}
|
|
</style>
|