purityselect/resources/js/pages/patient/complete-appintment-detail.vue

<script setup>
import Notes from '@/pages/patient/notes.vue';
import Prescription from '@/pages/patient/prescription.vue';
import store from '@/store';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
// const patientId = route.params.patient_id;
const appointmentId = route.params.appiontment_id;
const currentTab = ref(0)
const appiontmentID = ref();
const dcotorName = ref();
const starttime = ref();
const endtime = ref();
const duration = ref();
const patientName = ref();
const patientEmail = ref();
const patientPhone = ref();
const patientAddress = ref();
const patientDob = ref();
const patientData = ref(null);
const his = computed(async () => {
    // store.dispatch('updateIsLoading', true)
    await store.dispatch('getPatientInfo')
    // notes.value = store.getters.getPatientNotes;
    patientData.value = store.getters.getPatient;
    console.log("appointmentData1", patientData.value);
    // appiontmentID.value = appointmentId;
    patientName.value = patientData.value.first_name + ' ' + patientData.value.last_name;
    patientEmail.value = patientData.value.email;
    patientDob.value = changeFormat(patientData.value.dob);
    patientPhone.value = patientData.value.phone_no;
    patientAddress.value = patientData.value.address + ' ' +
        patientData.value.city + ' ' +
        patientData.value.state + ' ' +
        patientData.value.country;
    // localStorage.setItem('meetingPatientAppiontmentId', appiontmentID.value)
    // console.log("notesData", notesData.value[0].appointment.id);
    // store.dispatch('updateIsLoading', false)
});

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;
}
</script>

<template>
    <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>

    <div class="">
        <VCardTitle class="my-1"><b>Appiontments Detail</b></VCardTitle>
        <VRow>
            <VCol cols="12" md="8" v-if="his">
                <Prescription></Prescription>
                <Notes></Notes>

            </VCol>
            <VCol cols="12" md="4">
                <VCard class="mb-4">
                    <VCardText>

                        <h5 class="mt-2 mb-2">ABOUT</h5>

                        <VList class="card-list text-medium-emphasis mb-2">
                            <VListItem>
                                <template #prepend>
                                    <VIcon icon="mdi-account" size="20" class="me-2" />
                                </template>
                                <VListItemTitle>
                                    <!-- <span class="font-weight-medium me-1">Full Name:</span> -->
                                    <span> {{ patientName }}</span>
                                </VListItemTitle>
                            </VListItem>
                            <VListItem>
                                <template #prepend>
                                    <VIcon icon="mdi-email" size="20" class="me-2" />
                                </template>
                                <VListItemTitle>
                                    <!-- <span class="font-weight-medium me-1">Email:</span> -->
                                    <span>{{ patientEmail }}</span>
                                </VListItemTitle>
                            </VListItem>
                            <VListItem>
                                <template #prepend>
                                    <VIcon icon="tabler-calendar" size="20" class="me-2" />
                                </template>
                                <VListItemTitle>
                                    <!-- <span class="font-weight-medium me-1">DOB:</span> -->
                                    <span>
                                        {{ patientDob }}</span>
                                </VListItemTitle>
                            </VListItem>
                            <VListItem>
                                <template #prepend>
                                    <VIcon icon="mdi-phone" size="20" class="me-2" />
                                </template>
                                <VListItemTitle>
                                    <!-- <span class="font-weight-medium me-1">Phone:</span> -->
                                    <span>{{
        patientPhone }}</span>
                                </VListItemTitle>
                            </VListItem>
                            <VListItem>
                                <template #prepend>
                                    <VIcon icon="mdi-address-marker" size="20" class="me-2" />
                                </template>
                                <VListItemTitle>
                                    <!-- <span class="font-weight-medium me-1">Address:</span> -->
                                    <span>{{ patientAddress }}</span>
                                </VListItemTitle>
                            </VListItem>
                        </VList>
                        <!-- <VDivider></VDivider> -->

                        <!-- <h5 class="mt-2 mb-2"></h5> -->

                        <VList class="card-list text-medium-emphasis">

                        </VList>


                    </VCardText>
                </VCard>
            </VCol>
        </VRow>

        <!-- <VTabs v-model="currentTab" direction="vertical">
                    <VTab>
                        <VIcon start icon="tabler-edit" />
                        Notes
                    </VTab>

                    <VTab>
                        <VIcon start icon="tabler-lock" />
                        Prescriptions
                    </VTab>
                </VTabs> -->
        <!-- </div> -->

        <!-- <VCardText> -->
        <!-- <VWindow v-model="currentTab" class="ms-3"> -->
        <!-- <VWindowItem> -->
        <!-- <Notes></Notes> -->
        <!-- </VWindowItem> -->

        <!-- <VWindowItem> -->
        <!-- <Prescription></Prescription> -->
        <!-- </VWindowItem> -->
        <!-- </VWindow> -->
        <!-- </VCardText> -->
    </div>

</template>