549 lines
15 KiB
Vue
549 lines
15 KiB
Vue
<script setup>
|
|
import Appiontment from '@/pages/patientAppiontmentDetail.vue';
|
|
import profile from '@/pages/patientInfo.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
import questionsJson from '../views/pages/questionere/questions_parse.json';
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
const questionsJsonData = ref(questionsJson)
|
|
const answers = ref(null)
|
|
const QuestionsAnswers = ref([]);
|
|
const username = ref(null);
|
|
const email = ref(null);
|
|
const phone = ref(null);
|
|
const address1 = ref(null);
|
|
const dob = ref(null);
|
|
const agePatient = ref(null);
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const currentTab = ref(0)
|
|
const tabItemContent = 'Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.'
|
|
|
|
onMounted(async () => {
|
|
const navbar = document.querySelector('.layout-navbar');
|
|
const callDiv = document.querySelector('.layout-page-content');
|
|
if (navbar) {
|
|
navbar.style.display = 'block';
|
|
}
|
|
if (callDiv)
|
|
callDiv.style.padding = '1.5rem';
|
|
store.dispatch('updateIsLoading', true)
|
|
await store.dispatch('getPatientInfoByID')
|
|
await store.dispatch('getAgentQuestionsAnswers')
|
|
username.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name;
|
|
email.value = store.getters.getPatient.email
|
|
phone.value = store.getters.getPatient.phone_no
|
|
dob.value = changeFormat(store.getters.getPatient.dob)
|
|
agePatient.value = calculateAge(store.getters.getPatient.dob) + " Year"
|
|
address1.value = store.getters.getPatient.address + ' ' +
|
|
store.getters.getPatient.city + ' ' +
|
|
store.getters.getPatient.state + ' ' +
|
|
store.getters.getPatient.country;
|
|
|
|
// address.value = patient_address;
|
|
|
|
answers.value = store.getters.getPatientAnswers
|
|
// console.log('questionsJsonData', questionsJsonData.value)
|
|
// console.log('API Answers', answers.value)
|
|
createFinalArray();
|
|
store.dispatch('updateIsLoading', false)
|
|
window.addEventListener('resize', checkMobile);
|
|
});
|
|
|
|
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;
|
|
}
|
|
|
|
// function changeFormat(dateFormat) {
|
|
// const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
|
|
// const year = parseInt(dateParts[0]);
|
|
// const month = String(dateParts[1]).padStart(2, '0'); // Pad single-digit months with leading zero
|
|
// const day = String(dateParts[2]).padStart(2, '0'); // Pad single-digit days with leading zero
|
|
|
|
// // 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;
|
|
// }
|
|
const createFinalArray = () => {
|
|
questionsJsonData.value.forEach(question => {
|
|
const { label, key, type } = question;
|
|
if (answers.value.hasOwnProperty(key)) {
|
|
QuestionsAnswers.value.push({
|
|
label,
|
|
key,
|
|
type,
|
|
value: answers.value[key]
|
|
});
|
|
}
|
|
});
|
|
// console.log('------finalArray ', QuestionsAnswers.value)
|
|
};
|
|
|
|
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;
|
|
}
|
|
</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>
|
|
<VTabs v-model="currentTab" class="v-tabs-pill">
|
|
<VTab>Profile</VTab>
|
|
<VTab>Appiontment</VTab>
|
|
<!-- <VTab>Tab Three</VTab> -->
|
|
</VTabs>
|
|
|
|
<VCard class="mt-5">
|
|
<VCardText>
|
|
<VWindow v-model="currentTab">
|
|
<VWindowItem>
|
|
<profile />
|
|
</VWindowItem>
|
|
<VWindowItem>
|
|
<Appiontment />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCardText>
|
|
</VCard>
|
|
<!-- <v-row class='mb-2'>
|
|
<VCol cols="12" md="12" class="mb-4 ml-5" v-if="username || phone" style="font-size: 16px;">
|
|
<div>
|
|
<h3 class="mb-2"> {{ username }}</h3>
|
|
<div class="mb-1">
|
|
<VTooltip location="left" activator="parent" transition="scroll-x-transition">
|
|
Email
|
|
</VTooltip>
|
|
<VIcon icon="mdi-email" size="20" class="me-2" />{{ email }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<VTooltip location="left" activator="parent" transition="scroll-x-transition">
|
|
Age
|
|
</VTooltip>
|
|
<VIcon icon="mdi-calendar-account" title="Age" size="20" class="me-2" />{{ agePatient }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<VTooltip location="left" activator="parent" transition="scroll-x-transition">
|
|
Date of birth
|
|
</VTooltip>
|
|
<VIcon icon="mdi-calendar" size="20" class="me-2" />{{ dob }}
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<VTooltip location="left" activator="parent" transition="scroll-x-transition">
|
|
Address
|
|
</VTooltip>
|
|
<VIcon icon="mdi-map-marker" size="20" class="me-2" />{{ address1 }}
|
|
</div>
|
|
<div>
|
|
<VTooltip location="left" activator="parent" transition="scroll-x-transition">
|
|
Contact Number
|
|
</VTooltip>
|
|
<VIcon icon="mdi-phone" size="20" class="me-2" />{{ phone }}
|
|
</div>
|
|
</div>
|
|
</VCol>
|
|
<v-col cols="12" md="12">
|
|
<VList class="">
|
|
<VListItem class="">
|
|
<VListItemTitle class="d-flex align-center justify-space-between bg-dark mt-1"
|
|
style="padding: 5px;">
|
|
<div :class="isMobile ? '' : 'w-40'">
|
|
<p class="mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'"><b>SYMPTOM
|
|
CHECKLIST</b></p>
|
|
</div>
|
|
<div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
|
|
<p class="mb-0"><b>MILD</b>
|
|
</p>
|
|
</div>
|
|
<div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
|
|
<p class="mb-0"><b>MODERATE</b>
|
|
</p>
|
|
</div>
|
|
<div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
|
|
<p class="mb-0"><b>SEVERE</b>
|
|
</p>
|
|
</div>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
|
|
<VListItem class="pt-0 pb-0 ht-li" v-for="(item, index) of QuestionsAnswers" :key="index">
|
|
<VListItemTitle class="d-flex align-center justify-space-between">
|
|
<div class="border-right"
|
|
:class="{ 'bg-silver': (index + 1) % 2 === 0, 'w-custom-m': isMobile, 'w-40': !isMobile }"
|
|
style="padding-left: 5px;">
|
|
|
|
<p class="text-wrap mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">{{
|
|
item.label
|
|
}}</p>
|
|
</div>
|
|
<div class="d-flex align-center" :class="isMobile ? 'w-custom-d' : 'w-60'">
|
|
<QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
|
|
</div>
|
|
</VListItemTitle>
|
|
</VListItem>
|
|
</VList>
|
|
|
|
|
|
|
|
<v-table density="compact" fixed-header>
|
|
<thead>
|
|
<tr class="text-right">
|
|
<th class="bg-dark">
|
|
<b>SYMPTOM CHECKLIST</b>
|
|
</th>
|
|
<th class="text-right bg-dark">
|
|
<b>MILD</b>
|
|
<VIcon icon="mdi-menu-down"></VIcon>
|
|
</th>
|
|
<th class="text-right bg-dark">
|
|
<b>MODERATE</b>
|
|
<VIcon icon="mdi-menu-down"></VIcon>
|
|
</th>
|
|
<th class="text-right bg-dark">
|
|
<b>SEVERE</b>
|
|
<VIcon icon="mdi-menu-down"></VIcon>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) of QuestionsAnswers" :key="index">
|
|
<td class="border-right" v-if="!isMobile">{{ item.label }}</td>
|
|
<td :colspan="isMobile ? '4' : '3'">
|
|
<p v-if="isMobile" class="mb-0">{{ item.label }}</p>
|
|
<QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</v-col>
|
|
</v-row> -->
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.mdi-email {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.ht-li {
|
|
min-height: 20px !important;
|
|
}
|
|
|
|
.bg-silver {
|
|
background-color: silver;
|
|
}
|
|
|
|
.text-wrap {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.w-40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-custom-m {
|
|
width: 36%;
|
|
}
|
|
|
|
.w-60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-custom-d {
|
|
width: 65%;
|
|
}
|
|
|
|
.v-list-item--density-default.v-list-item--one-line {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.heading-text-m {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.heading-text-d {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: #808080b3 !important;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
width: 23%;
|
|
}
|
|
|
|
.border-right {
|
|
border-right: 1.5px solid black;
|
|
}
|
|
|
|
.hidden-component {
|
|
display: none
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|