TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed

Browse Source
This commit is contained in:
nasir@endelospay.com
2024-05-31 20:11:35 +05:00
parent 7e0031ba81
commit 88c2df5145
17 changed files with 1808 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
resources/js/pages/labs/labs.vue Normal file
View File

@@ -0,0 +1,395 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable';
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
responsiveId: '',
id: -1,
avatar: '',
fullName: '',
post: '',
email: '',
city: '',
startDate: '',
salary: -1,
age: '',
experience: '',
status: -1,
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const userList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Current',
value: 1,
},
{
text: 'Professional',
value: 2,
},
{
text: 'Rejected',
value: 3,
},
{
text: 'Resigned',
value: 4,
},
{
text: 'Applied',
value: 5,
},
]
// 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',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
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',
}
}
const editItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = () => {
if (editedIndex.value > -1)
Object.assign(userList.value[editedIndex.value], editedItem.value)
else
userList.value.push(editedItem.value)
close()
}
const deleteItemConfirm = () => {
userList.value.splice(editedIndex.value, 1)
closeDelete()
}
onMounted(() => {
userList.value = JSON.parse(JSON.stringify(data))
})
</script>
<template>
<VOverlay
v-model="isLoading"
contained
persistent
scroll-strategy="none"
class="align-center justify-center"
>
<VProgressCircular indeterminate />
</VOverlay>
<VCardText>
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="headers"
:items="userList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<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
class="text-sm"
>{{ 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"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="800px"
>
<VCard>
<VCardTitle>
<span class="headline">Edit Item</span>
</VCardTitle>
<VCardText>
<VContainer>
<VRow>
<!-- fullName -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.fullName"
label="User name"
/>
</VCol>
<!-- email -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.email"
label="Email"
/>
</VCol>
<!-- salary -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.salary"
label="Salary"
prefix="$"
type="number"
/>
</VCol>
<!-- age -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.age"
label="Age"
type="number"
/>
</VCol>
<!-- start date -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.startDate"
label="Date"
/>
</VCol>
<!-- status -->
<VCol
cols="12"
sm="6"
md="4"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="600px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>