purityselect/resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue
2024-10-25 01:05:27 +05:00

724 lines
19 KiB
Vue

<script setup>
import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue';
import axios from "@axios";
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 isCameraAllowed = ref(false);
const currentUser = ref(localStorage.getItem("user_role"));
const toggelUserValue = ref(null);
const isMobile = ref(window.innerWidth <= 768);
const isLoadingVisible = ref(false);
const patientName = ref();
const profileData = ref(null);
const profileName = ref(null);
// Components
import Footer from "@/layouts/components/Footer.vue";
import QueueComponent from "@/layouts/components/QueueComponent.vue";
import UserProfile from "@/layouts/components/UserProfile.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 patient = ref();
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 isMenu = ref(false);
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
const items = [
{
title: 'Orders', icon: 'mdi-shopping-cart', to: '/orders-list'
},
{
title: 'Subscriptions', icon: 'mdi-refresh-circle', to: '/subscriptions',
},
{ title: 'Schedules', icon: 'tabler-clock', to: '/schedules' },
{
title: 'Complete', icon: 'mdi-success-circle',
to: '/complete'
},
];
const locations = [
'top',
'bottom',
'start',
'end',
'center',
];
const location = ref('bottom');
onMounted(async () => {
window.addEventListener("resize", checkMobile);
const access_token = localStorage.getItem("access_token");
if (currentUser.value == "agent") {
await store.dispatch("getAgentProfile");
profileData.value = store.getters.getAgentProfile.ai_switch;
profileName.value = profileData.value.name;
console.log("profileData", profileData.value);
}
if (currentUser.value == "patient") {
await loadGoogleAnalytics();
// console.log("patient", currentUser.value);
patient.value = localStorage.getItem("patient_id");
await axios
.post("/api/get-patient-detail/" + patient.value, {
headers: {
Authorization: `Bearer ${access_token}`,
},
})
.then((response) => {
// console.log('Response:', response.data);
if (response.data) {
let patientData = response.data.patient;
profileName.value =
patientData.first_name + " " + patientData.last_name;
console.log("data", profileName.value);
} else {
isLoadingVisible.value = false;
}
})
.catch((error) => {
console.error("Error:", error);
});
}
// await checkPermissions();
});
const loadGoogleAnalytics = async () => {
const script = document.createElement('script')
script.async = true
script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0VZR7VCVWD'
document.head.appendChild(script)
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'G-0VZR7VCVWD')
}
const logout = () => {
// const currentUser = localStorage.getItem('user_role');
localStorage.removeItem("isLogin");
localStorage.removeItem("patient_id");
localStorage.removeItem("user_role");
localStorage.removeItem("access_token");
localStorage.removeItem("userAbilities");
localStorage.removeItem("agent_id");
localStorage.removeItem("appiontment-id");
localStorage.removeItem("patient_appointment_id");
localStorage.removeItem("cominguser");
localStorage.removeItem("currentPage");
localStorage.removeItem("profileCompleted");
localStorage.removeItem("category_name");
localStorage.removeItem("selectedSidebarMenu");
localStorage.removeItem("plan_name");
localStorage.removeItem("plan_price");
if (currentUser.value == "agent") {
router.push("/provider/login");
} else {
router.push("/login");
}
};
const openNotesModel = ref(false);
const patientNotes = ref(null);
const openNotes = async () => {
await store.dispatch("getAgentPatientNotes");
patientNotes.value = store.getters.getPatientNotes;
openNotesModel.value = true;
};
const iconName = ref('mdi-chevron-down');
const changeIcon = () => {
if (iconName.value == 'mdi-chevron-down') {
iconName.value = 'mdi-chevron-right';
isMenu.value = false;
} else {
iconName.value = 'mdi-chevron-down';
isMenu.value = true;
}
}
</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">
<!-- 👉 Search Trigger button -->
<!-- <IconBtn>
<VIcon icon="bx-search" />
</IconBtn> -->
<!-- <span class="d-none d-md-flex align-center text-disabled">
<VCol cols="12" md="12">
<VCardText class="px-0">
<h3 class="mb-0"> Welcome, {{ profileName }} </h3>
</VCardText>
</VCol>
</span> -->
</div>
<VSpacer />
<!-- <IconBtn class="me-2" href="https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free"
target="_blank" rel="noopener noreferrer">
</IconBtn> -->
<!-- <NavbarThemeSwitcher class="me-2" /> -->
<NavBarNotifications class="me-2" />
<UserProfile />
</div>
</template>
<template #vertical-nav-content>
<div v-if="!isConferncePageForPatient">
<VerticalNavLink v-if="isPatient" :item="{
title: 'Overview',
icon: 'mdi-view-dashboard',
to: '/overview',
}" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Tele Health',
icon: 'mdi-content-paste',
to: '/treatment-plan',
}" />
<VerticalNavLink v-if="isPatient" :item="{
title: 'Membership',
icon: 'mdi-cached',
to: '/membership',
}" />
<VerticalNavLink v-if="isPatient" :item="{
title: 'Labs',
icon: 'bx-table',
to: '/labs',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Doctor Appiontment',
icon: 'bx-add-to-queue',
to: '/doctor-appiontments',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Prescriptions',
icon: 'tabler-prescription',
to: '/prescriptions',
}" /> -->
<VerticalNavLink v-if="isPatient" :item="{
title: 'Orders',
icon: 'mdi-shopping-cart',
to: '/orders-list',
}" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Subscriptions',
icon: 'mdi-refresh-circle',
to: '/subscriptions',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Orders',
icon: 'mdi-shopping-cart',
children: [
{
title: 'Orders',
icon: 'mdi-shopping-cart',
to: '/orders-list',
},
{
title: 'Subscriptions',
icon: 'mdi-refresh-circle',
to: '/subscriptions',
},
],
}" />-->
<VerticalNavLink v-if="isPatient" :item="{
title: 'Appointments',
icon: 'bx-add-to-queue',
to: '/complete',
// children: [
// {
// title: 'Schedules',
// icon: 'tabler-clock',
// to: '/schedules',
// },
// {
// title: 'Complete',
// icon: 'mdi-success-circle',
// to: '/complete',
// },
// ],
}" />
</div>
<QueueComponent v-if="!isMobile" :isVisable="true" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Labs Kits',
icon: 'bx-table',
to: '/lab-kits',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Profile',
icon: 'bx-table',
to: '/profile',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'TeleHealth ',
icon: 'bx-table',
to: '/telehealth',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Description',
icon: 'bx-table',
to: '/description',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Follow up',
icon: 'bx-table',
to: '/followup',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Account Settings',
icon: 'mdi-account',
to: '/account-settings',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Forms',
icon: 'mdi-clipboard-text-multiple',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Contact Us',
icon: 'mdi-at',
to: '/contactus',
}" /> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Appointments',
icon: 'bx-table',
to: '/provider/appointments',
}" /> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Doctor Appiontment',
icon: 'bx-add-to-queue',
to: '/provider/doctor-appiontments',
}" /> -->
<!-- <VerticalNavLink
:item="{
title: 'New Slot',
icon: 'bx-add-to-queue',
to: '/book-slot',
}"
/> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Users',
icon: 'bx-add-to-queue',
to: '/provider/queue-users',
}" /> -->
<VerticalNavLink v-if="isAgent" :item="{
title: 'Dashboard',
icon: 'bx-home',
to: '/provider/dashboard',
}" />
<VerticalNavLink v-if="isAgent" :item="{
title: 'Prescriptions',
icon: 'tabler-prescription',
to: '/provider/orders-list',
}" />
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Meeting History',
icon: 'tabler-clock',
to: '/provider/meeting-history',
}" /> -->
<VerticalNavLink @click="logout()" v-if="isPatient" :item="{
title: 'Logout',
icon: 'bx-log-out',
}" />
<QueueComponent v-if="isMobile" :isVisable="true" />
<!-- 👉 Pages -->
<!-- <VerticalNavSectionTitle
:item="{
heading: 'Pages',
}"
/>
<VerticalNavLink
:item="{
title: 'Login',
icon: 'bx-log-in',
to: '/login',
}"
/> -->
<!-- <VerticalNavLink
:item="{
title: 'Register',
icon: 'bx-user-plus',
to: '/register',
}"
/>
<VerticalNavLink
:item="{
title: 'Error',
icon: 'bx-info-circle',
to: '/no-existence',
}"
/> -->
<!-- 👉 User Interface -->
<!-- <VerticalNavSectionTitle
:item="{
heading: 'User Interface',
}"
/> -->
<!-- <VerticalNavLink
:item="{
title: 'Typography',
icon: 'mdi-alpha-t-box-outline',
to: '/typography',
}"
/>
<VerticalNavLink
:item="{
title: 'Icons',
icon: 'bx-show',
to: '/icons',
}"
/>
<VerticalNavLink
:item="{
title: 'Cards',
icon: 'bx-credit-card',
to: '/cards',
}"
/>
<VerticalNavLink
:item="{
title: 'Tables',
icon: 'bx-table',
to: '/tables',
}"
/>
<VerticalNavLink
:item="{
title: 'Form Layouts',
icon: 'mdi-form-select',
to: '/form-layouts',
}"
/> -->
</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;
}
// 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;
}
button.v-btn.v-btn--elevated.v-theme--light.bg-primary.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated.text-capitalize {
letter-spacing: 1.15px;
font-size: 15px;
}
</style>