hgh_admin/resources/js/pages/patients/meetings.vue

<script setup>
import moment from 'moment';
import { onBeforeMount, onMounted, onUnmounted } 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)

onBeforeMount(async () => {});
onMounted(async () => {
    appointmentId.value = route.params.id;
    console.log("appointmentId",appointmentId.value);
});
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: appointmentId.value
  })
  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
});

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(() => {
 

})
</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-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
          </VRow>
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="patientMeetingList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
      <template #item.id="{ item }">
      {{ item.id }}
      </template>
        
        <!-- Actions -->
        <template #item.actions="{ item }">
          <div class="d-flex gap-1">
            
          </div>
        </template>
      </VDataTable>
    </VCard>  
    </v-col>
  </v-row>

  <!-- 👉 Delete Dialog  -->
  
</template>