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

initial commit

Browse Source
This commit is contained in:
Inshal
2024-10-25 01:05:27 +05:00
commit 94cd8a1dc9
1710 changed files with 273609 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/js/views/pages/tables/DemoSimpleTableBasics.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable>
<thead>
<tr>
<th class="text-uppercase">
Desserts (100g Servings)
</th>
<th>
calories
</th>
<th>
Fat(g)
</th>
<th>
Carbs(g)
</th>
<th>
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td class="text-center">
{{ item.calories }}
</td>
<td class="text-center">
{{ item.fat }}
</td>
<td class="text-center">
{{ item.carbs }}
</td>
<td class="text-center">
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/pages/tables/DemoSimpleTableDensity.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable density="compact">
<thead>
<tr>
<th class="text-uppercase">
Desserts (100g Servings)
</th>
<th>
calories
</th>
<th>
Fat(g)
</th>
<th>
Carbs(g)
</th>
<th>
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td class="text-center">
{{ item.calories }}
</td>
<td class="text-center">
{{ item.fat }}
</td>
<td class="text-center">
{{ item.carbs }}
</td>
<td class="text-center">
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

89
resources/js/views/pages/tables/DemoSimpleTableFixedHeader.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable
height="250"
fixed-header
>
<thead>
<tr>
<th class="text-uppercase">
Desserts (100g Servings)
</th>
<th>
calories
</th>
<th>
Fat(g)
</th>
<th>
Carbs(g)
</th>
<th>
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td class="text-center">
{{ item.calories }}
</td>
<td class="text-center">
{{ item.fat }}
</td>
<td class="text-center">
{{ item.carbs }}
</td>
<td class="text-center">
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/pages/tables/DemoSimpleTableHeight.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable height="250">
<thead>
<tr>
<th>
Desserts (100g Servings)
</th>
<th>
calories
</th>
<th>
Fat(g)
</th>
<th>
Carbs(g)
</th>
<th>
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td class="text-center">
{{ item.calories }}
</td>
<td class="text-center">
{{ item.fat }}
</td>
<td class="text-center">
{{ item.carbs }}
</td>
<td class="text-center">
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/pages/tables/DemoSimpleTableTheme.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable theme="dark">
<thead>
<tr>
<th>
Desserts (100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td class="text-center">
{{ item.dessert }}
</td>
<td class="text-center">
{{ item.calories }}
</td>
<td class="text-center">
{{ item.fat }}
</td>
<td class="text-center">
{{ item.carbs }}
</td>
<td class="text-center">
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

119
resources/js/views/pages/tables/DoctorAppointments.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup>
import axios from '@axios';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const doctorAppiontments = ref([]);
const isButtonVisible = ref(true);
const isLoadingVisible = ref(true);
const alertMessage = ref(false);
const isdialogOpen = ref(false);
const isAccess = ref(localStorage.getItem('user_role'));
const isAgent = ref(localStorage.getItem('user_role'));
const comingUser = ref(null);
const callEndMesage = ref(null);
onMounted(() => {
comingUser.value = localStorage.getItem('cominguser');
callEndMesage.value = localStorage.getItem('call-end-message');
const access_token = localStorage.getItem('access_token');
const userRole = localStorage.getItem('user_role') || '';
if (userRole == 'patient') {
const patient_id = localStorage.getItem('patient_id');
axios.get('api/doctor-appointments/' + patient_id, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${access_token}`
}
})
.then(response => {
doctorAppiontments.value = response.data;
isButtonVisible.value = true;
isLoadingVisible.value = false;
localStorage.removeItem('call-end-message');
localStorage.removeItem('cominguser');
})
.catch(error => {
console.error(error);
doctorAppiontments.value = [];
});
} else {
axios.post('/agent/api/get-doctors-appointment-list')
.then(response => {
doctorAppiontments.value = response.data;
isButtonVisible.value = false;
isLoadingVisible.value = false;
})
.catch(error => {
console.error(error);
doctorAppiontments.value = [];
});
}
})
const openDialog = (item) => {
localStorage.setItem('appiontment-id', item.appointment_id);
let role = localStorage.getItem('user_role');
if (role == 'patient')
router.push('/appiontments-detail');
else
router.push('/provider/appiontments-detail');
};
const search = ref('');
const headers = [
{ align: 'start', key: 'patient_name', sortable: false, title: 'Patient Name' },
{ key: 'appointment_time', title: 'Appionment Date' },
{ key: 'appointment_id', title: 'Action' },
];
const formattedAppointments = computed(() => {
return doctorAppiontments.value.map(appointment => ({
...appointment,
patient_name: getFullName(appointment.first_name, appointment.last_name),
}));
});
function getFullName(firstName, lastName) {
// 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 firstName + ' ' + lastName; // For now, just return the first name
}
const filteredDesserts = computed(() => {
// Perform filtering based on the search term
return doctorAppiontments.value.filter(dessert =>
dessert.name.toLowerCase().includes(search.value.toLowerCase())
);
});
const goToQueue = () => {
router.replace(route.query.to && route.query.to != '/doctor-appiontments' ? String(route.query.to) : '/queue')
};
</script>
<template>
<v-card flat>
<v-card-title class="d-flex align-center pe-2">
<v-btn v-if="isAccess == 'patient'" @click="goToQueue()" class="text-capitalize text-white">
<!-- <router-link to="/queue" > -->
Connect Live Chat
<!-- </router-link> -->
</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-text-field v-model="search" prepend-inner-icon="mdi-magnify" density="compact" label="Search" single-line flat
hide-details variant="solo-filled"></v-text-field>
</v-card-title>
<v-data-table :headers="headers" :items="formattedAppointments" :search="search">
<template #item.appointment_id="{ item }">
<VBtn class="text-capitalize text-white" @click="openDialog(item)"> Detail</VBtn>
</template>
</v-data-table>
</v-card>
</template>

85
resources/js/views/pages/tables/Labkit.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import axios from '@axios';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const appiontments = ref([]);
const queueNumber = ref();
const isDialogVisible = ref(false);
const isLoadingVisible = ref(true);
onMounted(() => {
appiontments.value = [];
const access_token = localStorage.getItem('access_token');
axios.post('/agent/api/get-appointment-list', {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${access_token}`
}
})
.then(response => {
appiontments.value = response.data;
// console.lg("appiontments",appiontments);
isLoadingVisible.value = false;
})
.catch(error => {
console.error(error);
appiontments.value = [];
});
})
const search = ref('');
const headers = [
{ key: 'appointment_id', title: 'ID' },
{ key: 'patient_name', title: 'Patient Name' },
{ key: 'appointment_time', title: 'Staus' },
{ key: 'id', title: 'Action' },
];
const filteredDesserts = computed(() => {
// Perform filtering based on the search term
return appiontments.value.filter(dessert =>
dessert.name.toLowerCase().includes(search.value.toLowerCase())
);
});
const formattedAppointments = computed(() => {
return appiontments.value.map(appointment => ({
...appointment,
appointment_id: appointment.id,
patient_name: getFullName(appointment.first_name, appointment.last_name),
}));
});
function getFullName(firstName, lastName) {
// 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
console.log(firstName + ' ' + lastName)
return firstName + ' ' + lastName; // For now, just return the first name
}
const openDialog = (item) => {
localStorage.setItem('appiontment-id', item.id);
router.push('patient-labkit-detail');
};
</script>
<template>
<v-card flat>
<v-card-title class="d-flex align-center pe-2">
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-text-field v-model="search" prepend-inner-icon="mdi-magnify" density="compact" label="Search" single-line
flat hide-details variant="solo-filled"></v-text-field>
</v-card-title>
<v-data-table :headers="headers" :items="formattedAppointments" :search="search">
<template #item.id="{ item }">
<!-- <VBtn class="text-capitalize text-white" @click="openDialog(item)"> Detail</VBtn> -->
</template>
</v-data-table>
</v-card>
</template>

