fix
This commit is contained in:
parent
961022c15c
commit
b45c5bb776
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user