136 lines
2.9 KiB
Vue
136 lines
2.9 KiB
Vue
<script setup>
|
|
import data from '@/views/demos/forms/tables/data-table/datatable'
|
|
|
|
const userList = ref([])
|
|
|
|
const options = ref({
|
|
page: 1,
|
|
itemsPerPage: 5,
|
|
sortBy: [''],
|
|
sortDesc: [false],
|
|
})
|
|
|
|
// headers
|
|
const headers = [
|
|
{
|
|
title: 'NAME',
|
|
key: 'fullName',
|
|
},
|
|
{
|
|
title: 'EMAIL',
|
|
key: 'email',
|
|
},
|
|
{
|
|
title: 'DATE',
|
|
key: 'startDate',
|
|
},
|
|
{
|
|
title: 'SALARY',
|
|
key: 'salary',
|
|
},
|
|
{
|
|
title: 'AGE',
|
|
key: 'age',
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
key: 'status',
|
|
},
|
|
]
|
|
|
|
const resolveStatusVariant = status => {
|
|
if (status === 1)
|
|
return {
|
|
color: 'primary',
|
|
text: 'Current',
|
|
}
|
|
else if (status === 2)
|
|
return {
|
|
color: 'success',
|
|
text: 'Professional',
|
|
}
|
|
else if (status === 3)
|
|
return {
|
|
color: 'error',
|
|
text: 'Rejected',
|
|
}
|
|
else if (status === 4)
|
|
return {
|
|
color: 'warning',
|
|
text: 'Resigned',
|
|
}
|
|
else
|
|
return {
|
|
color: 'info',
|
|
text: 'Applied',
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
userList.value = JSON.parse(JSON.stringify(data))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VDataTable
|
|
:headers="headers"
|
|
:items="userList"
|
|
:items-per-page="options.itemsPerPage"
|
|
:page="options.page"
|
|
:options="options"
|
|
>
|
|
<!-- full name -->
|
|
<template #item.fullName="{ item }">
|
|
<div class="d-flex align-center">
|
|
<VAvatar
|
|
size="32"
|
|
:color="item.avatar ? '' : 'primary'"
|
|
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
|
|
:variant="!item.avatar ? 'tonal' : undefined"
|
|
>
|
|
<VImg
|
|
v-if="item.avatar"
|
|
:src="item.avatar"
|
|
/>
|
|
<span v-else>{{ avatarText(item.fullName) }}</span>
|
|
</VAvatar>
|
|
<div class="d-flex flex-column ms-3">
|
|
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
|
|
<small>{{ item.post }}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- status -->
|
|
<template #item.status="{ item }">
|
|
<VChip
|
|
:color="resolveStatusVariant(item.status).color"
|
|
class="font-weight-medium"
|
|
size="small"
|
|
>
|
|
{{ resolveStatusVariant(item.status).text }}
|
|
</VChip>
|
|
</template>
|
|
|
|
<template #bottom>
|
|
<VCardText class="pt-2">
|
|
<div class="d-flex flex-wrap justify-center justify-sm-space-between gap-y-2 mt-2">
|
|
<VSelect
|
|
v-model="options.itemsPerPage"
|
|
:items="[5, 10, 25, 50, 100]"
|
|
label="Rows per page:"
|
|
variant="underlined"
|
|
style="max-inline-size: 8rem;min-inline-size: 5rem;"
|
|
/>
|
|
|
|
<VPagination
|
|
v-model="options.page"
|
|
:total-visible="$vuetify.display.smAndDown ? 3 : 5"
|
|
:length="Math.ceil(userList.length / options.itemsPerPage)"
|
|
/>
|
|
</div>
|
|
</VCardText>
|
|
</template>
|
|
</VDataTable>
|
|
</template>
|