86
resources/js/views/pages/tables/appointments.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
import { ref } from 'vue';
import axios from '@axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const appiontments = ref([]);
const queueNumber = ref();
const isDialogVisible = ref(false);
const isLoadingVisible = ref(true);
onMounted(() => {
appiontments.value = [];
const access_token = localStorage.getItem('access_token');
axios.post('/agent/api/get-appointment-list', {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${access_token}`
}
})
.then(response => {
appiontments.value = response.data;
// console.lg("appiontments",appiontments);
isLoadingVisible.value = false;
})
.catch(error => {
console.error(error);
appiontments.value = [];
});
})
const search = ref('');
const headers = [
{ key: 'appointment_id', title: 'ID' },
{ key: 'patient_name', title: 'Patient Name' },
{ key: 'appointment_time', title: 'Appionment Date' },
{ key: 'id', title: 'Action' },
];
const filteredDesserts = computed(() => {
// Perform filtering based on the search term
return appiontments.value.filter(dessert =>
dessert.name.toLowerCase().includes(search.value.toLowerCase())
);
});
const formattedAppointments = computed(() => {
return appiontments.value.map(appointment => ({
...appointment,
appointment_id: appointment.id,
patient_name: getFullName(appointment.first_name, appointment.last_name),
}));
});
function getFullName(firstName, lastName) {
// 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
console.log(firstName + ' ' + lastName)
return firstName + ' ' + lastName; // For now, just return the first name
}
const openDialog = (item) => {
localStorage.setItem('appiontment-id', item.id);
router.push('/provider/patient-appointments-detail');
};
</script>
<template>
<v-card flat>
<v-card-title class="d-flex align-center pe-2">
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-text-field v-model="search" prepend-inner-icon="mdi-magnify" density="compact" label="Search" single-line flat
hide-details variant="solo-filled"></v-text-field>
</v-card-title>
<v-data-table :headers="headers" :items="formattedAppointments" :search="search">
<template #item.id="{ item }">
<VBtn class="text-capitalize text-white" @click="openDialog(item)"> Detail</VBtn>
</template>
</v-data-table>
</v-card>
</template>

268
resources/js/views/pages/tables/doctor-appiontment-detail.vue Normal file
View 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>

233
resources/js/views/pages/tables/patient-appiontments-detail.vue Normal file
View File

@@ -0,0 +1,233 @@
<script setup>
import axios from '@axios';
// import { VideoPlayer } from '@videojs-player/vue';
import phpUnserialize from 'phpunserialize';
// import 'video.js/dist/video-js.css';
const appiontmentDetail = ref();
const appionmentDate = ref();
const patientAddress = ref();
const patientDOb = ref();
const patientName = ref();
const patientID = 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();
const agent_appointment = ref([]);
const questions = ref([]);
const answers = ref([]);
onMounted(async () => {
const access_token = localStorage.getItem('access_token');
const appiontment_id = localStorage.getItem('appiontment-id');
await axios.post('/agent/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;
agent_appointment.value = response.data.agent_appointment;
let patientData = response.data.patient
appionmentDate.value = appiontmentDetail.value.agent_appointment.appointment_time ? appiontmentDetail.value.agent_appointment.appointment_time : '';
patientName.value = agent_appointment.value.patient_name ? agent_appointment.value.patient_name : '';
patientDOb.value = appiontmentDetail.value.patient.dob ? '(' + appiontmentDetail.value.patient.age + 'yrs old)' : ' ';
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*$/, '');
patientID.value = patientData.id
console.log('patientData.id', patientID.value)
})
.catch(error => {
console.error(error);
appiontmentDetail.value = [];
patientAddress.value = '';
});
await axios.post('agent/api/questions-answers/' + patientID.value + '/' + appiontment_id)
.then(r => {
console.log("Question", r.data);
questions.value = r.data;
}).catch(error => {
console.log("ErrorResponse", error);
isLoadingVisible.value = false;
});
});
const groupedQuestions = computed(() => {
const groups = {};
for (const key in questions.value) {
if (questions.value.hasOwnProperty(key)) {
let groupQuestions = questions.value[key];
groupQuestions.forEach(question => {
const groupId = question.group_id;
answers.value[question.id] = question.answer
if (!groups[groupId]) {
groups[groupId] = {
name: key,
questions: [],
};
}
groups[groupId].questions.push(question);
});
}
}
console.log("groups", groups);
// Convert groups object to an array
return Object.values(groups);
});
const parseOptions = (optionsString) => {
try {
const optionsArray = phpUnserialize(optionsString);
return optionsArray.map((option, index) => ({ key: index, value: option }));
} catch (error) {
console.error('Error parsing options:', error);
return [];
}
};
</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-list-item v-if="patientName || patientDOb">
<v-list-item-content class="lab_address">
<v-list-item-subtitle>
<b>Patient:</b>
</v-list-item-subtitle>
<v-list-item-subtitle>
{{ patientName }} {{ patientDOb }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="appionmentDate">
<v-list-item-content class="lab_address">
<v-list-item-subtitle>
<b>Appiontment Date:</b>
</v-list-item-subtitle>
<v-list-item-subtitle>
{{ appionmentDate }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
<v-list-item v-if="patientAddress">
<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-col>
</v-row>
<VRow>
<VCol cols="12" md="12">
<VExpansionPanels variant="accordion" class="expansion-panels-width-border">
<VExpansionPanel v-for="(group, groupIndex) in groupedQuestions" :key="groupIndex" :open="group.isOpen">
<VExpansionPanelTitle>
<b>{{ group.name }}</b>
</VExpansionPanelTitle>
<VExpansionPanelText>
<VExpansionPanels>
<VExpansionPanel v-for="(question, questionIndex) in group.questions" :key="questionIndex"
:open="question.isOpen">
<VExpansionPanelTitle>
{{ question.id }}. {{ question.question }} ?
</VExpansionPanelTitle>
<VExpansionPanelText>
<!-- Conditionally render input components based on question type -->
<template v-if="question.type === 'text'">
<VTextField :type="question.type" :id="'question_' + question.id" size="500"
v-model="answers[question.id]" />
</template>
<template v-else-if="question.type === 'radio'">
<VRadioGroup v-model="answers[question.id]">
<VRadio v-for="(option, optionIndex) in parseOptions(question.options)" :key="optionIndex"
:label="option.value" :value="option.value" />
</VRadioGroup>
</template>
<template v-else-if="question.type === 'textarea'">
<VTextarea :type="question.type" :id="'question_' + question.id" v-model="answers[question.id]" />
</template>
<template v-else-if="question.type === 'checkbox'">
<VCheckboxGroup v-model="answers[question.id]">
<VCheckbox :type="question.type" v-for="(option, optionIndex) in question.options"
:key="optionIndex" :label="option" :value="option" />
</VCheckboxGroup>
</template>
<!-- Add more conditions for other types if needed -->
</VExpansionPanelText>
</VExpansionPanel>
</VExpansionPanels>
</VExpansionPanelText>
</VExpansionPanel>
</VExpansionPanels>
</VCol>
</VRow>
</template>
<style>
.lab_address div {
margin-top: 5px;
margin-bottom: 5px;
}
button.v-expansion-panel-title {
background-color: rgb(var(--v-theme-yellow)) !important;
color: #fff;
}
button.v-expansion-panel-title.bg-secondary {
background-color: rgb(var(--v-theme-yellow)) !important;
color: #fff;
}
button.v-expansion-panel-title {
background-color: rgb(var(--v-theme-yellow)) !important;
color: #fff;
}
button.v-expansion-panel-title.v-expansion-panel-title--active {
background-color: rgb(var(--v-theme-yellow)) !important;
color: #fff;
}
span.v-expansion-panel-title__icon {
color: #fff
}
</style>

76
resources/js/views/pages/tables/patient-labkit-detail.vue Normal file
View File

@@ -0,0 +1,76 @@
<script setup>
import LabKit from '@/views/pages/overview/LabKit.vue';
import axios from '@axios';
// import HeathCare from '@images/pages/healthcare-wellness-wellbeing-first-aid-box-word-graphic.jpg';
const isLoadingVisible = ref(false);
const loginuser = ref('');
const scheduleDate = ref('');
const scheduleTime = ref('');
const timeZone = ref('');
const timeDifference = ref();
const timeUntilMeeting = ref('');
onMounted(() => {
localStorage.setItem('isLogin', true);
const patient_id = localStorage.getItem('patient_id')
const access_token = localStorage.getItem('access_token');
isLoadingVisible.value = true;
axios.post('/api/agent-last-appointment-detail/' + patient_id, {
headers: {
'Authorization': `Bearer ${access_token}`,
}
})
.then(response => {
console.log('Response:', response.data);
if (response.data) {
let diffInMinutes = response.data.time_diff;
let appointmentData = response.data.appointment
let patientData = response.data.patient
loginuser.value = patientData.first_name + ' ' + patientData.last_name;
scheduleTime.value = appointmentData.appointment_time;
timeZone.value = appointmentData.timezone;
timeDifference.value = diffInMinutes;
console.log(scheduleTime.value);
const appointment_date = new Date(appointmentData.appointment_date);
const formattedDate = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
}).format(appointment_date);
console.log('formattedDate', formattedDate)
scheduleDate.value = formattedDate;
isLoadingVisible.value = false;
} else {
isLoadingVisible.value = false;
}
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
<template>
<VContainer>
<VDialog v-model="isLoadingVisible" 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>
<VRow>
<VCol cols="12" md="8">
<LabKit :date="scheduleDate" :time="scheduleTime" :timezone="timeZone" :timeDiff="timeDifference" />
</VCol>
</VRow>
</VContainer>
</template>