initial commit
This commit is contained in:
Inshal
268
resources/js/views/pages/tables/doctor-appiontment-detail.vue
Normal file
268
resources/js/views/pages/tables/doctor-appiontment-detail.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<script setup>
|
||||
import axios from '@axios';
|
||||
// import { VideoPlayer } from '@videojs-player/vue';
|
||||
// import 'video.js/dist/video-js.css';
|
||||
const appiontmentDetail = ref();
|
||||
const patientAddress = ref();
|
||||
const labAddress = ref();
|
||||
const labName = ref();
|
||||
const labDistance = ref();
|
||||
const labContact = ref();
|
||||
const labBookDate = ref();
|
||||
const labBookTime = ref();
|
||||
const video_url = ref();
|
||||
const selectedLab = ref();
|
||||
const labDetail = ref();
|
||||
const questionAnswer = ref([]);
|
||||
const appiontmentDate = ref();
|
||||
onMounted(() => {
|
||||
const userRole = localStorage.getItem('user_role');
|
||||
const patient_id = localStorage.getItem('patient_id');
|
||||
const access_token = localStorage.getItem('access_token');
|
||||
const appiontment_id = localStorage.getItem('appiontment-id');
|
||||
if (userRole == 'patient') {
|
||||
console.log('patient');
|
||||
axios.post('/api/appointment-detail/' + appiontment_id, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
video_url.value = response.data.video_url;
|
||||
appiontmentDetail.value = response.data;
|
||||
let patientData = response.data.patient
|
||||
patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
|
||||
(patientData.city ? patientData.city + ', ' : '') +
|
||||
(patientData.state ? patientData.state + ' ' : '') +
|
||||
(patientData.zip_code ? patientData.zip_code + ', ' : '') +
|
||||
(patientData.country ? patientData.country : '');
|
||||
|
||||
// Remove trailing comma and space if present
|
||||
patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
|
||||
console.log(patientAddress.value)
|
||||
selectedLab.value = appiontmentDetail.value.lab;
|
||||
// labName.value = appiontmentDetail.value.lab.lab_name;
|
||||
// labAddress.value = appiontmentDetail.value.lab.lab_address;
|
||||
// labDistance.value = appiontmentDetail.value.lab.lab_distance;
|
||||
// labContact.value = appiontmentDetail.value.lab.lab_contact_no;
|
||||
appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
appiontmentDetail.value = [];
|
||||
questionAnswer.value = [];
|
||||
patientAddress.value = '';
|
||||
});
|
||||
|
||||
axios.get('/api/patient-book-lab/get/' + appiontment_id, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log("patient lab detail", response.data);
|
||||
let data = response.data;
|
||||
selectedLab.value = appiontmentDetail.value.lab;
|
||||
labName.value = data.lab_name;
|
||||
labAddress.value = data.lab_address;
|
||||
labDistance.value = data.lab_distance;
|
||||
labContact.value = data.lab_contact_no;
|
||||
labBookDate.value = data.slot_date;
|
||||
labBookTime.value = data.slot_time;
|
||||
// localStorage.setItem('patient_id', response.data);
|
||||
})
|
||||
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
axios.post('/agent/api/appointment-detail/' + appiontment_id, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
localStorage.setItem('patient_id', response.data.patient.id);
|
||||
video_url.value = response.data.video_url;
|
||||
appiontmentDetail.value = response.data;
|
||||
let patientData = response.data.patient
|
||||
patientAddress.value = (patientData.address ? patientData.address + ', ' : '') +
|
||||
(patientData.city ? patientData.city + ', ' : '') +
|
||||
(patientData.state ? patientData.state + ' ' : '') +
|
||||
(patientData.zip_code ? patientData.zip_code + ', ' : '') +
|
||||
(patientData.country ? patientData.country : '');
|
||||
|
||||
// Remove trailing comma and space if present
|
||||
patientAddress.value = patientAddress.value.replace(/,\s*$/, '');
|
||||
console.log(patientAddress.value)
|
||||
selectedLab.value = appiontmentDetail.value.lab;
|
||||
// labName.value = appiontmentDetail.value.lab.lab_name;
|
||||
// labAddress.value = appiontmentDetail.value.lab.lab_address;
|
||||
// labDistance.value = appiontmentDetail.value.lab.lab_distance;
|
||||
// labContact.value = appiontmentDetail.value.lab.lab_contact_no;
|
||||
appiontmentDate.value = appiontmentDetail.value.doctor_appointment.appointment_date + ' ' + appiontmentDetail.value.doctor_appointment.appointment_time;
|
||||
})
|
||||
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
appiontmentDetail.value = [];
|
||||
patientAddress.value = '';
|
||||
});
|
||||
|
||||
axios.post('/agent/api/patient-book-lab/get/' + appiontment_id, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log("lab detail", response.data);
|
||||
let data = response.data;
|
||||
selectedLab.value = appiontmentDetail.value.lab;
|
||||
labName.value = data.lab_name;
|
||||
labAddress.value = data.lab_address;
|
||||
labDistance.value = data.lab_distance;
|
||||
labContact.value = data.lab_contact_no;
|
||||
labBookDate.value = data.slot_date;
|
||||
labBookTime.value = data.slot_time;
|
||||
// localStorage.setItem('patient_id', response.data);
|
||||
})
|
||||
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
labDetail.value = [];
|
||||
});
|
||||
|
||||
|
||||
axios.post('/agent/api/get-question-answer/' + patient_id + '/' + appiontment_id, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
questionAnswer.value = response.data.questions;
|
||||
})
|
||||
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
questionAnswer.value = [];
|
||||
patientAddress.value = '';
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- First Column -->
|
||||
<v-col cols="12" md="8">
|
||||
<video-player :src="video_url" controls :loop="true" :volume="0.6" responsive="true" width="820"
|
||||
height="400" aspectRatio="16:9" />
|
||||
</v-col>
|
||||
|
||||
<!-- Second Column -->
|
||||
<v-col cols="12" md="4">
|
||||
|
||||
<v-list style="height:auto">
|
||||
<v-list-item-group v-if="labName || labDistance || labAddress || labContact">
|
||||
<v-list-item>
|
||||
<v-list-item-content class="lab_address">
|
||||
<v-list-item-title style="font-size: 20px;" v-if="labName">{{ labName }}</v-list-item-title>
|
||||
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labDistance">
|
||||
<v-icon icon="mdi-map-marker" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
||||
<span class="lab-detail">{{
|
||||
labDistance }} away from your location </span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labAddress">
|
||||
<v-icon icon="mdi-home" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
||||
<span class="lab-detail">
|
||||
{{ labAddress }} </span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-title class="text-wrap lab-icon-detail" v-if="labContact">
|
||||
<v-icon icon="mdi-phone" style="font-size: 25px; margin-top: 5px;"></v-icon>
|
||||
<span class="lab-detail">
|
||||
{{ labContact }} </span>
|
||||
</v-list-item-title>
|
||||
|
||||
<!-- <v-list-item-subtitle v-if="labContact"><v-icon icon="mdi-phone"
|
||||
style="font-size: 25px; margin:5px 5px" /> {{
|
||||
labContact }}</v-list-item-subtitle> -->
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
<v-list-item-group>
|
||||
<v-list-item v-if="labBookDate || labBookTime">
|
||||
<v-list-item-content class="pt-2 lab_address">
|
||||
<v-list-item-subtitle>
|
||||
<b>Lab Appiontment:</b>
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-subtitle>
|
||||
{{ labBookDate }} {{ labBookTime }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-content class="pt-2 lab_address">
|
||||
<v-list-item-subtitle>
|
||||
<b>Doctor Appiontment:</b>
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-subtitle>
|
||||
{{ appiontmentDate }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
<v-list-item-group v-if="patientAddress">
|
||||
<v-list-item>
|
||||
<v-list-item-subtitle><b>Address</b></v-list-item-subtitle>
|
||||
<v-list-item-title class="text-wrap" style="font-size: 13px;color:#939393">
|
||||
{{ patientAddress }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<br><br>
|
||||
<VCardTitle v-if="questionAnswer.length > 0">Questionaries</VCardTitle>
|
||||
<VRow class="mt-5 mb-5 px-3 ps-4" v-if="questionAnswer.length > 0">
|
||||
<VCol cols="6 " v-for="(ans, index) in questionAnswer">
|
||||
<VLabel>{{ ans.question }}</VLabel>
|
||||
<VTextField :type="ans.type" :value="ans.answer" size="500" disabled="" :style="{ color: 'black' }" />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
<style>
|
||||
.lab_address div {
|
||||
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lab-detail {
|
||||
margin-left: 10px;
|
||||
margin-top: 3px;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.lab-icon-detail {
|
||||
color: #939393;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user