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

fix

Browse Source
This commit is contained in:
Inshal 2024-06-04 01:13:50 +05:00
parent 961022c15c
commit b45c5bb776
1 changed files with 106 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
resources/js/pages/patients/meetings.vue
View File

@ -1,14 +1,15 @@
<script setup> <script setup>
import moment from 'moment'; import moment from 'moment';
import { onBeforeMount, onMounted, onUnmounted } from 'vue'; import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
const store = useStore()
const router = useRouter() const store = useStore();
const route = useRoute() const router = useRouter();
const editDialog = ref(false) const route = useRoute();
const deleteDialog = ref(false) const editDialog = ref(false);
const search = ref('') const deleteDialog = ref(false);
const search = ref('');
const appointmentId = ref(''); const appointmentId = ref('');
const defaultItem = ref({ const defaultItem = ref({
id: -1, id: -1,
@ -17,142 +18,97 @@ const defaultItem = ref({
email: '', email: '',
dob: '', dob: '',
phone_no: '', 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)
onBeforeMount(async () => {});
onMounted(async () => {});
onUnmounted(async () => {});
// headers
const headers = [
{
title: 'Appiontment 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'},
]
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 => ({
...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
}); });
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: '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' },
];
// Utility functions
function changeDateFormat(dateFormat) { function changeDateFormat(dateFormat) {
console.log("startTimeFormat", dateFormat); if (dateFormat) {
if (dateFormat) { const [datePart, timePart] = dateFormat.split(' ');
const [datePart, timePart] = dateFormat.split(' '); // Split date and time parts const [year, month, day] = datePart.split('-');
const [year, month, day] = datePart.split('-'); // Split date into year, month, and day const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
const formattedMonth = parseInt(month).toString(); // Convert month to integer and then string to remove leading zeros return `${formattedDate} ${timePart}`;
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 dateFormat;
return `${formattedDate} ${timePart}`; // Combine formatted date with original time part
}
} }
function changeFormat(dateFormat) { function changeFormat(dateFormat) {
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format const [year, month, day] = dateFormat.split('-');
const year = parseInt(dateParts[0]); return `${parseInt(month)}-${parseInt(day)}-${year}`;
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) { function totalCallDuration(start_time, end_time) {
console.log(start_time, end_time); const startMoment = moment(start_time);
const startMoment = moment(start_time); const endMoment = moment(end_time);
const endMoment = moment(end_time); const duration = moment.duration(endMoment.diff(startMoment));
const hours = String(duration.hours()).padStart(2, '0');
// Calculate the duration const minutes = String(duration.minutes()).padStart(2, '0');
const duration = moment.duration(endMoment.diff(startMoment)); const seconds = String(duration.seconds()).padStart(2, '0');
const hours = duration.hours();
const thours = `${String(hours).padStart(2, '0')}`; if (hours === '00' && minutes === '00') {
const minutes = duration.minutes(); return `00:00:${seconds}`;
const tminutes = `${String(minutes).padStart(2, '0')}`; } else if (hours === '00') {
const seconds = duration.seconds(); return `00:${minutes}:${seconds}`;
const tsecond = `${String(seconds).padStart(2, '0')}`; } else {
let durationText; return `${hours}:${minutes}:${seconds}`;
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(() => {
}) // 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),
}));
};
// Lifecycle hooks
onBeforeMount(() => {});
onMounted(async () => {
await getPatientMeetingList();
});
onUnmounted(() => {});
</script> </script>
<template> <template>
<v-row> <v-row>
<v-col cols="12" md="12" v-if="getPatientMeetingList"> <v-col cols="12" md="12">
<VCard title="Meetings"> <v-card title="Meetings">
<VCardText > <v-card-text>
<VRow> <v-row>
<VCol <v-col cols="12" offset-md="8" md="4">
cols="12" <v-text-field
offset-md="8"
md="4"
>
<VTextField
v-model="search" v-model="search"
label="Search" label="Search"
placeholder="Search ..." placeholder="Search ..."
@ -162,31 +118,26 @@ onMounted(() => {
dense dense
outlined outlined
/> />
</VCol> </v-col>
</VRow> </v-row>
</VCardText> </v-card-text>
<VDataTable <v-data-table
:headers="headers" :headers="headers"
:items="patientMeetingList" :items="patientMeetingList"
:search="search" :search="search"
:items-per-page="5" :items-per-page="5"
class="text-no-wrap" class="text-no-wrap"
> >
<template #item.id="{ item }"> <template #item.id="{ item }">{{ item.id }}</template>
{{ item.id }} <template #item.duration="{ item }">{{ item.duration }}</template>
</template> <!-- Actions -->
<template #item.actions="{ item }">
<!-- Actions --> <div class="d-flex gap-1">
<template #item.actions="{ item }"> <!-- Your action buttons go here -->
<div class="d-flex gap-1"> </div>
</template>
</div> </v-data-table>
</template> </v-card>
</VDataTable>
</VCard>
</v-col> </v-col>
</v-row> </v-row>
<!-- 👉 Delete Dialog -->
</template> </template>