894 lines
26 KiB
Vue
894 lines
26 KiB
Vue
<script setup>
|
|
import API from '@/api';
|
|
import { PATIENT_FILTER_LIST_API } from '@/constants';
|
|
import debounce from 'lodash.debounce';
|
|
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
|
|
|
|
import AddPatient from '@/pages/patients/AddPatient.vue';
|
|
import EditPatient from '@/pages/patients/EditPatient.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
// DataTable.use(DataTablesCore);
|
|
const store = useStore()
|
|
// const route = useRoute()
|
|
const isAddCustomerDrawerOpen = ref(false)
|
|
const isEditCustomerDrawerOpen = ref(false)
|
|
const router = useRouter()
|
|
const editDialog = ref(false)
|
|
const deleteDialog = ref(false)
|
|
// const search = ref('')
|
|
const patientRexord = ref([]);
|
|
const patientTotalRexord = ref([]);
|
|
const search = ref('');
|
|
const serverItems = ref([]);
|
|
const loading = ref(true);
|
|
const totalItems = ref(0);
|
|
const first_name1 = ref('');
|
|
const defaultItem = ref({
|
|
id: -1,
|
|
avatar: '',
|
|
name: '',
|
|
email: '',
|
|
dob: '',
|
|
phone_no: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
country: '',
|
|
})
|
|
|
|
const editedItem = ref(defaultItem.value)
|
|
const editedIndex = ref(-1)
|
|
const patientList = ref([])
|
|
const subcriptionLists = ref(['All'])
|
|
const isLoading = ref(false)
|
|
|
|
const filter = ref({
|
|
gender: 'All',
|
|
state: 'all',
|
|
plan: 'all',
|
|
})
|
|
// const gender =ref();
|
|
// const city =ref();
|
|
// const plan =ref();
|
|
// status options
|
|
const selectedOptions = [
|
|
{
|
|
text: 'Active',
|
|
value: 1,
|
|
},
|
|
{
|
|
text: 'InActive',
|
|
value: 2,
|
|
},
|
|
|
|
]
|
|
|
|
const refVForm = ref(null)
|
|
|
|
onBeforeMount(async () => { });
|
|
onMounted(async () => {
|
|
store.dispatch('updateIsLoading', true)
|
|
await store.dispatch('getSubcriptions')
|
|
// await store.dispatch('patientListDataTable')
|
|
await store.dispatch('patientList')
|
|
|
|
// console.log('getPatientDataTable',store.getters.getPatientDataTable);
|
|
// patientRexord.value = store.getters.getPatientDataTable.data;
|
|
// patientTotalRexord.value = store.getters.getPatientDataTable.recordsTotal;
|
|
// console.log("patientRexord",patientRexord.value,patientTotalRexord.value );
|
|
// patientList.value = store.getters.getPatientList
|
|
store.dispatch('updateIsLoading', false)
|
|
|
|
// loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
|
|
// document.addEventListener('click', (event) => {
|
|
// if (event.target.matches('.edit-btn')) {
|
|
// const id = event.target.getAttribute('data-id');
|
|
// const item = patientList.value.find(patient => patient.id === parseInt(id));
|
|
// editItem(item);
|
|
// } else if (event.target.matches('.delete-btn')) {
|
|
// const id = event.target.getAttribute('data-id');
|
|
// const item = patientList.value.find(patient => patient.id === parseInt(id));
|
|
// deleteItem(item);
|
|
// }
|
|
// });
|
|
|
|
});
|
|
const handlePatientAdded = async (msg) => {
|
|
if (msg == 'success') {
|
|
store.dispatch('updateIsLoading', true)
|
|
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
store.dispatch('updateIsLoading', false)
|
|
}
|
|
// You can also trigger a toast or snackbar here to show the message
|
|
// For example, if using Vuetify:
|
|
// showSnackbar(msg)
|
|
}
|
|
// const getPatientFilter = async () => {
|
|
// console.log("filter", filter.value.plan, filter.value.gender, filter.value.state);
|
|
|
|
|
|
// await store.dispatch('PatientFilter', {
|
|
// plan: filter.value.plan,
|
|
// gender: filter.value.gender.toLowerCase(),
|
|
// state: filter.value.state,
|
|
// })
|
|
// store.dispatch('updateIsLoading', false)
|
|
|
|
// }
|
|
|
|
const getPatientList = computed(async () => {
|
|
subcriptionLists.value = [];
|
|
patientList.value = [];
|
|
subcriptionLists.value = store.getters.getSubcriptions;
|
|
const allIndex = subcriptionLists.value.findIndex(sub => sub.title.toLowerCase() === 'all');
|
|
|
|
// If "All" exists, move it to the beginning
|
|
if (allIndex !== -1) {
|
|
const all = subcriptionLists.value.splice(allIndex, 1)[0];
|
|
subcriptionLists.value.unshift(all);
|
|
} else {
|
|
// If "All" doesn't exist, create it and prepend it
|
|
subcriptionLists.value.unshift({ title: 'All', slug: 'all' });
|
|
}
|
|
console.log("subcriptin", subcriptionLists.value);
|
|
patientList.value = store.getters.getPatientList.map(history => ({
|
|
...history,
|
|
dob: changeFormat(history.dob),
|
|
}));
|
|
patientList.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
console.log("patientList",patientList.value);
|
|
return patientList.value
|
|
|
|
});
|
|
|
|
onUnmounted(async () => { });
|
|
const formatPhoneNumber = () => {
|
|
console.log(editedItem.value)
|
|
// Remove non-numeric characters from the input
|
|
const numericValue = editedItem.value.phone_no.replace(/\D/g, '');
|
|
|
|
// Apply formatting logic
|
|
if (numericValue.length <= 10) {
|
|
editedItem.value.phone_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.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
}
|
|
};
|
|
|
|
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 = async (item) => {
|
|
isEditCustomerDrawerOpen.value = true
|
|
|
|
await store.dispatch('patientGETBYID', {
|
|
id: item.id,
|
|
})
|
|
|
|
editedItem.value = store.getters.getSinglePatient
|
|
console.log(store.getters.getSinglePatient)
|
|
//editDialog.value = true
|
|
}
|
|
|
|
const deleteItem = item => {
|
|
|
|
console.log('del', item)
|
|
editedIndex.value = patientList.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 }
|
|
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
}
|
|
|
|
const getMettings = (Item) => {
|
|
router.push('/admin/patient/meetings/' + Item.id);
|
|
}
|
|
|
|
const save = async () => {
|
|
const { valid } = await refVForm.value.validate()
|
|
console.log(valid)
|
|
if (valid) {
|
|
console.log('editedItem.value', editedItem.value);
|
|
// if (editedIndex.value > -1) {
|
|
await store.dispatch('patientUpdate', {
|
|
id: editedItem.value.id,
|
|
first_name: editedItem.value.first_name,
|
|
last_name: editedItem.value.last_name,
|
|
email: editedItem.value.email,
|
|
phone_no: editedItem.value.phone_no,
|
|
dob: editedItem.value.dob,
|
|
})
|
|
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
close();
|
|
// Object.assign(patientList.value[editedIndex.value], editedItem.value)
|
|
|
|
// } else {
|
|
// patientList.value.push(editedItem.value)
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const states = ref([
|
|
{ name: 'Alabama', abbreviation: 'AL' },
|
|
{ name: 'Alaska', abbreviation: 'AK' },
|
|
{ name: 'Arizona', abbreviation: 'AZ' },
|
|
{ name: 'Arkansas', abbreviation: 'AR' },
|
|
{ name: 'Howland Island', abbreviation: 'UM-84' },
|
|
{ name: 'Delaware', abbreviation: 'DE' },
|
|
{ name: 'Maryland', abbreviation: 'MD' },
|
|
{ name: 'Baker Island', abbreviation: 'UM-81' },
|
|
{ name: 'Kingman Reef', abbreviation: 'UM-89' },
|
|
{ name: 'New Hampshire', abbreviation: 'NH' },
|
|
{ name: 'Wake Island', abbreviation: 'UM-79' },
|
|
{ name: 'Kansas', abbreviation: 'KS' },
|
|
{ name: 'Texas', abbreviation: 'TX' },
|
|
{ name: 'Nebraska', abbreviation: 'NE' },
|
|
{ name: 'Vermont', abbreviation: 'VT' },
|
|
{ name: 'Jarvis Island', abbreviation: 'UM-86' },
|
|
{ name: 'Hawaii', abbreviation: 'HI' },
|
|
{ name: 'Guam', abbreviation: 'GU' },
|
|
{ name: 'United States Virgin Islands', abbreviation: 'VI' },
|
|
{ name: 'Utah', abbreviation: 'UT' },
|
|
{ name: 'Oregon', abbreviation: 'OR' },
|
|
{ name: 'California', abbreviation: 'CA' },
|
|
{ name: 'New Jersey', abbreviation: 'NJ' },
|
|
{ name: 'North Dakota', abbreviation: 'ND' },
|
|
{ name: 'Kentucky', abbreviation: 'KY' },
|
|
{ name: 'Minnesota', abbreviation: 'MN' },
|
|
{ name: 'Oklahoma', abbreviation: 'OK' },
|
|
{ name: 'Pennsylvania', abbreviation: 'PA' },
|
|
{ name: 'New Mexico', abbreviation: 'NM' },
|
|
{ name: 'American Samoa', abbreviation: 'AS' },
|
|
{ name: 'Illinois', abbreviation: 'IL' },
|
|
{ name: 'Michigan', abbreviation: 'MI' },
|
|
{ name: 'Virginia', abbreviation: 'VA' },
|
|
{ name: 'Johnston Atoll', abbreviation: 'UM-67' },
|
|
{ name: 'West Virginia', abbreviation: 'WV' },
|
|
{ name: 'Mississippi', abbreviation: 'MS' },
|
|
{ name: 'Northern Mariana Islands', abbreviation: 'MP' },
|
|
{ name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
|
|
{ name: 'Massachusetts', abbreviation: 'MA' },
|
|
{ name: 'Connecticut', abbreviation: 'CT' },
|
|
{ name: 'Florida', abbreviation: 'FL' },
|
|
{ name: 'District of Columbia', abbreviation: 'DC' },
|
|
{ name: 'Midway Atoll', abbreviation: 'UM-71' },
|
|
{ name: 'Navassa Island', abbreviation: 'UM-76' },
|
|
{ name: 'Indiana', abbreviation: 'IN' },
|
|
{ name: 'Wisconsin', abbreviation: 'WI' },
|
|
{ name: 'Wyoming', abbreviation: 'WY' },
|
|
{ name: 'South Carolina', abbreviation: 'SC' },
|
|
{ name: 'Arkansas', abbreviation: 'AR' },
|
|
{ name: 'South Dakota', abbreviation: 'SD' },
|
|
{ name: 'Montana', abbreviation: 'MT' },
|
|
{ name: 'North Carolina', abbreviation: 'NC' },
|
|
{ name: 'Palmyra Atoll', abbreviation: 'UM-95' },
|
|
{ name: 'Puerto Rico', abbreviation: 'PR' },
|
|
{ name: 'Colorado', abbreviation: 'CO' },
|
|
{ name: 'Missouri', abbreviation: 'MO' },
|
|
{ name: 'New York', abbreviation: 'NY' },
|
|
{ name: 'Maine', abbreviation: 'ME' },
|
|
{ name: 'Tennessee', abbreviation: 'TN' },
|
|
{ name: 'Georgia', abbreviation: 'GA' },
|
|
{ name: 'Louisiana', abbreviation: 'LA' },
|
|
{ name: 'Nevada', abbreviation: 'NV' },
|
|
{ name: 'Iowa', abbreviation: 'IA' },
|
|
{ name: 'Idaho', abbreviation: 'ID' },
|
|
{ name: 'Rhode Island', abbreviation: 'RI' },
|
|
{ name: 'Washington', abbreviation: 'WA' },
|
|
{ name: 'Ohio', abbreviation: 'OH' },
|
|
{ name: 'All', abbreviation: 'all' },
|
|
// ... (add the rest of the states)
|
|
]);
|
|
|
|
const sortedStates = computed(() => {
|
|
const sorted = states.value.slice().sort((a, b) => {
|
|
// Move "All" to the beginning
|
|
if (a.name === 'All') return -1;
|
|
if (b.name === 'all') return 1;
|
|
// Sort other states alphabetically
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
return sorted;
|
|
});
|
|
|
|
const deleteItemConfirm = async () => {
|
|
console.log('editedIndex.value', editedIndex.value, editedItem.value.id)
|
|
await store.dispatch('patientDelete', {
|
|
id: editedItem.value.id
|
|
})
|
|
closeDelete()
|
|
}
|
|
|
|
|
|
|
|
const LabKit = (item) => {
|
|
router.push('/admin/patients/labkit/' + item.id);
|
|
}
|
|
|
|
const onSubcriptionChange = async (newvalue) => {
|
|
filter.value.plan = newvalue;
|
|
console.log("Plan", filter.value.plan);
|
|
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
}
|
|
const onGenderChange = async (newvalue) => {
|
|
filter.value.gender = newvalue;
|
|
console.log("gender", filter.value.gender);
|
|
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
}
|
|
// const tableKey = ref(0);
|
|
// const dataTableRef = ref(null);
|
|
// watch(
|
|
// () => filter.value.gender,
|
|
// (newGender) => {
|
|
// console.log('Gender changed:', newGender);
|
|
// if (dataTableRef.value) {
|
|
// tableKey.value += 1;
|
|
// console.log('dataTableRef:', dataTableRef.value);
|
|
// } else {
|
|
// console.warn('dataTableRef.value is null');
|
|
// }
|
|
// }
|
|
// );
|
|
|
|
// watch(
|
|
// () => filter.value.plan,
|
|
// (newPlan) => {
|
|
// console.log('Plan changed:', newPlan);
|
|
// if (dataTableRef.value) {
|
|
// tableKey.value += 1;
|
|
// console.log('dataTableRef:', dataTableRef.value);
|
|
// } else {
|
|
// console.warn('dataTableRef.value is null');
|
|
// }
|
|
// }
|
|
// );
|
|
// const onStateChange = async(newvalue)=> {
|
|
// filter.value.state = newvalue;
|
|
// console.log("state",filter.value.state);
|
|
// loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
|
|
|
// }
|
|
|
|
const itemsPerPage = ref(30);
|
|
const headers = [
|
|
{ title: 'ID', key: 'id' },
|
|
{ title: 'NAME', key: 'first_name' },
|
|
{ title: 'Gender', key: 'gender', align: 'end' },
|
|
{ title: 'EMAIL', key: 'email', align: 'start' },
|
|
{ title: 'Date Of Birth', key: 'dob', align: 'start' },
|
|
{ title: 'Last Order', key: 'last_order_date', searchable:false },
|
|
{ title: 'Register Date', key: 'created_at', align: 'start' },
|
|
{ title: 'Total Orders', key: 'total_orders', align: 'start' ,searchable:false},
|
|
{ title: 'Total Subcriptions', key: 'total_subscriptions', align: 'start',searchable:false },
|
|
{
|
|
title: 'Action',
|
|
key: 'actions',
|
|
searchable:false
|
|
},
|
|
];
|
|
|
|
const loadItems = debounce( async ( { page, itemsPerPage, sortBy }) => {
|
|
const formattedSortBy = sortBy.map(sort => ({
|
|
key: sort.key,
|
|
order: 'desc' // Force descending order
|
|
}));
|
|
const payload = {
|
|
page,
|
|
itemsPerPage,
|
|
sortBy:formattedSortBy,
|
|
filters:{
|
|
gender:filter.value.gender.toLowerCase(),
|
|
plan:filter.value.plan,
|
|
state: 'all'
|
|
},
|
|
search:search.value,
|
|
}
|
|
console.log("records",page, itemsPerPage, sortBy , PATIENT_FILTER_LIST_API);
|
|
loading.value = true;
|
|
const data = await API.getDataTableRecord(PATIENT_FILTER_LIST_API, payload, headers);
|
|
console.log('patientData',data);
|
|
serverItems.value = data.items;
|
|
totalItems.value = data.total;
|
|
loading.value = false;
|
|
|
|
},500);
|
|
|
|
|
|
|
|
|
|
function changeFormat(dateFormat) {
|
|
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
|
|
const year = parseInt(dateParts[0]);
|
|
const month = parseInt(dateParts[1]); // No need for padding
|
|
const day = parseInt(dateParts[2]); // No need for padding
|
|
|
|
// Create a new Date object with the parsed values
|
|
const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
|
|
|
|
// Format the date as mm-dd-yyyy
|
|
const formattedDate = month + '-' + day + '-' + date.getFullYear();
|
|
|
|
return formattedDate;
|
|
}
|
|
|
|
function formatDate(dateTime) {
|
|
if (!dateTime) return '';
|
|
|
|
// Split date and time parts
|
|
const [datePart, timePart] = dateTime.split(' ');
|
|
|
|
// Split date into parts
|
|
const [year, month, day] = datePart.split('-').map(Number);
|
|
|
|
// Split time into parts
|
|
const [hour, minute, second] = timePart.split(':').map(Number);
|
|
|
|
// Format the date and time
|
|
return `${month}-${day}-${year}`;
|
|
}
|
|
|
|
function ConvertDateFormate(dateTime) {
|
|
if (!dateTime) return '';
|
|
|
|
// Create a Date object from the ISO date string
|
|
const date = new Date(dateTime);
|
|
|
|
// Extract day, month, year, hours, and minutes
|
|
const day = String(date.getUTCDate()).padStart(2, '0');
|
|
const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are zero-based
|
|
const year = date.getUTCFullYear();
|
|
const hours = String(date.getUTCHours()).padStart(2, '0');
|
|
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
|
|
|
|
// Format the date and time
|
|
return `${month}-${day}-${year}`;
|
|
}
|
|
|
|
function changeDateFormat(dateFormat) {
|
|
if (!dateFormat) {
|
|
throw new Error('Invalid date format input');
|
|
}
|
|
|
|
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
|
|
if (dateParts.length !== 3) {
|
|
throw new Error('Invalid date format');
|
|
}
|
|
|
|
const year = parseInt(dateParts[0], 10);
|
|
const month = parseInt(dateParts[1], 10); // No need for padding
|
|
const day = parseInt(dateParts[2], 10); // No need for padding
|
|
|
|
// Create a new Date object with the parsed values
|
|
const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
|
|
|
|
// Format the date as mm-dd-yyyy
|
|
const formattedDate = (month < 10 ? '0' : '') + month + '-' +
|
|
(day < 10 ? '0' : '') + day + '-' +
|
|
date.getFullYear();
|
|
|
|
return formattedDate;
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Add your styles here */
|
|
</style>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col cols="12" md="12" v-if="getPatientList">
|
|
<v-card title="Patients">
|
|
<VCardText>
|
|
<VRow>
|
|
<VCol cols="12" md="3">
|
|
<VAutocomplete v-model="filter.plan" label="Subcription" placeholder="Subcription" density="compact"
|
|
:items="subcriptionLists" item-title="title" item-value="slug"
|
|
@update:model-value="onSubcriptionChange" />
|
|
|
|
|
|
</VCol>
|
|
<VCol cols="12" md="3">
|
|
|
|
<VAutocomplete v-model="filter.gender" label="Gender" placeholder="Gender" density="compact"
|
|
:items="['All', 'Male', 'Female']" @update:model-value="onGenderChange" />
|
|
|
|
</VCol>
|
|
<!--<VCol
|
|
cols="12"
|
|
|
|
md="3"
|
|
>
|
|
<VAutocomplete
|
|
v-model="filter.state"
|
|
label="State"
|
|
density="compact"
|
|
:items="sortedStates"
|
|
item-title="name"
|
|
item-value="abbreviation"
|
|
@update:model-value="onStateChange"
|
|
|
|
/>
|
|
|
|
</VCol>-->
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="3"
|
|
>
|
|
<!-- <VTextField
|
|
v-model="search"
|
|
label="Search"
|
|
placeholder="Search ..."
|
|
append-inner-icon="ri-search-line"
|
|
single-line
|
|
density="compact"
|
|
hide-details
|
|
dense
|
|
outlined
|
|
/> -->
|
|
<VTextField
|
|
v-model="search"
|
|
density="compact"
|
|
label="Search"
|
|
placeholder="Search ..."
|
|
append-inner-icon="ri-search-line"
|
|
single-line
|
|
hide-details
|
|
dense
|
|
outlined
|
|
/>
|
|
</VCol>
|
|
|
|
|
|
<VCol cols="12" md="3" v-if="$can('read', 'Patient Add')">
|
|
<VBtn prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen">
|
|
Add Patient
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
|
|
<v-data-table-server
|
|
v-model:items-per-page="itemsPerPage"
|
|
:headers="headers"
|
|
:items="serverItems"
|
|
:items-length="totalItems"
|
|
:loading="loading"
|
|
:search="search"
|
|
:item-value="first_name"
|
|
@update:options="loadItems">
|
|
|
|
<template #item.id="{ item }">
|
|
{{ item.id }}
|
|
</template>
|
|
|
|
<template #item.first_name="{ 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
|
|
class="text-sm"
|
|
>{{ avatarText(item.first_name) }}</span>
|
|
</VAvatar>
|
|
|
|
<div class="d-flex flex-column ms-3">
|
|
<router-link
|
|
:to="{ name: 'admin-patient-profile', params: { id: item.id } }"
|
|
class="highlighted"
|
|
>
|
|
<span class="d-block font-weight-medium text-truncate">{{ item.first_name }} {{ item.last_name }}</span>
|
|
</router-link>
|
|
<small>{{ item.post }}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template #item.status="{ item }">
|
|
<VChip
|
|
:color="resolveStatusVariant(item.status).color"
|
|
density="comfortable"
|
|
>
|
|
{{ resolveStatusVariant(item.status).text }}
|
|
</VChip>
|
|
</template>
|
|
<template #item.dob="{ item }">
|
|
<span class="d-flex align-center" style="width: 100px;"> {{ changeFormat (item.dob) }}</span>
|
|
</template>
|
|
<template #item.last_order_date="{ item }">
|
|
<span class="d-flex align-center" style="width: 100px;"> {{ formatDate(item.last_order_date) }}</span>
|
|
</template>
|
|
<template #item.created_at="{ item }">
|
|
<span class="d-flex align-center" style="width: 100px;"> {{ ConvertDateFormate(item.created_at) }}</span>
|
|
</template>
|
|
|
|
<template #item.labkit="{ item }">
|
|
<div class="text-primary cursor-pointer" @click="LabKit(item)"> LabKits</div>
|
|
</template>
|
|
|
|
|
|
<template #item.actions="{ item }">
|
|
<div class="d-flex gap-1">
|
|
<IconBtn
|
|
size="small"
|
|
|
|
@click="editItem(item)"
|
|
v-if="$can('read', 'Patient Edit')"
|
|
>
|
|
|
|
<VIcon icon="ri-pencil-line" />
|
|
</IconBtn>
|
|
<IconBtn
|
|
size="small"
|
|
@click="deleteItem(item)"
|
|
v-if="$can('read', 'Patient Delete')"
|
|
>
|
|
<VIcon icon="ri-delete-bin-line" />
|
|
</IconBtn>
|
|
<IconBtn
|
|
size="small"
|
|
@click="getMettings(item)"
|
|
style="display: none;"
|
|
>
|
|
<VIcon icon="ri-time-line" />
|
|
</IconBtn>
|
|
</div>
|
|
</template>
|
|
</v-data-table-server>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<AddPatient v-model:is-drawer-open="isAddCustomerDrawerOpen" @patientAdded="handlePatientAdded" />
|
|
<EditPatient v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSinglePatient"
|
|
@patientAdded="handlePatientAdded" />
|
|
<!-- 👉 Edit Dialog -->
|
|
<VDialog v-model="editDialog" max-width="600px">
|
|
<VForm ref="refVForm">
|
|
<VCard>
|
|
<VCardTitle>
|
|
<span class="headline">Edit Patient</span>
|
|
</VCardTitle>
|
|
|
|
<VCardText>
|
|
<VContainer>
|
|
|
|
<VRow>
|
|
<!-- fullName -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="editedItem.first_name" label="First Name" :rules="[requiredFirstName]" />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="editedItem.last_name" label="Last Name" :rules="[requiredLastName]" />
|
|
</VCol>
|
|
|
|
<!-- email -->
|
|
<VCol cols="12" sm="6" md="12">
|
|
<VTextField v-model="editedItem.email" label="Email" :rules="[requiredEmail, emailValidator]" />
|
|
</VCol>
|
|
|
|
|
|
<VCol cols="12" sm="6" md="12">
|
|
<VTextField v-model="editedItem.dob" type="date" label="Date Of Birth" />
|
|
</VCol>
|
|
<VCol cols="12" sm="6" md="12">
|
|
<VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
|
:rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000" @input="formatPhoneNumber"
|
|
max="14" density="comfortable" />
|
|
</VCol>
|
|
|
|
|
|
|
|
|
|
<!-- status -->
|
|
<VCol cols="12" md="12">
|
|
<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>
|
|
</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>
|
|
|
|
|
|
</template>
|
|
<style>
|
|
table>thead>tr>th {
|
|
height: 56px;
|
|
font-weight: 500;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
text-align: center;
|
|
padding: 0 20px;
|
|
transition-duration: .28s;
|
|
transition-property: height;
|
|
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
|
border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
/* background: rgb(var(--v-table-header-color)) !important; */
|
|
border-block-end: none !important;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
|
font-size: .8125rem;
|
|
letter-spacing: .2px;
|
|
line-height: 24px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
table>tbody>tr>td {
|
|
text-align: center;
|
|
height: 50px;
|
|
border-bottom: 1px solid #e2dfdf;
|
|
}
|
|
|
|
.dt-layout-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dt-layout-table {
|
|
display: block !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.dt-layout-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dt-input {
|
|
border: 1px solid silver;
|
|
border-radius: 5px;
|
|
padding: 7px;
|
|
text-align: center;
|
|
margin-left: 5px;
|
|
background: rgb(var(--v-table-header-color)) !important;
|
|
}
|
|
|
|
.dt-length,
|
|
.dt-search {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dt-length label,
|
|
.dt-search label {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.dt-layout-start {
|
|
flex: 1;
|
|
}
|
|
|
|
.dt-layout-end {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dt-paging-button {
|
|
cursor: pointer;
|
|
border: 1px solid silver;
|
|
border-radius: 22px;
|
|
padding: 9px 15px 6px 15px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.first,
|
|
.previous,
|
|
.next,
|
|
.last {
|
|
cursor: pointer;
|
|
border: 0px solid silver;
|
|
border-radius: 22px;
|
|
padding: 9px 5px 6px 5px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.current {
|
|
background: #8c57ff;
|
|
color: white;
|
|
}
|
|
</style>
|