155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
Vue
<script setup>
|
|
const router = useRoute('pages-user-profile-tab')
|
|
const projectData = ref([])
|
|
|
|
const fetchProjectData = async () => {
|
|
if (router.params.tab === 'projects') {
|
|
const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
|
|
|
|
projectData.value = data
|
|
}
|
|
}
|
|
|
|
watch(router, fetchProjectData, { immediate: true })
|
|
|
|
const moreList = [
|
|
{
|
|
title: 'Rename Project',
|
|
value: 'Rename Project',
|
|
},
|
|
{
|
|
title: 'View Details',
|
|
value: 'View Details',
|
|
},
|
|
{
|
|
title: 'Add to favorites',
|
|
value: 'Add to favorites',
|
|
},
|
|
{
|
|
type: 'divider',
|
|
class: 'my-2',
|
|
},
|
|
{
|
|
title: 'Leave Project',
|
|
value: 'Leave Project',
|
|
class: 'text-error',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VRow v-if="projectData">
|
|
<VCol
|
|
v-for="data in projectData"
|
|
:key="data.title"
|
|
cols="12"
|
|
sm="6"
|
|
lg="4"
|
|
>
|
|
<VCard>
|
|
<VCardItem class="pb-4">
|
|
<template #prepend>
|
|
<VAvatar
|
|
:image="data.avatar"
|
|
size="38"
|
|
/>
|
|
</template>
|
|
|
|
<VCardTitle>{{ data.title }}</VCardTitle>
|
|
<div>
|
|
<span class="font-weight-medium">Client:</span>
|
|
{{ data.client }}
|
|
</div>
|
|
|
|
<template #append>
|
|
<div>
|
|
<MoreBtn
|
|
item-props
|
|
:menu-list="moreList"
|
|
density="compact"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</VCardItem>
|
|
|
|
<VCardText>
|
|
<div class="d-flex align-center justify-space-between flex-wrap gap-x-2 gap-y-4">
|
|
<div class="py-2 px-3 bg-var-theme-background rounded">
|
|
<div>
|
|
<span class="text-high-emphasis font-weight-medium">{{ data.budgetSpent }}</span>/{{ data.budget }}
|
|
</div>
|
|
<div>Total Budget</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<span class="text-high-emphasis font-weight-medium">Start Date:</span> {{ data.startDate }}
|
|
</div>
|
|
<h6 class="text-base font-weight-medium">
|
|
Deadline: <span class="text-body-1">{{ data.deadline }}</span>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-4 mb-0 clamp-text">
|
|
{{ data.description }}
|
|
</p>
|
|
</VCardText>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText>
|
|
<div class="d-flex align-center justify-space-between flex-wrap gap-2">
|
|
<div>
|
|
<span class="font-weight-medium text-high-emphasis">All Hours:</span> {{ data.hours }}
|
|
</div>
|
|
|
|
<VChip
|
|
:color="data.chipColor"
|
|
size="small"
|
|
>
|
|
{{ data.chipText }}
|
|
</VChip>
|
|
</div>
|
|
|
|
<div class="d-flex align-center justify-space-between flex-wrap text-caption text-medium-emphasis mt-4 mb-2">
|
|
<div>Task: {{ data.tasks }}</div>
|
|
<div>{{ Math.round((data.completedTask / data.totalTask) * 100) }}% Completed</div>
|
|
</div>
|
|
<VProgressLinear
|
|
rounded
|
|
height="8"
|
|
:model-value="data.completedTask"
|
|
:max="data.totalTask"
|
|
color="primary"
|
|
/>
|
|
|
|
<div class="d-flex align-center justify-space-between flex-wrap gap-2 mt-4">
|
|
<div class="d-flex align-center">
|
|
<div class="v-avatar-group me-2">
|
|
<VAvatar
|
|
v-for="avatar in data.avatarGroup"
|
|
:key="avatar.name"
|
|
:image="avatar.avatar"
|
|
:size="32"
|
|
/>
|
|
</div>
|
|
<div class="text-sm">
|
|
{{ data.members }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-x-1 align-center text-disabled">
|
|
<VIcon
|
|
icon="ri-wechat-line"
|
|
size="24"
|
|
/>
|
|
<div>{{ data.comments }}</div>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|