663 lines
18 KiB
Vue
663 lines
18 KiB
Vue
<script setup>
|
|
import upgradeBannerDark from '@images/pro/upgrade-banner-dark.png';
|
|
import upgradeBannerLight from '@images/pro/upgrade-banner-light.png';
|
|
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue';
|
|
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useTheme } from 'vuetify';
|
|
import { useStore } from 'vuex';
|
|
const isConferncePage = computed(() => store.getters.getCurrentPage === '/provider/telehealth');
|
|
const isConferncePageForPatient = computed(() => store.getters.getCurrentPage === '/queue');
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const store = useStore()
|
|
const queueUsers = ref([]);
|
|
const usertime = ref(null);
|
|
const isMuted = ref(false);
|
|
const isMicrophoneAllowed = ref(null);
|
|
const profileName = ref();
|
|
const isCameraAllowed = ref(false);
|
|
const toggelUserValue = ref(null)
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const isLoadingVisible = ref(false);
|
|
const emailPatient = ref('')
|
|
const agePatient = ref('')
|
|
const genderPatient = ref('')
|
|
const namePatient = ref('')
|
|
|
|
|
|
|
|
|
|
|
|
// Components
|
|
import Footer from '@/layouts/components/Footer.vue';
|
|
import QueueComponent from '@/layouts/components/QueueComponent.vue';
|
|
import UserProfile from '@/layouts/components/UserProfile.vue';
|
|
import NotesPatientCall from '@/pages/NotesPatient.vue';
|
|
import PatientProfileCall from '@/pages/PatientProfile.vue';
|
|
import PrescriptionPatientCall from '@/pages/PrescriptionPatient.vue';
|
|
import LabKitOrderCall from '@/pages/patient-lab-kit-order.vue';
|
|
|
|
import { computed } from 'vue';
|
|
const vuetifyTheme = useTheme()
|
|
const userRole = localStorage.getItem('user_role'); // Fetch user role from local storage
|
|
const isPatient = computed(() => userRole.toLowerCase() === 'patient');
|
|
const isAgent = computed(() => userRole.toLowerCase() === 'agent');
|
|
//const currentRout = computed(() => localStorage.getItem('getCurrentPage'));queue');
|
|
const dialogNote = ref(false);
|
|
const dialogLabKit = ref(false);
|
|
const dialogPrescription = ref(false);
|
|
const dialogProfile = ref(false);
|
|
|
|
|
|
const upgradeBanner = computed(() => {
|
|
return vuetifyTheme.global.name.value === 'light' ? upgradeBannerLight : upgradeBannerDark
|
|
})
|
|
const isCameraPermissionGranted = ref(false);
|
|
const isMicrophonePermissionGranted = ref(false);
|
|
const getIsTonalSnackbarVisible = ref(false);
|
|
const errorMessage = ref(null);
|
|
|
|
|
|
|
|
|
|
|
|
const checkMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const calculateAge = (dateOfBirth) => {
|
|
const today = new Date();
|
|
const birthDate = new Date(dateOfBirth);
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
const monthDiff = today.getMonth() - birthDate.getMonth();
|
|
|
|
if (
|
|
monthDiff < 0 ||
|
|
(monthDiff === 0 && today.getDate() < birthDate.getDate())
|
|
) {
|
|
age--;
|
|
}
|
|
|
|
return age;
|
|
}
|
|
onMounted(async () => {
|
|
console.log("router", store.getters.getCurrentPage)
|
|
|
|
window.addEventListener('resize', checkMobile);
|
|
|
|
await store.dispatch('getPatientInfoByID')
|
|
|
|
namePatient.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name;
|
|
emailPatient.value = store.getters.getPatient.email
|
|
agePatient.value = calculateAge(store.getters.getPatient.dob) + ""
|
|
genderPatient.value = store.getters.getPatient.gender
|
|
// console.log("genderPatient.value", store.getters.getPatient);
|
|
});
|
|
const genderAbbreviation = computed(() => {
|
|
if (store.getters.getPatient.gender) {
|
|
const gender = store.getters.getPatient.gender.toLowerCase();
|
|
if (gender === 'male') {
|
|
return 'M';
|
|
} else if (gender === 'female') {
|
|
return 'F';
|
|
}
|
|
return '';
|
|
}
|
|
return '';
|
|
});
|
|
|
|
const openNotesModel = ref(false)
|
|
const patientNotes = ref(null)
|
|
const openNotes = async () => {
|
|
await store.dispatch('getAgentPatientNotes')
|
|
patientNotes.value = store.getters.getPatientNotes
|
|
openNotesModel.value = true
|
|
};
|
|
const openProfile = () => {
|
|
// Resolve the path to the desired route
|
|
const routeData = router.resolve({ path: '/provider/patient-profile' });
|
|
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
|
|
console.log(route);
|
|
//dialogProfile.value = true
|
|
// Open the resolved route in a new tab
|
|
// if (route.path == '/provider/telehealth') {
|
|
// window.open(routeData.href, '_blank');
|
|
// } else {
|
|
router.push(routeData.href)
|
|
// }
|
|
|
|
};
|
|
const queueComp = ref(null);
|
|
const openCallModel = async (type) => {
|
|
console.log('here')
|
|
if (queueComp.value) {
|
|
console.log(queueComp.value)
|
|
let Calluser = localStorage.getItem('call_user')
|
|
// console.log('Calluser', Calluser)
|
|
queueComp.value.openDialog(JSON.parse(Calluser), type);
|
|
}
|
|
};
|
|
const openPatientPrescription = () => {
|
|
if (queueComp.value) {
|
|
console.log(queueComp.value)
|
|
let Calluser = localStorage.getItem('call_user')
|
|
// console.log('Calluser', Calluser)
|
|
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
|
|
console.log(route);
|
|
//dialogPrescription.value = true
|
|
const routeData = router.resolve({ path: '/provider/prescriptions' });
|
|
// if (route.path == '/provider/telehealth') {
|
|
// window.open(routeData.href, '_blank');
|
|
// } else {
|
|
router.push(routeData.href)
|
|
// }
|
|
}
|
|
// Resolve the path to the desired route
|
|
|
|
|
|
// Open the resolved route in a new tab
|
|
|
|
};
|
|
const openPatientNotes = () => {
|
|
if (queueComp.value) {
|
|
console.log(queueComp.value)
|
|
let Calluser = localStorage.getItem('call_user')
|
|
// console.log('Calluser', Calluser)
|
|
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
|
|
console.log(route);
|
|
//dialogNote.value = true
|
|
const routeData = router.resolve({ path: '/provider/notes' });
|
|
// if (route.path == '/provider/telehealth') {
|
|
// window.open(routeData.href, '_blank');
|
|
// } else {
|
|
router.push(routeData.href)
|
|
// }
|
|
}
|
|
// Resolve the path to the desired route
|
|
|
|
|
|
// Open the resolved route in a new tab
|
|
|
|
};
|
|
const openPatientLabKitOrder = () => {
|
|
if (queueComp.value) {
|
|
console.log(queueComp.value)
|
|
let Calluser = localStorage.getItem('call_user')
|
|
// console.log('Calluser', Calluser)
|
|
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
|
|
console.log(route);
|
|
// dialogLabKit.value = true
|
|
const routeData = router.resolve({ path: '/provider/lab-kit-order' });
|
|
// if (route.path == '/provider/telehealth') {
|
|
// window.open(routeData.href, '_blank');
|
|
// } else {
|
|
router.push(routeData.href)
|
|
// }
|
|
}
|
|
// Resolve the path to the desired route
|
|
|
|
|
|
// Open the resolved route in a new tab
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog v-model="openNotesModel" refs="myDialog" persistent width="500">
|
|
|
|
<!-- <template v-slot:default="{ isActive }"> -->
|
|
<v-card>
|
|
<v-card-text>
|
|
<div class="mt-2 mb-2">
|
|
<h4>Patient Notes.</h4>
|
|
</div>
|
|
<p v-for="note in patientNotes" :key="note.id"> {{ note.note }}</p>
|
|
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn text="Close" @click="openNotesModel = false"></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
<!-- </template> -->
|
|
</VDialog>
|
|
<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>
|
|
<VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="red">
|
|
{{ errorMessage }}
|
|
</VSnackbar>
|
|
<VerticalNavLayout>
|
|
|
|
<!-- 👉 navbar -->
|
|
<template #navbar="{ toggleVerticalOverlayNavActive }">
|
|
<div class="d-flex h-100 align-center">
|
|
<!-- 👉 Vertical nav toggle in overlay mode -->
|
|
<IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
|
|
<VIcon icon="bx-menu" />
|
|
</IconBtn>
|
|
|
|
<!-- 👉 Search -->
|
|
<div class="d-flex align-center cursor-pointer" style="user-select: none;">
|
|
|
|
</div>
|
|
|
|
<VSpacer />
|
|
|
|
<UserProfile />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<template #vertical-nav-content>
|
|
|
|
<v-row class='mx-2'>
|
|
|
|
<v-list class="custom-class" style="background-color: rgb(var(--v-theme-yellow)) ;">
|
|
<v-list-item>
|
|
<!-- <template v-slot:prepend>
|
|
<v-icon icon="mdi-account" size="20"></v-icon>
|
|
</template> -->
|
|
<v-list-item-title>
|
|
<h4>{{ namePatient }}, {{ agePatient }}, {{ genderAbbreviation }}</h4>
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<!-- <v-list-item class="mb-0">
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-email" size="20"></v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ emailPatient }}</v-list-item-title>
|
|
</v-list-item> -->
|
|
<!-- <v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-calendar-account" size="20"></v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ agePatient }}</v-list-item-title>
|
|
</v-list-item> -->
|
|
<!-- <v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-gender-male-female" size="20"></v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ genderPatient }}</v-list-item-title>
|
|
</v-list-item> -->
|
|
</v-list>
|
|
|
|
|
|
</v-row>
|
|
|
|
<QueueComponent v-if="!isMobile" ref="queueComp" :isVisable="true" />
|
|
<VerticalNavLink v-if="isAgent" @click=openProfile() :item="{
|
|
title: 'Profile',
|
|
icon: 'bx-user',
|
|
}" />
|
|
<VerticalNavLink v-if="isAgent" @click=openPatientNotes() :item="{
|
|
title: 'Notes',
|
|
icon: 'mdi-clipboard',
|
|
}" />
|
|
|
|
<VerticalNavLink v-if="isAgent" @click="openPatientLabKitOrder()" :item="{
|
|
title: 'Lab Order',
|
|
icon: 'mdi-flask',
|
|
}" />
|
|
<VerticalNavLink v-if="isAgent" @click="openPatientPrescription()" :item="{
|
|
title: 'Prescriptions',
|
|
icon: 'mdi-clipboard-text',
|
|
}" />
|
|
|
|
|
|
|
|
<v-dialog v-model="dialogNote" max-width="800">
|
|
<v-card class="pa-3">
|
|
<v-row>
|
|
<v-col cols="12" class="text-right cross">
|
|
<v-btn icon color="transparent" small @click="dialogNote = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<NotesPatientCall></NotesPatientCall>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- lab kit model ==== -->
|
|
<v-dialog v-model="dialogLabKit" max-width="1200">
|
|
<v-card class="pa-3">
|
|
<v-row>
|
|
<v-col cols="12" class="text-right cross">
|
|
<v-btn icon color="transparent" small @click="dialogLabKit = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<LabKitOrderCall></LabKitOrderCall>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- Prescription model model ==== -->
|
|
<v-dialog v-model="dialogPrescription" max-width="1200">
|
|
<v-card class="pa-3">
|
|
<v-row>
|
|
<v-col cols="12" class="text-right cross">
|
|
<v-btn icon color="transparent" small @click="dialogPrescription = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<PrescriptionPatientCall></PrescriptionPatientCall>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- Profile model model ==== -->
|
|
<v-dialog v-model="dialogProfile" max-width="1200">
|
|
<v-card class="pa-3">
|
|
<v-row>
|
|
<v-col cols="12" class="text-right cross">
|
|
<v-btn icon color="transparent" small @click="dialogProfile = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<PatientProfileCall></PatientProfileCall>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- <VerticalNavLink v-if="isAgent" @click="openCallModel('Request For Documents')" :item="{
|
|
title: 'Request For Documents',
|
|
icon: 'mdi-file-document-multiple',
|
|
}" /> -->
|
|
|
|
<VerticalNavLink @click=logout() v-if="isPatient" :item="{
|
|
title: 'Logout',
|
|
icon: 'bx-log-out',
|
|
}" />
|
|
<QueueComponent v-if="isMobile" ref="queueComp" :isVisable="true" />
|
|
</template>
|
|
|
|
|
|
|
|
<!-- 👉 Pages -->
|
|
<slot />
|
|
|
|
<!-- 👉 Footer -->
|
|
<template #footer>
|
|
<Footer />
|
|
</template>
|
|
</VerticalNavLayout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.meta-key {
|
|
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
border-radius: 6px;
|
|
block-size: 1.5625rem;
|
|
line-height: 1.3125rem;
|
|
padding-block: 0.125rem;
|
|
padding-inline: 0.25rem;
|
|
}
|
|
|
|
::v-deep .custom-menu {
|
|
position: relative;
|
|
}
|
|
|
|
::v-deep .custom-menu::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
transform: translateY(-50%);
|
|
top: 50% !important;
|
|
left: -8px !important;
|
|
border-left: 8px solid transparent !important;
|
|
border-right: 8px solid transparent !important;
|
|
border-bottom: 8px solid #fff !important;
|
|
}
|
|
|
|
.custom-class .v-list-item {
|
|
min-height: 21px;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.custom-class .v-list-item h4 {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.custom-class {
|
|
margin-bottom: 12px;
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
// Styles for the VList component
|
|
|
|
|
|
.more .v-list-item-title {
|
|
color: rgb(106 109 255);
|
|
}
|
|
|
|
.more .menu-item:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slide-enter-active,
|
|
.slide-leave-active {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.slide-enter,
|
|
.slide-leave-to {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.start-call-btn {
|
|
opacity: 0;
|
|
display: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.button_margin {
|
|
margin: 2px;
|
|
}
|
|
|
|
.dialog_padding {
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.custom-menu .v-menu__content {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.list-item-hover {
|
|
transition: background-color 0.3s ease;
|
|
|
|
&:hover {
|
|
background-color: rgba(var(--v-theme-primary), 0.1);
|
|
|
|
.start-call-btn {
|
|
opacity: 1;
|
|
display: block;
|
|
position: relative;
|
|
left: -35px;
|
|
}
|
|
|
|
.user-info {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pop_card {
|
|
|
|
overflow: hidden !important;
|
|
padding: 10px;
|
|
}
|
|
|
|
.v-overlay__content {
|
|
|
|
max-height: 706.4px;
|
|
max-width: 941.6px;
|
|
min-width: 24px;
|
|
--v-overlay-anchor-origin: bottom left;
|
|
transform-origin: left top;
|
|
top: 154.4px !important;
|
|
left: 204px !important;
|
|
|
|
|
|
}
|
|
|
|
.button_margin {
|
|
margin-top: 10px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media screen and (max-width: 768px) {
|
|
.pop_card {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.container_img {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.image {
|
|
order: 2;
|
|
/* Change the order to 2 in mobile view */
|
|
}
|
|
|
|
.text {
|
|
order: 1;
|
|
/* Change the order to 1 in mobile view */
|
|
}
|
|
|
|
/* Media query for mobile view */
|
|
@media (max-width: 768px) {
|
|
.container_img {
|
|
flex-direction: row;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.button_margin_mobile {
|
|
width: 100%;
|
|
}
|
|
|
|
.image {
|
|
width: 20%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.text {
|
|
width: 80%;
|
|
/* Each takes 50% width */
|
|
padding: 0 10px;
|
|
/* Optional padding */
|
|
}
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
/* Width of the scrollbar */
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
/* Color of the track */
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
/* Color of the handle */
|
|
border-radius: 5px;
|
|
/* Roundness of the handle */
|
|
}
|
|
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
/* Color of the handle on hover */
|
|
}
|
|
|
|
/* Container for the content */
|
|
.scroll-container {
|
|
max-height: 191px;
|
|
/* Maximum height of the scrollable content */
|
|
overflow-y: scroll;
|
|
/* Enable vertical scrolling */
|
|
}
|
|
|
|
/* Content within the scroll container */
|
|
.scroll-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Example of additional styling for content */
|
|
.scroll-content p {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cross button {
|
|
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/* font-size: 10px; */
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
height: 23px;
|
|
|
|
}
|
|
|
|
.v-data-table-header {
|
|
display: table-header-group;
|
|
}
|
|
</style>
|