216 lines
4.7 KiB
Vue
216 lines
4.7 KiB
Vue
<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
import avatar2 from '@images/avatars/avatar-2.png'
|
|
import avatar3 from '@images/avatars/avatar-3.png'
|
|
import avatar5 from '@images/avatars/avatar-5.png'
|
|
import avatar8 from '@images/avatars/avatar-8.png'
|
|
|
|
const teamMembers = [
|
|
{
|
|
profilePic: avatar1,
|
|
name: 'Dean Hogan',
|
|
designation: 'IOS developer',
|
|
project: 'Zipper',
|
|
projectIndication: 'primary',
|
|
task: '87/135',
|
|
progress: 65,
|
|
},
|
|
{
|
|
profilePic: avatar8,
|
|
name: 'Hilda Rice',
|
|
designation: 'Laravel developer',
|
|
project: 'Brandi',
|
|
projectIndication: 'success',
|
|
task: '340/420',
|
|
progress: 75,
|
|
},
|
|
{
|
|
profilePic: avatar5,
|
|
name: 'Andrew O\'Brien',
|
|
designation: 'React developer',
|
|
project: 'Payers',
|
|
projectIndication: 'warning',
|
|
task: '50/82',
|
|
progress: 55,
|
|
},
|
|
{
|
|
profilePic: avatar2,
|
|
name: 'Eleanor Price',
|
|
designation: 'Angular developer',
|
|
project: 'Citibank',
|
|
projectIndication: 'error',
|
|
task: '98/260',
|
|
progress: 60,
|
|
},
|
|
{
|
|
profilePic: avatar3,
|
|
name: 'Carl Oliver',
|
|
designation: 'VueJs developer',
|
|
project: 'Aviator',
|
|
projectIndication: 'secondary',
|
|
task: '12/25',
|
|
progress: 60,
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<!-- SECTION Card Header and Menu -->
|
|
<VCardItem>
|
|
<!-- 👉 Title -->
|
|
<VCardTitle>Team Members</VCardTitle>
|
|
|
|
<!-- 👉 menu -->
|
|
<template #append>
|
|
<div class="me-n3">
|
|
<MoreBtn />
|
|
</div>
|
|
</template>
|
|
</VCardItem>
|
|
<!-- !SECTION -->
|
|
|
|
<!-- TODO try to remove table border -->
|
|
<VTable class="text-no-wrap team-members-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
Name
|
|
</th>
|
|
<th scope="col">
|
|
Project
|
|
</th>
|
|
<th scope="col">
|
|
Tasks
|
|
</th>
|
|
<th scope="col">
|
|
Progress
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="member in teamMembers"
|
|
:key="member.name"
|
|
>
|
|
<td>
|
|
<div class="d-flex align-center">
|
|
<div class="me-3">
|
|
<VAvatar
|
|
size="38"
|
|
:image="member.profilePic"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-h6">
|
|
{{ member.name }}
|
|
</h6>
|
|
<div class="text-body-1">
|
|
{{ member.designation }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td>
|
|
<VChip
|
|
:color="member.projectIndication"
|
|
size="small"
|
|
>
|
|
{{ member.project }}
|
|
</VChip>
|
|
</td>
|
|
|
|
<td>
|
|
<div class="d-flex font-weight-medium">
|
|
<div class="text-primary">
|
|
{{ member.task.split('/')[0] }}
|
|
</div>
|
|
<div class="text-primary">
|
|
/
|
|
</div>
|
|
<h6 class="text-h6 text-medium-emphasis">
|
|
{{ member.task.split('/')[1] }}
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
<VProgressCircular
|
|
:color="member.projectIndication"
|
|
:model-value="member.progress"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</VCard>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.team-members-table {
|
|
&.v-table{
|
|
--v-table-header-height: 2rem;
|
|
|
|
.v-table__wrapper{
|
|
table{
|
|
thead{
|
|
tr{
|
|
th{
|
|
background: none !important;
|
|
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
|
margin-block-end: 0.75rem !important;
|
|
|
|
&:first-child{
|
|
padding-inline-start: 1.25rem;
|
|
}
|
|
|
|
&:last-child{
|
|
padding-inline-end: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody{
|
|
tr{
|
|
td{
|
|
padding-block: 0.5rem;
|
|
padding-inline: 1rem;
|
|
|
|
&:first-child{
|
|
padding-inline-start: 1.25rem;
|
|
}
|
|
|
|
&:last-child{
|
|
padding-inline-end: 1.25rem;
|
|
}
|
|
}
|
|
|
|
&:not(:last-child){
|
|
td{
|
|
border-block-end: none ;
|
|
}
|
|
}
|
|
|
|
&:last-child{
|
|
td{
|
|
padding-block-end: 1.25rem;
|
|
}
|
|
}
|
|
|
|
&:first-child{
|
|
td{
|
|
padding-block-start: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|