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

fix

Browse Source
This commit is contained in:
nasir@endelospay.com
2024-06-07 04:02:32 +05:00
parent bff5e31c09
commit e024a459c0
10 changed files with 624 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
resources/js/pages/labs/labs-kit.vue Normal file
View File

@@ -0,0 +1,444 @@
<script setup>
import { useStore } from 'vuex';
const store = useStore()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
id: -1,
name: '',
amount: '',
})
const addDialog = ref(false)
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const labsKitList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Active',
value: 1,
},
{
text: 'InActive',
value: 2,
},
]
const refVForm = ref(null)
const formatPhoneNumber = () => {
console.log(editedItem.value)
// Remove non-numeric characters from the input
const numericValue = editedItem.value.contact_no.replace(/\D/g, '');
// Apply formatting logic
if (numericValue.length <= 10) {
editedItem.value.contact_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
} else {
// Limit the input to a maximum of 14 characters
const truncatedValue = numericValue.slice(0, 10);
editedItem.value.contact_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
};
// headers
const headers = [
{
title: 'ID',
key: 'id',
},
{
title: 'NAME',
key: 'name',
},
{
title: 'Amount',
key: 'amount',
},
{
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 = labsKitList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = labsKitList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeAdd = () => {
addDialog.value = false
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const update = async () => {
const { valid } = await refVForm.value.validate()
console.log(valid)
if (valid) {
if (editedIndex.value > -1){
await store.dispatch('labKitUpdate',{
id: editedItem.value.id,
name: editedItem.value.name,
amount: editedItem.value.amount,
})
Object.assign(labsKitList.value[editedIndex.value], editedItem.value)
close()
} else {
await store.dispatch('labKitAdd',{
name: defaultItem.value.name,
amount: defaultItem.value.amount,
})
defaultItem.value.name = null
defaultItem.value.amount=null
closeAdd()
}
await store.dispatch('labsKitList')
console.log('getLabsList',store.getters.getLabKitList)
let list = store.getters.getLabKitList
labsKitList.value = list
}
}
const deleteItemConfirm = async() => {
console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
await store.dispatch('labKitDelete',{
id: editedItem.value.id
})
labsKitList.value.splice(editedIndex.value, 1)
closeDelete()
}
const getlabsKitList = computed(async () => {
store.dispatch('updateIsLoading', true)
await store.dispatch('labsKitList')
console.log('getLabsList',store.getters.getLabKitList)
let list = store.getters.getLabKitList
store.dispatch('updateIsLoading', false)
labsKitList.value = list
return labsKitList.value
});
onMounted(() => {
})
</script>
<template>
<v-row>
<v-col cols="12" md="12" v-if="getlabsKitList">
<VCard title="Lab Kit">
<VCardText >
<VRow>
<VCol cols="12" md="8" class="d-flex align-center">
<VBtn color="primary" prepend-icon="ri-add-line" @click="addDialog = true">
New Lab Kit
</VBtn>
</VCol>
<VCol cols="12" md="4" class="d-flex justify-end">
<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="labsKitList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.name="{ 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.name) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</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>
</VCard>
</v-col>
</v-row>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="600px"
>
<VForm ref="refVForm" >
<VCard>
<VCardTitle>
<span class="headline">Edit Lab Kit</span>
</VCardTitle>
<VCardText>
<VContainer >
<VRow>
<!-- fullName -->
<VCol cols="12" md="12">
<VTextField
v-model="editedItem.name"
label="Name"
:rules="[requiredValidator]"
/>
</VCol>
<!-- email -->
<VCol cols="12" sm="12" md="12">
<VTextField
v-model="editedItem.amount"
label="Amount"
:rules="[requiredValidator]"
/>
</VCol>
<!-- status -->
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="update"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VForm>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="500px"
>
<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>
<!-- 👉 Add Dialog -->
<VDialog
v-model="addDialog"
max-width="600px"
>
<VForm ref="refVForm" >
<VCard>
<VCardTitle>
<span class="headline">Add Lab Kit</span>
</VCardTitle>
<VCardText>
<VContainer >
<VRow>
<!-- fullName -->
<VCol cols="12" md="12">
<VTextField
v-model="defaultItem.name"
label="Name"
:rules="[requiredValidator]"
/>
</VCol>
<!-- email -->
<VCol cols="12" sm="12" md="12">
<VTextField
v-model="defaultItem.amount"
label="Amount"
:rules="[requiredValidator,requiredAmountFloat]"
/>
</VCol>
<!-- status -->
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeAdd"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="update"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VForm>
</VDialog>
</template>