308 lines
9.4 KiB
Vue
308 lines
9.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
import CompletedMeetingTab from '@/pages/patients/CompletedMeetingTab.vue';
|
|
import moment from 'moment';
|
|
import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const editDialog = ref(false);
|
|
const deleteDialog = ref(false);
|
|
const search = ref('');
|
|
const appointmentId = ref('');
|
|
const defaultItem = ref({
|
|
id: -1,
|
|
avatar: '',
|
|
name: '',
|
|
email: '',
|
|
dob: '',
|
|
phone_no: '',
|
|
});
|
|
|
|
const editedItem = ref({ ...defaultItem.value });
|
|
const editedIndex = ref(-1);
|
|
const patientMeetingList = ref([]);
|
|
const isLoading = ref(false);
|
|
|
|
// Status options
|
|
const selectedOptions = [
|
|
{ text: 'Active', value: 1 },
|
|
{ text: 'InActive', value: 2 },
|
|
];
|
|
|
|
const refVForm = ref(null);
|
|
|
|
// Headers
|
|
const headers = [
|
|
{ title: 'Order ID', key: 'order_id' },
|
|
{ key: 'appointment_date', sortable: false, title: 'Date' },
|
|
//{ key: 'start_time', title: 'Start Time' },
|
|
// { key: 'end_time', title: 'End Time' },
|
|
//{ key: 'duration', title: 'Duration' },
|
|
//{ title: 'ACTIONS', key: 'actions' },
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
function totalCallDuration(start_time, end_time) {
|
|
const startMoment = moment(start_time);
|
|
const endMoment = moment(end_time);
|
|
const duration = moment.duration(endMoment.diff(startMoment));
|
|
const hours = String(duration.hours()).padStart(2, '0');
|
|
const minutes = String(duration.minutes()).padStart(2, '0');
|
|
const seconds = String(duration.seconds()).padStart(2, '0');
|
|
|
|
if (hours === '00' && minutes === '00') {
|
|
return `00:00:${seconds}`;
|
|
} else if (hours === '00') {
|
|
return `00:${minutes}`;
|
|
} else {
|
|
return `${hours}:${minutes}`;
|
|
}
|
|
}
|
|
const formatDate = (date) => {
|
|
const messageDate = new Date(date);
|
|
const options = {
|
|
year: 'numeric',
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
hour: 'numeric', // Change from '2-digit' to 'numeric'
|
|
minute: '2-digit',
|
|
hour12: true, // Add hour12: true to get 12-hour format with AM/PM
|
|
};
|
|
const formattedDate = messageDate.toLocaleString('en-US', options).replace(/\//g, '-');
|
|
return `${formattedDate} `;
|
|
};
|
|
function changeFormat(dateFormat) {
|
|
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
|
|
const year = parseInt(dateParts[0]);
|
|
const month = String(dateParts[1]).padStart(2, '0'); // Pad single-digit months with leading zero
|
|
const day = String(dateParts[2]).padStart(2, '0'); // Pad single-digit days with leading zero
|
|
|
|
// 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;
|
|
}
|
|
// Fetch and process the patient meeting list
|
|
const getPatientMeetingList = async () => {
|
|
//store.dispatch('updateIsLoading', true);
|
|
//await store.dispatch('patientMeetingList', { id: route.params.id });
|
|
// store.dispatch('updateIsLoading', false);
|
|
|
|
let list = props.userData.upcomingMeetings;
|
|
|
|
patientMeetingList.value = list.map(history => ({
|
|
...history,
|
|
//appointment_date: getConvertedDate(convertUtcTime(history.appointment_time, history.appointment_date, history.timezone)),
|
|
appointment_time: getConvertedTime(convertUtcTime(history.appointment_time, history.appointment_date, history.timezone)),
|
|
appointment_date: changeFormat(history.appointment_date),
|
|
start_time: formatDate(history.start_time),
|
|
end_time: formatDate(history.end_time),
|
|
duration: totalCallDuration(history.start_time, history.end_time),
|
|
}));
|
|
patientMeetingList.value.sort((a, b) => {
|
|
return b.order_id - a.order_id;
|
|
});
|
|
console.log(list);
|
|
};
|
|
const convertUtcTime = (time, date, timezone) => {
|
|
const timezones = {
|
|
"EST": "America/New_York",
|
|
"CST": "America/Chicago",
|
|
"MST": "America/Denver",
|
|
"PST": "America/Los_Angeles",
|
|
"PST": "Asia/Karachi"
|
|
// Add more mappings as needed
|
|
};
|
|
|
|
// Get the IANA timezone identifier from the abbreviation
|
|
let ianaTimeZone = timezones[timezone];
|
|
|
|
if (!ianaTimeZone) {
|
|
// throw new Error(`Unknown timezone abbreviation: ${timezone}`);
|
|
timezone='PST'
|
|
ianaTimeZone = timezones[timezone];
|
|
}
|
|
|
|
// Combine date and time into a single string
|
|
const dateTimeString = `${date}T${time}Z`; // Assuming the input date and time are in UTC
|
|
|
|
// Create a Date object from the combined string
|
|
const dateObj = new Date(dateTimeString);
|
|
|
|
// Options for the formatter
|
|
const options = {
|
|
timeZone: ianaTimeZone,
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false,
|
|
};
|
|
|
|
// Create the formatter
|
|
const formatter = new Intl.DateTimeFormat('en-US', options);
|
|
|
|
// Format the date
|
|
const convertedDateTime = formatter.format(dateObj);
|
|
|
|
return convertedDateTime;
|
|
};
|
|
const getConvertedTime = (inputDate) => {
|
|
// Split the input date string into date and time components
|
|
const [datePart, timePart] = inputDate.split(', ');
|
|
|
|
// Split the time component into hours, minutes, and seconds
|
|
let [hours, minutes, seconds] = timePart.split(':');
|
|
|
|
// Convert the hours to an integer
|
|
hours = parseInt(hours);
|
|
|
|
// Determine the period (AM/PM) and adjust the hours if necessary
|
|
const period = hours >= 12 ? 'PM' : 'AM';
|
|
hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11
|
|
|
|
// Format the time as desired
|
|
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes}${period}`;
|
|
|
|
return formattedTime;
|
|
}
|
|
const getConvertedDate = (inputDate) => {
|
|
// Split the input date string into date and time components
|
|
const [datePart, timePart] = inputDate.split(', ');
|
|
|
|
// Split the date component into month, day, and year
|
|
const [month, day, year] = datePart.split('/');
|
|
|
|
// Create a new Date object from the parsed components
|
|
const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);
|
|
|
|
// Define an array of month names
|
|
const monthNames = [
|
|
"January", "February", "March", "April", "May", "June",
|
|
"July", "August", "September", "October", "November", "December"
|
|
];
|
|
|
|
// Format the date as desired
|
|
const formattedDate = `${monthNames[dateObject.getMonth()]} ${day}, ${year}`;
|
|
|
|
return formattedDate;
|
|
};
|
|
// Lifecycle hooks
|
|
onBeforeMount(() => {});
|
|
onMounted(async () => {
|
|
await getPatientMeetingList();
|
|
|
|
});
|
|
onUnmounted(() => {});
|
|
const historyDetail = (item, value) => {
|
|
console.log('item',item.id ,value)
|
|
if(value == 'notes')
|
|
router.push('/admin/patient/meeting/notes/' + route.params.id + '/' + item.id);
|
|
if(value == 'prescription')
|
|
router.push('/admin/patient/meeting/prescription/' + route.params.id + '/' + item.id);
|
|
}
|
|
const menusVariant = [
|
|
'primary'
|
|
];
|
|
const options = [
|
|
{
|
|
title: 'Notes',
|
|
key: 'notes',
|
|
},
|
|
{
|
|
title: 'Prescription',
|
|
key: 'prescription',
|
|
},
|
|
|
|
]
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<v-card title="Upcoming Meetings">
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" offset-md="8" md="4">
|
|
<v-text-field
|
|
v-model="search"
|
|
label="Search"
|
|
placeholder="Search ..."
|
|
append-inner-icon="ri-search-line"
|
|
single-line
|
|
hide-details
|
|
dense
|
|
outlined
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="patientMeetingList"
|
|
:search="search"
|
|
:items-per-page="5"
|
|
class="text-no-wrap"
|
|
>
|
|
<template #item.order_id="{ item }">
|
|
<RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
|
|
<span class=""> #{{ item.order_id }} </span>
|
|
</RouterLink>
|
|
</template>
|
|
<template #item.duration="{ item }">{{ item.duration }}</template>
|
|
<template #item.appointment_date="{ item }">{{ item.appointment_date +' ' +item.appointment_time }}</template>
|
|
|
|
<!-- Actions -->
|
|
<template #item.actions="{ item }">
|
|
<div class="demo-space-x">
|
|
<VMenu
|
|
v-for="menu in menusVariant"
|
|
:key="menu"
|
|
>
|
|
<template #activator="{ props }">
|
|
|
|
<i class="ri-more-2-line cursor-pointer" style="font-size: 32px;" v-bind="props"></i>
|
|
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="opt in options"
|
|
:key="opt.value"
|
|
@click="historyDetail(item, opt.key)"
|
|
>
|
|
{{ opt.title }}
|
|
</v-list-item>
|
|
</v-list>
|
|
</VMenu>
|
|
</div>
|
|
<!-- <div class="d-flex gap-1">
|
|
<VBtn class="text-capitalize text-white" @click="historyDetail(item)"> Detail
|
|
</VBtn>
|
|
</div> -->
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<CompletedMeetingTab :user-data="props.userData"/>
|
|
</template>
|