This commit is contained in:
Inshal 2024-06-04 01:13:50 +05:00
parent 961022c15c
commit b45c5bb776

View File

@ -1,14 +1,15 @@
<script setup>
import moment from 'moment';
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
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 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,
@ -17,142 +18,97 @@ const defaultItem = ref({
email: '',
dob: '',
phone_no: '',
});
})
const editedItem = ref({ ...defaultItem.value });
const editedIndex = ref(-1);
const patientMeetingList = ref([]);
const isLoading = ref(false);
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientMeetingList = ref([])
const isLoading=ref(false)
// status options
// Status options
const selectedOptions = [
{
text: 'Active',
value: 1,
},
{
text: 'InActive',
value: 2,
},
{ text: 'Active', value: 1 },
{ text: 'InActive', value: 2 },
];
]
const refVForm = ref(null);
const refVForm = ref(null)
onBeforeMount(async () => {});
onMounted(async () => {});
onUnmounted(async () => {});
// headers
// Headers
const headers = [
{
title: 'Appiontment Id',
key: 'id',
},
{
title: 'Patient',
key: 'patient_name',
},
{ title: 'Appointment Id', key: 'id' },
{ title: 'Patient', key: 'patient_name' },
{ 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'},
]
{ title: 'ACTIONS', key: 'actions' },
];
// Utility functions
function changeDateFormat(dateFormat) {
if (dateFormat) {
const [datePart, timePart] = dateFormat.split(' ');
const [year, month, day] = datePart.split('-');
const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
return `${formattedDate} ${timePart}`;
}
return dateFormat;
}
function changeFormat(dateFormat) {
const [year, month, day] = dateFormat.split('-');
return `${parseInt(month)}-${parseInt(day)}-${year}`;
}
const getPatientMeetingList = computed(async () => {
patientMeetingList.value = [];
store.dispatch('updateIsLoading', true)
await store.dispatch('patientMeetingList', {
id: route.params.id
})
console.log('patientMeetingList',store.getters.getPatientMeetingList)
let list = store.getters.getPatientMeetingList
store.dispatch('updateIsLoading', false)
patientMeetingList.value = list;
return patientMeetingList.value.map(history => ({
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}:${seconds}`;
} else {
return `${hours}:${minutes}:${seconds}`;
}
}
// 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 = store.getters.getPatientMeetingList;
patientMeetingList.value = list.map(history => ({
...history,
appointment_date: changeFormat(history.appointment_date),
start_time: changeDateFormat(history.start_time),
end_time: changeDateFormat(history.end_time),
duration: totalCallDuration(history.start_time, history.end_time),
}));
// return patientMeetingList.value
};
// Lifecycle hooks
onBeforeMount(() => {});
onMounted(async () => {
await getPatientMeetingList();
});
function changeDateFormat(dateFormat) {
console.log("startTimeFormat", dateFormat);
if (dateFormat) {
const [datePart, timePart] = dateFormat.split(' '); // Split date and time parts
const [year, month, day] = datePart.split('-'); // Split date into year, month, and day
const formattedMonth = parseInt(month).toString(); // Convert month to integer and then string to remove leading zeros
const formattedDay = parseInt(day).toString(); // Convert day to integer and then string to remove leading zeros
const formattedDate = `${formattedMonth}-${formattedDay}-${year}`; // Format date as mm-dd-yyyy
return `${formattedDate} ${timePart}`; // Combine formatted date with original time part
}
}
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 totalCallDuration(start_time, end_time) {
console.log(start_time, end_time);
const startMoment = moment(start_time);
const endMoment = moment(end_time);
// Calculate the duration
const duration = moment.duration(endMoment.diff(startMoment));
const hours = duration.hours();
const thours = `${String(hours).padStart(2, '0')}`;
const minutes = duration.minutes();
const tminutes = `${String(minutes).padStart(2, '0')}`;
const seconds = duration.seconds();
const tsecond = `${String(seconds).padStart(2, '0')}`;
let durationText;
if (hours === 0 && minutes === 0) { //for second
durationText = ` 00:00:${tsecond}`;
} else if (hours === 0 && minutes > 0) { //for minutes
durationText = `00:${tminutes}:${tsecond}`;
} else if (hours > 0) { //for hours
durationText = `${thours}:${tminutes}:${tsecond}`;
}
const totalDuration = durationText;
console.log('Duration:', durationText);
// You may need to adjust this function based on your actual data structure
// For example, if you have separate first name and last name properties in each appointment object
return totalDuration; // For now, just return the first name
}
onMounted(() => {
})
onUnmounted(() => {});
</script>
<template>
<v-row>
<v-col cols="12" md="12" v-if="getPatientMeetingList">
<VCard title="Meetings">
<VCardText >
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
<v-col cols="12" md="12">
<v-card title="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 ..."
@ -162,31 +118,26 @@ onMounted(() => {
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
</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.id="{ item }">
{{ item.id }}
</template>
<template #item.id="{ item }">{{ item.id }}</template>
<template #item.duration="{ item }">{{ item.duration }}</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<!-- Your action buttons go here -->
</div>
</template>
</VDataTable>
</VCard>
</v-data-table>
</v-card>
</v-col>
</v-row>
<!-- 👉 Delete Dialog -->
</template>